jekyll-theme-doodle 4.4.0 → 4.4.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d0aa98cdd9a21455afb126310e8b7ffa24e36a1ac8b9aea13e11ab88dee2a2be
-  data.tar.gz: 0c58f2b018ec3124c7a83c3bff9d055b9c735b8746a2cc6a84b70e3348c4b686
+  metadata.gz: f1f3c87041d297cd5fc097bbc180effd6e18ad139793e7677f0174e99e2fa3f6
+  data.tar.gz: b1918e700541cdb3b1db47b5fa9193a36c9b1c7a39a846a67b9ccf302e45a73f
 SHA512:
-  metadata.gz: 6beee78550df494f6a957cc63d8d162aa26132e9f51a2985c4c6b6f5ec0dad4b22cc15ae5b55134ca7a9a07e1f81e32fe388ba0f52e3f4268c5ed065783e0350
-  data.tar.gz: 3482573771fe05093f1c3b67b1fbb6be925cfaddea5f7c2e6ab57d9c4e8abd8581ec88429bfb007cd0e631ebce72d9434a9fdef1eb079725f7878d29db2bed13
+  metadata.gz: fabe0db10ffdf3f7315ba4c273ca367ad847398a29c61dd04083dbc328ddefd15032d69980bfd00fd017f422c5c8075fa57961ae461ce6b1418102e9ab43af03
+  data.tar.gz: 3e519ed98ddcdb9b7110893ca9e35b2d436fc1a5ce4a6ddb924a2acbdc692d9b394b3b4de1cfabe3fc418e56ec6dc6d6663f75d4372e65e049b54353966cc847

data/README.md

@@ -57,14 +57,20 @@ theme: jekyll-theme-doodle
 
 And then execute:
 
-    $ bundle
+```bash
+$ bundle
+```
 
 Or install it yourself as:
 
-    $ gem install jekyll-theme-doodle
+```bash
+$ gem install jekyll-theme-doodle
+```
 
 ## Usage
 
+### Pin a post
+
 To pin a post add `status: pinned` to the front matter of the post markdown file e.g
 
 ```yaml
@@ -76,10 +82,19 @@ status: pinned
 <!-- post content -->
 ```
 
+### Add tagline in header
+
+To add a tagline/description below the site title, add a tagline property to \_config.yml
+
+```yaml
+tagline: "Your awesome tagline"
+```
+
 TODO: Write usage instructions here. Describe your available layouts, includes, sass and/or assets.
 
 ### TODO
 
+- [ ] Analytics support
 - [ ] Add support for comments
 - [ ] Search functionality
 

data/_sass/minima/_base.scss

@@ -21,295 +21,7 @@ figure {
   padding: 0;
   box-sizing: border-box;
 }
