oscailte 3.0.0

data/_layouts/post.html

@@ -0,0 +1,38 @@
+---
+layout: core
+---
+{%- include strings.html -%}
+
+{%- assign date_iso = page.date | date: "%Y-%m-%d" -%}
+{%- assign date_formatted = page.date | date_to_string -%}
+
+{%- assign upper_minutes = page.content | number_of_words | divided_by: 160  -%}
+{%- assign lower_minutes = page.content | number_of_words | divided_by: 180  -%}
+
+{%- capture ttr -%}
+  {%- if upper_minutes == 0 -%}
+    {{ x_minute_read | replace: "$x$", "<1" }}
+  {%- elsif upper_minutes == lower_minutes -%}
+    {%- capture val -%}~{{ upper_minutes }}{%- endcapture -%}
+    {{ x_minute_read | replace: "$x$", val }}
+  {%- else -%}
+    {%- capture val -%}{{ lower_minutes }}-{{ upper_minutes }}{%- endcapture -%}
+    {{ x_minute_read | replace: "$x$", val }}
+  {%- endif -%}
+{%- endcapture -%}
+
+{%- capture meta -%}
+  <time class="Date" datetime="{{ date_iso }}">{{ date_formatted }}</time> &mdash; {{ ttr }}
+{%- endcapture -%}
+
+<header>
+  {% include hero.html title=page.title meta=meta %}
+</header>
+
+<div class="Container">
+  <article>
+    {{ page.content }} 
+  </article>
+
+  {%- include comments.html -%}
+</div>

data/_sass/_oscailte.scss

@@ -0,0 +1,147 @@
+// Tools
+@import "oscailte/tools/functions.scss";
+@import "oscailte/tools/mixins.scss";
+
+$typography-config: (
+  'small': (
+    'base': (100%,    1.42),
+    'h1':   (2em,     1.25),
+    'h2':   (1.625em, 1.15384615),
+    'h3':   (1.375em, 1.13636364),
+    'h4':   (1.125em, 1.11),
+    'h5':   (1.075em, 1.11),
+    'h6':   (.925em,  1.11)
+  ),
+  'medium': (
+    'base': (125%, 1.5),
+  ),
+  'large': (
+    'base': (150%, 1.62),
+  ),
+);
+
+$social-map: (
+  'dribbble':  #EA4C89,
+  'facebook':  #4172B8,
+  'flickr':    #0063DC,
+  'github':    #181717,
+  'instagram': #E4405F,
+  'keybase':   #33A0FF,
+  'linkedin':  #0077B5,
+  'pinterest': #BD081C,
+  'telegram':  #2CA5E0,
+  'twitter':   #1DA1F2,
+  'rss':       #FFA500,
+);
+
+
+@include generate-typography-properties($typography-config);
+
+:root {
+  --theme-background: #f5f6fa;
+  --theme-color: #282828;
+
+  /**
+   * Root properties, typically colour declarations, but contains other things too.
+   */
+  --color-primary:          #00a6ed;
+  --color-secondary:        #bf1ca9;
+  --color-positive:         #5ad42f;
+  --color-negative:         #d4372f;
+  --site-container-width:   90%;
+  --site-content-max-width: 81.25em;
+  --site-owl-spacing:       1rem;
+  --site-clip: polygon(
+    calc(100% - var(--clip-notch)) 0,
+    100% var(--clip-notch),
+    100% 100%,
+    var(--clip-notch) 100%,
+    0 calc(100% - var(--clip-notch)),
+    0 0
+  );
+
+  /**
+  * Base typography settings.
+  * Other typography settings will inherit/extend upon these.
+  */
+  --typography-body-family: "Merriweather", serif;
+  --typography-heading-family: "Lato", serif;
+  --typography-link-text-shadow-color: var(--theme-background);
+  
+  /**
+  * General shared properties.
+  */
+  --box-shadow: 0 0 7px rgba(0, 0, 0, 0.05);
+  --box-shadow_hover: 0 0 15px rgba(0, 0, 0, 0.15);
+  
+  /**
+  * Component declarations
+  */
+  --hero-matrix-url: #{url("/assets/oscailte/img/hero_matrix.png")};
+
+  --clip-notch: 10%;
+}
+
+// @media (prefers-color-scheme: dark) {
+//   :root {
+//     --theme-background: #282828;
+//     --theme-color: #e5e5e5;
+//     --header-background: var(--theme-background);
+//     --header-link-color: var(--theme-color);
+//     --post-preview-background: rgba(255, 255, 255, 0.035);
+//   }
+// }
+
+
+@include breakpoint("medium") {
+  .Site:not(.Site--home) .Site__main {
+    --site-container-width: 75%;
+  }
+}
+@include breakpoint("large") {
+  .Site:not(.Site--home) .Site__main {
+    --site-container-width: auto;
+    --site-content-max-width: 60rem
+  }
+}
+
+
+// Generic
+@import "oscailte/generic/font-face.scss";
+@import "oscailte/generic/modern-normalize.scss";
+@import "oscailte/generic/lobotomised-owl.scss";
+
+// Elements
+@import "oscailte/elements/html.scss";
+@import "oscailte/elements/body.scss";
+@import "oscailte/elements/blockquote.scss";
+@import "oscailte/elements/code.scss";
+@import "oscailte/elements/headings.scss";
+@import "oscailte/elements/hr.scss";
+@import "oscailte/elements/img.scss";
+@import "oscailte/elements/links.scss";
+
+// Objects
+@import "oscailte/objects/circuited.scss";
+@import "oscailte/objects/lists.scss";
+@import "oscailte/objects/muted.scss";
+@import "oscailte/objects/no-owl.scss";
+
+// Components
+@import "oscailte/components/button.scss";
+@import "oscailte/components/card.scss";
+@import "oscailte/components/footer.scss";
+@import "oscailte/components/header.scss";
+@import "oscailte/components/hero.scss";
+@import "oscailte/components/icon.scss";
+@import "oscailte/components/navigation.scss";
+@import "oscailte/components/recentposts.scss";
+@import "oscailte/components/skipnav.scss";
+@import "oscailte/components/social.scss";
+@import "oscailte/components/syntax.scss";
+
+// Layout
+@import "oscailte/layout/stickyfooter.scss";
+@import "oscailte/layout/container.scss";
+@import "oscailte/layout/home.scss";
+@import "oscailte/layout/post.scss";

