Add collections

jgthms · jgthms · commit 0d77112c97fd · 2016-11-26T15:35:00.000Z
diff --git a/_includes/collections/animations.html b/_includes/collections/animations.html
diff --git a/_includes/collections/box-model.html b/_includes/collections/box-model.html
diff --git a/_includes/collections/flexbox.html b/_includes/collections/flexbox.html
diff --git a/_includes/collections/positioning.html b/_includes/collections/positioning.html
diff --git a/_includes/collections/transitions.html b/_includes/collections/transitions.html
diff --git a/_includes/collections/typography.html b/_includes/collections/typography.html
diff --git a/_includes/menu.html b/_includes/menu.html
@@ -33,6 +33,17 @@
       </figure>
     </a>
   </header>
+  <nav class="menu-collections">
+    <p><strong>Collections</strong></p>
+    <ul>
+      <li><a class="menu-collection-link" href="{{site.url}}/animations/">Animations</a></li>
+      <li><a class="menu-collection-link" href="{{site.url}}/box-model/">Box model</a></li>
+      <li><a class="menu-collection-link" href="{{site.url}}/flexbox/">Flexbox</a></li>
+      <li><a class="menu-collection-link" href="{{site.url}}/positioning/">Positioning</a></li>
+      <li><a class="menu-collection-link" href="{{site.url}}/transitions/">Transitions</a></li>
+      <li><a class="menu-collection-link" href="{{site.url}}/typography/">Typography</a></li>
+    </ul>
+  </nav>
   <nav id="menu-nav" class="menu-nav">
     <div class="menu-search">
       <input id="menu-search-input" type="search" autocomplete="off" placeholder="Search for a property">
diff --git a/_layouts/collection.html b/_layouts/collection.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html class="is-collection" data-template="collection">
+  <head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width">
+    <title>{{page.collection_name}} - {{site.title}}</title>
+    <link rel="stylesheet" type="text/css" href="{{site.url}}/css/website.css">
+
+    <meta property="og:url" content="{{site.url}}{{page.url}}">
+    <meta property="og:type" content="website">
+    <meta property="og:title" content="{{page.collection_name}} - {{site.title}}">
+    <meta property="og:image" content="{{site.url}}/images/css-reference-share.png">
+    <meta property="og:image:type" content="image/png">
+    <meta property="og:image:width" content="1200">
+    <meta property="og:image:height" content="630">
+    <meta property="og:description" content="Learn how {{page.collection_name}} works in CSS.">
+
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:site" content="@jgthms">
+    <meta name="twitter:creator" content="@jgthms">
+    <meta name="twitter:title" content="{{page.collection_name}} - {{site.title}}">
+    <meta name="twitter:image" content="{{site.url}}/images/css-reference-share.png">
+    <meta name="twitter:description" content="Learn how {{page.collection_name}} works in CSS.">
+
+    {% include favicons.html %}
+  </head>
+  <body>
+    {% include menu.html %}
+    <main class="main">
+      <header class="heading">
+        <h1 class="heading-title">
+          <strong>{{page.collection_name}}</strong> in CSS
+        </h1>
+        <p class="heading-description">The CSS properties that allow you to {{page.description}}</p>
+      </header>
+      <section class="list">
+        {{content}}
+      </section>
+    </main>
+    {% include modals/share.html %}
+    {% include google-fonts.html %}
+    <script src="{{site.url}}/javascript/clipboard.min.js"></script>
+    <script src="{{site.url}}/javascript/main.js"></script>
+    {% include noscript.html %}
+  </body>
+</html>
diff --git a/_layouts/single.html b/_layouts/single.html
@@ -32,7 +32,7 @@
         <i class="icon is-back"></i>
         <strong>View in context</strong>
       </a>
-      <section class="single">
+      <section class="list">
         {{content}}
       </section>
     </main>
diff --git a/animations.html b/animations.html
@@ -0,0 +1,7 @@
+---
+layout: collection
+collection_name: "Animations"
+description: "animate almost any other property"
+---
+
+{% include collections/animations.html %}
diff --git a/box-model.html b/box-model.html
@@ -0,0 +1,7 @@
+---
+layout: collection
+collection_name: "Box Model"
+description: "define the size and behavior of the HTML element"
+---
+
+{% include collections/box-model.html %}
diff --git a/css/website.css b/css/website.css
diff --git a/css/website.sass b/css/website.sass
@@ -11,6 +11,7 @@
 @import "../sass/menu"
 @import "../sass/header"
 @import "../sass/footer"