-.dark-yellow {
-  --md-sys-color-primary: rgb(219 198 110);
-  --md-sys-color-surface-tint: rgb(219 198 110);
-  --md-sys-color-on-primary: rgb(58 48 0);
-  --md-sys-color-primary-container: rgb(83 70 0);
-  --md-sys-color-on-primary-container: rgb(248 226 135);
-  --md-sys-color-secondary: rgb(209 198 161);
-  --md-sys-color-on-secondary: rgb(54 48 22);
-  --md-sys-color-secondary-container: rgb(78 71 42);
-  --md-sys-color-on-secondary-container: rgb(238 226 188);
-  --md-sys-color-tertiary: rgb(169 208 179);
-  --md-sys-color-on-tertiary: rgb(20 55 35);
-  --md-sys-color-tertiary-container: rgb(44 78 56);
-  --md-sys-color-on-tertiary-container: rgb(197 236 206);
-  --md-sys-color-error: rgb(255 180 171);
-  --md-sys-color-on-error: rgb(105 0 5);
-  --md-sys-color-error-container: rgb(147 0 10);
-  --md-sys-color-on-error-container: rgb(255 218 214);
-  --md-sys-color-background: rgb(21 19 11);
-  --md-sys-color-on-background: rgb(232 226 212);
-  --md-sys-color-surface: rgb(21 19 11);
-  --md-sys-color-on-surface: rgb(232 226 212);
-  --md-sys-color-surface-variant: rgb(75 71 57);
-  --md-sys-color-on-surface-variant: rgb(205 198 180);
-  --md-sys-color-outline: #969080;
-  --outline-filter: brightness(0) saturate(100%) invert(64%) sepia(15%)
-    saturate(306%) hue-rotate(6deg) brightness(87%) contrast(85%);
-  --md-sys-color-outline-variant: rgb(75 71 57);
-  --md-sys-color-shadow: rgb(0 0 0);
-  --md-sys-color-scrim: rgb(0 0 0);
-  --md-sys-color-inverse-surface: rgb(232 226 212);
-  --md-sys-color-inverse-on-surface: rgb(51 48 39);
-  --md-sys-color-inverse-primary: rgb(109 94 15);
-  --md-sys-color-primary-fixed: rgb(248 226 135);
-  --md-sys-color-on-primary-fixed: rgb(34 27 0);
-  --md-sys-color-primary-fixed-dim: rgb(219 198 110);
-  --md-sys-color-on-primary-fixed-variant: rgb(83 70 0);
-  --md-sys-color-secondary-fixed: rgb(238 226 188);
-  --md-sys-color-on-secondary-fixed: rgb(33 27 4);
-  --md-sys-color-secondary-fixed-dim: rgb(209 198 161);
-  --md-sys-color-on-secondary-fixed-variant: rgb(78 71 42);
-  --md-sys-color-tertiary-fixed: rgb(197 236 206);
-  --md-sys-color-on-tertiary-fixed: rgb(0 33 15);
-  --md-sys-color-tertiary-fixed-dim: rgb(169 208 179);
-  --md-sys-color-on-tertiary-fixed-variant: rgb(44 78 56);
-  --md-sys-color-surface-dim: rgb(21 19 11);
-  --md-sys-color-surface-bright: rgb(60 57 48);
-  --md-sys-color-surface-container-lowest: rgb(16 14 7);
-  --md-sys-color-surface-container-low: rgb(30 27 19);
-  --md-sys-color-surface-container: rgb(34 32 23);
-  --md-sys-color-surface-container-high: rgb(45 42 33);
-  --md-sys-color-surface-container-highest: rgb(56 53 43);
-}
-.dark-blue {
-  --md-sys-color-primary: rgb(170 199 255);
-  --md-sys-color-surface-tint: rgb(170 199 255);
-  --md-sys-color-on-primary: rgb(10 48 95);
-  --md-sys-color-primary-container: rgb(40 71 119);
-  --md-sys-color-on-primary-container: rgb(214 227 255);
-  --md-sys-color-secondary: rgb(190 198 220);
-  --md-sys-color-on-secondary: rgb(40 49 65);
-  --md-sys-color-secondary-container: rgb(62 71 89);
-  --md-sys-color-on-secondary-container: rgb(218 226 249);
-  --md-sys-color-tertiary: rgb(221 188 224);
-  --md-sys-color-on-tertiary: rgb(63 40 68);
-  --md-sys-color-tertiary-container: rgb(87 62 92);
-  --md-sys-color-on-tertiary-container: rgb(250 216 253);
-  --md-sys-color-error: rgb(255 180 171);
-  --md-sys-color-on-error: rgb(105 0 5);
-  --md-sys-color-error-container: rgb(147 0 10);
-  --md-sys-color-on-error-container: rgb(255 218 214);
-  --md-sys-color-background: rgb(17 19 24);
-  --md-sys-color-on-background: rgb(226 226 233);
-  --md-sys-color-surface: rgb(17 19 24);
-  --md-sys-color-on-surface: rgb(226 226 233);
-  --md-sys-color-surface-variant: rgb(68 71 78);
-  --md-sys-color-on-surface-variant: rgb(196 198 208);
-  --md-sys-color-outline: #8e9099;
-  --outline-filter: brightness(0) saturate(100%) invert(61%) sepia(5%)
-    saturate(424%) hue-rotate(192deg) brightness(92%) contrast(92%);
-  --md-sys-color-outline-variant: #44474e;
-  --md-sys-color-shadow: rgb(0 0 0);
-  --md-sys-color-scrim: rgb(0 0 0);
-  --md-sys-color-inverse-surface: rgb(226 226 233);
-  --md-sys-color-inverse-on-surface: rgb(46 48 54);
-  --md-sys-color-inverse-primary: rgb(65 95 145);
-  --md-sys-color-primary-fixed: rgb(214 227 255);
-  --md-sys-color-on-primary-fixed: rgb(0 27 62);
-  --md-sys-color-primary-fixed-dim: rgb(170 199 255);
-  --md-sys-color-on-primary-fixed-variant: rgb(40 71 119);
-  --md-sys-color-secondary-fixed: rgb(218 226 249);
-  --md-sys-color-on-secondary-fixed: rgb(19 28 43);
-  --md-sys-color-secondary-fixed-dim: rgb(190 198 220);
-  --md-sys-color-on-secondary-fixed-variant: rgb(62 71 89);
-  --md-sys-color-tertiary-fixed: rgb(250 216 253);
-  --md-sys-color-on-tertiary-fixed: rgb(40 19 46);
-  --md-sys-color-tertiary-fixed-dim: rgb(221 188 224);
-  --md-sys-color-on-tertiary-fixed-variant: rgb(87 62 92);
-  --md-sys-color-surface-dim: rgb(17 19 24);
-  --md-sys-color-surface-bright: rgb(55 57 62);
-  --md-sys-color-surface-container-lowest: rgb(12 14 19);
-  --md-sys-color-surface-container-low: rgb(25 28 32);
-  --md-sys-color-surface-container: rgb(29 32 36);
-  --md-sys-color-surface-container-high: rgb(40 42 47);
-  --md-sys-color-surface-container-highest: rgb(51 53 58);
-}
-.dark-cyan {
-  --md-sys-color-primary: rgb(129 213 205);
-  --md-sys-color-surface-tint: rgb(129 213 205);
-  --md-sys-color-on-primary: rgb(0 55 52);
-  --md-sys-color-primary-container: rgb(0 80 75);
-  --md-sys-color-on-primary-container: rgb(157 242 233);
-  --md-sys-color-secondary: rgb(176 204 200);
-  --md-sys-color-on-secondary: rgb(28 53 50);
-  --md-sys-color-secondary-container: rgb(50 75 73);
-  --md-sys-color-on-secondary-container: rgb(204 232 228);
-  --md-sys-color-tertiary: rgb(175 201 231);
-  --md-sys-color-on-tertiary: rgb(24 50 74);
-  --md-sys-color-tertiary-container: rgb(48 73 98);
-  --md-sys-color-on-tertiary-container: rgb(207 229 255);
-  --md-sys-color-error: rgb(255 180 171);
-  --md-sys-color-on-error: rgb(105 0 5);
-  --md-sys-color-error-container: rgb(147 0 10);
-  --md-sys-color-on-error-container: rgb(255 218 214);
-  --md-sys-color-background: rgb(14 21 20);
-  --md-sys-color-on-background: rgb(221 228 226);
-  --md-sys-color-surface: rgb(14 21 20);
-  --md-sys-color-on-surface: rgb(221 228 226);
-  --md-sys-color-surface-variant: rgb(63 73 71);
-  --md-sys-color-on-surface-variant: rgb(190 201 198);
-  --md-sys-color-outline: #899391;
-  --outline-filter: brightness(0) saturate(100%) invert(66%) sepia(8%)
-    saturate(263%) hue-rotate(118deg) brightness(85%) contrast(87%);
-  --md-sys-color-outline-variant: rgb(63 73 71);
-  --md-sys-color-shadow: rgb(0 0 0);
-  --md-sys-color-scrim: rgb(0 0 0);
-  --md-sys-color-inverse-surface: rgb(221 228 226);
-  --md-sys-color-inverse-on-surface: rgb(43 50 49);
-  --md-sys-color-inverse-primary: rgb(0 106 100);
-  --md-sys-color-primary-fixed: rgb(157 242 233);
-  --md-sys-color-on-primary-fixed: rgb(0 32 30);
-  --md-sys-color-primary-fixed-dim: rgb(129 213 205);
-  --md-sys-color-on-primary-fixed-variant: rgb(0 80 75);
-  --md-sys-color-secondary-fixed: rgb(204 232 228);
-  --md-sys-color-on-secondary-fixed: rgb(5 31 29);
-  --md-sys-color-secondary-fixed-dim: rgb(176 204 200);
-  --md-sys-color-on-secondary-fixed-variant: rgb(50 75 73);
-  --md-sys-color-tertiary-fixed: rgb(207 229 255);
-  --md-sys-color-on-tertiary-fixed: rgb(0 29 51);
-  --md-sys-color-tertiary-fixed-dim: rgb(175 201 231);
-  --md-sys-color-on-tertiary-fixed-variant: rgb(48 73 98);
-  --md-sys-color-surface-dim: rgb(14 21 20);
-  --md-sys-color-surface-bright: rgb(52 58 57);
-  --md-sys-color-surface-container-lowest: rgb(9 15 15);
-  --md-sys-color-surface-container-low: rgb(22 29 28);
-  --md-sys-color-surface-container: rgb(26 33 32);
-  --md-sys-color-surface-container-high: rgb(37 43 42);
-  --md-sys-color-surface-container-highest: rgb(47 54 53);
-}
-.dark-green {
-  --md-sys-color-primary: rgb(177 209 138);
-  --md-sys-color-surface-tint: rgb(177 209 138);
-  --md-sys-color-on-primary: rgb(31 55 1);
-  --md-sys-color-primary-container: rgb(53 78 22);
-  --md-sys-color-on-primary-container: rgb(205 237 163);
-  --md-sys-color-secondary: rgb(191 203 173);
-  --md-sys-color-on-secondary: rgb(42 51 30);
-  --md-sys-color-secondary-container: rgb(64 74 51);
-  --md-sys-color-on-secondary-container: rgb(220 231 200);
-  --md-sys-color-tertiary: rgb(160 208 203);
-  --md-sys-color-on-tertiary: rgb(0 55 53);
-  --md-sys-color-tertiary-container: rgb(31 78 75);
-  --md-sys-color-on-tertiary-container: rgb(188 236 231);
-  --md-sys-color-error: rgb(255 180 171);
-  --md-sys-color-on-error: rgb(105 0 5);
-  --md-sys-color-error-container: rgb(147 0 10);
-  --md-sys-color-on-error-container: rgb(255 218 214);
-  --md-sys-color-background: rgb(18 20 14);
-  --md-sys-color-on-background: rgb(226 227 216);
-  --md-sys-color-surface: rgb(18 20 14);
-  --md-sys-color-on-surface: rgb(226 227 216);
-  --md-sys-color-surface-variant: rgb(68 72 61);
-  --md-sys-color-on-surface-variant: rgb(197 200 186);
-  --md-sys-color-outline: #8f9285;
-  --outline-filter: brightness(0) saturate(100%) invert(61%) sepia(6%)
-    saturate(487%) hue-rotate(33deg) brightness(92%) contrast(91%);
-  --md-sys-color-outline-variant: rgb(68 72 61);
-  --md-sys-color-shadow: rgb(0 0 0);
-  --md-sys-color-scrim: rgb(0 0 0);
-  --md-sys-color-inverse-surface: rgb(226 227 216);
-  --md-sys-color-inverse-on-surface: rgb(47 49 42);
-  --md-sys-color-inverse-primary: rgb(76 102 43);
-  --md-sys-color-primary-fixed: rgb(205 237 163);
-  --md-sys-color-on-primary-fixed: rgb(16 32 0);
-  --md-sys-color-primary-fixed-dim: rgb(177 209 138);
-  --md-sys-color-on-primary-fixed-variant: rgb(53 78 22);
-  --md-sys-color-secondary-fixed: rgb(220 231 200);
-  --md-sys-color-on-secondary-fixed: rgb(21 30 11);
-  --md-sys-color-secondary-fixed-dim: rgb(191 203 173);
-  --md-sys-color-on-secondary-fixed-variant: rgb(64 74 51);
-  --md-sys-color-tertiary-fixed: rgb(188 236 231);
-  --md-sys-color-on-tertiary-fixed: rgb(0 32 30);
-  --md-sys-color-tertiary-fixed-dim: rgb(160 208 203);
-  --md-sys-color-on-tertiary-fixed-variant: rgb(31 78 75);
-  --md-sys-color-surface-dim: rgb(18 20 14);
-  --md-sys-color-surface-bright: rgb(56 58 50);
-  --md-sys-color-surface-container-lowest: rgb(12 15 9);
-  --md-sys-color-surface-container-low: rgb(26 28 22);
-  --md-sys-color-surface-container: rgb(30 32 26);
-  --md-sys-color-surface-container-high: rgb(40 43 36);
-  --md-sys-color-surface-container-highest: rgb(51 54 46);
-}
-.dark-pink {
-  --md-sys-color-primary: rgb(240 179 231);
-  --md-sys-color-surface-tint: rgb(240 179 231);
-  --md-sys-color-on-primary: rgb(75 31 74);
-  --md-sys-color-primary-container: rgb(101 54 98);
-  --md-sys-color-on-primary-container: rgb(255 215 247);
-  --md-sys-color-secondary: rgb(218 191 211);
-  --md-sys-color-on-secondary: rgb(61 43 58);
-  --md-sys-color-secondary-container: rgb(84 65 81);
-  --md-sys-color-on-secondary-container: rgb(247 218 239);
-  --md-sys-color-tertiary: rgb(246 184 168);
-  --md-sys-color-on-tertiary: rgb(76 38 27);
-  --md-sys-color-tertiary-container: rgb(102 59 48);
-  --md-sys-color-on-tertiary-container: rgb(255 219 209);
-  --md-sys-color-error: rgb(255 180 171);
-  --md-sys-color-on-error: rgb(105 0 5);
-  --md-sys-color-error-container: rgb(147 0 10);
-  --md-sys-color-on-error-container: rgb(255 218 214);
-  --md-sys-color-background: rgb(23 18 22);
-  --md-sys-color-on-background: rgb(235 223 230);
-  --md-sys-color-surface: rgb(23 18 22);
-  --md-sys-color-on-surface: rgb(235 223 230);
-  --md-sys-color-surface-variant: rgb(78 68 75);
-  --md-sys-color-on-surface-variant: rgb(209 195 203);
-  --md-sys-color-outline: #9a8d95;
-  --outline-filter: brightness(0) saturate(100%) invert(61%) sepia(13%)
-    saturate(228%) hue-rotate(270deg) brightness(93%) contrast(82%);
-  --md-sys-color-outline-variant: rgb(78 68 75);
-  --md-sys-color-shadow: rgb(0 0 0);
-  --md-sys-color-scrim: rgb(0 0 0);
-  --md-sys-color-inverse-surface: rgb(235 223 230);
-  --md-sys-color-inverse-on-surface: rgb(53 46 51);
-  --md-sys-color-inverse-primary: rgb(127 77 123);
-  --md-sys-color-primary-fixed: rgb(255 215 247);
-  --md-sys-color-on-primary-fixed: rgb(51 8 51);
-  --md-sys-color-primary-fixed-dim: rgb(240 179 231);
-  --md-sys-color-on-primary-fixed-variant: rgb(101 54 98);
-  --md-sys-color-secondary-fixed: rgb(247 218 239);
-  --md-sys-color-on-secondary-fixed: rgb(38 22 37);
-  --md-sys-color-secondary-fixed-dim: rgb(218 191 211);
-  --md-sys-color-on-secondary-fixed-variant: rgb(84 65 81);
-  --md-sys-color-tertiary-fixed: rgb(255 219 209);
-  --md-sys-color-on-tertiary-fixed: rgb(50 18 9);
-  --md-sys-color-tertiary-fixed-dim: rgb(246 184 168);
-  --md-sys-color-on-tertiary-fixed-variant: rgb(102 59 48);
-  --md-sys-color-surface-dim: rgb(23 18 22);
-  --md-sys-color-surface-bright: rgb(62 55 60);
-  --md-sys-color-surface-container-lowest: rgb(18 13 17);
-  --md-sys-color-surface-container-low: rgb(32 26 30);
-  --md-sys-color-surface-container: rgb(36 30 34);
-  --md-sys-color-surface-container-high: #2f282d;
-  --md-sys-color-surface-container-highest: rgb(58 51 56);
-}
 
