updated index page with comments

Author: avocadojesus

index.html

@@ -2,10 +2,22 @@
 profile: false
 title: "Welcome to Code and Coffee, Long Beach"
 ---
+
+<!-- load our fonts -->
 <link href='https://fonts.googleapis.com/css?family=Raleway:100' rel='stylesheet' type='text/css'>
+
 <style>
+
+/**
+ * HERO styles
+ * -------------
+ * These styles govern the hero of the page, which,
+ * at least at the moment, contains a video, logo,
+ * title, and description.
+ */
+
 #hero {
-  position: absolute;
+  position: relative;
   top:0;
   left:0;
   width:100%;
@@ -17,50 +29,33 @@
   box-shadow: 10px 5px 81px -5px rgba(122,115,122,1);
 }
 
-#floatinglogo {
-  display: none;
-}
-
-nav.main-nav {
-  top: 0;
-  width: 100%;
-  position:fixed;
-  background:transparent;
-}
-#wrapper {
-
-}
-
+/* thin layer of darkened opacity on top of the video */
 #hero > .backdrop {
   background:rgba(0,0,0,0.5);
-  position:absolute;
   z-index:2;
   top:0;
   left:0;
   width:100%;
   height:100%;
+  position:absolute;
 }
 
-#hero > video {
-  width: 100%;
-  height: auto;
-  max-height: 100%;
-}
-
-.videoContainer
+/* the container surrounding the video (necessary to maintain a full-screen stretch) */
+#hero .videoContainer
 {
   position:absolute;
   height:100%;
   width:100%;
   overflow: hidden;
 }
 
-.videoContainer video
-{
+/* the actual video player */
+#hero .videoContainer video {
   min-width: 100%;
   min-height: 100%;
 }
 
+/* the wrapper around our logo, title, and description */
 #hero .header-content {
   position: absolute;
   top: calc(50% - 117px);
@@ -70,38 +65,121 @@
   z-index:3;
 }
 
+/* logo container */
+#hero .hero-logo {
+  background: transparent;
+  z-index: 1;
+  font-size: 8px;
+  display:inline-block;
+}
+
+/* logo */
+#hero .hero-logo pre {
+  background: transparent;
+  font-size: 2px;
+}
+
+/* title */
 #hero .header-content h1 {
   color:white;
   font-size:40px;
   font-family: Raleway;
 }
 
+/* description */
 #hero .header-content p {
   color:white;
 }
 
-#hero .hero-logo {
-  background: transparent;
-  z-index: 1;
-  font-size: 8px;
-  display:inline-block;
+/**
+ * Framework mods
+ * -------------
+ * These are modifications to the existing framework
+ * we are using.
+ */
+
+/* hide the current logo (replacing it in the hero) */
+#floatinglogo {
+  display: none;
 }
 
-#hero .hero-logo pre {
-  background: transparent;
-  font-size: 2px;
+/* make adjustments to the header */
+nav.main-nav {
+  top: 0;
+  width: 100%;
+  position:fixed;
+  background:transparent;
 }
 
-#post-list {
-  margin-top: calc(100% + 200px);
+/* the wrapper contains all content on our page. By default,
+this element is compounded with margins and width-limitations
+that need to be overriden to accomplish a full-screen model.  */
+#wrapper {
+  height: 100%;
+  width: 100%;
+  max-width: none;
+  padding: 0;
+}
+
+/* To maintain the dimensions that govern the wrapper outside of our hero,
+I have replicated the wrapper's original behavior within the post-body-wrapper,
+which containes all elements beneath the hero. */
+#post-body-wrapper {
+  max-width: 600px;
+  margin: 0 auto;
+  padding: 60px 40px 100px 40px;
+}
+
+/* At tablet size, i decided to move the header off of the hero and into the post body.*/
+#tablet-header {
+  display:none;
+  text-align:center;
+  margin-top:50px;
+  margin-bottom:100px;
+}
+
+/* title */
+#tablet-header h1 {
+  color:#584E4E;
+  font-size:40px;
+  font-family: Raleway;
+}
+
+/* description */
+#tablet-header p {
+  color:#B3B3B3;
+}
+
+/**
+ * Responsive styles
+ * -----------------
+ * These styles govern what elements need to change at different screen restraints.
+**/
+
+@media screen and (max-width: 540px) {
+
+  /* Shrink the hero down in height */
+  #hero {
+    height:50%;
+  }
+
+  /* hide everything in the hero content except the logo */
+  #hero .header-content h1, #hero .header-content p {
+    display:none;
+  }
+
+  /* show the tablet header */
+  #tablet-header {
+    display:block;
+  }
 }
 
 </style>
 
 <div id='hero'>
   <div class='backdrop'></div>
   <div class='videoContainer'>
-    <video autoplay='true' loop>
+    <video autoplay='true' muted loop>
       <source src='https://s3-us-west-1.amazonaws.com/avojeez0-public/codeandcoffeehero.mp4' type='video/mp4'>
     </video>
   </div>
@@ -162,6 +240,12 @@ <h1>code + coffee / long beach</h1>
   </div>
 </div>
 
-{% include post-list.html %}
-{% include member-list.html %}
-{% include footer.html %}
+<div id='post-body-wrapper'>
+  <div id='tablet-header'>
+    <h1>code + coffee</h1>
+    <p>every saturday, from 10am to whenever, @ <a href="https://www.google.com/maps/place/236+Pine+Ave,+Long+Beach,+CA+90802/">MADE</a></p>
+  </div>
+  {% include post-list.html %}
+  {% include member-list.html %}
+  {% include footer.html %}
+</div>