Permalink
Browse files

Copy from the original gist

  • Loading branch information...
1 parent ebfa861 commit a72adee3bbf566565385a3d52606f6ea5083c32a @nhoizey committed Dec 21, 2010
Showing with 191 additions and 0 deletions.
  1. +91 −0 html5-titles-inception.css
  2. +100 −0 html5-titles-inception.less
View
@@ -0,0 +1,91 @@
+/* ===========================================================================
+ *
+ * HTML Titles Inception: sectionned h* styles
+ *
+ * How to style h1-h3 elements according to the number of sectioning
+ * elements they are embeded into.
+ *
+ * Author: Nicolas Hoizey ( http://gasteroprod.com/ )
+ *
+ * Inspirations:
+ * Paul Rouget's -moz-any selector tutorial: http://cas.im/moz-any-selector
+ * Rob Reyes's 5 levels of Inception: http://cas.im/5-levels-inception
+ *
+ * =========================================================================== */
+
+
+/* ---------------------------------------------------------------------------
+ * Reality
+ * Everything is real, h1 look like h1
+ * --------------------------------------------------------------------------- */
+
+h1 {
+ font-size: 3em;
+ line-height: 1;
+ margin-bottom: 0.5em;
+}
+
+/* ---------------------------------------------------------------------------
+ * Inception level 1: The city
+ * one level deep h1 look like h2
+ * --------------------------------------------------------------------------- */
+
+h2,
+section h1, article h1, aside h1, nav h1 {
+ font-size: 2em;
+ margin-bottom: 0.75em;
+}
+
+/* ---------------------------------------------------------------------------
+ * Inception level 2: The hotel
+ * 2 levels deep h1 and 1 level deep h2s look like h3
+ * --------------------------------------------------------------------------- */
+
+h3,
+section h2, article h2, aside h2, nav h2,
+section section h1, section article h1, section aside h1, section nav h1, article section h1, article article h1, article aside h1, article nav h1, aside section h1, aside article h1, aside aside h1, aside nav h1, nav section h1, nav article h1, nav aside h1, nav nav h1 {
+ font-size: 1.5em;
+ line-height: 1;
+ margin-bottom: 1em;
+}
+
+/* ---------------------------------------------------------------------------
+ * Inception level 3: The hospital
+ * 3 levels deep h1, 2 levels deep h2 and 1 level deep h3 look like h4
+ * --------------------------------------------------------------------------- */
+
+h4,
+
+section h3, article h3, aside h3, nav h3,
+
+section section h2, section article h2, section aside h2, section nav h2, article section h2, article article h2, article aside h2, article nav h2, aside section h2, aside article h2, aside aside h2, aside nav h2, nav section h2, nav article h2, nav aside h2, nav nav h2,
+
+section section section h1, section section article h1, section section aside h1, section section nav h1,
+section article section h1, section article article h1, section article aside h1, section article nav h1,
+section aside section h1, section aside article h1, section aside aside h1, section aside nav h1,
+section nav section h1, section nav article h1, section nav aside h1, section nav nav h1,
+
+article section section h1, article section article h1, article section aside h1, article section nav h1,
+article article section h1, article article article h1, article article aside h1, article article nav h1,
+article aside section h1, article aside article h1, article aside aside h1, article aside nav h1,
+article nav section h1, article nav article h1, article nav aside h1, article nav nav h1,
+
+aside section section h1, aside section article h1, aside section aside h1, aside section nav h1,
+aside article section h1, aside article article h1, aside article aside h1, aside article nav h1,
+aside aside section h1, aside aside article h1, aside aside aside h1, aside aside nav h1,
+aside nav section h1, aside nav article h1, aside nav aside h1, aside nav nav h1,
+
+nav section section h1, nav section article h1, nav section aside h1, nav section nav h1,
+nav article section h1, nav article article h1, nav article aside h1, nav article nav h1,
+nav aside section h1, nav aside article h1, nav aside aside h1, nav aside nav h1,
+nav nav section h1, nav nav article h1, nav nav aside h1, nav nav nav h1 {
+ font-size: 1.2em;
+ line-height: 1.25;
+ margin-bottom: 1.25em;
+}
+
+/* ---------------------------------------------------------------------------
+ * Inception level 4: Limbo
+ * can't describe the stuff you would find here if you dare...
+ * --------------------------------------------------------------------------- */
+
View
@@ -0,0 +1,100 @@
+/* ===========================================================================
+ *
+ * HTML Titles Inception: sectionned h* styles (the LESS way)
+ *
+ * How to style h1-h3 elements according to the number of sectioning
+ * elements they are embeded into, using LESS's nested rules to generate
+ * every possible combination.
+ *
+ * Author: Nicolas Hoizey ( http://gasteroprod.com/ )
+ *
+ * Inspirations:
+ * Paul Rouget's -moz-any selector tutorial: http://cas.im/moz-any-selector
+ * Rob Reyes's 5 levels of Inception: http://cas.im/5-levels-inception
+ * LESS: http://lesscss.org/
+ *
+ * =========================================================================== */
+
+/* ---------------------------------------------------------------------------
+ * Reality
+ * Everything is real, h1 look like h1
+ * (.h1, .h2, etc. classes are there for LESS's nested rules)
+ * --------------------------------------------------------------------------- */
+
+h1, .h1 { font-size: 3em; line-height: 1; margin-bottom: 0.5em; }
+h2, .h2 { font-size: 2em; margin-bottom: 0.75em; }
+h3, .h3 { font-size: 1.5em; line-height: 1; margin-bottom: 1em; }
+h4, .h4 { font-size: 1.2em; line-height: 1.25; margin-bottom: 1.25em; }
+h5, .h5 { font-size:1em; font-weight:bold; margin-bottom:1.5em; }
+h6, .h6 { font-size:1em; font-weight:bold; }
+
+/* ---------------------------------------------------------------------------
+ * Inception level 1: The city
+ * one level deep h1 look like h2
+ * --------------------------------------------------------------------------- */
+
+section, article, aside, nav {
+ h1 {
+ .h2;
+ }
+ h2 {
+ .h3;
+ }
+ h3 {
+ .h4;
+ }
+
+ /* ---------------------------------------------------------------------------
+ * Inception level 2: The hotel
+ * 2 levels deep h1 and 1 level deep h2s look like h3
+ * --------------------------------------------------------------------------- */
+
+ section, article, aside, nav {
+ h1 {
+ .h3;
+ }
+ h2 {
+ .h4;
+ }
+ h3 {
+ .h5;
+ }
+
+ /* ---------------------------------------------------------------------------
+ * Inception level 3: The hospital
+ * 3 levels deep h1, 2 levels deep h2 and 1 level deep h3 look like h4
+ * --------------------------------------------------------------------------- */
+
+ section, article, aside, nav {
+ h1 {
+ .h4;
+ }
+ h2 {
+ .h5;
+ }
+ h3 {
+ .h6;
+ }
+
+ /* ---------------------------------------------------------------------------
+ * Inception level 4: Limbo
+ * No fear, it's easy with LESS! But the generated file is pretty heavy.
+ * --------------------------------------------------------------------------- */
+
+ section, article, aside, nav {
+ h1 {
+ .h5;
+ }
+ h2 {
+ .h6;
+ }
+ h3 {
+ /* there is no h7... */
+ }
+ }
+
+ } /* End level 3 */
+
+ } /* End level 2 */
+
+} /* End level 1 */

0 comments on commit a72adee

Please sign in to comment.