Date: Tue, 2 Sep 2014 17:51:55 +0800
Subject: [PATCH 12/27] Happy with the bootstrap button example
---
src/index.jade | 83 +++++++++++++++-----------------
src/styles/modules/_Example.scss | 7 ++-
2 files changed, 43 insertions(+), 47 deletions(-)
diff --git a/src/index.jade b/src/index.jade
index 2d599f8..c7224a2 100644
--- a/src/index.jade
+++ b/src/index.jade
@@ -7,6 +7,44 @@ header(am-HomepageHero)
span(am-type="normal") Attribute Modules
| for CSS
main
+ section(am-Example)
+ h3
+ span(am-type="bold") Example:
+ | Bootstrap Buttons
+ :markdown
+ Buttons are one of the strongest use-cases for AM. Here we've reproduced some of Bootstrap's button markup as an example. The problem with this (and other BEM-style button patterns) is that the markup is heavily convention-based: all buttons require a `btn` class *and* a specific button class, and it results in cluttered markup.
+
+ The AM version, in contrast, uses the attribute `am-Button` as an identifier, and allows straightforward, natural language as modifiers, e.g. `large`, `primary`, etc.
+ pre: code
+ span(am-Code='comment')= '\n'
+ = ' h2 {
+ > h3 {
@include trait(layout, "m2-0");
- @include trait(type, "h4 bold center");
+ @include trait(type, "h4 center");
}
> p {
@include trait(layout, "m1-0");
@include trait(type, "h6 lh1.4");
}
+ em {
+ @include trait(type, "italic");
+ }
pre {
@include trait(layout, "max840 m1-auto");
code {
From eb02e028cf837b72fdd2fbb4c0812e25abbffe07 Mon Sep 17 00:00:00 2001
From: Glen Maddern
Date: Tue, 2 Sep 2014 19:05:37 +0800
Subject: [PATCH 13/27] preface to the flexbox example too
---
src/index.jade | 9 ++++++++-
1 file changed, 8 insertions(+), 1 deletion(-)
diff --git a/src/index.jade b/src/index.jade
index c7224a2..142acb5 100644
--- a/src/index.jade
+++ b/src/index.jade
@@ -46,6 +46,13 @@ main
= '>Extra-small danger button'
section(am-Example)
+ h3
+ span(am-type="bold") Example:
+ | Flexbox Grid
+ :markdown
+ Using a grid system is commonplace and Flexbox Grid is one we're particularly fond of, but it shares some problems with all class-based grid systems. Because grid classes are used so frequently, it uses relatively *bare* css classes like `row` & `reverse`, but because columns need to be responsive, it eschews a global `col` class and instead defines `col-breakpoint-number` classes.
+
+ Converting this to AM-style, on the other hand, we can use an `am-Row` and `am-Column` module, and since each of those define a namespace, we can be free to use values of our choosing. It's also simple to use characters that normally wouldn't suit classes, so we can use a `breakpoint:number` syntax, which is arguably easier to understand at a glance.
pre: code
= '
Date: Wed, 3 Sep 2014 09:29:02 +0200
Subject: [PATCH 14/27] small introduction section
---
src/index.jade | 6 ++++++
src/styles/modules/_Example.scss | 6 ++++++
2 files changed, 12 insertions(+)
diff --git a/src/index.jade b/src/index.jade
index 142acb5..2528e86 100644
--- a/src/index.jade
+++ b/src/index.jade
@@ -7,6 +7,12 @@ header(am-HomepageHero)
span(am-type="normal") Attribute Modules
| for CSS
main
+ section(am-Example)
+ :markdown
+ Attribute Modules (AM) is a technique for using **attributes** and their **values** rather than classes for styling HTML elements. In doing so, each attribute effectively declares a separate namespace for encapsulating style information, resulting in more readable, maintainable HTML & CSS code.
+
+ For an introduction to how AM was developed, see the [original blog post](http://glenmaddern.com/articles/introducing-am-css). The [specification itself](http://amcss.github.io/) is available on GitHub.
+
section(am-Example)
h3
span(am-type="bold") Example:
diff --git a/src/styles/modules/_Example.scss b/src/styles/modules/_Example.scss
index 3881d71..9cb007d 100644
--- a/src/styles/modules/_Example.scss
+++ b/src/styles/modules/_Example.scss
@@ -13,6 +13,9 @@
em {
@include trait(type, "italic");
}
+ strong {
+ @include trait(type, "semibold");
+ }
pre {
@include trait(layout, "max840 m1-auto");
code {
@@ -27,4 +30,7 @@
@include trait(border, "simple");
@include trait(layout, "p0.2 m0.2");
}
+ a {
+ @include trait(link, "inline");
+ }
}
From 871275305295ff56ff95ce5dc1e12085abd992b6 Mon Sep 17 00:00:00 2001
From: Glen Maddern
Date: Thu, 4 Sep 2014 12:30:55 +0200
Subject: [PATCH 15/27] Added a traits example and a footer
---
src/_layout.jade | 2 +-
src/_partials/footer.jade | 10 +++++++
src/index.jade | 43 ++++++++++++++++++++++++++-
src/styles/main.scss | 1 +
src/styles/modules/_Contributors.scss | 15 ++++++++++
src/styles/traits/_after.scss | 1 +
6 files changed, 70 insertions(+), 2 deletions(-)
create mode 100644 src/styles/modules/_Contributors.scss
diff --git a/src/_layout.jade b/src/_layout.jade
index 46f750a..89ba4ba 100644
--- a/src/_layout.jade
+++ b/src/_layout.jade
@@ -12,7 +12,7 @@ html(lang="en")
body
//!= partial("_shared/nav")
!= yield
- //!= partial("_shared/footer")
+ != partial("_partials/footer")
//link(rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.1/styles/tomorrow.min.css")
//script(src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.1/highlight.min.js")
//script hljs.initHighlightingOnLoad();
diff --git a/src/_partials/footer.jade b/src/_partials/footer.jade
index e69de29..636a7d6 100644
--- a/src/_partials/footer.jade
+++ b/src/_partials/footer.jade
@@ -0,0 +1,10 @@
+footer(am-Contributors)
+ h3 Developed by
+ ol
+ li Glen Maddern
+ li Ben Schwarz
+ h3 With contributions from
+ ol
+ li Ben Smithett
+ li Florent Verschelde
+ li Robbie Manson
diff --git a/src/index.jade b/src/index.jade
index 2528e86..6f2dc2c 100644
--- a/src/index.jade
+++ b/src/index.jade
@@ -9,7 +9,7 @@ header(am-HomepageHero)
main
section(am-Example)
:markdown
- Attribute Modules (AM) is a technique for using **attributes** and their **values** rather than classes for styling HTML elements. In doing so, each attribute effectively declares a separate namespace for encapsulating style information, resulting in more readable, maintainable HTML & CSS code.
+ Attribute Modules (AM) is a technique for using **attributes** and their **values** rather than classes for styling HTML elements. In doing so, each attribute effectively declares a separate namespace for encapsulating style information, resulting in more readable, maintainable HTML & CSS.
For an introduction to how AM was developed, see the [original blog post](http://glenmaddern.com/articles/introducing-am-css). The [specification itself](http://amcss.github.io/) is available on GitHub.
@@ -51,6 +51,27 @@ main
span(am-Code='added')= 'am-Button="danger extra-small"'
= '>Extra-small danger button'
+ p The CSS changes are quite straightforward:
+ pre: code
+ span(am-Code='removed')= '.btn'
+ = ' '
+ span(am-Code='added')= '[am-Button]'
+ = ' { '
+ span(am-Code='comment')= '/* Default button styles */'
+ = ' }\n'
+ span(am-Code='removed')= '.btn-primary'
+ = ' '
+ span(am-Code='added')= '[am-Button~="primary"]'
+ = ' { '
+ span(am-Code='comment')= '/* Primary colours */'
+ = ' }\n'
+ span(am-Code='removed')= '.btn-large'
+ = ' '
+ span(am-Code='added')= '[am-Button~="large"]'
+ = ' { '
+ span(am-Code='comment')= '/* Large sizing */'
+ = ' }\n'
+
section(am-Example)
h3
span(am-type="bold") Example:
@@ -75,3 +96,23 @@ main
= '>Responsive
'
= '\n '
= '\n'
+
+ section(am-Example)
+ h3
+ span(am-type="bold") Example:
+ | Traits
+ :markdown
+ While AM can be used as a drop-in for BEM-style class naming, you can also consider a module defining a more general *namespace* for grouping related styles. Similar to utility classes in Suit CSS, these can be thought of as reusable style **traits**, that can be applied on or within components.
+ pre: code
+ = ' h3 {
+ @include trait(layout, 'pt0.5');
+ @include trait(type, 'upcase small2');
+ color: $grey;
+ }
+ > ol {
+ @include trait(layout, 'pb0.5');
+ }
+}
diff --git a/src/styles/traits/_after.scss b/src/styles/traits/_after.scss
index 420b4ed..8ded9b8 100644
--- a/src/styles/traits/_after.scss
+++ b/src/styles/traits/_after.scss
@@ -49,6 +49,7 @@
@extend %hr;
}
}
+
}
@include AM("before") {
From 4d67039f516f482a613fbdbd2fe560980e121b31 Mon Sep 17 00:00:00 2001
From: Glen Maddern
Date: Thu, 4 Sep 2014 13:21:59 +0200
Subject: [PATCH 16/27] Changed up how the code examples were being introduced
---
src/index.jade | 30 +++++++++++++++++++++---------
src/styles/modules/_Example.scss | 10 +++++-----
2 files changed, 26 insertions(+), 14 deletions(-)
diff --git a/src/index.jade b/src/index.jade
index 6f2dc2c..ac27061 100644
--- a/src/index.jade
+++ b/src/index.jade
@@ -9,7 +9,7 @@ header(am-HomepageHero)
main
section(am-Example)
:markdown
- Attribute Modules (AM) is a technique for using **attributes** and their **values** rather than classes for styling HTML elements. In doing so, each attribute effectively declares a separate namespace for encapsulating style information, resulting in more readable, maintainable HTML & CSS.
+ Attribute Modules (AM) is a technique for using HTML **attributes** and their **values** rather than classes for styling elements. In doing so, each attribute effectively declares a separate namespace for encapsulating style information, resulting in more readable and maintainable HTML & CSS.
For an introduction to how AM was developed, see the [original blog post](http://glenmaddern.com/articles/introducing-am-css). The [specification itself](http://amcss.github.io/) is available on GitHub.
@@ -18,9 +18,7 @@ main
span(am-type="bold") Example:
| Bootstrap Buttons
:markdown
- Buttons are one of the strongest use-cases for AM. Here we've reproduced some of Bootstrap's button markup as an example. The problem with this (and other BEM-style button patterns) is that the markup is heavily convention-based: all buttons require a `btn` class *and* a specific button class, and it results in cluttered markup.
-
- The AM version, in contrast, uses the attribute `am-Button` as an identifier, and allows straightforward, natural language as modifiers, e.g. `large`, `primary`, etc.
+ Buttons are one of the strongest use-cases for AM. Here we've converted some of Bootstrap's button markup as an example.
pre: code
span(am-Code='comment')= '\n'
= 'col-*breakpoint*-*number* classes.
+
+ The AM markup, on the other hand, defines an `am-Row` and `am-Column` module, and since each of those define a namespace we can be free to use values of our choosing. These values can make use of a wider range of characters than is convenient with classes, so we can use a *breakpoint*:*number* syntax, which is arguably easier to understand at a glance.
+
section(am-Example)
h3
span(am-type="bold") Example:
@@ -116,3 +123,8 @@ main
= '\n'
:markdown
Here, we're able to make use of the fact that values for `am-position` and `am-text` operate in *different namespaces*, so we can use the value `center` in both places without worrying about naming clashes.
+
+ section(am-Example)
+ h3 Call for feedback
+ :markdown
+ We'd love to hear suggestions for inclusions to the AM specification, by adding [an issue to our tracker](https://github.com/amcss/attribute-module-specification/issues) or contributing to an existing discussion. If you create an AM-style CSS library or framework, please [let us know](https://github.com/amcss/attribute-module-specification/issues/5).
diff --git a/src/styles/modules/_Example.scss b/src/styles/modules/_Example.scss
index 9cb007d..bb73f45 100644
--- a/src/styles/modules/_Example.scss
+++ b/src/styles/modules/_Example.scss
@@ -1,12 +1,12 @@
[am-Example] {
- @include trait(layout, "max720 m2-auto p1-1");
+ @include trait(layout, "max720 p1 m0-auto mt2");
- > h3 {
- @include trait(layout, "m2-0");
+ h3 {
+ @include trait(layout, "mb2");
@include trait(type, "h4 center");
}
- > p {
+ p {
@include trait(layout, "m1-0");
@include trait(type, "h6 lh1.4");
}
@@ -17,7 +17,7 @@
@include trait(type, "semibold");
}
pre {
- @include trait(layout, "max840 m1-auto");
+ @include trait(layout, "max840 mt1 mb2");
code {
@include trait(type, "small3 lh1.8");
@include trait(layout, "p0.5 m0");
From 5ed730498e97b5781dd03099ccd5973e791a2f58 Mon Sep 17 00:00:00 2001
From: Ben Smithett
Date: Thu, 4 Sep 2014 22:41:15 +1000
Subject: [PATCH 17/27] doesn't pass w3c validation UNACCEPTABLE
---
src/index.jade | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/index.jade b/src/index.jade
index ac27061..101dab2 100644
--- a/src/index.jade
+++ b/src/index.jade
@@ -86,7 +86,7 @@ main
= '
Date: Fri, 5 Sep 2014 10:39:15 +0200
Subject: [PATCH 18/27] epic CSS refactor, dropping the complicated SASS stuff
---
src/index.jade | 15 ++-
src/styles/_colors.scss | 7 ++
src/styles/_globals.scss | 6 +-
src/styles/_mixins.scss | 44 ++++----
src/styles/_type.scss | 56 +++++++++++
src/styles/main.scss | 22 +---
src/styles/modules/_Contributors.scss | 24 +++--
src/styles/modules/_Example.scss | 56 ++++++++---
src/styles/modules/_HomepageHero.scss | 29 +++++-
src/styles/traits/_after.scss | 74 --------------
src/styles/traits/_background.scss | 9 --
src/styles/traits/_border.scss | 28 ------
src/styles/traits/_color.scss | 25 -----
src/styles/traits/_flex.scss | 54 ----------
src/styles/traits/_layout.scss | 93 -----------------
src/styles/traits/_link.scss | 53 ----------
src/styles/traits/_size.scss | 25 -----
src/styles/traits/_type.scss | 139 --------------------------
18 files changed, 182 insertions(+), 577 deletions(-)
create mode 100644 src/styles/_colors.scss
create mode 100644 src/styles/_type.scss
delete mode 100644 src/styles/traits/_after.scss
delete mode 100644 src/styles/traits/_background.scss
delete mode 100644 src/styles/traits/_border.scss
delete mode 100644 src/styles/traits/_color.scss
delete mode 100644 src/styles/traits/_flex.scss
delete mode 100644 src/styles/traits/_layout.scss
delete mode 100644 src/styles/traits/_link.scss
delete mode 100644 src/styles/traits/_size.scss
delete mode 100644 src/styles/traits/_type.scss
diff --git a/src/index.jade b/src/index.jade
index 101dab2..1cbae4e 100644
--- a/src/index.jade
+++ b/src/index.jade
@@ -1,10 +1,7 @@
header(am-HomepageHero)
- h1(am-type="light")
- span(am-type="h0 middle") [
- span(am-type="h1 middle") AMCSS
- span(am-type="h0 middle") ]
- h2(am-type="h3 light italic" am-layout="pt2")
- span(am-type="normal") Attribute Modules
+ h1 AMCSS
+ h2
+ span Attribute Modules
| for CSS
main
section(am-Example)
@@ -15,7 +12,7 @@ main
section(am-Example)
h3
- span(am-type="bold") Example:
+ strong Example:
| Bootstrap Buttons
:markdown
Buttons are one of the strongest use-cases for AM. Here we've converted some of Bootstrap's button markup as an example.
@@ -77,7 +74,7 @@ main
section(am-Example)
h3
- span(am-type="bold") Example:
+ strong Example:
| Flexbox Grid
:markdown
Using a grid system is commonplace and Flexbox Grid is one we're particularly fond of. Here we've converted some example markup into an AM style.
@@ -106,7 +103,7 @@ main
section(am-Example)
h3
- span(am-type="bold") Example:
+ strong Example:
| Traits
:markdown
While AM can be used as a drop-in for BEM-style class naming, you can also consider a module defining a more general *namespace* for grouping related styles. Similar to utility classes in Suit CSS, these can be thought of as reusable style **traits**, that can be applied on or within components.
diff --git a/src/styles/_colors.scss b/src/styles/_colors.scss
new file mode 100644
index 0000000..95c8e14
--- /dev/null
+++ b/src/styles/_colors.scss
@@ -0,0 +1,7 @@
+$white: hsl(60, 40%, 99%);
+$black: #111;
+$blue: #00436e;
+$red: #f4454a;
+$green: #2b782b;
+$grey: #575757;
+$grey--light: #a1a1a1;
diff --git a/src/styles/_globals.scss b/src/styles/_globals.scss
index 70baf0f..a7e72cd 100644
--- a/src/styles/_globals.scss
+++ b/src/styles/_globals.scss
@@ -1,12 +1,12 @@
:root {
+ @extend %sans;
font-size: 16px;
min-height: 100%;
- @include trait(type, "sans normal");
}
body {
min-height: 100%;
text-rendering: optimizeLegibility;
- @include trait(background, "white");
- @include trait(color, "black");
+ background: $white;
+ color: $black;
}
diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss
index be912b0..78288e6 100644
--- a/src/styles/_mixins.scss
+++ b/src/styles/_mixins.scss
@@ -1,31 +1,31 @@
$attr: false;
@mixin attr() {
- @if $attr {
- [#{$prefix}#{$attr}] {
- @content;
- }
- }
- @else {
- @warn "attr() needs to be called within an AM block";
- }
+// @if $attr {
+// [#{$prefix}#{$attr}] {
+// @content;
+// }
+// }
+// @else {
+// @warn "attr() needs to be called within an AM block";
+// }
}
@mixin val($value) {
- @if $attr {
- [#{$prefix}#{$attr}~="#{$value}"] {
- @content;
- }
-
- @each $bp in $breakpoints {
- .breakpoint-#{$bp} [#{$prefix}#{$attr}~="#{$bp}:#{$value}"] {
- @extend [#{$prefix}#{$attr}~="#{$value}"];
- }
- }
- }
- @else {
- @warn "attr() needs to be called within an AM block";
- }
+// @if $attr {
+// [#{$prefix}#{$attr}~="#{$value}"] {
+// @content;
+// }
+//
+// @each $bp in $breakpoints {
+// .breakpoint-#{$bp} [#{$prefix}#{$attr}~="#{$bp}:#{$value}"] {
+// @extend [#{$prefix}#{$attr}~="#{$value}"];
+// }
+// }
+// }
+// @else {
+// @warn "attr() needs to be called within an AM block";
+// }
}
@mixin AM($local-attr) {
diff --git a/src/styles/_type.scss b/src/styles/_type.scss
new file mode 100644
index 0000000..1620adc
--- /dev/null
+++ b/src/styles/_type.scss
@@ -0,0 +1,56 @@
+
+%sans {
+ font-family: 'Avenir Next', 'Helvetica Neue', 'Open Sans', 'Fira Sans';
+}
+
+%serif {
+ font-family: Palatino, Georgia, "Times New Roman", Times, serif;
+}
+
+%mono {
+ font-family: "Consolas", "Menlo", "Courier", monospace;
+}
+
+%h0 {
+ font-size: 6rem;
+}
+
+%h1 {
+ font-size: 4.5rem;
+}
+
+%h2 {
+ font-size: 3.5rem;
+}
+
+%h3 {
+ font-size: 2.5rem;
+}
+
+%h4 {
+ font-size: 1.5rem;
+}
+
+%h5 {
+ font-size: 1.2rem;
+}
+
+%small0 {
+ font-size: 1.0rem;
+}
+
+%small1 {
+ font-size: 0.9rem;
+}
+
+%small2 {
+ font-size: 0.8rem;
+}
+
+%small3 {
+ font-size: 0.7rem;
+}
+
+%small4 {
+ font-size: 0.6rem;
+}
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 95d83c1..7f16edb 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -1,27 +1,15 @@
/* Reset */
@import "reset";
-/* Set up AM mixins */
-$breakpoints: "small", "medium", "large";
-$prefix: "am-";
-@import 'mixins';
+/* Variables */
+@import 'colors';
+@import 'type';
-/* Declare traits */
-@import 'traits/color';
-@import 'traits/layout';
-@import 'traits/flex';
-@import 'traits/type';
-@import 'traits/link';
-@import 'traits/after';
-@import 'traits/border';
-@import 'traits/background';
-@import 'traits/size';
-
-/* Assemble Modules */
+/* Modules */
@import 'modules/HomepageHero';
@import 'modules/Example';
@import 'modules/Code';
@import 'modules/Contributors';
-/* Add global styles */
+/* Set global styles */
@import 'globals';
diff --git a/src/styles/modules/_Contributors.scss b/src/styles/modules/_Contributors.scss
index 641e4bc..d81b7fe 100644
--- a/src/styles/modules/_Contributors.scss
+++ b/src/styles/modules/_Contributors.scss
@@ -1,15 +1,25 @@
[am-Contributors] {
- @include trait(layout, 'p1');
- @include trait(type, 'center lh1.6');
- @include trait(before, 'hr');
- @include trait(type, 'small1');
+ @extend %small1;
+ padding: 1rem;
+ text-align: center;
+ line-height: 1.6;
+ &::before {
+ content: '';
+ color: inherit;
+ display: block;
+ width: 50%;
+ margin: 1rem auto;
+ border-top: 1px solid;
+ opacity: 0.2;
+ }
> h3 {
- @include trait(layout, 'pt0.5');
- @include trait(type, 'upcase small2');
+ @extend %small2;
+ text-transform: uppercase;
+ padding-top: 0.5rem;
color: $grey;
}
> ol {
- @include trait(layout, 'pb0.5');
+ padding-bottom: 0.5rem;
}
}
diff --git a/src/styles/modules/_Example.scss b/src/styles/modules/_Example.scss
index bb73f45..20e5b88 100644
--- a/src/styles/modules/_Example.scss
+++ b/src/styles/modules/_Example.scss
@@ -1,36 +1,62 @@
[am-Example] {
- @include trait(layout, "max720 p1 m0-auto mt2");
+ max-width: 720px;
+ padding: 1rem;
+ margin: 2rem auto 0;
h3 {
- @include trait(layout, "mb2");
- @include trait(type, "h4 center");
+ @extend %h4;
+ margin-bottom: 2rem;
+ text-align: center;
+ strong {
+ font-weight: 700;
+ }
}
p {
- @include trait(layout, "m1-0");
- @include trait(type, "h6 lh1.4");
+ @extend %h6;
+ margin: 1rem 0;
+ line-height: 1.4;
}
em {
- @include trait(type, "italic");
+ font-style: italic;
}
strong {
- @include trait(type, "semibold");
+ font-weight: 600;
}
pre {
- @include trait(layout, "max840 mt1 mb2");
+ margin: 1rem 0 2rem;
code {
- @include trait(type, "small3 lh1.8");
- @include trait(layout, "p0.5 m0");
- @include trait(border, "none");
+ @extend %small3;
+ line-height: 1.8;
+ padding: 0.5rem;
+ margin: 0;
+ box-shadow: none;
color: $grey;
+ display: block;
}
}
code {
- @include trait(type, "mono lh1.2 small3 unbroken");
- @include trait(border, "simple");
- @include trait(layout, "p0.2 m0.2");
+ @extend %mono;
+ @extend %small3;
+ line-height: 1.2;
+ white-space: pre;
+ box-shadow: 0 0 0 1px #ddd;
+ padding: 0.2rem;
+ margin: 0.2rem;
}
a {
- @include trait(link, "inline");
+ transition: color 0.1s;
+ &, &:hover, &:visited {
+ color: hsl(0, 50%, 40%);
+ text-decoration: none;
+ }
+ &:hover {
+ color: hsl(0, 50%, 50%);
+ }
+ &:active {
+ transition: none;
+ color: hsl(0, 50%, 50%);
+ text-decoration: underline;
+ }
}
}
diff --git a/src/styles/modules/_HomepageHero.scss b/src/styles/modules/_HomepageHero.scss
index b33504c..6a66ebb 100644
--- a/src/styles/modules/_HomepageHero.scss
+++ b/src/styles/modules/_HomepageHero.scss
@@ -1,6 +1,27 @@
[am-HomepageHero] {
- @include trait(layout, "p4");
- @include trait(type, "center");
- @include trait(background, "gradient");
- @include trait(color, "white");
+ padding: 4rem;
+ text-align: center;
+ background: linear-gradient(45deg, #2b782b 0%, #85c543 100%);
+ color: $white;
+ font-weight: 300;
+
+ h1 {
+ @extend %h1;
+ &::before {
+ @extend %h0;
+ content: '[';
+ }
+ &::after {
+ @extend %h0;
+ content: ']';
+ }
+ }
+ h2 {
+ @extend %h3;
+ padding-top: 2rem;
+ font-style: italic;
+ > span {
+ font-weight: 400;
+ }
+ }
}
diff --git a/src/styles/traits/_after.scss b/src/styles/traits/_after.scss
deleted file mode 100644
index 8ded9b8..0000000
--- a/src/styles/traits/_after.scss
+++ /dev/null
@@ -1,74 +0,0 @@
-%_after_abs {
- position: relative;
- &::after {
- display: block;
- position: absolute;
- }
-}
-
-%_before_abs {
- position: relative;
- &::before {
- display: block;
- position: absolute;
- }
-}
-
-%hr {
- color: inherit;
- display: block;
- width: 50%;
- margin: 1rem auto;
- border-top: 1px solid;
- opacity: 0.2;
-}
-
-@include AM("after") {
- @include attr {
- &::after {
- content: '';
- }
- }
-
- @include val("down-chevron") {
- @extend %_after_abs;
- &::after {
- top: 100%;
- left: 50%;
- width: 1rem;
- height: 1rem;
- border: 2px solid;
- border-top-color: transparent;
- border-left-color: transparent;
- transform: translateX(-0.5rem) rotate(45deg);
- }
- }
-
- @include val("hr") {
- &::after {
- @extend %hr;
- }
- }
-
-}
-
-@include AM("before") {
- @include attr {
- &::before {
- content: '';
- }
- }
-
- @include val("hr") {
- &::before {
- @extend %hr;
- }
- }
-
- @include val("bullet") {
- &::before {
- content: '\2022';
- padding-right: 0.5rem;
- }
- }
-}
diff --git a/src/styles/traits/_background.scss b/src/styles/traits/_background.scss
deleted file mode 100644
index 757cf5f..0000000
--- a/src/styles/traits/_background.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-@include AM("background") {
- @include val("white") {
- background-color: $white;
- }
-
- @include val("gradient") {
- background: linear-gradient(45deg, #2b782b 0%, #85c543 100%);
- }
-}
diff --git a/src/styles/traits/_border.scss b/src/styles/traits/_border.scss
deleted file mode 100644
index 3293d55..0000000
--- a/src/styles/traits/_border.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-@include AM("border") {
-
- @include val("round") {
- border-radius: 50%;
- }
-
- @include val("none") {
- border: none;
- box-shadow: none;
- }
-
- @include val("polaroid") {
- box-shadow: 0 0 0 1px #eee, 0 0 0 7px white, 0 0 0 8px #ddd;
- }
-
- @include val("frame") {
- box-shadow: 0 0 0 7px white, 0 0 0 8px #ddd;
- }
-
- @include val("simple") {
- box-shadow: 0 0 0 1px #ddd;
- }
-
- @include val("thick-left") {
- border-left: 0.2rem solid;
- padding-left: 1rem;
- }
-}
diff --git a/src/styles/traits/_color.scss b/src/styles/traits/_color.scss
deleted file mode 100644
index cb1f047..0000000
--- a/src/styles/traits/_color.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-$white: hsl(60, 40%, 99%);
-$black: #111;
-$blue: #00436e;
-$red: #f4454a;
-$green: #2b782b;
-$grey: #575757;
-$grey--light: #a1a1a1;
-
-@include AM("color") {
- @include val("white") {
- color: $white;
- }
-
- @include val("black") {
- color: $black;
- }
-
- @include val("blue") {
- color: $blue;
- }
-
- @include val("red") {
- color: $red;
- }
-}
diff --git a/src/styles/traits/_flex.scss b/src/styles/traits/_flex.scss
deleted file mode 100644
index 8e9cff9..0000000
--- a/src/styles/traits/_flex.scss
+++ /dev/null
@@ -1,54 +0,0 @@
-@include AM("flex") {
- @include attr {
- display: flex;
- }
-
- @include val("column") {
- flex-direction: column;
- }
-
- @include val("align-center") {
- align-items: center;
- }
-
- @include val("align-end") {
- align-items: flex-end;
- }
-
- @include val("align-stretch") {
- align-items: stretch;
- }
-
- @include val("wrap") {
- flex-wrap: wrap;
- }
-
- @include val("justify-center") {
- justify-content: center;
- }
-
- @include val("justify-end") {
- justify-content: flex-end;
- }
-}
-
-@include AM("flex-child") {
- @include val("shrink0") {
- flex-shrink: 0;
- }
-
- @include val("shrink1") {
- flex-shrink: 1;
- }
-
- @include val("grow1") {
- flex-grow: 1;
- }
-
- @include val("1/3") {
- flex: 0 0 33.33%;
- }
- @include val("1/2") {
- flex: 0 0 50%;
- }
-}
diff --git a/src/styles/traits/_layout.scss b/src/styles/traits/_layout.scss
deleted file mode 100644
index 278e887..0000000
--- a/src/styles/traits/_layout.scss
+++ /dev/null
@@ -1,93 +0,0 @@
-[_layout~="block"] {
-
-}
-
-@include AM("layout") {
-
- @include val("block") {
- display: block;
- }
-
- $sizes: 0, 0.2, 0.5, 1, 2, 3, 4;
- @each $i in $sizes {
- @include val("p#{$i}") {
- padding: $i * 1rem;
- }
-
- @include val("pt#{$i}") {
- padding-top: $i * 1rem;
- }
-
- @include val("pr#{$i}") {
- padding-right: $i * 1rem;
- }
-
- @include val("pb#{$i}") {
- padding-bottom: $i * 1rem;
- }
-
- @include val("pl#{$i}") {
- padding-left: $i * 1rem;
- }
-
- @each $j in $sizes {
- @include val("p#{$i}-#{$j}") {
- padding: $i * 1rem $j * 1rem;
- }
- }
-
- @include val("m#{$i}") {
- margin: $i * 1rem;
- }
-
- @include val("mt#{$i}") {
- margin-top: $i * 1rem;
- }
-
- @include val("mr#{$i}") {
- margin-right: $i * 1rem;
- }
-
- @include val("mb#{$i}") {
- margin-bottom: $i * 1rem;
- }
-
- @include val("ml#{$i}") {
- margin-left: $i * 1rem;
- }
-
- @each $j in $sizes {
- @include val("m#{$i}-#{$j}") {
- margin: $i * 1rem $j * 1rem;
- }
- }
-
- @include val("m#{$i}-auto") {
- margin: $i * 1rem auto;
- }
- }
-
- @include val("w100%") {
- width: 100%;
- }
-
- @include val("mw100%") {
- max-width: 100%;
- }
-
- @include val("intrinsic-width") {
- width: intrinsic;
- }
-
- $widths: 480, 600, 720, 840, 960;
- @each $i in $widths {
- @include val("max#{$i}") {
- @extend [ _layout ~= "m0-auto" ];
- max-width: 1px * $i;
- }
- }
-
- @include val("intrinsic-width") {
- width: intrinsic;
- }
-}
diff --git a/src/styles/traits/_link.scss b/src/styles/traits/_link.scss
deleted file mode 100644
index 98da2e3..0000000
--- a/src/styles/traits/_link.scss
+++ /dev/null
@@ -1,53 +0,0 @@
-@include AM('link') {
-
- @include attr {
- &:hover, &:active, &:visited {
- color: inherit;
- }
- text-decoration: underline;
- }
-
- @include val("subtle") {
- color: inherit;
- text-decoration: none;
-
- &:hover, &:active {
- text-decoration: underline;
- }
- }
-
- @include val("inline") {
- transition: color 0.1s;
- &, &:hover, &:visited {
- color: hsl(0, 50%, 40%);
- text-decoration: none;
- }
- &:hover {
- color: hsl(0, 50%, 50%);
- }
- &:active {
- transition: none;
- color: hsl(0, 50%, 50%);
- text-decoration: underline;
- }
- }
-
- @include val("invisible") {
- &, &:hover, &:visited {
- text-decoration: none;
- }
- }
-
- @include val("obvious") {
- &::after {
- content: ' ↵';
- }
- }
-
- @include val("shadow") {
- &:hover, &:active {
- box-shadow: 0 0 20px -3px;
- }
- }
-
-}
diff --git a/src/styles/traits/_size.scss b/src/styles/traits/_size.scss
deleted file mode 100644
index 69348bb..0000000
--- a/src/styles/traits/_size.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-@include AM("size") {
-
- $sizes: 0.5, 1, 1.5, 2, 3, 4, 6, 8, 12, 16,;
- @each $i in $sizes {
- @include val("#{$i}") {
- width: 1rem * $i;
- height: 1rem * $i;
- }
- @include val("#{$i}*auto") {
- width: 1rem * $i;
- height: auto;
- }
- @include val("auto*#{$i}") {
- width: 1rem * $i;
- height: auto;
- }
- @each $j in $sizes {
- @include val("#{$i}*#{$j}") {
- width: 1rem * $i;
- height: 1rem * $j;
- }
- }
- }
-
-}
diff --git a/src/styles/traits/_type.scss b/src/styles/traits/_type.scss
deleted file mode 100644
index 9943af3..0000000
--- a/src/styles/traits/_type.scss
+++ /dev/null
@@ -1,139 +0,0 @@
-@include AM("type") {
- /*
- FONT FAMILIES
- */
-
- @include val("sans") {
- font-family: 'Avenir Next', 'Helvetica Neue', 'Open Sans', 'Fira Sans';
- }
-
- @include val("serif") {
- font-family: Palatino, Georgia, "Times New Roman", Times, serif;
- }
-
- @include val("mono") {
- font-family: "Consolas", "Menlo", "Courier", monospace;
- }
-
- /*
- FONT WEIGHTS
- */
-
- @include val("light") {
- font-weight: 300;
- }
-
- @include val("normal") {
- font-weight: 400;
- }
-
- @include val("medium") {
- font-weight: 500;
- }
-
- @include val("semibold") {
- font-weight: 600;
- }
-
- @include val("bold") {
- font-weight: 700;
- }
-
- @include val("black") {
- font-weight: 900;
- }
-
- /*
- HEADERS
- */
-
- @include val("h0") {
- font-size: 6rem;
- }
-
- @include val("h1") {
- font-size: 4.5rem;
- }
-
- @include val("h2") {
- font-size: 3.5rem;
- }
-
- @include val("h3") {
- font-size: 2.5rem;
- }
-
- @include val("h4") {
- font-size: 1.5rem;
- }
-
- @include val("h5") {
- font-size: 1.2rem;
- }
-
- /*
- SMALL TYPE
- */
-
- @include val("small0") {
- font-size: 1.0rem;
- }
-
- @include val("small1") {
- font-size: 0.9rem;
- }
-
- @include val("small2") {
- font-size: 0.8rem;
- }
-
- @include val("small3") {
- font-size: 0.7rem;
- }
-
- @include val("small4") {
- font-size: 0.6rem;
- }
-
- /*
- LINE-HEIGHT
- */
-
- @each $i in 0.8, 0.9, 1.0, 1.1, 1.2, 1.3, 1.4, 1.5, 1.6, 1.8 {
- @include val("lh#{$i}") {
- line-height: $i;
- }
- }
-
- /*
- TRANSFORMATIONS
- */
-
- @include val("upcase") {
- text-transform: uppercase;
- }
-
- @include val("center") {
- text-align: center;
- }
-
- @include val("italic") {
- font-style: italic;
- }
-
- @include val("truncate") {
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- width: 100%;
- display: inline-block;
- }
-
- @include val("right") {
- text-align: right;
- }
-
- @include val("unbroken") {
- white-space: pre;
- }
-}
From f10b94e4144d9bc49067160e2457822ef0712c34 Mon Sep 17 00:00:00 2001
From: Glen Maddern
Date: Fri, 5 Sep 2014 12:52:34 +0200
Subject: [PATCH 19/27] responsive tweaks
---
src/index.jade | 2 +-
src/styles/_globals.scss | 5 +++++
src/styles/modules/_Example.scss | 2 ++
src/styles/modules/_HomepageHero.scss | 14 +++++++++++++-
4 files changed, 21 insertions(+), 2 deletions(-)
diff --git a/src/index.jade b/src/index.jade
index 1cbae4e..045f920 100644
--- a/src/index.jade
+++ b/src/index.jade
@@ -8,7 +8,7 @@ main
:markdown
Attribute Modules (AM) is a technique for using HTML **attributes** and their **values** rather than classes for styling elements. In doing so, each attribute effectively declares a separate namespace for encapsulating style information, resulting in more readable and maintainable HTML & CSS.
- For an introduction to how AM was developed, see the [original blog post](http://glenmaddern.com/articles/introducing-am-css). The [specification itself](http://amcss.github.io/) is available on GitHub.
+ It's not a framework or a library, it's a style that better describes the components you're building. For an introduction to how AM was developed, see the [original blog post](http://glenmaddern.com/articles/introducing-am-css) by Glen Maddern. The [specification itself](http://amcss.github.io/) is available on GitHub.
section(am-Example)
h3
diff --git a/src/styles/_globals.scss b/src/styles/_globals.scss
index a7e72cd..875ae48 100644
--- a/src/styles/_globals.scss
+++ b/src/styles/_globals.scss
@@ -3,6 +3,11 @@
font-size: 16px;
min-height: 100%;
}
+@media screen and (min-width: 960px) {
+ :root {
+ font-size: 20px;
+ }
+}
body {
min-height: 100%;
diff --git a/src/styles/modules/_Example.scss b/src/styles/modules/_Example.scss
index 20e5b88..5ccbc5a 100644
--- a/src/styles/modules/_Example.scss
+++ b/src/styles/modules/_Example.scss
@@ -33,6 +33,8 @@
box-shadow: none;
color: $grey;
display: block;
+ max-width: 100%;
+ overflow: auto;
}
}
code {
diff --git a/src/styles/modules/_HomepageHero.scss b/src/styles/modules/_HomepageHero.scss
index 6a66ebb..104fb44 100644
--- a/src/styles/modules/_HomepageHero.scss
+++ b/src/styles/modules/_HomepageHero.scss
@@ -1,5 +1,5 @@
[am-HomepageHero] {
- padding: 4rem;
+ padding: 4rem 1rem;
text-align: center;
background: linear-gradient(45deg, #2b782b 0%, #85c543 100%);
color: $white;
@@ -24,4 +24,16 @@
font-weight: 400;
}
}
+
+ @media screen and (max-width: 600px) {
+ h1 {
+ @extend %h2;
+ &::before, &::after {
+ @extend %h1;
+ }
+ }
+ h2 {
+ @extend %h4;
+ }
+ }
}
From 18ab5b32f3b8ceb393fc79bcb2328e6e38d1796b Mon Sep 17 00:00:00 2001
From: Glen Maddern
Date: Fri, 5 Sep 2014 13:33:34 +0200
Subject: [PATCH 20/27] Added contributors section
---
src/404.jade | 3 ++-
src/_partials/footer.jade | 10 ----------
src/images/ben.jpg | Bin 0 -> 16776 bytes
src/images/glen.jpg | Bin 0 -> 18283 bytes
src/styles/modules/_Contributors.scss | 14 ++++++++++++++
src/styles/modules/_Example.scss | 1 +
6 files changed, 17 insertions(+), 11 deletions(-)
delete mode 100644 src/_partials/footer.jade
create mode 100644 src/images/ben.jpg
create mode 100644 src/images/glen.jpg
diff --git a/src/404.jade b/src/404.jade
index 8de3113..5fd3c4c 100644
--- a/src/404.jade
+++ b/src/404.jade
@@ -1 +1,2 @@
-¯\_(ツ)_/¯
+section(am-Example)
+ h3 ¯\_(ツ)_/¯
diff --git a/src/_partials/footer.jade b/src/_partials/footer.jade
deleted file mode 100644
index 636a7d6..0000000
--- a/src/_partials/footer.jade
+++ /dev/null
@@ -1,10 +0,0 @@
-footer(am-Contributors)
- h3 Developed by
- ol
- li Glen Maddern
- li Ben Schwarz
- h3 With contributions from
- ol
- li Ben Smithett
- li Florent Verschelde
- li Robbie Manson
diff --git a/src/images/ben.jpg b/src/images/ben.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..debb9b3b026f08fe817de468da9cfc9ac50e1995
GIT binary patch
literal 16776
zcmdVCWpLdoYHzL8tMsw*u?;|%lm03VfPer1AU-?bV;vv?fP;a7frWvCg@r?c
z``nNb;NTFDQIY?vpYWi=@_9BR*?We5xIX;@pcW`qx`tAc
za!q~o^>aJ|3IkKzbbf(dlzj)&B8<%m_3l@n`A>^VQyDB~Q7ElRMme_6_&>L1-<0bw
z8I_-xz|B~9BZC(`*jPZ82-m3#~hfJC27hyE&>xRwS0mn^mYH!gC3j3
zl&>(AbL_u&XscV>Z=agI?L4?szOrKK^QL@d=&>XJxvdiHBSOky@!D(O3QCa&rCKk5
zzfupYv5}QR6)!+|AZ`g7ug6`~ZGPHPqJ;eyQ*Ijd%57R|rppNNBAu4`?jg2Bb$mZ>
z`Bf~`0+bS+t8(w6bMMUy5?`<+S3guKvHlFn@CyNE(q~|FTH{F#lts5+PC`@UJ!IED
z!|lG-qRPuXmCxCKGf{&PCW0j52aD)&>CT`HBKB$xtIqq!^_c9$o)jwSy!@skgbiX9Y}kruiainZTr
zT^3X~<3YLHL$+2LS2L=6BZ3e6NSsj!V^^(6nnj@%!9G*IBhhX<&
zA66MBIkNN(`6-Gr;J*g{C`2K^nr6W~Z)j3@8?|6rWAQ~BHRnW}jm>aRahl@vWa_hB
zo$?riSr1Zcz^*gb8TppiW_Q<4#kdeInr7><``!+==d!-jJC6c
zwXV`2qz*R_9mxleB7<)jYIhMdx^;+
zGoOIAsC=bqW!^#80J6RWw;A^#%hg;nQ1_X>YDzyEkmF~rUfq+?msi8wWsRn|T+bC@
zvJ_=~SRKBb(uDZrr^EHN7#*K$Ra(E?kW10^>(yuyX;$eqU1XC5cvvSCwNYeQm47a4
zjup4RajRjveDS`aSqHjsluENGlhA0Urt4|^t(9FQeQ#{|vcsP$lu@FS%bAXQ1#)Em
zsC_5$X$bfp^;Fh$k227GOrYawKW**%0WcM9;;np&DxdjzD_nA<~;XN#hraJaj7GZ@)YF`hb6wnDPE2(B+cRJv!}zW*GH{S^~6W;5a6o
zmguC6wPFwTd*{RNr+O?}<8@^-mG-rjo6FrCD#}}mfn;QYsulKH$I4{5p}7I;I&nQoj>TkhDn4%GWAgS*>#qU?Q)8J7#ELL8nVjo}Wnre@ny
zGysuTD=Fvm+2;N?=jusVLS=&FxTAy9ns#!%R-UDViQ6Sxovd(snYgjrG|OK%8#>W+
zI%_-jr|>Ii;$*8*+)G*`y6m?%U&dMQaC{M$vcfcc_L09o4=8espBoa!?A5I(ZWq%i
zoQ(L|&n(|cX|jYtjvtg7HHc`k&CYtrtvp`gwEg&99XRdP=j%!ndsitVP>1w`Z1x6@
z^k1{-H*bH(YH_4B*dxBJ`tH5hlHW_M)8tp584vsaOm_dB^!}6SAkqIP1OESPkM{o(
z6x9EpgJMPpKte)7KtVymLjCtcgMj=jP8gUlSQOZlKy)!2aw;}&(oEs6#F`-e)E~HB>ErGFG$mL9%2%2{J88
zto9it%_Q@E*06NEsbbt|j}JiI@C2Lgm8F4_igJeT)Btr33bc-cLFeO)Z@r^hI`arb
z7z)BDS(rtQhk??V)h0ij0a0p;V*LWM&>xBS)@Fsqc7cH|d`>;ywSO|*$z#8m|0?LA
z{dFCNW(V{Pj=a_(*j7;(QE
zZT7TsotDWHnykMfUbm=XoK{K7$1+o6-?`@Jo|a0)d(%T}6{@bx9*{l?3IsHok<7Rg
zz4SD@EU1}k=NK!wU%3i3RPp9fu7B&st;tYlWdFtYo_Vt5T*NwZ>GaQ$eH$H?M}%#R
zC?%gsTXFvqt?_z41$oHGiQXXF3}ho_UE(waaFRRRlr}YcU`o>jkewL{PMo7D{JNJH
zN<+F-RB0HCM7kitisKU0%?Q+g;gx%IigI%KTiIqt*M3pZIF@Qjm||jJQ90J<(1ttn
z1>Ngu4C;txnA~No-A62X;alDdifwg)4vo~=H5nxy4IHGa9hqx(PovBCK8(i{;2+y-
z-+;;P^ll=5;9x-!%KN(0#gHGH)5uZp(lr?!L`R~8h2Ad^YqY}_|7egGI!L0z3YWdA
z^y>#eygzsn3@gRG5S{c+;L*J_h5_z&6vq*icDA|*heR$s5Yq#yTZ%f
zgQxd-l7;jn$Jo0Ril*Xm4VhnRRsF@)NV<`Sg~_|ctaHcObzL+395eHGz@u%6!^>G_
z!0@;uC`GkYt3P97_2*2@9{?Nz2h5tj9`C2V<+aXIhXelKuDRSSqNDYhZ*_8t2kV!9
zTABHkd^!-`!q6fZK~Y(y>hz3@*QXUsT^y8K4DS`cR
z_ltLkTr11=I@IDP60;o$csHht*X8JS?cn=b&Th2BrA`TS7fB>oe9uQYILIf)^Qs=5
z`cx-#LbMVLCIGzdnrV$$v>O#N6m$^
z9{?CKZ=060-OQ8qQ-%`sAl}E<=p;38<>EOdX|?a`yMVcn=L-MEZ;eHE$EJ~8$IaEp
zpJ#EnuH*951XK&CJb0Fgde?KEJ+Gc|dmXl?(cv<9p-~GWp;k)H7VAh#6=EW@Vc9Y^0N*%+=lU8CavBPcuh;e>2udR&LZy
z*G_50z_*+5AXHm5q@j-SOaGVd`PtP^<0MZB!0Ykq2L|gJFd|wTI_83UK3#08WJdtphvXL7bLODFUe15e2fYEwez-@Y0@ThAn>6}ly!8YG;
z=BK5>8znW{J1~EWjg1#wZ&MjELciAys^9%qi>Bj$?}N2yKzP`xCE*XMNR0b_rEcdm
z#8Dpj0f^pe|izG>L)<(zO*piGb*;o3=jHk-RtZ5zL5=gQx4v3W@%={X<2!q
zoB^^>P?s{7r0FT3bW}7F622^@Mn{4q5*8Nn1T9rljZ=2|Mpt2$(4X===oJ~DWt)Vj
z=WipcSDHGTvXi&@+d>o_QY+PmPI>gwRJle}*6=?7-V3&7}T0qFZ5RrmI9Ol8dwdB8Xku+eu$!Fo}(sR
z!w6wb)D|I2yz5+fM&a&=%#PI=+b`3nI+$hj!&(sd&
zGIlYC6lH&DpIO+MHr$wyQa3yS8Dqua_Wx|vTkAD@VNOeo!@RJev*sf}lZ{(gX{aHN
z-?M?+J&===#Bi?MfZX76l1eK4_tt18=EdIZ1V(h&V^|EGOV$WVl`ozp9)N
zELNusg~>0TkMdea*&Rhlgyhe+PT1ZpHQ~M)VU-=|7^)1q-4f~xN~-ixbc@elO3nx@
zmZz8c#ch%YaH{o@i@lav*&pf8gnrL=xW}2gKy;Z&aaG5b$&txQ>|gt}M6xm5(Gkx3
z?(%)CBFCM6O(@SboeWe4dFkt-3{44V&}UgJB&5u23T1c?2RemXiDz#9lVNb(vWs=3
z`e?t$xbDx+P~W~KeGgxfr))v_n7Sc989sl`+{s=o+%NT%(dP<|4o^P0(&U?NweSr|
z42sRuhAY#|%|5?rUhKM#pJ!}*+OqB+(N6DbM7-O2wJHmc-lyCL)9`p+5OD<9y70C?
z)!WQn4tf2)zCd0Jo*d}b%+hc`nj{iv_n4AjA4_<*;FF8-vRKx&A~L=lP?V4YjXk9k
z4=bVzz%H2S9kQmyiC0oL(s6Ul$S2HC+UjVkMJI3@ubW-#eT&w)bjw_oZB8bmX?r(#
zrMNKCixCcRB=%<>|C>t2IKW$3U!i4|?Qo$nlQUWfK!&VtMyfAn<K!-M;>i(_z$m
zsnSU7YPl?p{6?_ICC8Jq;K@R+L;Glpi$kt|5)Mh)*CcI>W(Z)e^GmHAY69&24O22D
z^}Bn;DYrKLC6$z7A~c*{C555LvYpdFl1LHMf&9pwOMxPKtJ46{10I;6q4ADHyYjh}
z0*ZW}tSvlJqOssyziLgtB&1k|@5FgpQ*G>6Nx`-*;9u>wxna0bEk40$MXwV)Ypx8Y
ztltRF-+Q`_tSCL%X-nE?B;48*#AqIZ8
zcTUZtk`5fsMJ^+`(mOJ?<7!O4)IFz$Pj7_MdaJ6h=JnhNx2
zAu(zhstMq}me$&omnX^_@VJx{7OALdq&UX!0uxMp#$6ZXA)aJ%`|+j_nx?9WL$GLz
zRGfu>maX;s`Uw}Gb#!!$JF52n)L1a%kS4?MgwLIlZYMl6FnwjLCc%TFZQa-(8d0JR
zq<~zaW*)z4^q}t(gxG)$|Xi;Wj5DmbmYbY1ICR)!*R?ZaIYcMuJ6E?
zoOn7yQu!M7@9BTS_ulf>-^YssO@BLjI%?gvqh+P%f>mL;*4T&Ik0xQUb~%Bj_`ko@
z5y5zzADTbZvE?^cAEh4P?5&HivJ^)bzx5APK9mz3cSLJ!{IfWtynSDSCkGf*J
zEx#>0?KzRF1vfW0m!G4Uxjj+Id=Pw21O67mYMO34NHVQHW}MJZaaPO}K*8LBYqD2m
z|KS9*_0-Oonj0g`omZpmAS(0A0dqyCS36MK%MU3kHy+@P{Vm)=(6_0nsVDFW4iS4u
zls#6^gON0t&6a!j_d$o#V}`~|bK9%R=j0{U7e?lFuO0{Wy_?tn{Qw;E*{y-!pEfo{
zG#+2KtZ60Rxm^s;Nmlp*L_UEVA36X65()+u8X6iF>Oa5};**@C079W-im8xOvay@E
zh=(K>imEowK~r%IU`e=!7VUg7{rkW04uS~eo+kWd)@t)nmHCQSXJ`UV5c|x7dT(0}
zD{-9$=J2(;x&(Y})>(;$2fU+jpU1OjpFs?mCnG{L{y0wF?a>XeRdrbSQiTW&O~TF(
zEtnkTf$yq;1ru1Bh0#6?;9`AYier5fg&(fa^%u4SX_ZUzNMCu(+*r5e-@IMk>ecGx
zYs{pG;5xVQ1k^P%Uo~Flh8(4hb*()rnP2wPrtB5bK!I{&-~T9UsIf+*Y9)0BAVPb!
zmwoRSosnE=qI(~Ao+*D;jVr<_sDb*X9%h}>t#MjnaQ7IXvWXRnp6yGG6@Y!MUNx&v
zkUwCnhy8#x}T^Je<%Gc=GqwTU1!5>auI_c-~1I@
ziFJXAHeLUn&ZJ8~JKP*HEeHB~)CsJ(PWp7(o=r+L6fDwig#kNStpHc3fE++h3hLHJvYG#oO+TVu6}{
zAQ5%32uTVQZ^sl9=OrB+OO32=D{Lxmos9S>`mr*d&Hpr`=ft?a;{OhTH?YPgW?6*U
zHT37+fg<9jw1S!^fQnC3LvgLtuJOng>f_H<8r;P_9npLRcVxSrD+-TEg)ivzgmCX9Z?
zxv>eSw+t}47EA_4oOfDabg2MxI8)t2TWew
z3L0N}PW(rN#!Xu)gi~$sR(XD>*>H|a`#@jVQx_ajg_vCqyIRhJTSq^4o+)PxKOiIs
zX4&wRscN<$v~<1tq3vUcMbr)#D_CFmZ%Z0J|*p?p@;8k>@4
zxZsfFiIye01-gV8=kJ$dpX4g{=yf(VN0qK56{{A-n5j1fEKuvS^$D<>pN)t=#KY`beQeivIClRKYXtH>f*FrBAG
zjR}nx^Dne;NuuC{ijbG=-#vl4x!0uu(Qsn--((X~i3L(y;qD_gSQWhr-+nj!(m@;6
z2m8~_&f@&%G%9+DTpm=rhr({l3izA6jTs+pc5zW(n%kWj;WaVv4!bsNMO56jjWKsr2CMuCD81$PEKmU`=+$+4tB<&(LFHcM-bmwK8U=?zlQPV(LRNjh<8+s+8=gcH$1t`=9c-TX#B#suEnXvu=zOba
z>!&v8eWyekGwaJ}WMOw+E7!s>Tf2^t-t&j<$TP|@q`^2ZS~60~I;<%1P~yiGC{?^f
z1Noog7Tuv|bc1zu?=i@{)UP4pFfM*-xQ8R@R+=IW<)uvQ+vU&r#qB4G7)l4eBKr#%
zrWsbpD6xwY@3{E<#cIC8=9N19XBy*Q?kjsnQhghaZH&DR(ea%prLTL;${&CqW(Klz
zDCdt(N_0Dv8b81rK^q$=mO|W4CGM2tn95gkF?0G8^mKL(~ou{2|
z-kULXSq7owr}nA)o|PW3BOI2v{)Q^@zse^2rMrZyIxp1EZ}LpaG3yS<)I1cI?Y_u<
zVKDbz>U5auNWiWcd2&ZA3ll4c>byqB5Yv*Jx)eTpH!gS|EAd*f5lY2xi<*2(20PJp
z&4j!*;&AeEuGik3HprAe8+8sGz5iiR?#%l8v?rARSzqYUKkLbVNHl1u|6b&Q0DP7g
zF%=VZm(RM=$Tl$dmwe}1^nds>5sEikxRm-`+)f|9!MFBwF&nb!^Idj9Za05~_K4{`
zC3U_()_moGVU}}1wREqs;YaVFd&9Q<_c?U!3FWo0zS^GACWrytsNVa;b!_2f0%ni-Pa4<&!k>3Wf;q5A#fyG9
zm`7u=LbSjuZ2uBwwr_6jky?!YNLahnZ>GHQ17MTAoEvmBG?pMUauc%Vk@LEUcn_o`NP#FSatnxU)_%NKTW2~08Ceb9e{Bk)xoZiBHqGd>?E+T?By1i
zhLbpIlEixndC}qTKk1Yf3!4AO{{ff~XASXpqm#f(C?e*$Ud64h=f%pAhH7ouL0GZM
zex1-Q|9z;x*Xl?ol2XOg&wK9I9{Ha!tOY=
zann|iCAaOz_Y@BQUaVzQBzSsS1ksY&BYJWvPQ-_G!PZ)Rvy))bl<$)&EI}&oczF**
zI(ScsXmAqw=Q2X4fKG`?B
z0-`}Znx)EXL+)fP!*t~cWT657*q~VMXSavzzJxczDTxZk#$--iSF9WeM{yUSPs06
z*&_Q#&(2~x6lEt{Z{@sN?Yj%zM>Qrut7GSrF)NJ-CXrbjoA!N(`8q42T+@C~b$*lk
zuWw9(rHsg-mqhwbyEl`|rjF0$wOr1HxUdYSzWwDmJEE}X5^!@5`v=4R*HQO1T=d|O
ze9`M*ZLQ;kzC5R7*{wl;fr#pLxJ8IWxEtaJfWq|nyKfFUrASpdp^ic0`io@0Pre&)
zoO@CNoASx&Tw(|Dw7`G*F~hYCLunp`_nFrx)a6tdZOM<*O*h@j@sg-(glwNh=7%p?
zROtaupjqs>QFHr&L+A&9?h5(%E?6AxtNfe+Mj{liFqOt-+Ee|=={j1Qkxl_rSk(RM
z!+&`o&r1o$>Vq8<-2v
zs2_t1R_2L(HBz=~2%V<2{)J^Qv%63;$ziThNxtDb}@*1@u1D4|TXX76_W34#Td+FCW+Unwz^-gaW
zY&e5j5Xa3BV>Dkq>AX%+#(bfJHctJoh;Bu%b4EL+)M4N!b?#v#*=#%$P{1!2NYx2y%qPSefbjCGCtvM)5Rd<
z!~^PnN~L@RL9csdu2XaKr!PgiMqD_S^0=w9@i}>L#((DcWGZ?CU!!6%@0ZDjJN}qi
z)a3a4n_zQ{QnIwXSy-!IhB~S9zX^O3Wi&`H6v%5Em!vbnj%87DRJ52GTBs3VZ-iMC%6DZ~XfA(Qq>T&MhvG)2da$
zji>@E#mJUt0-?^9q~wC~SYmbd7}HV!YBTAZ3{e1(ZGgW>c0L{-$d&VvgaP7>#7a2bUtG{XJ=&+8GX8Zah#+b$F`!yS5
zZfdtY`IA^ad6V?2p|jAaU+$pAL!PWw?2Wu1@8HNNs3Az!Voo~w+4{_bBZWH}uhawc
zZ?ht?!V&r-6gZPvAx=S>!c~RH+x`Qfr99ozAAly;!umUzGObNV!~<*3bKzRx9gd&z
zcc7V1y^@i50YonjU!K>Y3Kuxo(1oSYvmkxp0=Eys|5cvNoh)i7-J|0vT=FI>E%sP1
zJ6yx|FBbFBL-6CSHwY<~nU&QDmcVwl^F5`s34hmQW-UrQPqH`pid44r;gBez$wugh
z;s%}Y&EZMQE5-}7$J9YgCSHiLWq`>)OC}^;RP8ghcPC-Wf))7R>`7gG=*F4AyEOrp|fBvJr9Q&$tKEs%|w6(mQomPl{*$h<94`-V#mr
zK=``CUm=$hgMM>2Y|2#I`L1Go3}t{enY_L4FfA82ZH&-Q8AY-z+r!P*z!N9s(<^e*
z&hM(JotFoj3{1BH;&PM`y;@A7{DYzL9Yu|$XFl;_t5VYG8i
zJrJ~bDm>14hg<5X1ff@#^0V5=yI0mL&*#~(1f*n#ZedSS*WxH$VouLQ7qCWH6fxe~
z65Cv6VEis%A>$!MvT1`N_Zvif3Yp20Ni{pkl*Y<(Y+*Mc91JrjS6@h5Y0BioNF+MM
zoi9qod1P;~z_=yV41WFr3eFMmm-sR0z01wvk(t6ySZDf_azGi&96(jOL)DlZ+I#!c
z`I6z4t~#n+%aNNo5ma?OFzKB!0P#*AQsAcmTVF4+QSzb)NtTu0+#&6X76CWJsc2kv
zsZ-H35UdzX`Ew7)eIgz7y#Hn2Ds|tim|F0%uu+JL73Vu6Nj`bPA=9uvs;f+6z-OxRqCa?}kE)f@WJc!?8%;
zDpIcS+;J8ft8f(d6{g)UtzBeW*uZR-i`VOncfrUcrj1bj6<4lS6dG_))XOFv&Tqn164XpX91_gY1<&?Qda@l_FPn4K
zUGJl%6Yg;s1Gg}Z6fH_w=kLGjQD3P=PH1BeNxC2K*G5?I|3>`yhF#Qt&2e98RH0fe
zT+ZYbov-pq=C?s>Xt53aSk0*2j&enNjzVlqAj*}Q){A_m3F^1_0F1CA0SQ(qAWvC(
zQfdN1eieNEKc
z5y9BhQJx~HV77B!Jj-;iy*;r{77^@!H*pRVHQ|CVg4eF?n}Yu4n^Icz8d+O<@2Y9sUNK}1SU`X4%9=1+;mr&a
zlf$1G=TP*|G!Y)9VabgqE
zNla+|(VF^&)!u7`T{8Ru)E@M+gD>)LgWi~UdmKC?rP_)#`HyA>ww!p)eUoxv<<`+D)e>s$;mgH_df^nC#yCn6r7%nl`U6BQ14A9pf00h_Rh@rp?ee*@ro<$z1F~RF`-bKQMe1lh
zu0Hf5-_~JKPI&SnwRId-jgvE6yenPKi;-giWq1X-~eM2!-~`Q^r^GC75a*iO8-k
z@R#@;&`kn)e0=zSslVPlBX%oEN*rLL+7oyE%W}&cwcxtrj-7R@iYMCI6e=f+&G;){
z@wEsZFbDr7rbx{zdVSJG(K^b=<2oNki0+vUx3XGJDBV}z=Iu=m
zl;+Z_*ECK;4eA{Nub(82SZAZFuX$UYiG}Z3knEz`eIpADJO?g#iLACH2YAJ2%bRBk
zTLVx#iouilbTi%MTMJb^DCLa#BlVkBxf4n!w43HZ0bwk{Ry?$w{6VEJzD9c_pK7XK
zR<^l8#{LhW~G0h%Yn3Vwgb!R7uh%T_G!_F$pnGVJo*q;
zaWiGef0$nf2o6{7J}Pp(OQ1cIy&{7;rI=&$Vfk*0XIV3WS^5aZ8CX%7YJwfYTX*Vx4|txLE*?*2h+2rc&lLfAqi%1uqFpCiQm+OFXPdcPmr8R_Os
zGo&TvK#jV<*h1M#(>Ba)AWDhf;xVTxX`VPG
zrUAC8R|X>+JqW?b==FjF?Of}E7ybt&RMa&|9;b#%wLKnS!1yHG#y*sL(rXPHuHGtA
zb&ES^tC}+`IDHzGlk^eUE(iM9pm@m=B9uxKT~nE=np|GH)Ee6k1HpQu%5-M(jT(PC
z#LAka5qlpJCGS9gmMmvx^87%M$qC)b=&6F?jWK}s1Hhjy2dMm(2lpj|(-^67ZhY0M
z=23;XdF|H^W6$Di57NQM
z^JO>q{RIOW6~y`On)ahbPxqK>vcmdx&AY59jI^QH&X2r#!_IIo3<9*6>&m^~n$&`|
zv2B_$58|tR_N7$~Jy7%0`Y<8S
z$x^pXGvG^CU(tSph$w!<24l_Y~T
zq4&mvQwiHott#rO*?#fog)%$JjD?yf)^=eauiwm&jrNp>wa%JnX>4|O#tj2D0Rrj4
z2Rn_=PiL{`fy
zbgX!4Y{`zhCT&S;gm2NtdjU=Rcnr;;&Xv^VmVk)^w%?GfSlBYb^L0j;qXtj~E(*QV
zM5qQ!_xMB1-5b_3n?$Xg+&+Kh`UyE2TKl{>Xz1sbVi~=|Rl9o~YFqyAe<#E
zU$jwL(#WE<=w8ysLBFZR^9Ebym==+2hfk~DLKMP};Vx
z9-d)1DwHcsZIaUUM>go-jn2Vi)+GsIv0*AZ2z>yU1do}CMVvsE=QL1fsf~l2H@`zk
zm*%e83n~ZijH9$D`44Vloph)A9Wyh3_FFqaYplurG_9{g(657mobY9foy{;#vl)_f
z-yIXjDeH5(>APX*&ywKTp}qjsg;9#0NI5hB|2zQ-Q0fYCdw#h(qvdG>rI45uP+G_3
z7+cbcIs(Vk0dh2u?F?uNv&_n!M}g!K%oPxRdyERa3#${Z^XcAEMg?M{rP=Q$HFz3}
z^T<^ZtYBE1IDqvrB`n(aD6A;GHGeap#GE*BA|r1I2c>>)<}E-xxIi$dQGCno2k4is
zuyhehEq~BNlx?IF2FqbjEW6sZL&t0=o7RM96T$fInjk1*
zNyBIrnrmCel3s_r5<)~oTU5CT(j+aoYw$5F3}Fa8GXW==^0SbV3@zIyR)PWs=?!SDEl%+XBYpGF3%giO2G7e(T(NsL#0xGT-
zT%947yiCeakRG7GJaF223&bX{da&X;vAt~IvBc*&a^l?RH>Ybk(ZIJNwSEA|KLFoS
zHcN%ZZ&}=(q5T=AcexPYkh_zd#a4`A`#=I>6p?AnIT^1KvzB9hnWIFzY@bx!EVz-)
za9Oy~m%sgafnOHiphrsKIcwNdj(9^JmUazU3#!7IHrb8D@4n7*R!1E~WJ8+)7e$GX
zJo=u&qCayY^Voui%T2G$^#?osT0u-gbFxu;yS-5~&{^q%9-=*$!ljE_?lhGZzHifz
ziT;@j$<-!is#$P&u5A-d;qL>M_`D15)d3<;9(Cj&tc(SRKoe&5n?5!PiI^>WX_iO=
z`hONhLj!WJ(rR!3#uL}_c|>xSu-1Y@>MvN9lJF5|%hV^>L6!3Hr;+mvArY9V)uR3U
zDxv327%ukl^Tc(lrI0r@hKW)4I_hWpW9;)wmNQ#jO-1R06SG0;T
z&4q}FPdi$}?5|)k5tVjgA%V5GsW<%r?60fyjlk>bC@>p$r0V0+KEwG=h!4zD#>@CF
z&+4M6s!AC=YbPQ<(soLgS_1fkbO~693mTw{{9C_ks&WxB?pk58=NGD{J2-+Y
zk8hyx*DN!cM#kgKtY2J$p7w%8%d=aZv-zfV%9%d@uy`|>(PM4XTq6t<~KIsq0VHjIPLBE-VQoPu%*7@en;RkJvB`zuNYCLkkCLI35Ag?Nw(<=3-p>1-GT8
zam?|%jWP~s`_Roi@);tOjOz+zeqxiw(#x3yRB8I)Ty@)H$IQa;f}2_Y5yV|t$4=^G
zOd6P5j7L+>Ff?~C5&NgwJP4Q-5`IZiAi4!=YVm;sa|TyU2bS&utnl&&5oYPgP`-&J
zPwZszIY&q}JqXHZH`o;?>coOsh(!xdGe9etnEVT2Q
zY5Ad#!C7S-q@0$KI9IwZ#p$^3c*C7;DNuq4Aim8zi45ffy$eGOg-Zx_(?;yc+10rm
z#!_f`|Jk}KWfjH1!ix`CTa>r{D>~F<{P9r4cqFv?n;YD)vikFFm-$unagZM8qOHxG2ggSm%MH42Y^r~K%j3@7gCJxl~yrZaQyTuGplmU`l4>
zZ)`mQqlk6plKgx+HkM#4jtV_av@zjC+6etlq`i7TuYPy8AIs72QYvF7c${m*XKnFk
zPFbuP=^V7ft2!w`Rme%ZU0cLYJg(l3kw-SU0v-?@qMrK*;x)+DynjQ@
zyn!MXv2&4_lvoO8!6Ml>;7>b@dcjgphgpXy?uH9uk7NmsIpa$?3+hSEia?73yYlB6
zErUNB>h^dzQlZrFebq2^nqL(Bs`i1S?#PL$LkUZZp@}P<_^1{TGep`h3OHwT4KfSZ
zTpAuu+GfJJ#%OgU!qL-iMW9Ao6>nE9y->TSF-?rZ4F{2O=+H*%iSf=&9HK5KyT(lPJ8Kt3gplAy$&v^ap%u>^^o2TP)h*(K_(h(Mb$BogY
zaK8z8zjB0mjIxRpyFzSWDH|Bq%tu$@QsMvwbC2bEG0=Lj&JM3gn9Kduo@d
zfyl|PJ8vXpo$&o4`t?fxQI-S4(TycAd*ze|qrnX!7}n^x@UZtf5y8bq;#fXKv3LA&
zbl9-ueDKDd`n3D-(9kL*+^$9x*q6nzEV=n^H(I$e&ErL{g*9hV&;+U-k(TlD5-Bi$
zlp}m3T;9W97bPNR(>c0NE3PFG`Se#SN?UedGE#u6lqA}%hdj>^8Oj9^2sbtnfb9jLGI8>b58rVc&?on2x)HUC>
zdbfd`c-v^ZcEmtAe+5lEf=x}Cee<(jI)XovhT3%bn@gKZ2DXa#_bWRhH>htFSEG^&
z%yAI6z@>P&>u(Tu%b1MWZ0p$U#UYEZM4<~4Xx+m5UpwxGQ%}IQ$|!ka&ukh8_IunZ
z7jh65M*@*vMRqfvxpDO1F<2%%Tbscvr?R~nMtez*kYT0al#u;0pY3Z#2x*~-R~zP}
zDbj?2EpUN`P}q2_&~h>EB<0;$#Ba7v1_bBTLh6xyAZ2&$Tz_x0Z_|IhHd!4m+V1)1Lxtb=(g#yc0%FZNZ%WaoXb^q{+nwNH*2Z@C
zkEc7nq|dRj(pH8jNgU%j_Hu`W%#`;k=UJ~YdOT_;kBqVD2cc}8iweU}X;2~2r
zfyZKJ3bVa$-w$RyTWBxw){v0LFnAwkXv-Wn{1V{G#uJSUu_zHqQc(kH%PC=8Kg-)d
zUB-`nLmEk&;E+q6sNnE-YFY1M?%VY8+HQ_^+@Bp0Lj=gB3F5kdxx*;YYz@s{g{Rmz
z3%GNxCtu3pH~uJ$HEW#0YiJ?@(3;gz3-wg_{{exdRDtL66<5%0CAa6pkQ3j$FMjgC
zB&xBB1qg&H2kf^}cLRU710fHPw&$3Sxgx=3qTMnf2v-SBb*r|;f8)Q8Y}$Y0+E0Yp
z#__LrzF}$oR=-pkXubb7+DzBYW${K09X4!PUl^^nw|7lUNQ9jn=ILbGoEj>+67mO+
zn3^+zeK)hlSyXHvpFq6h;TAoHxizf1)oaUWo%DO%sU3ezK^8GkW1=r(SN$oUT@odJ
zH_}tfjS^NVf%>vjx4%f%T?VkV+_CvmykxK)1aJOD(%(BMwunIEi
zqnUK!+<{Z{Tid4UdC^*O^x&}S2>@v$6&~j_vGX!B$
zJNn)$h7J?HN#LPTOjpP&1{Z!pezZ8OD~f2Ae|Y_xhU$LXobykV5|vV@^i3LL=f;1S{^4aL!zJu}?K#
zxVvXNHHrye@8%?mx5V}WUFHJeo1+OOhJ4E|ab)n$tU-`$plfBx7}znSG^KX-B4HY4
zq|5DuV1+Q2%kl+7y2X!#<$BQ)n8})HE()mj=B2to#$Hf;kvlpxhtiz52F~3b!ci!G
z0G`mt#N*O1ESKCnCYwzdE~<`H3YJkNL!aB>)L85&?xN@n{gEQkedAp{nC$DJ2Zv7~
zS}FFF%sHn(E=<{b!TK1u#pK;EtuF}@!JLnx8(v1CYRvB}o->|v{J(Fh&W98#HT(JBK~8cbgSA-Mm(V1f
zKWTD)D-0Np86i0S486;XaQFjSd{ODXh2L7BzX$`Pbd#=@am+_T5N=nf7CAYa_^vu}
zK=8)wy$sF*J;x*9$jCEZA0vvX{nag47foHlFe#TUkP>Sqq>`hkCRBHA))Q+=@|b;3
zaTAEFQtDDvG}!`*JmG}B{1Xn{DD^bnXa;oaL%eQrcO#Tp$C<$+j?^YF<{Sgz{80o+
z0|~6!=q$p|PJ$Q-2tvrM^KfO<8uFjM-GowbHY(c;wF=W&mg=4VV~F@r$u}z4;WfVVx3XP4
z(mY2Vvn-R^oT(2$X6t*BTrt~$r7pAoP|<0^HRBSqcA?3EwzsrmO6S+TANWE^(Q9@i
zZIi`!30uYT9Kx{qu)Tk|yMvt#7I`$r>2Mg~N99NtM3;ewkg+a{BuI}$v5C??PY|;g|e|}Gxlm4O|
zL7dMT=QvVUdx&od(*l=ze5UokU}ic3S08@TO|=WdQg7Jd3mSv8%^XYdaJ2#{
z%xNI+;n0gQaUrX3u@W@BgPi5t^MYp3=ytThc)u)uEiTs|I=#sGcTaxmAF{QCOW((R
zC#F1h)h2r*SWIu*0x8_AAyToUWw_w;|cukc@w*3hWwkv9m@gg
z2gIl2YiE`J(B4ai_6UL3C4&c^%MTn?Z!^{|e>k`|AMY9KuFfLJGHp$Lcdep~K)2%=
zbqt3AbnhaY#sW`yTrR+O*11or9vkET_!q%{1knZmVdWtqAVdJ1|0QYre;V=0?Eh!P
G>i-2)YCZD+
literal 0
HcmV?d00001
diff --git a/src/images/glen.jpg b/src/images/glen.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..7ab1e6e4202a7fa1972d728e64de453a5cd9f8ea
GIT binary patch
literal 18283
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