data/_sass/oscailte/components/_button.scss

@@ -0,0 +1,11 @@
+.Button {
+  background-color: var(--color-primary);
+  border-radius: 4px;
+  box-shadow: inset 0px -3px 0 rgba(#000, .2);
+  color: #fff;
+  display: inline-block;
+  padding: .5em .75em;
+  text-align: center;
+  text-decoration: none;
+  text-shadow: 1px 1px 0 rgba(#000, .1);
+}

data/_sass/oscailte/components/_card.scss

@@ -0,0 +1,19 @@
+.Card {
+  background: #fff;
+  border-radius: 3px;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
+  padding: 1rem;
+  
+  &__title {
+    font-size: 1em;
+    margin: 0;
+  }
+
+  &__meta {
+    color: #666;
+
+    .Icon {
+      margin-right: 5px;
+    }
+  }
+}

data/_sass/oscailte/components/_footer.scss

@@ -0,0 +1,22 @@
+.Site__footer {
+  background-color: #222;
+  color: #aaa;
+  padding: calc(var(--site-owl-spacing) * 2) 0;
+  text-align: center;
+  text-shadow: 1px 1px 0 #000;
+
+  br,
+  p {
+    margin: 0;
+  }
+}
+
+@include breakpoint("medium") {
+  .Site__footer .Container {
+    display: flex;
+    justify-content: space-between;
+   }     
+  .Site__footer {
+    text-align: left;
+  }
+}

data/_sass/oscailte/components/_header.scss

@@ -0,0 +1,51 @@
+.Header {
+  background-color: var(--header-background, #fff);
+  border-top: 5px solid var(--color-primary);
+  box-shadow: var(--box-shadow);
+  margin: 0;
+  padding: 1em 0;
+
+  .Container {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+
+  a {
+    color: var(--header-link-color, var(--color-primary));
+  }
+
+  &__title {
+    line-height: 1;
+    margin: 0;
+    text-align: center;
+    text-shadow: 1px 1px 0 rgba(#000, .1);
+    
+    a {
+      display: flex;
+      flex-direction: column;
+      text-decoration: none;
+    }
+  }
+
+  &__subtitle {
+    font-size: .55em;
+  }
+}
+
+@include breakpoint("medium") {
+  .Header {
+    .Container {
+      flex-direction: row;
+    }
+
+    &__title {
+      text-align: left;
+    }
+
+
+    &__subtitle {
+      margin-top: 0;
+    }
+  }
+}

data/_sass/oscailte/components/_hero.scss

@@ -0,0 +1,85 @@
+.Hero {
+  padding: 3.5em 0;
+  text-align: center;
+
+  .avatar {
+    border: 0.75rem solid var(--color-primary);
+    border-radius: 50%;
+    height: auto;
+  }
+
+  &__content {
+    color: #fff;
+    position: relative;
+    z-index: 1;
+  }
+
+  &__title {
+    margin: 0;
+    text-shadow: 1px 1px 0 #000;
+  }
+
+  &.o-circuited {
+    background-color: #222;
+  }
+}
+
+.Site--default,
+.Site--home {
+  .Hero {
+    position: relative;
+    
+    &::after {
+      background-color: rgba(#000, .1);
+      background-image: var(--hero-matrix-url);
+      content: "";
+      display: block;
+      position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+    }
+  }
+
+  .Hero__title {
+    max-width: 58rem;
+  }
+}
+
+.Site--post {
+  .Hero__title {
+    text-align: center;
+  }
+
+  .Hero__content {
+    flex-direction: column;
+    justify-content: center;
+  }
+}
+
+@include breakpoint("medium") {
+  .Hero {
+    .avatar {
+      max-width: 100%;
+    }
+
+    &__content {
+      align-items: center;
+      display: flex;
+    }
+
+    &__title {
+      padding: 0 1em;
+      text-align: left;
+    }
+  }
+}
+
+@include breakpoint("large") {
+  .Hero {
+    .avatar {
+      margin: 0 5%;
+    }
+  }
+}

data/_sass/oscailte/components/_icon.scss

@@ -0,0 +1,7 @@
+.Icon {
+  fill: currentColor;
+  line-height: 1;
+  height: 1em;
+  vertical-align: middle;
+  width: 1em;
+}

data/_sass/oscailte/components/_navigation.scss

@@ -0,0 +1,32 @@
+.Navigation {
+  &__items,
+  &__item {
+    height: 100%;
+  }
+
+  &__items {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+  }
+
+  &__item {
+    align-items: center;
+    display: flex;
+    margin: 0;
+  }
+  
+  &__link {
+    display: block;
+    padding: .5em 1em;
+    text-align: center;
+    text-decoration: none;
+    width: 100%;
+  }
+}
+
+@include breakpoint("medium") {
+  .Navigation {
+    margin-top: 0;
+  }
+}

data/_sass/oscailte/components/_recentposts.scss

@@ -0,0 +1,59 @@
+.RecentPosts {
+  &__title {
+    display: inline-block;
+  }
+
+  &__list {
+    display: grid;
+    grid-template: auto;
+    gap: var(--site-owl-spacing);
+  }
+
+  &__item {
+    display: flex;
+    flex-direction: column;
+    max-height: 20rem;
+  }
+
+  &__excerpt {
+    flex: 1;
+    overflow: hidden;
+    position: relative;
+
+    &::before {
+      background-image: linear-gradient(to top, #fff, transparent);
+      content: "";
+      display: block;
+      height: 3rem;
+      position: absolute;
+        bottom: 0;
+      width: 100%;
+    }
+
+    > p {
+      margin: 0;
+    }
+  }
+
+  .Button {
+    align-self: flex-end;
+    display: block;
+    width: 100%;
+  }
+}
+
+@include breakpoint("medium") {
+  .RecentPosts__list {
+    grid-template: auto / repeat(2, 1fr);
+  }
+  .RecentPosts .Button {
+    font-size: 1rem;
+    width: auto;
+  }
+}
+
+@include breakpoint("large") {
+  .RecentPosts__list {
+    grid-template: auto / repeat(3, 1fr);
+  }
+}