-.logo {
-  height: 120px;
-  @include media-query($on-palm) {
-    height: 90px;
-  }
-}
-.header-container {
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-}
-@font-face {
-  font-family: "Excalifont";
-  src: url("/assets/theme-assets/theme-fonts/Excalifont-Regular.woff2");
-}
-@font-face {
-  font-family: "Comic Shanns";
-  src: url("/assets/theme-assets/theme-fonts/comic\ shanns.otf");
-}
-@font-face {
-  font-family: "Lexend";
-  src: url("/assets/theme-assets/theme-fonts/Lexend-Regular.ttf");
-}
 /**
  * Basic styling
  */
@@ -527,10 +239,9 @@ pre {
  */
 
 table {
-  // display: block;
+  display: block;
   overflow-x: auto;
-  // white-space: nowrap;
-  max-width: 100%;
+  width: 100%;
   margin-bottom: $spacing-unit;
   width: 100%;
   text-align: $table-text-align;
@@ -555,297 +266,37 @@ table {
     border: 1px solid var(--md-sys-color-outline);
   }
 }
-.primary {
-  background-color: var(--md-sys-color-primary);
-}
-.primary-text {
-  color: var(--md-sys-color-primary);
-}
-.on-primary {
-  background-color: var(--md-sys-color-on-primary);
-}
-.on-primary-text {
-  color: var(--md-sys-color-on-primary);
-}
-.primary-container {
-  background-color: var(--md-sys-color-primary-container);
-}
-.primary-container-text {
-  color: var(--md-sys-color-primary-container);
-}
-.on-primary-container {
-  background-color: var(--md-sys-color-on-primary-container);
-}
-.on-primary-container-text {
-  color: var(--md-sys-color-on-primary-container);
-}
-.primary-fixed {
-  background-color: var(--md-sys-color-primary-fixed);
-}
-.primary-fixed-text {
-  color: var(--md-sys-color-primary-fixed);
-}
-.on-primary-fixed {
-  background-color: var(--md-sys-color-on-primary-fixed);
-}
-.on-primary-fixed-text {
-  color: var(--md-sys-color-on-primary-fixed);
-}
-.primary-fixed-dim {
-  background-color: var(--md-sys-color-primary-fixed-dim);
-}
-.primary-fixed-dim-text {
-  color: var(--md-sys-color-primary-fixed-dim);
-}
-.on-primary-fixed-variant {
-  background-color: var(--md-sys-color-on-primary-fixed-variant);
-}
-.on-primary-fixed-variant-text {
-  color: var(--md-sys-color-on-primary-fixed-variant);
-}
-.secondary {
-  background-color: var(--md-sys-color-secondary);
-}
-.secondary-text {
-  color: var(--md-sys-color-secondary);
-}
-.on-secondary {
-  background-color: var(--md-sys-color-on-secondary);
-}
-.on-secondary-text {
-  color: var(--md-sys-color-on-secondary);
-}
-.secondary-container {
-  background-color: var(--md-sys-color-secondary-container);
-}
-.secondary-container-text {
-  color: var(--md-sys-color-secondary-container);
-}
-.on-secondary-container {
-  background-color: var(--md-sys-color-on-secondary-container);
-}
-.on-secondary-container-text {
-  color: var(--md-sys-color-on-secondary-container);
-}
-.secondary-fixed {
-  background-color: var(--md-sys-color-secondary-fixed);
-}
-.secondary-fixed-text {
-  color: var(--md-sys-color-secondary-fixed);
-}
-.on-secondary-fixed {
-  background-color: var(--md-sys-color-on-secondary-fixed);
-}
-.on-secondary-fixed-text {
-  color: var(--md-sys-color-on-secondary-fixed);
-}
-.secondary-fixed-dim {
-  background-color: var(--md-sys-color-secondary-fixed-dim);
-}
-.secondary-fixed-dim-text {
-  color: var(--md-sys-color-secondary-fixed-dim);
-}
-.on-secondary-fixed-variant {
-  background-color: var(--md-sys-color-on-secondary-fixed-variant);
-}
-.on-secondary-fixed-variant-text {
-  color: var(--md-sys-color-on-secondary-fixed-variant);
-}
-.tertiary {
-  background-color: var(--md-sys-color-tertiary);
-}
-.tertiary-text {
-  color: var(--md-sys-color-tertiary);
-}
-.on-tertiary {
-  background-color: var(--md-sys-color-on-tertiary);
-}
-.on-tertiary-text {
-  color: var(--md-sys-color-on-tertiary);
-}
-.tertiary-container {
-  background-color: var(--md-sys-color-tertiary-container);
-}
-.tertiary-container-text {
-  color: var(--md-sys-color-tertiary-container);
-}
-.on-tertiary-container {
-  background-color: var(--md-sys-color-on-tertiary-container);
-}
-.on-tertiary-container-text {
-  color: var(--md-sys-color-on-tertiary-container);
-}
-.tertiary-fixed {
-  background-color: var(--md-sys-color-tertiary-fixed);
-}
-.tertiary-fixed-text {
-  color: var(--md-sys-color-tertiary-fixed);
-}
-.on-tertiary-fixed {
-  background-color: var(--md-sys-color-on-tertiary-fixed);
-}
-.on-tertiary-fixed-text {
-  color: var(--md-sys-color-on-tertiary-fixed);
-}
-.tertiary-fixed-dim {
-  background-color: var(--md-sys-color-tertiary-fixed-dim);
-}
-.tertiary-fixed-dim-text {
-  color: var(--md-sys-color-tertiary-fixed-dim);
-}
-.on-tertiary-fixed-variant {
-  background-color: var(--md-sys-color-on-tertiary-fixed-variant);
-}
-.on-tertiary-fixed-variant-text {
-  color: var(--md-sys-color-on-tertiary-fixed-variant);
-}
-.error {
-  background-color: var(--md-sys-color-error);
-}
-.error-text {
-  color: var(--md-sys-color-error);
-}
-.on-error {
-  background-color: var(--md-sys-color-on-error);
-}
-.on-error-text {
-  color: var(--md-sys-color-on-error);
-}
-.error-container {
-  background-color: var(--md-sys-color-error-container);
-}
-.error-container-text {
-  color: var(--md-sys-color-error-container);
-}
-.on-error-container {
-  background-color: var(--md-sys-color-on-error-container);
-}
-.on-error-container-text {
-  color: var(--md-sys-color-on-error-container);
-}
-.outline {
-  background-color: var(--md-sys-color-outline);
-}
-.outline-text {
-  color: var(--md-sys-color-outline);
-}
-.background {
-  background-color: var(--md-sys-color-background);
-}
-.background-text {
-  color: var(--md-sys-color-background);
-}
-.on-background {
-  background-color: var(--md-sys-color-on-background);
-}
-.on-background-text {
-  color: var(--md-sys-color-on-background);
-}
-.surface {
-  background-color: var(--md-sys-color-surface);
-}
-.surface-text {
-  color: var(--md-sys-color-surface);
-}
-.on-surface {
-  background-color: var(--md-sys-color-on-surface);
-}
-.on-surface-text {
-  color: var(--md-sys-color-on-surface);
-}
-.surface-variant {
-  background-color: var(--md-sys-color-surface-variant);
-}
-.surface-variant-text {
-  color: var(--md-sys-color-surface-variant);
-}
-.on-surface-variant {
-  background-color: var(--md-sys-color-on-surface-variant);
-}
-.on-surface-variant-text {
-  color: var(--md-sys-color-on-surface-variant);
-}
-.inverse-surface {
-  background-color: var(--md-sys-color-inverse-surface);
-}
-.inverse-surface-text {
-  color: var(--md-sys-color-inverse-surface);
-}
-.inverse-on-surface {
-  background-color: var(--md-sys-color-inverse-on-surface);
-}
-.inverse-on-surface-text {
-  color: var(--md-sys-color-inverse-on-surface);
-}
-.inverse-primary {
-  background-color: var(--md-sys-color-inverse-primary);
-}
-.inverse-primary-text {
-  color: var(--md-sys-color-inverse-primary);
-}
-.shadow {
-  background-color: var(--md-sys-color-shadow);
-}
-.shadow-text {
-  color: var(--md-sys-color-shadow);
-}
-.surface-tint {
-  background-color: var(--md-sys-color-surface-tint);
-}
-.surface-tint-text {
-  color: var(--md-sys-color-surface-tint);
-}
-.outline-variant {
-  background-color: var(--md-sys-color-outline-variant);
-}
-.outline-variant-text {
-  color: var(--md-sys-color-outline-variant);
-}
-.scrim {
-  background-color: var(--md-sys-color-scrim);
-}
-.scrim-text {
-  color: var(--md-sys-color-scrim);
-}
-.surface-container-highest {
-  background-color: var(--md-sys-color-surface-container-highest);
-}
-.surface-container-highest-text {
-  color: var(--md-sys-color-surface-container-highest);
-}
-.surface-container-high {
-  background-color: var(--md-sys-color-surface-container-high);
-}
-.surface-container-high-text {
-  color: var(--md-sys-color-surface-container-high);
-}
-.surface-container {
-  background-color: var(--md-sys-color-surface-container);
-}
-.surface-container-text {
-  color: var(--md-sys-color-surface-container);
-}
-.surface-container-low {
-  background-color: var(--md-sys-color-surface-container-low);
-}
-.surface-container-low-text {
-  color: var(--md-sys-color-surface-container-low);
-}
-.surface-container-lowest {
-  background-color: var(--md-sys-color-surface-container-lowest);
-}
-.surface-container-lowest-text {
-  color: var(--md-sys-color-surface-container-lowest);
-}
-.surface-bright {
-  background-color: var(--md-sys-color-surface-bright);
+
+.home {
+  max-width: 1200px;
+  margin-left: auto;
+  margin-right: auto;
+  padding-right: $spacing-unit;
+  padding-left: $spacing-unit + 100;
+  @extend %clearfix;
+  @include media-query($on-laptop) {
+    padding-right: $spacing-unit / 2;
+    padding-left: ($spacing-unit / 2)+100;
+  }
+  @include media-query($on-palm) {
+    padding-left: $spacing-unit/2;
+  }
 }
-.surface-bright-text {
-  color: var(--md-sys-color-surface-bright);
+h1 {
+  font-family: "Comic Shanns", $base-font-family;
+  // text-align: start;
 }
-.surface-dim {
-  background-color: var(--md-sys-color-surface-dim);
+@keyframes mainreveal {
+  from {
+    transform: translateY(20%);
+    opacity: 0;
+  }
+  to {
+    transform: translate(0);
+    opacity: 1;
+  }
 }
-.surface-dim-text {
-  color: var(--md-sys-color-surface-dim);
+main {
+  overflow: hidden;
+  animation: mainreveal 0.25s;
 }