Intro

ResponsiveImagesCG · Oct 30, 2014 · 5bea4ba · 5bea4ba
1 parent a6cb4b0
commit 5bea4ba
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 19 deletions.
diff --git a/_dist/_css/all.css b/_dist/_css/all.css
diff --git a/_dist/_css/critical.css b/_dist/_css/critical.css
diff --git a/_dist/index.php b/_dist/index.php
@@ -33,7 +33,9 @@
       <h1 class="logo"><img src="_img/ricg-logo.png" alt="Responsive Issues Community Group"></h1>
     </header>
 
-    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas, magni dolor cumque fugiat aspernatur excepturi explicabo! Perferendis, libero, autem, magni debitis fugit quibusdam assumenda quas minus adipisci maiores nisi numquam.</p>
+	<div class="intro">
+	    <p>The <abbr title="Responsive Issues Community Group">RICG</abbr> is a group of independent designers and developers working toward standards that will help build fast, accessible, responsive websites.</p>
+	</div>
 
     <div class="issues">
 
@@ -227,7 +229,7 @@
       </div>
     </div>
     <div class="col-a">
-      <p><p>Media queries allow authors to vary the layout of their page based on the dimensions of the viewport. Element queries will allow developers to vary the layout within specific elements on a page (and their children) based on the dimensions of the parent elements themselves, allowing for much more modular approaches to layout.</p><p>Work on element queries has just begun; we are still collecting use cases and working to understand technical constraints. Please contribute!</p></p>
+      <p><p>Media queries allow authors to vary the layout of their page based on the dimensions of the viewport. <strong>Element</strong> queries will allow developers to vary the layout within specific elements on a page (and their children) based on the dimensions of the parent elements themselves, allowing for much more modular approaches to layout.</p><p>Work on element queries has just begun; we are still collecting use cases and working to understand technical constraints. Please contribute!</p></p>
 
       <h3 class="subhed">Usage</h3>
       <div class="usage">

diff --git a/_tmpl/_css/all.css b/_tmpl/_css/all.css
@@ -44,9 +44,31 @@ p {
 .logo img {
   display: block;
   margin: 0 auto;
-  padding: 1.75em 0 1.5em 0;
-  max-width: 340px;
-  width: 60%;
+  padding: 2em 0 .5em 0;
+  max-width: 300px;
+  width: 50%;
+}
+
+.intro {
+  padding-bottom: 1.5em;
+  max-width: 920px;
+  margin: 0 auto;
+}
+
+.intro p {
+  color: #444;
+  font-size: 1.1em;
+  font-weight: bold;
+  line-height: 1.4;
+  padding: 0 5%;
+  text-align: center;
+  text-shadow: 1px 1px 0 #fff;
+}
+@media(min-width: 45em) {
+  .intro p {
+    font-size: 1.2em;
+    line-height: 1.5;
+  }
 }
 
 .issues {
@@ -68,6 +90,7 @@ p {
 .head {
   border-left: .3125em solid #000;
   clear: both;
+  cursor: pointer;
   float: left;
   display: block;
   padding: .3em 0;
@@ -90,9 +113,9 @@ p {
 }
 .head .status {
   clear: both;
-  opacity: .8;
   font-size: .925em;
   margin-top: .525em;
+  opacity: .8;
 }
 @media( min-width: 30em ) {
   .head .status {
@@ -103,17 +126,20 @@ p {
 
 
 /*   */
-.body {
-  display: none !important;
+.issues .body {
+  height: 1px;
+  left: -9999px;
+  overflow: hidden;
+  position: absolute;
 }
-.open .body {
-  display: block !important;
+.issues .open .body {
+  height: auto;
+  overflow: visible;
+  position: static;
 }
 .open .head {
   background: #000;
 }
-/*   */
-
 .body {
   clear: both;
   padding-top: 1em;

diff --git a/_tmpl/_partials/primary.hbs b/_tmpl/_partials/primary.hbs
@@ -1,4 +1,4 @@
-  <head>
+    <head>
     <meta charset="utf-8">
     <title>Responsive Issues Community Group</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">

diff --git a/_tmpl/index.hbs b/_tmpl/index.hbs
@@ -7,7 +7,9 @@
       <h1 class="logo"><img src="_img/ricg-logo.png" alt="Responsive Issues Community Group"></h1>
     </header>
 
-    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas, magni dolor cumque fugiat aspernatur excepturi explicabo! Perferendis, libero, autem, magni debitis fugit quibusdam assumenda quas minus adipisci maiores nisi numquam.</p>
+	<div class="intro">
+	    <p>The <abbr title="Responsive Issues Community Group">RICG</abbr> is a group of independent designers and developers working toward standards that will help build fast, accessible, responsive websites.</p>
+	</div>
 
     <div class="issues">
       {{> issues }}