diff --git a/_config.yml b/_config.yml index fc9e103..c8be4d8 100644 --- 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 new file mode 100644 index 0000000..9a44312 --- /dev/null +++ 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 new file mode 100644 index 0000000..8bcfff9 --- /dev/null +++ b/_layouts/default.html @@ -0,0 +1,18 @@ + + + + + Yay! + + + + + + {% pattern header/header %} + +
+ {{content}} +
+ + + diff --git a/_patterns/buttons/basic.html b/_patterns/buttons/basic.html new file mode 100644 index 0000000..fd824e0 --- /dev/null +++ b/_patterns/buttons/basic.html @@ -0,0 +1 @@ +{{include.text | default:'Rescue a dino'}} diff --git a/_patterns/buttons/buttons.css b/_patterns/buttons/buttons.css new file mode 100644 index 0000000..635c621 --- /dev/null +++ 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 new file mode 100644 index 0000000..bfc53d7 --- /dev/null +++ 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 new file mode 100644 index 0000000..818b636 --- /dev/null +++ b/_patterns/buttons/ghost.html @@ -0,0 +1 @@ +Adopt a Dino diff --git a/_patterns/cards/cards.css b/_patterns/cards/cards.css new file mode 100644 index 0000000..7c72f61 --- /dev/null +++ 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 new file mode 100644 index 0000000..31c009b --- /dev/null +++ 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 new file mode 100644 index 0000000..f114953 --- /dev/null +++ b/_patterns/cards/image.html @@ -0,0 +1,8 @@ +
+ +
+

{{include.data.title}}

+

{{include.data.details}}

+ {% pattern buttons/basic text=include.data.button_text %} +
+
diff --git a/_patterns/header/header.css b/_patterns/header/header.css new file mode 100644 index 0000000..e69de29 diff --git a/_patterns/header/header.html b/_patterns/header/header.html new file mode 100644 index 0000000..6f5a1fa --- /dev/null +++ b/_patterns/header/header.html @@ -0,0 +1,9 @@ +
+

Dino Rescue

+ +
diff --git a/css/main.css b/css/main.css new file mode 100644 index 0000000..91df770 --- /dev/null +++ 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 index 96cb20d..0f840ac 100644 --- 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 new file mode 100644 index 0000000..0163790 --- /dev/null +++ b/dinos.html @@ -0,0 +1,13 @@ +--- +layout: default +--- + +

Dinos

+ +
+ {% for dino in site.data.dinos %} +
+ {% pattern cards/image data=dino %} +
+ {% endfor %} +
diff --git a/images/dinos/diplodocus.jpg b/images/dinos/diplodocus.jpg new file mode 100644 index 0000000..07a292e Binary files /dev/null and b/images/dinos/diplodocus.jpg differ diff --git a/images/dinos/hadrosaur.jpg b/images/dinos/hadrosaur.jpg new file mode 100644 index 0000000..cbeb25b Binary files /dev/null and b/images/dinos/hadrosaur.jpg differ diff --git a/images/dinos/iguanodon.jpg b/images/dinos/iguanodon.jpg new file mode 100644 index 0000000..168c223 Binary files /dev/null and b/images/dinos/iguanodon.jpg differ diff --git a/images/dinos/stegosaurus.jpg b/images/dinos/stegosaurus.jpg new file mode 100644 index 0000000..2f28c24 Binary files /dev/null and b/images/dinos/stegosaurus.jpg differ diff --git a/images/icons.svg b/images/icons.svg new file mode 100644 index 0000000..93b33f5 --- /dev/null +++ b/images/icons.svg @@ -0,0 +1 @@ + diff --git a/index.html b/index.html index 12b1a3e..3c07f1f 100644 --- a/index.html +++ b/index.html @@ -1,12 +1,9 @@ - - - - - Yay! - - +--- +layout: default +--- -

It works!

- - - +
+
+ {% pattern cards/image title="Iguanodon" details="Save a Iguanodon from utter destruction." image="iguanodon.jpg" button_text="Rescue and Iguanodon" %} +
+
diff --git a/sample-pages/dinos.html b/sample-pages/dinos.html new file mode 100644 index 0000000..0163790 --- /dev/null +++ b/sample-pages/dinos.html @@ -0,0 +1,13 @@ +--- +layout: default +--- + +

Dinos

+ +
+ {% for dino in site.data.dinos %} +
+ {% pattern cards/image data=dino %} +
+ {% endfor %} +