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.
+
+
The RICG is a group of independent designers and developers working toward standards that will help build fast, accessible, responsive websites.
+
-
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.
Work on element queries has just begun; we are still collecting use cases and working to understand technical constraints. Please contribute!
+
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.
Work on element queries has just begun; we are still collecting use cases and working to understand technical constraints. Please contribute!
Usage
diff --git a/_tmpl/_css/all.css b/_tmpl/_css/all.css
index 9b2e105..b2b4b9a 100644
--- 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
index e0c95ee..e644ee9 100644
--- a/_tmpl/_partials/primary.hbs
+++ b/_tmpl/_partials/primary.hbs
@@ -1,4 +1,4 @@
-
+
Responsive Issues Community Group
diff --git a/_tmpl/index.hbs b/_tmpl/index.hbs
index 7dc6865..7b7f167 100644
--- a/_tmpl/index.hbs
+++ b/_tmpl/index.hbs
@@ -7,7 +7,9 @@
-
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.
+
+
The RICG is a group of independent designers and developers working toward standards that will help build fast, accessible, responsive websites.
+
{{> issues }}