diff --git a/src/themes/eos/layouts/index.html b/src/themes/eos/layouts/index.html index 633c7d8..3107be7 100644 --- a/src/themes/eos/layouts/index.html +++ b/src/themes/eos/layouts/index.html @@ -11,49 +11,28 @@
{{ partial "header" . }}
- 
-                                  ,g▄██▓▓▓▓▓▓▓▓████▄g
-                           ,≈g▄▄██▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓█
-                        ▄█▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓╥
-                       ▄▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓█
-                       █▓▓▓▓▓▓▓▓▓█▀▀▀▐┼¡!!┤▐▀▀███▓▓▓▓▓▓▓█g
-                       ▓▓▓▓▓█├¡¡!!!!!!!!!!!!!!!!!|▀▓▓▓▓▓▓▓█▄
-                       ▓▓▓▓▓|!!!!!!!!!!!!!!!!!!!!!!▀▓▓▓▓▓▓▓▓█▄
-                      ▐▓▓▓▓▌!!!!!!!!!!!!!!!!!!!!!!!¡▓▓▓▓▓▓▓▓▓▓█
-                      ▓▓▓▓▓▌!!!!!!!!!!!!!!!!!!!!!!!!▓▓▓▓▓▓▓▓▓▓▓g
-                     ▐▓▓▓▓▓@!!!!!!!!!!!!!!!!!!!!!!!!█▓▓▓▓▓▓▓▓▓▓▌
-                     ╘▓▓▓▓▓|!!!!!!!!!!!!!!⌠g▄▄▄▄┼!!!█▓▓▓▓▓▓▓▓▓▓▌
-                      ╘█▓▓▓█▓▓███▄!!!!▄██▓▓▓▓████▌¡!▀▓▓▓▓▓▓▓▓▓▓─
-                      ╓█▓▓▀▐▒▌▀▀██|ƒ┼▄▐▐▄╧╧╩▌≡âg!¡å▀▄▓▓▓▓▓▓▓▓▓▌
-                      █▓▓▓█▀   █╓▄┼¡├█!▀≈p╓╓▄╓,g▌!!▀┤▐▓▓▓▓▓▓▓█
-                      ▌▀▓▓█åååà┤g╪!!!▐▄|!!!!!!!!!|g╪!!|▀▀▌├⌠█
-                       ²▀█ææææ¥▀┼!!!!!¡å╪╪╪╪╪╪╪╪Ñ┼!!!!!g▀▄¡!▀
-                        ▌!!!!!▌|!!!!!!!!!!!!!!!!!!!!!!!▐!¡╕!▀
-                       ▌!!!!!╘g!!!!!!!!⌡!!!!!!!!!!!!!!!!~┤gÑ
-                       ▀!!;ƒg▄█g|;|ƒg▄▀██▌▌▄▄ƒ¡!!!!!!!!!¡▌
-                       ▄▌██████████████████████▌▄g!!!!!!!▀
-                     g█████████▀▀▀┤▐▀▀▀▀▀▒▀▀▀▀▀██▒▌!!!!!!¡▌
-                     ╘╧≡▒▄≡▄▄▄▄▄▄gææ¥╪╪╪╪╪╪Ñåå┤j███!!!!!!!▀
-                           ▌!▐███|╪≡gggg4æ!!!!!███Ñ!!!!!!!¡▌
-                           ▌!!███¡!!!!!!!!!!!!g███~!!!!!!!!▀
-                           ▌!!▀██H!!!!!!!!!!;▄████æ!!!!!!!!▐
-                          ¬@!!▐███g!!!!!!|g▄██████╪!!!!!!!!J▌#╖
-                          ▄¡!!!███▒███████████████¡!!!!!!!g≡╧ ╘ƒ
-                         ▀▐ƒ!!!|▀███████████████▀|!!!!!╖≡╩     ▌
-                      ╓▄█─ ²≡¿!!!¡▐▀▀██████▀▀▀à¡!!!!ƒ≡Ñ       '█p
-                    ▄█▓▓▓▌   ┴╧≡ƒ!!!!!!!!!!!!!!!⌠â#╩         Æ█▓▓█▄╓
-                =0▐▓▓▓▓▓▓▓       ²#g¡!!!!!!|g¥╧╩          ╖#▐█▓▓▓▓▓▓█▄
-             Æ╧─  █▓▓▓▓▓▓▓█      ▄▌╥▀ƒ!!g╧╩▄g           =╧ g▓▓▓▓▓▓▓▓▓▓▓▄
-          ¿≡`    █▓▓▓▓▓▓▓▓▓▌   ╓▀▀██▀█▌▌█▀▀█▒█▌       g╩ ,█▓▓▓▓▓▓▓█▀▀²``²╩═=,
-        ²#      ▐▓▓▓▓▓▓▓▓▓▓▓▄ ╥╧  ╚█▒▒▒▒▒▒█╧   ▀⌐   ╥▀  ▄▓▓▓▓▓▓▓▀─           ╧≡
-       g`       ▓▓▓▓▓▓▓▓▓▓▓▓▓▄╛    ²█▒▒▒▒▒▌     ╘╧≈#  ▄▓▓▓▓▓▓▓█                ²g
-      ▀    a╓  ▐▓▓▓▓▓▓▓▓▓▓▓▓▓▓w     ▐█▒▒▒█          ▄▓▓▓▓▓▓▓▓▀                   ▀µ
-    ╓Ñ       ─╧▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓µ   ,█▒▒▒▒█        ▄▓▓▓▓▓▓▓▓▓█                     ²g
-   ╥╩          ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓g  █▒▒▒▒▒▒▌     ▄▓▓▓▓▓▓▓▓▓▓▓─                      ╘g
-  ╓╩           ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▄]▒▒▒▒▒▒▒█   ▄▓▓▓▓▓▓▓▓▓▓▓▓▓                        ╘g
-  ▌           ▐▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▒▒▒▒▒▒▒▒▌▄▓▓▓▓▓▓▓▓▓▓▓▓▓▓█                         ²Q
- ▌            ▐▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓█▒▒▒▒██▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▌                          ▐⌐
-▐             ▐▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓██▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓█                           ▀
+ 
+
+dP   dP   dP          dP                                       dP
+88   88   88          88                                       88
+88  .8P  .8P .d8888b. 88 .d8888b. .d8888b. 88d8b.d8b. .d8888b. 88
+88  d8'  d8' 88ooood8 88 88'  `"" 88'  `88 88'`88'`88 88ooood8 dP
+88.d8P8.d8P  88.  ... 88 88.  ... 88.  .88 88  88  88 88.  ...
+8888' Y88'   `88888P' dP `88888P' `88888P' dP  dP  dP `88888P' oo
+
+
+
+

Hi, I'm Joshua Seigler. I'm a:

+

Web developer

+

I like to make websites. Since 2013 I work at XPO Logistics. Front-end web technology like CSS and SVG comes most easily, but I'm also learning to solve problems with Javascript, JS libraries, and C Sharp. See some of my personal projects on GitHub.

+

Bostonian

+

I've lived in Boston since the end of 2013. Boston has great public transportation, a ton of cool companies, and a ton of dining and entertainment.

+

Cryptocurrency enthusiast

+

After learning about Bitcoin and Dash, I'm certain that they will play a large role in the future. You can send me Bitcoin if you want.

+

Boardgamer

+

I play boardgames at least once a week. You can see my game collection if you like. My favorite games tend towards low-chance high-strategy, with mostly indirect competition and a large problem space.

+

Artist

+

I make ink sketches sometimes, for fun and to improve my skill.

{{ partial "footer" . }}
diff --git a/src/themes/eos/layouts/partials/footer.html b/src/themes/eos/layouts/partials/footer.html index ec310cc..59cbf7d 100644 --- a/src/themes/eos/layouts/partials/footer.html +++ b/src/themes/eos/layouts/partials/footer.html @@ -1,3 +1,3 @@ diff --git a/src/themes/eos/static/css/bundle.css b/src/themes/eos/static/css/bundle.css index ff79d27..1293890 100644 --- a/src/themes/eos/static/css/bundle.css +++ b/src/themes/eos/static/css/bundle.css @@ -12,15 +12,33 @@ html { box-sizing: border-box; height: 100%; overflow: hidden; - color: #DA0; + color: #DDD; + text-shadow: 0 0 0.1em rgba(221, 221, 221, 0.5); } a { color: inherit; } a:hover { - background-color: #DA0; + background-color: #DDD; color: #20282a; } +::-moz-selection { + background-color: #DDD; + color: #20282a; +} +::selection { + background-color: #DDD; + color: #20282a; +} +h1, +h2, +h3, +h4 { + font-size: inherit; + font-weight: bold; + border-bottom: 0.1em dotted; + margin-top: 1em; +} /*layout*/ html { font-size: calc(2em); @@ -62,11 +80,28 @@ body { .wrapper { transform: rotateZ(1.3deg) rotateX(-8.8deg) rotateY(-9.3deg) translate3d(-14.9vh, 5.3vh, -27.4vh); transform-origin: top right; - color: #DA0; padding: 1vh; width: 100vh; height: 75vh; } } +.wrapper { + display: -ms-flexbox; + display: flex; + -ms-flex-direction: column; + flex-direction: column; + -ms-flex-pack: start; + justify-content: flex-start; + -ms-flex-line-pack: stretch; + align-content: stretch; +} +main { + margin: 1em 0; + -ms-flex-positive: 1; + flex-grow: 1; +} +footer { + padding-top: 1em; +} /*# sourceMappingURL=bundle.css.map */ diff --git a/src/themes/eos/static/css/bundle.css.map b/src/themes/eos/static/css/bundle.css.map index c0f6f68..db14d26 100644 --- a/src/themes/eos/static/css/bundle.css.map +++ b/src/themes/eos/static/css/bundle.css.map @@ -1 +1 @@ -{"version":3,"sources":["bundle.css","basics.less","layout.less"],"names":[],"mappings":"AAAA,wBAAwB;ACCxB;;;EACE,oBAAA;EACA,UAAA;EACA,WAAA;EACA,6BAAA;EACA,qBAAA;CDGD;ACDD;EACE,uBAAA;EACA,aAAA;EACA,iBAAA;EACA,YAAA;CDGD;ACDD;EACE,eAAA;CDGD;ACFC;EACE,uBAAA;EACA,eAAA;CDIH;AACD,UAAU;AEtBV;EACE,qBAAA;EACA,aAAA;CFwBD;AErBD;EACE,wEAAA;EACA,yCAAA;EACA,6BAAA;EACA,uCAAA;EACA,aAAA;EACA,uBAAA;EACA,kBAAA;EACA,8BAAA;CFuBD;AErBD;EACE,mBAAA;EACA,kGAAA;EACA,4BAAA;EACA,aAAA;EACA,aAAA;EACA,aAAA;EACA,mBAAA;EACA,eAAA;CFuBD;AErBD;EACE;IACE,qBAAA;GFuBD;EErBD;IACE,wEAAA;IACA,0CAAA;IACA,6BAAA;IACA,uCAAA;IACA,uBAAA;IACA,kBAAA;IACA,4CAAA;GFuBD;EErBD;IACE,kGAAA;IACA,4BAAA;IACA,YAAA;IACA,aAAA;IACA,aAAA;IACA,aAAA;GFuBD;CACF","file":"bundle.css","sourcesContent":["/* micro styles reset */\n*,\n:before,\n:after {\n box-sizing: inherit;\n margin: 0;\n padding: 0;\n transform-style: preserve-3d;\n font-family: inherit;\n}\nhtml {\n box-sizing: border-box;\n height: 100%;\n overflow: hidden;\n color: #DA0;\n}\na {\n color: inherit;\n}\na:hover {\n background-color: #DA0;\n color: #20282a;\n}\n/*layout*/\nhtml {\n font-size: calc(2em);\n height: 100%;\n}\nbody {\n background-image: url(../img/workstation.jpg), url(../img/gradient.jpg);\n background-size: 100% auto, auto 133.3vh;\n background-position: 100% 0%;\n background-repeat: no-repeat, repeat-x;\n height: 100%;\n font-family: monospace;\n perspective: 68vw;\n perspective-origin: 69vw 45vw;\n}\n.wrapper {\n position: relative;\n transform: rotateZ(1.3deg) rotateX(-8.8deg) rotateY(-9.3deg) translate3d(-14.9vw, 5.3vw, -27.4vw);\n transform-origin: top right;\n padding: 1vw;\n height: 75vw;\n width: 100vw;\n margin: 0 0 0 auto;\n overflow: auto;\n}\n@media (min-width: 100vh) {\n html {\n font-size: calc(2em);\n }\n body {\n background-image: url(../img/workstation.jpg), url(../img/gradient.jpg);\n background-size: auto 133.3vh, auto 133vh;\n background-position: 100% 0%;\n background-repeat: no-repeat, repeat-x;\n font-family: monospace;\n perspective: 68vh;\n perspective-origin: calc(100vw - 31vh) 45vh;\n }\n .wrapper {\n transform: rotateZ(1.3deg) rotateX(-8.8deg) rotateY(-9.3deg) translate3d(-14.9vh, 5.3vh, -27.4vh);\n transform-origin: top right;\n color: #DA0;\n padding: 1vh;\n width: 100vh;\n height: 75vh;\n }\n}\n","/* micro styles reset */\n*, :before, :after {\n box-sizing: inherit;\n margin: 0;\n padding: 0;\n transform-style: preserve-3d;\n font-family: inherit;\n}\nhtml {\n box-sizing: border-box;\n height: 100%;\n overflow: hidden;\n color: #DA0;\n}\na {\n color: inherit;\n &:hover {\n background-color: #DA0;\n color: #20282a;\n }\n}\n","/*layout*/\nhtml {\n font-size: calc(0.7em + 1.3vw);\n height: 100%;\n}\n\nbody {\n background-image: url(../img/workstation.jpg), url(../img/gradient.jpg);\n background-size: 100% auto, auto 133.3vh;\n background-position: 100% 0%;\n background-repeat: no-repeat, repeat-x;\n height: 100%;\n font-family: monospace;\n perspective: 68vw;\n perspective-origin: 69vw 45vw;\n}\n.wrapper {\n position: relative;\n transform: rotateZ(1.3deg) rotateX(-8.8deg) rotateY(-9.3deg) translate3d(-14.9vw, 5.3vw, -27.4vw);\n transform-origin: top right;\n padding: 1vw;\n height: 75vw;\n width: 100vw;\n margin: 0 0 0 auto;\n overflow: auto;\n}\n@media (min-width: 100vh) {\n html {\n font-size: calc(0.7em + 1.3vh);\n }\n body {\n background-image: url(../img/workstation.jpg), url(../img/gradient.jpg);\n background-size: auto 133.3vh, auto 133vh;\n background-position: 100% 0%;\n background-repeat: no-repeat, repeat-x;\n font-family: monospace;\n perspective: 68vh;\n perspective-origin: ~'calc(100vw - 31vh) 45vh';\n }\n .wrapper {\n transform: rotateZ(1.3deg) rotateX(-8.8deg) rotateY(-9.3deg) translate3d(-14.9vh, 5.3vh, -27.4vh);\n transform-origin: top right;\n color: #DA0;\n padding: 1vh;\n width: 100vh;\n height: 75vh;\n }\n}\n"]} \ No newline at end of file +{"version":3,"sources":["bundle.css","basics.less","layout.less"],"names":[],"mappings":"AAAA,wBAAwB;ACCxB;;;EACE,oBAAA;EACA,UAAA;EACA,WAAA;EACA,6BAAA;EACA,qBAAA;CDGD;ACGD;EACE,uBAAA;EACA,aAAA;EACA,iBAAA;EACA,YAAA;EACA,gDAAA;CDDD;ACGD;EACE,eAAA;CDDD;ACEC;EACE,uBAAA;EACA,eAAA;CDAH;ACGD;EACE,uBAAA;EACA,eAAA;CDDD;ACDD;EACE,uBAAA;EACA,eAAA;CDDD;ACGD;;;;EACE,mBAAA;EACA,kBAAA;EACA,4BAAA;EACA,gBAAA;CDED;AACD,UAAU;AEpCV;EACE,qBAAA;EACA,aAAA;CFsCD;AEnCD;EACE,wEAAA;EACA,yCAAA;EACA,6BAAA;EACA,uCAAA;EACA,aAAA;EACA,uBAAA;EACA,kBAAA;EACA,8BAAA;CFqCD;AEnCD;EACE,mBAAA;EACA,kGAAA;EACA,4BAAA;EACA,aAAA;EACA,aAAA;EACA,aAAA;EACA,mBAAA;EACA,eAAA;CFqCD;AEnCD;EACE;IACE,qBAAA;GFqCD;EEnCD;IACE,wEAAA;IACA,0CAAA;IACA,6BAAA;IACA,uCAAA;IACA,uBAAA;IACA,kBAAA;IACA,4CAAA;GFqCD;EEnCD;IACE,kGAAA;IACA,4BAAA;IACA,aAAA;IACA,aAAA;IACA,aAAA;GFqCD;CACF;AElCD;EACE,qBAAA;EAAA,cAAA;EACA,2BAAA;EAAA,uBAAA;EACA,qBAAA;EAAA,4BAAA;EACA,4BAAA;EAAA,uBAAA;CFoCD;AEjCD;EACE,cAAA;EACA,qBAAA;EAAA,aAAA;CFmCD;AEhCD;EACE,iBAAA;CFkCD","file":"bundle.css","sourcesContent":["/* micro styles reset */\n*,\n:before,\n:after {\n box-sizing: inherit;\n margin: 0;\n padding: 0;\n transform-style: preserve-3d;\n font-family: inherit;\n}\nhtml {\n box-sizing: border-box;\n height: 100%;\n overflow: hidden;\n color: #DDD;\n text-shadow: 0 0 0.1em rgba(221, 221, 221, 0.5);\n}\na {\n color: inherit;\n}\na:hover {\n background-color: #DDD;\n color: #20282a;\n}\n::selection {\n background-color: #DDD;\n color: #20282a;\n}\nh1,\nh2,\nh3,\nh4 {\n font-size: inherit;\n font-weight: bold;\n border-bottom: 0.1em dotted;\n margin-top: 1em;\n}\n/*layout*/\nhtml {\n font-size: calc(2em);\n height: 100%;\n}\nbody {\n background-image: url(../img/workstation.jpg), url(../img/gradient.jpg);\n background-size: 100% auto, auto 133.3vh;\n background-position: 100% 0%;\n background-repeat: no-repeat, repeat-x;\n height: 100%;\n font-family: monospace;\n perspective: 68vw;\n perspective-origin: 69vw 45vw;\n}\n.wrapper {\n position: relative;\n transform: rotateZ(1.3deg) rotateX(-8.8deg) rotateY(-9.3deg) translate3d(-14.9vw, 5.3vw, -27.4vw);\n transform-origin: top right;\n padding: 1vw;\n height: 75vw;\n width: 100vw;\n margin: 0 0 0 auto;\n overflow: auto;\n}\n@media (min-width: 100vh) {\n html {\n font-size: calc(2em);\n }\n body {\n background-image: url(../img/workstation.jpg), url(../img/gradient.jpg);\n background-size: auto 133.3vh, auto 133vh;\n background-position: 100% 0%;\n background-repeat: no-repeat, repeat-x;\n font-family: monospace;\n perspective: 68vh;\n perspective-origin: calc(100vw - 31vh) 45vh;\n }\n .wrapper {\n transform: rotateZ(1.3deg) rotateX(-8.8deg) rotateY(-9.3deg) translate3d(-14.9vh, 5.3vh, -27.4vh);\n transform-origin: top right;\n padding: 1vh;\n width: 100vh;\n height: 75vh;\n }\n}\n.wrapper {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-content: stretch;\n}\nmain {\n margin: 1em 0;\n flex-grow: 1;\n}\nfooter {\n padding-top: 1em;\n}\n","/* micro styles reset */\n*, :before, :after {\n box-sizing: inherit;\n margin: 0;\n padding: 0;\n transform-style: preserve-3d;\n font-family: inherit;\n}\n\n//@color-text: #DA0;\n@color-text: #DDD;\n\nhtml {\n box-sizing: border-box;\n height: 100%;\n overflow: hidden;\n color: @color-text;\n text-shadow: 0 0 0.1em fade(@color-text, 50%);\n}\na {\n color: inherit;\n &:hover {\n background-color: @color-text;\n color: #20282a;\n }\n}\n::selection {\n background-color: @color-text;\n color: #20282a;\n}\nh1, h2, h3, h4 {\n font-size: inherit;\n font-weight: bold;\n border-bottom: 0.1em dotted;\n margin-top: 1em;\n}\n","/*layout*/\nhtml {\n font-size: calc(0.7em + 1.3vw);\n height: 100%;\n}\n\nbody {\n background-image: url(../img/workstation.jpg), url(../img/gradient.jpg);\n background-size: 100% auto, auto 133.3vh;\n background-position: 100% 0%;\n background-repeat: no-repeat, repeat-x;\n height: 100%;\n font-family: monospace;\n perspective: 68vw;\n perspective-origin: 69vw 45vw;\n}\n.wrapper {\n position: relative;\n transform: rotateZ(1.3deg) rotateX(-8.8deg) rotateY(-9.3deg) translate3d(-14.9vw, 5.3vw, -27.4vw);\n transform-origin: top right;\n padding: 1vw;\n height: 75vw;\n width: 100vw;\n margin: 0 0 0 auto;\n overflow: auto;\n}\n@media (min-width: 100vh) {\n html {\n font-size: calc(0.7em + 1.3vh);\n }\n body {\n background-image: url(../img/workstation.jpg), url(../img/gradient.jpg);\n background-size: auto 133.3vh, auto 133vh;\n background-position: 100% 0%;\n background-repeat: no-repeat, repeat-x;\n font-family: monospace;\n perspective: 68vh;\n perspective-origin: ~'calc(100vw - 31vh) 45vh';\n }\n .wrapper {\n transform: rotateZ(1.3deg) rotateX(-8.8deg) rotateY(-9.3deg) translate3d(-14.9vh, 5.3vh, -27.4vh);\n transform-origin: top right;\n padding: 1vh;\n width: 100vh;\n height: 75vh;\n }\n}\n\n.wrapper {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-content: stretch;\n}\n\nmain {\n margin: 1em 0;\n flex-grow: 1;\n}\n\nfooter {\n padding-top: 1em;\n}\n"]} \ No newline at end of file diff --git a/src/themes/eos/styles/basics.less b/src/themes/eos/styles/basics.less index 7cd850f..e179c5d 100644 --- a/src/themes/eos/styles/basics.less +++ b/src/themes/eos/styles/basics.less @@ -6,16 +6,31 @@ transform-style: preserve-3d; font-family: inherit; } + +//@color-text: #DA0; +@color-text: #DDD; + html { box-sizing: border-box; height: 100%; overflow: hidden; - color: #DA0; + color: @color-text; + text-shadow: 0 0 0.1em fade(@color-text, 50%); } a { color: inherit; &:hover { - background-color: #DA0; + background-color: @color-text; color: #20282a; } } +::selection { + background-color: @color-text; + color: #20282a; +} +h1, h2, h3, h4 { + font-size: inherit; + font-weight: bold; + border-bottom: 0.1em dotted; + margin-top: 1em; +} diff --git a/src/themes/eos/styles/layout.less b/src/themes/eos/styles/layout.less index 529049b..deb3851 100644 --- a/src/themes/eos/styles/layout.less +++ b/src/themes/eos/styles/layout.less @@ -40,9 +40,24 @@ body { .wrapper { transform: rotateZ(1.3deg) rotateX(-8.8deg) rotateY(-9.3deg) translate3d(-14.9vh, 5.3vh, -27.4vh); transform-origin: top right; - color: #DA0; padding: 1vh; width: 100vh; height: 75vh; } } + +.wrapper { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-content: stretch; +} + +main { + margin: 1em 0; + flex-grow: 1; +} + +footer { + padding-top: 1em; +}