Add a bunch of patterns and stuff

learn-the-web · Jan 17, 2019 · e87d22f · e87d22f
1 parent d399a53
commit e87d22f
Show file tree

Hide file tree

Showing 22 changed files with 145 additions and 11 deletions.
diff --git a/_config.yml b/_config.yml
@@ -11,6 +11,7 @@ patternbot:
     background: "--color-secondary-light"
     patterns:
       brand.logos: "--color-primary-light"
+      icons.icons.micropachycephalosaurus: "--color-primary-dark"
   rationales:
     colors.primary: |
       The primary colours represent herbivores & plants & greenery. They should be used for text and in foregrounds.

diff --git a/_data/dinos.yml b/_data/dinos.yml
@@ -0,0 +1,14 @@
+- title: "Hadrosaur"
+  details: "Rescue this wonderful dino"
+  button_text: "Save a Hadrosaur"
+  image: "hadrosaur.jpg"
+
+- title: "Diplodocus"
+  details: "Save all the Diplodocuses!"
+  button_text: "Rescue a Diplo"
+  image: "diplodocus.jpg"
+
+- title: "Iguanodon"
+  details: "Wonderful, kinda Iguanodon"
+  button_text: "Preserve an Iguanodon"
+  image: "iguanodon.jpg"
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en-ca">
+<head>
+  <meta charset="utf-8">
+  <title>Yay!</title>
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <link href="/css/main.css" rel="stylesheet">
+</head>
+<body>
+
+  {% pattern header/header %}
+
+  <main>
+    {{content}}
+  </main>
+
+</body>
+</html>
diff --git a/_patterns/buttons/basic.html b/_patterns/buttons/basic.html
@@ -0,0 +1 @@
+<a class="btn" href="#">{{include.text | default:'Rescue a dino'}}</a>
diff --git a/_patterns/buttons/buttons.css b/_patterns/buttons/buttons.css
@@ -0,0 +1,19 @@
+.btn {
+  background-color: var(--color-primary-dark);
+  border-color: var(--color-primary-dark);
+  color: var(--color-secondary-light);
+}
+
+.btn:hover {
+  background-color: var(--color-primary);
+  border-color: var(--color-primary);
+}
+
+.btn-ghost {
+  background-color: transparent;
+  color: var(--color-primary-dark);
+}
+
+.btn-ghost:hover {
+  color: var(--color-secondary-light);
+}
diff --git a/_patterns/buttons/config.yml b/_patterns/buttons/config.yml
@@ -0,0 +1,17 @@
+title: "Buttons, buttons—oh my!"
+description: |
+  Lots of different buttons styles, each for different reasons.
+
+patterns:
+  basic:
+    title: "Super basic button"
+    description: |
+      The basic button should be used in almost all situations.
+    fields:
+      - name: text
+        type: string
+        example: "Rescue a Diplodocus"
+  ghost:
+    description: |
+      The Ghost Button should only be used on banners, and in situations where the background is a photo.
+    width: 320
diff --git a/_patterns/buttons/ghost.html b/_patterns/buttons/ghost.html
@@ -0,0 +1 @@
+<a class="btn btn-ghost">Adopt a Dino</a>
diff --git a/_patterns/cards/cards.css b/_patterns/cards/cards.css
@@ -0,0 +1,4 @@
+.card {
+  border: 4px solid var(--color-primary-light);
+  border-radius: var(--border-radius);
+}
diff --git a/_patterns/cards/config.yml b/_patterns/cards/config.yml
@@ -0,0 +1,8 @@
+patterns:
+  image:
+    width: 400
+    fields:
+      - name: data
+        data:
+          source: site.data.dinos[2]
+          type: "Dino"
diff --git a/_patterns/cards/image.html b/_patterns/cards/image.html
@@ -0,0 +1,8 @@
+<div class="card chop">
+  <img class="img-flex" src="/images/dinos/{{include.data.image}}" alt="">
+  <div class="island-1-2">
+    <h2>{{include.data.title}}</h2>
+    <p>{{include.data.details}}</p>
+    {% pattern buttons/basic text=include.data.button_text %}
+  </div>
+</div>
diff --git a/_patterns/header/header.css b/_patterns/header/header.css
diff --git a/_patterns/header/header.html b/_patterns/header/header.html
@@ -0,0 +1,9 @@
+<header class="masthead section-light">
+  <h1><img src="/images/logo.svg" alt="Dino Rescue"></h1>
+  <nav>
+    <ul>
+      <li><a href="/">Home</a></li>
+      <li><a href="/dinos/">Dinos</a></li>
+    </ul>
+  </nav>
+</header>
diff --git a/css/main.css b/css/main.css
@@ -0,0 +1,8 @@
+---
+---
+
+{% include_relative modules.css %}
+{% include_relative grid.css %}
+{% include_relative type.css %}
+{% include_relative theme.css %}
+{% pattern_css %}
diff --git a/css/theme.css b/css/theme.css
@@ -8,6 +8,8 @@
 
   --font-primary: Georgia, serif;
   --font-secondary: "PT Sans Narrow", sans-serif;
+
+  --border-radius: 8px;
 }
 
 /* @utility Apply the secondary typeface */

diff --git a/dinos.html b/dinos.html
@@ -0,0 +1,13 @@
+---
+layout: default
+---
+
+<h2>Dinos</h2>
+
+<div class="grid">
+  {% for dino in site.data.dinos %}
+    <div class="unit xs-1 s-1 m-1-3">
+      {% pattern cards/image data=dino %}
+    </div>
+  {% endfor %}
+</div>
diff --git a/images/dinos/diplodocus.jpg b/images/dinos/diplodocus.jpg
diff --git a/images/dinos/hadrosaur.jpg b/images/dinos/hadrosaur.jpg
diff --git a/images/dinos/iguanodon.jpg b/images/dinos/iguanodon.jpg
diff --git a/images/dinos/stegosaurus.jpg b/images/dinos/stegosaurus.jpg
diff --git a/images/icons.svg b/images/icons.svg
diff --git a/index.html b/index.html
@@ -1,12 +1,9 @@
-<!DOCTYPE html>
-<html lang="en-ca">
-<head>
-  <meta charset="utf-8">
-  <title>Yay!</title>
-</head>
-<body>
+---
+layout: default
+---
 
-  <h1>It works!</h1>
-
-</body>
-</html>
+<div class="grid">
+  <div class="unit xs-1 s-1 m-1-3 gutter-1-2">
+    {% pattern cards/image title="Iguanodon" details="Save a Iguanodon from utter destruction." image="iguanodon.jpg" button_text="Rescue and Iguanodon" %}
+  </div>
+</div>
diff --git a/sample-pages/dinos.html b/sample-pages/dinos.html
@@ -0,0 +1,13 @@
+---
+layout: default
+---
+
+<h2>Dinos</h2>
+
+<div class="grid">
+  {% for dino in site.data.dinos %}
+    <div class="unit xs-1 s-1 m-1-3">
+      {% pattern cards/image data=dino %}
+    </div>
+  {% endfor %}
+</div>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<a class="btn" href="#">{{include.text \| default:'Rescue a dino'}}</a>