Merge pull request #26 from TexasCamp/dev

Release

frontend/app/components/Footer/index.js

@@ -5,6 +5,7 @@ import Sponsor from 'Sponsor';
 import withSponsorsQuery from 'Sponsors/withSponsorsQuery';
 import styles from './styles.css';
 import logo from '../../shared/images/texas-camp-logo-blue.png';
+import logoCodeup from '../../shared/images/logo-codeup.png';
 import twitter from '../../shared/images/twitter-grey.png';
 import facebook from '../../shared/images/facebook-grey.png';
 import sponsorsHeading from '../../shared/images/sponsors-heading-grey.png';
@@ -20,7 +21,6 @@ const Footer = ({ loading, sponsors }): React.Element<any> | null =>
             &nbsp;&nbsp;&middot;&nbsp;&nbsp;
           </span>San Antonio, TX
         </div>
-        <div className={styles.venue}>CodeUp</div>
         <div className={styles.socialWrapper}>
           <span className={styles.social}>
             <Twitter />
@@ -32,6 +32,9 @@ const Footer = ({ loading, sponsors }): React.Element<any> | null =>
             <Facebook />
           </span>
         </div>
+        <div className={styles.venue}>
+          <LogoCodeup />
+        </div>
       </div>
       <div className={styles.sponsors}>
         <img
@@ -88,4 +91,17 @@ function Facebook() {
   );
 }
 
+function LogoCodeup() {
+  return (
+    <a
+      className={styles.venueLink}
+      href="https://codeup.com/"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      <img src={logoCodeup} alt="venue" />
+    </a>
+  );
+}
+
 export default withSponsorsQuery(Footer);

frontend/app/components/Footer/styles.css

@@ -11,7 +11,7 @@
 }
 .info {
   color: $grey;
-  margin: 20px 0 40px;
+  margin: 20px 0 20px;
   .social {
     img {
       height: 14px;
@@ -32,23 +32,32 @@
 .heading {
   width: 140px;
 }
-.sponsorsContainer {
-  display: flex;
-  justify-content: center;
-  img {
-    filter: grayscale(100%) brightness(240%);
-    -webkit-filter: grayscale(100%) brightness(240%);
-    margin: 20px 10px;
-    max-width: 160px;
+.sponsors {
+  .sponsorsContainer {
+    display: flex;
+    justify-content: center;
+    img {
+      filter: grayscale(100%) brightness(240%);
+      -webkit-filter: grayscale(100%) brightness(240%);
+      margin: 20px 0;
+      max-width: 160px;
+    }
   }
 }
 .credits {
   composes: calderDark from '../../shared/css/fonts.css';
   color: $blue;
   font-size: 10px;
   padding: 20px;
+  padding-top: 0;
+  margin-top: -1em;
   text-align: center;
   a {
     color: $blue;
   }
 }
+.venue {
+  img {
+    width: 160px;
+  }
+}

frontend/app/components/Header/index.js

@@ -58,7 +58,16 @@ const Header = ({ image = 'snake', isHome }) => {
                 ·  
             </span>San Antonio, TX
           </div>
-          <div className={styles.venue}>CodeUp</div>
+          <div className={styles.venue}>
+            <a
+              className={styles.venueLink}
+              href="https://codeup.com/"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Codeup
+            </a>
+          </div>
           <div className={styles.socialWrapper}>
             <span className={styles.social}>
               <Twitter />

frontend/app/components/Header/styles.css

@@ -93,6 +93,12 @@
       padding-top: 8px;
     }
   }
+  .venue {
+    a:hover {
+      border-bottom: 1px solid;
+      padding-top: 8px;
+    }
+  }
 }
 .logo {
   position: relative;
@@ -225,7 +231,7 @@
 :global .home {
   .snake {
     @media screen and (max-width: 500px) {
-      left: 50%;
+      left: 0;
       overflow: visible !important;
       position: absolute;
     }
@@ -235,11 +241,11 @@
     img {
       @media screen and (max-width: 500px) {
         background-color: $orange;
-        left: -50%;
+        left: 0;
         position: relative;
       }
       @media $tabletDown {
-        max-width: 500px !important;
+        max-width: 100vw !important;
         padding-top: 156px;
       }
       @media $tabletOnly {

frontend/app/shared/css/global.css

@@ -26,6 +26,7 @@ body {
   }
   strong {
     font-weight: normal;
+    font-family: "calder-dark", sans-serif;
   }
   em {
     font-style: normal;
@@ -94,6 +95,11 @@ body {
     }
   }
 }
+#app {
+  position: relative;
+  overflow: hidden;
+  width: 100vw;
+}
 .title {
   font-size: 30px;
   line-height: 40px;