Visual updates to match branding on our social media pages

_includes/nav.html

@@ -1,6 +1,6 @@
 <nav id="topnav">
     <a href="{{ 'index.html' | relative_url }}">
-        <img src="imgs/Logo.svg" id="navlogo">
+        <img src="imgs/Logo.png" id="navlogo">
     </a>
     <input class="checkbox-toggle mobile" type="checkbox"/>
 

_layouts/default.html

@@ -30,7 +30,7 @@
 	<!--Banner-->
 	<div id="particles-js" class="banner">
 		<canvas id="canvas" height="300"></canvas>
-		<img id="bigLogo" src="imgs/Logo.svg" draggable="false">
+		<img id="bigLogo" src="imgs/logo.png" draggable="false">
 	</div>
 
 

index.html

@@ -7,22 +7,11 @@
 style: index.css
 ---
 
-<!--Photos-->
-<div class="section">
-    <div class="home-photos">
-        <img src="imgs/Row.jpg">
-        <img src="imgs/BunnyEars.jpg">
-    </div>
-</div>
-
 <!--Details-->
-<div class="section">
-    <h2>Details</h2>
-    <div>
-        <div id="warning"><strong>Registration is OPEN. The program has been moved online for health reasons. It is now free and any payments accepted are currently being refunded.</strong></div>
+<div class="section" id="home-details">
         <div class="details-container">
             <div class="details-item">
-                <div>
+                <h2>Details</h2>
                     <p><strong>Who: </strong>Girls in grades 5-8 (rising 6-9). Coding experience not
                         necessary,
                         but always welcome. It is strongly recommended that younger girls, those who may
@@ -34,18 +23,13 @@ <h2>Details</h2>
                         with technology (though they may not necessarily have programming experience) are
                         encouraged to sign up for the second session.
                     </p>
-                </div>
-                <div>
                     <p><strong>Times: </strong><br>
                         Session 1 (HTML/CSS): August 3rd-7th, 2:00-4:00 pm PST<br>
                         Session 2 (JavaScript): August 10th-14th, 2:00-4:00 pm PST</p>
-                </div>
-                <div>
                     <p><strong>Cost: </strong><br>
                         Online: FREE (suggested donation: $30)</p>
-                </div>
                 <div>
-                    <a href="{{ 'signup.html' | relative_url }}"><button class="action-button largebutton">Sign Up</button></a>
+                    <a href="{{ 'signup.html' | relative_url }}"><button class="action-button largebutton signup-button">Sign Up</button></a>
                 </div>
             </div>
             <!-- <div class="details-item">
@@ -56,47 +40,8 @@ <h2>Details</h2>
                     tabindex="0"></iframe>
             </div> -->
         </div>
-    </div>
+        <img src="imgs/Devin.jpg" id="details-photo">
 </div>
-<!--Bios-->
-<!--<div class="section">
-    <h2>//About the Instructors</h2>
-    <div>
-        <p><strong class="author">Sydney Von Arx</strong></p>
-        <p>I am Sydney Von Arx, and I love to code! I’m a computer science major at Stanford. I have experience
-            with eight programming languages. I have completed three computer science-related internships and
-            built several programs and apps. My real specialty, though, is web development. One of the few
-            things I love more than coding is teaching!</p>
-    </div>
-    <div>
-        <p><strong class="author">Selena Zhang</strong></p>
-        <p>I’m Selena Zhang, and coding is my passion! I plan to study computer science at MIT next year. I’ve
-            studied quantum computing and robotics under Professor Perkowski at PSU, but I got my start with web
-            development! I love teaching and learning from others, and I’ve devoted hundreds of hours to
-            teaching after-school programs throughout high school.</p>
-    </div>
-</div>-->
-
-<!--Details-->
-
-<!--Bios-->
-<!--<div class="section">
-    <h2>//About the Instructors</h2>
-    <div>
-        <p><strong class="author">Sydney Von Arx</strong></p>
-        <p>I am Sydney Von Arx, and I love to code! I’m a computer science major at Stanford. I have experience
-            with eight programming languages. I have completed three computer science-related internships and
-            built several programs and apps. My real specialty, though, is web development. One of the few
-            things I love more than coding is teaching!</p>
-    </div>
-    <div>
-        <p><strong class="author">Selena Zhang</strong></p>
-        <p>I’m Selena Zhang, and coding is my passion! I plan to study computer science at MIT next year. I’ve
-            studied quantum computing and robotics under Professor Perkowski at PSU, but I got my start with web
-            development! I love teaching and learning from others, and I’ve devoted hundreds of hours to
-            teaching after-school programs throughout high school.</p>
-    </div>
-</div>-->
 
 <!--Testimonials-->
 <div class="section">
@@ -116,4 +61,12 @@ <h2>Testimonials</h2>
             <p><strong class="author">Lauren</strong></p>
         </span>
     </div>
+</div>
+
+<!--Photos-->
+<div class="section">
+    <div class="home-photos">
+        <img src="imgs/Row.jpg">
+        <img src="imgs/BunnyEars.jpg">
+    </div>
 </div>