+@import "../sass/heading"
 @import "../sass/property"
 @import "../sass/example"
 @import "../sass/modal"
diff --git a/flexbox.html b/flexbox.html
@@ -0,0 +1,7 @@
+---
+layout: collection
+collection_name: "Flexbox"
+description: "use the CSS3 Flexbox capabilities"
+---
+
+{% include collections/flexbox.html %}
diff --git a/positioning.html b/positioning.html
@@ -0,0 +1,7 @@
+---
+layout: collection
+collection_name: "Positioning"
+description: "position elements manually in HTML"
+---
+
+{% include collections/positioning.html %}
diff --git a/sass/heading.sass b/sass/heading.sass
@@ -0,0 +1,14 @@
+.heading
+  background: $plum
+  color: $plum-light
+  padding: 4rem 3rem
+
+.heading-title
+  font-size: 2rem
+  line-height: 1.2
+  strong
+    color: $plum-invert
+    font-weight: $weight-bold
+
+.heading-description
+  margin-top: 1rem
diff --git a/sass/menu.sass b/sass/menu.sass
@@ -2,10 +2,13 @@
   background: #fff
   position: relative
 
+.menu-header
+  padding: 1.5rem
+
 .menu-logo
   align-items: center
   display: flex
-  justify-content: flex-start
+  justify-content: center
   figure
     align-items: center
     display: flex
@@ -25,6 +28,19 @@
   margin-left: 9px
   width: 160px
 
+.menu-collections
+  border-top: 1px solid $border
+  padding: 1rem
+  li
+    display: inline-block
+    vertical-align: top
+  a
+    border-radius: 2px
+    padding: 2px 4px
+    &:hover
+      background: $alpha
+      color: $alpha-invert
+
 .menu-nav
   align-items: stretch
   flex-direction: column
@@ -42,13 +58,13 @@
     display: block
     font-family: inherit
     font-size: 0.8rem
-    padding: 1.5em
-    padding-left: 3.5rem
+    padding: 1em
+    padding-left: 2.5rem
     width: 100%
     &:focus + .icon
       opacity: 1
   .icon
-    left: 2rem
+    left: 1rem
     opacity: 0.3
     pointer-events: none
     position: absolute
@@ -60,8 +76,7 @@
   flex-direction: column
   flex-grow: 1
   flex-shrink: 1
-  font-family: $family-monospace
-  font-size: 0.7rem
+  font-size: 0.8rem
   justify-content: flex-start
   overflow: hidden
   position: relative
@@ -180,8 +195,10 @@
       text-decoration: underline
 
 +mobile
-  .menu-header
-    display: none
+  .menu-collections
+    text-align: center
+    li
+      margin: 0.25rem
   .menu-nav
     +overlay
     background: #fff
@@ -215,15 +232,18 @@
   .menu-header
     flex-grow: 0
     flex-shrink: 0
-    padding: 2rem
+  .menu-collections
+    font-size: 0.8rem
+    li
+      margin-left: -2px
   .menu-nav
     border-top: 1px solid $border
     display: flex
     flex-grow: 1
     flex-shrink: 1
   .menu-list
     a
-      padding: 0.5rem 2rem
+      padding: 0.25rem 1rem
   .menu-hello
     background: #fff
     flex-grow: 0
diff --git a/sass/property.sass b/sass/property.sass
@@ -1,6 +1,6 @@
 .list
   background: #fff
-  box-shadow: $shadow
+  padding-bottom: 2rem
   position: relative
 
 .property
diff --git a/sass/variables.sass b/sass/variables.sass
@@ -67,7 +67,7 @@ $weight-bold: 700
 
 // Dimensions
 $logo-width: 190px
-$menu-width: $logo-width + (4 * 18px)
+$menu-width: $logo-width + (3 * 18px)
 // $menu-width: 240px
 $header-height: calc(100vh - #{$menu-width})
 
diff --git a/transitions.html b/transitions.html
@@ -0,0 +1,7 @@
+---
+layout: collection
+collection_name: "Transitions"
+description: "define how an HTML element transitions between states"
+---
+
+{% include collections/transitions.html %}
diff --git a/typography.html b/typography.html
@@ -0,0 +1,7 @@
+---
+layout: collection
+collection_name: "Typography"
+description: "define the color, size, spacing, and shape of text"
+---
+
+{% include collections/typography.html %}