signup.html

@@ -9,10 +9,10 @@
 <!--Sign Up-->
 <div class="section">
     <div class="centertext">
-        <a class="notextdecoration" href="https://docs.google.com/forms/d/e/1FAIpQLSdrQrexGbs9i8aZ2p0bp4WVIepxj0AIfYkQd8pPRQIysR3ucw/viewform"><button type="button" class="signup-button largebutton">Sign Up</button></a>
+        <a class="notextdecoration" href="https://docs.google.com/forms/d/e/1FAIpQLSdrQrexGbs9i8aZ2p0bp4WVIepxj0AIfYkQd8pPRQIysR3ucw/viewform"><button type="button" class="action-button largebutton ">Sign Up</button></a>
         <!-- <span class="italics">If you need a scholarship, email <a
                         href="mailto:{{site.contact.email}}">{{site.contact.email}}</a></span> -->
-        <span class="italics">Signup is free, but if you are financially able, you can help support our program with a <a target="_blank" href="{{site.donate.page}}">tax-deductable donation</a> ($30 suggested).</span>
+        <div class="italics">Signup is free, but if you are financially able, you can help support our program with a <a target="_blank" href="{{site.donate.page}}">tax-deductable donation</a> ($30 suggested).</div>
     </div>
     <div id="sessionWrap">
         <div class="session">

styles/about.scss

@@ -1,9 +1,9 @@
 ---
 ---
 
-$main: #2d97b7;
-$dark: #283576;
-$gradient: linear-gradient(-45deg, #283576 0%, #2d97b7 100%);
+$main: #41CEDA;
+$dark: #153570;
+$gradient: linear-gradient(-45deg, $dark 0%, $main 100%);
 
 /* About Us Page */
 .instructors-container {

styles/faqs.scss

@@ -1,9 +1,9 @@
 ---
 ---
 
-$main: #2d97b7;
-$dark: #283576;
-$gradient: linear-gradient(-45deg, #283576 0%, #2d97b7 100%);
+$main: #41CEDA;
+$dark: #153570;
+$gradient: linear-gradient(-45deg, $dark 0%, $main 100%);
 
 .section {
   max-width: calc(100vw - 60px);
@@ -38,7 +38,7 @@ section.faqs {
 
     font-size: 1.2em;
     // keep the same default font color (slightly not black) that seems to have been the default button text color
-    color:rgb(46, 52, 54);
+    color:#2F2D2C;
 
     // remove the default triangle to indicate whether the details is "open"
     // we are using or own custom one instead

styles/index.scss

@@ -1,21 +1,21 @@
 ---
 ---
 
-$main: #2d97b7;
-$dark: #283576;
-$gradient: linear-gradient(-45deg, #283576 0%, #2d97b7 100%);
+$main: #41CEDA;
+$dark: #153570;
+$gradient: linear-gradient(-45deg, $dark 0%, $main 100%);
 $heading-font: 'Nunito', 'Avenir', sans-serif;
 
 
-/* Photos */
+/* Bottom Two Photos */
 .home-photos {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   width: 100%;
 }
 
-.section{
+.section {
   width: 100%;
 }
 
@@ -25,8 +25,23 @@ $heading-font: 'Nunito', 'Avenir', sans-serif;
   flex: 1 1 400px;
 }
 
-.details-item{
-  height: max-content;
+/* Details */
+#home-details {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+
+  .details-item{
+    height: max-content;
+    flex: 1 0 400px;
+    max-width: 600px;
+  }
+}
+
+#details-photo {
+  width: 40%;
+  margin-left: 20px;
 }
 
 /* Testmonials */
@@ -39,8 +54,6 @@ $heading-font: 'Nunito', 'Avenir', sans-serif;
   margin: 0 0;
 }
 
-
-
 .testimonial-item {
   padding: 10px;
   text-align: center;

styles/signup.scss

@@ -1,15 +1,15 @@
 ---
 ---
 
-$main: #2d97b7;
-$dark: #283576;
-$gradient: linear-gradient(-45deg, #283576 0%, #2d97b7 100%);
+$main: #41CEDA;
+$dark: #153570;
+$gradient: linear-gradient(-45deg, $dark 0%, $main 100%);
 
 /* Sign Up Page */
 .signup-wrap{
   text-decoration: none;
 }
-.signup-button {
+/*.signup-button {
   font-family: 'Nunito';
   display: block;
   margin: 10px auto;
@@ -30,7 +30,7 @@ $gradient: linear-gradient(-45deg, #283576 0%, #2d97b7 100%);
   &:hover {
     opacity: 0.85;
   }
-}
+}*/
 
 .notextdecoration {
   text-decoration: none;
@@ -42,10 +42,12 @@ $gradient: linear-gradient(-45deg, #283576 0%, #2d97b7 100%);
 
 #sessionWrap{
   display: flex;
-  flex-wrap: wrap;
+  flex-flow: row wrap;
+  justify-content: space-between;
+  margin: 30px 0;
 
   .session{
-    flex: 1 1 500px;
+    flex: 1 1 400px;
     margin: 0px 20px;
   }
 }