From b53a23611b6dd7f611c9cb9b5617b523212900e7 Mon Sep 17 00:00:00 2001 From: Kacey Gambill Date: Wed, 16 Aug 2023 20:08:55 +0000 Subject: [PATCH] testing --- _includes/footer.html | 37 ++ _includes/header.html | 31 ++ _includes/social-item.html | 7 + _layouts/base.html | 20 + _layouts/home.html | 61 +++ _layouts/page.html | 14 + _layouts/post.html | 38 ++ ... => 2023-07-30-dive-into-docker-part-1.md} | 0 ... => 2023-08-06-dive-into-docker-part-2.md} | 0 ... => 2023-08-12-dive-into-docker-part-3.md} | 0 _sass/minima/_base.scss | 281 ++++++++++++++ _sass/minima/_layout.scss | 341 +++++++++++++++++ _sass/minima/initialize.scss | 50 +++ _sass/minima/skins/auto.scss | 361 ++++++++++++++++++ _sass/minima/skins/classic.scss | 5 + _sass/minima/skins/dark.scss | 5 + _sass/minima/skins/solarized-dark.scss | 5 + _sass/minima/skins/solarized-light.scss | 4 + _sass/minima/skins/solarized.scss | 201 ++++++++++ assets/css/style.scss | 7 + minima-social-icons.liquid | 18 + minima.gemspec | 24 ++ 22 files changed, 1510 insertions(+) create mode 100644 _includes/footer.html create mode 100644 _includes/header.html create mode 100644 _includes/social-item.html create mode 100644 _layouts/base.html create mode 100644 _layouts/home.html create mode 100644 _layouts/page.html create mode 100644 _layouts/post.html rename _posts/{2023-07-30-dive-into-docker-part-1.markdown => 2023-07-30-dive-into-docker-part-1.md} (100%) rename _posts/{2023-08-06-dive-into-docker-part-2.markdown => 2023-08-06-dive-into-docker-part-2.md} (100%) rename _posts/{2023-08-12-dive-into-docker-part-3.markdown => 2023-08-12-dive-into-docker-part-3.md} (100%) create mode 100644 _sass/minima/_base.scss create mode 100644 _sass/minima/_layout.scss create mode 100644 _sass/minima/initialize.scss create mode 100644 _sass/minima/skins/auto.scss create mode 100644 _sass/minima/skins/classic.scss create mode 100644 _sass/minima/skins/dark.scss create mode 100644 _sass/minima/skins/solarized-dark.scss create mode 100644 _sass/minima/skins/solarized-light.scss create mode 100644 _sass/minima/skins/solarized.scss create mode 100644 assets/css/style.scss create mode 100644 minima-social-icons.liquid create mode 100644 minima.gemspec diff --git a/_includes/footer.html b/_includes/footer.html new file mode 100644 index 0000000..f81886f --- /dev/null +++ b/_includes/footer.html @@ -0,0 +1,37 @@ + diff --git a/_includes/header.html b/_includes/header.html new file mode 100644 index 0000000..ed5a382 --- /dev/null +++ b/_includes/header.html @@ -0,0 +1,31 @@ +
+ +
+ {%- assign default_paths = site.pages | map: "path" -%} + {%- assign page_paths = site.header_pages | default: default_paths -%} + {%- assign titles_size = site.pages | map: 'title' | join: '' | size -%} + + + {%- if titles_size > 0 -%} + + {%- endif -%} +
+
diff --git a/_includes/social-item.html b/_includes/social-item.html new file mode 100644 index 0000000..7f2e101 --- /dev/null +++ b/_includes/social-item.html @@ -0,0 +1,7 @@ +
  • {% assign entry = include.item %} + + + + + +
    • diff --git a/_layouts/base.html b/_layouts/base.html new file mode 100644 index 0000000..58e141b --- /dev/null +++ b/_layouts/base.html @@ -0,0 +1,20 @@ + + + + {%- include head.html -%} + + + + {%- include header.html -%} + +
    +
    + {{ content }} +
    +
    + + {%- include footer.html -%} + + + + diff --git a/_layouts/home.html b/_layouts/home.html new file mode 100644 index 0000000..c81df2f --- /dev/null +++ b/_layouts/home.html @@ -0,0 +1,61 @@ +--- +layout: base +--- + +
    + {%- if page.title -%} +

    {{ page.title }}

    + {%- endif -%} + + {{ content }} + + + {% if site.paginate %} + {% assign posts = paginator.posts %} + {% else %} + {% assign posts = site.posts %} + {% endif %} + + + {%- if posts.size > 0 -%} + {%- if page.list_title -%} +

    {{ page.list_title }}

    + {%- endif -%} + + + {% if site.paginate %} +
    + +
    + {%- endif %} + + {%- endif -%} + +
    diff --git a/_layouts/page.html b/_layouts/page.html new file mode 100644 index 0000000..18544b4 --- /dev/null +++ b/_layouts/page.html @@ -0,0 +1,14 @@ +--- +layout: base +--- +
    + +
    +

    {{ page.title | escape }}

    +
    + +
    + {{ content }} +
    + +
    diff --git a/_layouts/post.html b/_layouts/post.html new file mode 100644 index 0000000..dc71866 --- /dev/null +++ b/_layouts/post.html @@ -0,0 +1,38 @@ +--- +layout: base +--- +
    + +
    +

    {{ page.title | escape }}

    +

    + {%- assign date_format = site.minima.date_format | default: "%b %-d, %Y" -%} + + {%- if page.modified_date -%} + ~ + {%- assign mdate = page.modified_date | date_to_xmlschema -%} + + {%- endif -%} + {%- if page.author -%} + • {% for author in page.author %} + + {%- if forloop.last == false %}, {% endif -%} + {% endfor %} + {%- endif -%}

    +
    + +
    + {{ content }} +
    + + {%- if site.disqus.shortname -%} + {%- include disqus_comments.html -%} + {%- endif -%} + + +
    diff --git a/_posts/2023-07-30-dive-into-docker-part-1.markdown b/_posts/2023-07-30-dive-into-docker-part-1.md similarity index 100% rename from _posts/2023-07-30-dive-into-docker-part-1.markdown rename to _posts/2023-07-30-dive-into-docker-part-1.md diff --git a/_posts/2023-08-06-dive-into-docker-part-2.markdown b/_posts/2023-08-06-dive-into-docker-part-2.md similarity index 100% rename from _posts/2023-08-06-dive-into-docker-part-2.markdown rename to _posts/2023-08-06-dive-into-docker-part-2.md diff --git a/_posts/2023-08-12-dive-into-docker-part-3.markdown b/_posts/2023-08-12-dive-into-docker-part-3.md similarity index 100% rename from _posts/2023-08-12-dive-into-docker-part-3.markdown rename to _posts/2023-08-12-dive-into-docker-part-3.md diff --git a/_sass/minima/_base.scss b/_sass/minima/_base.scss new file mode 100644 index 0000000..ea8d8f2 --- /dev/null +++ b/_sass/minima/_base.scss @@ -0,0 +1,281 @@ +html { + font-size: $base-font-size; +} + +/** + * Reset some basic elements + */ +body, h1, h2, h3, h4, h5, h6, +p, blockquote, pre, hr, +dl, dd, ol, ul, figure { + margin: 0; + padding: 0; + +} + + + +/** + * Basic styling + */ +body { + font: $base-font-weight #{$base-font-size}/#{$base-line-height} $base-font-family; + color: $text-color; + background-color: $background-color; + -webkit-text-size-adjust: 100%; + -webkit-font-feature-settings: "kern" 1; + -moz-font-feature-settings: "kern" 1; + -o-font-feature-settings: "kern" 1; + font-feature-settings: "kern" 1; + font-kerning: normal; + display: flex; + min-height: 100vh; + flex-direction: column; + overflow-wrap: break-word; +} + + + +/** + * Set `margin-bottom` to maintain vertical rhythm + */ +h1, h2, h3, h4, h5, h6, +p, blockquote, pre, +ul, ol, dl, figure, +%vertical-rhythm { + margin-bottom: $spacing-unit * .5; +} + +hr { + margin-top: $spacing-unit; + margin-bottom: $spacing-unit; +} + +/** + * `main` element + */ +main { + display: block; /* Default value of `display` of `main` element is 'inline' in IE 11. */ +} + + + +/** + * Images + */ +img { + max-width: 100%; + vertical-align: middle; +} + + + +/** + * Figures + */ +figure > img { + display: block; +} + +figcaption { + font-size: $small-font-size; +} + + + +/** + * Lists + */ +ul, ol { + margin-left: $spacing-unit; +} + +li { + > ul, + > ol { + margin-bottom: 0; + } +} + + + +/** + * Headings + */ +h1, h2, h3, h4, h5, h6 { + font-weight: $base-font-weight; +} + + + +/** + * Links + */ +a { + color: $link-base-color; + text-decoration: none; + + &:visited { + color: $link-visited-color; + } + + &:hover { + color: $link-hover-color; + text-decoration: underline; + } + + .social-media-list &:hover { + text-decoration: none; + + .username { + text-decoration: underline; + } + } +} + + +/** + * Blockquotes + */ +blockquote { + color: $brand-color; + border-left: 4px solid $border-color-01; + padding-left: $spacing-unit * .5; + @include relative-font-size(1.125); + font-style: italic; + + > :last-child { + margin-bottom: 0; + } + + i, em { + font-style: normal; + } +} + + + +/** + * Code formatting + */ +pre, +code { + font-family: $code-font-family; + font-size: 0.9375em; + border: 1px solid $border-color-01; + border-radius: 3px; + background-color: $code-background-color; +} + +code { + padding: 1px 5px; +} + +pre { + padding: 8px 12px; + overflow-x: auto; + + > code { + border: 0; + padding-right: 0; + padding-left: 0; + } +} + +.highlight { + border-radius: 3px; + background: $code-background-color; + @extend %vertical-rhythm; + + .highlighter-rouge & { + background: $code-background-color; + } +} + + + +/** + * Wrapper + */ +.wrapper { + max-width: calc(#{$content-width} - (#{$spacing-unit})); + margin-right: auto; + margin-left: auto; + padding-right: $spacing-unit * .5; + padding-left: $spacing-unit * .5; + @extend %clearfix; + + @media screen and (min-width: $on-large) { + max-width: calc(#{$content-width} - (#{$spacing-unit} * 2)); + padding-right: $spacing-unit; + padding-left: $spacing-unit; + } +} + + + +/** + * Clearfix + */ +%clearfix:after { + content: ""; + display: table; + clear: both; +} + + + +/** + * Icons + */ + +.orange { + color: #f66a0a; +} + +.grey { + color: #828282; +} + +.svg-icon { + width: 1.25em; + height: 1.25em; + display: inline-block; + fill: currentColor; + vertical-align: text-bottom; +} + + +/** + * Tables + */ +table { + margin-bottom: $spacing-unit; + width: 100%; + text-align: $table-text-align; + color: $table-text-color; + border-collapse: collapse; + border: 1px solid $table-border-color; + tr { + &:nth-child(even) { + background-color: $table-zebra-color; + } + } + th, td { + padding: ($spacing-unit * 33.3333333333 * .01) ($spacing-unit * .5); + } + th { + background-color: $table-header-bg-color; + border: 1px solid $table-header-border; + } + td { + border: 1px solid $table-border-color; + } + + @include media-query($on-laptop) { + display: block; + overflow-x: auto; + -webkit-overflow-scrolling: touch; + -ms-overflow-style: -ms-autohiding-scrollbar; + } +} diff --git a/_sass/minima/_layout.scss b/_sass/minima/_layout.scss new file mode 100644 index 0000000..4aa8582 --- /dev/null +++ b/_sass/minima/_layout.scss @@ -0,0 +1,341 @@ +/** + * Site header + */ +.site-header { + border-top: 5px solid $border-color-03; + border-bottom: 1px solid $border-color-01; + min-height: $spacing-unit * 1.865; + line-height: $base-line-height * $base-font-size * 2.25; + + // Positioning context for the mobile navigation icon + position: relative; +} + +.site-title { + @include relative-font-size(1.625); + font-weight: 300; + letter-spacing: -1px; + margin-bottom: 0; + float: left; + + @include media-query($on-palm) { + padding-right: 45px; + } + + &, + &:visited { + color: $site-title-color; + } +} + +.site-nav { + position: absolute; + top: 9px; + right: $spacing-unit * .5; + background-color: $background-color; + border: 1px solid $border-color-01; + border-radius: 5px; + text-align: right; + + .nav-trigger { + display: none; + } + + .menu-icon { + float: right; + width: 36px; + height: 26px; + line-height: 0; + padding-top: 10px; + text-align: center; + + > svg path { + fill: $border-color-03; + } + } + + label[for="nav-trigger"] { + display: block; + float: right; + width: 36px; + height: 36px; + z-index: 2; + cursor: pointer; + } + + input ~ .trigger { + clear: both; + display: none; + } + + input:checked ~ .trigger { + display: block; + padding-bottom: 5px; + } + + .page-link { + color: $text-color; + line-height: $base-line-height; + display: block; + padding: 5px 10px; + + // Gaps between nav items, but not on the last one + &:not(:last-child) { + margin-right: 0; + } + margin-left: 20px; + } + + @media screen and (min-width: $on-medium) { + position: static; + float: right; + border: none; + background-color: inherit; + + label[for="nav-trigger"] { + display: none; + } + + .menu-icon { + display: none; + } + + input ~ .trigger { + display: block; + } + + .page-link { + display: inline; + padding: 0; + + &:not(:last-child) { + margin-right: 20px; + } + margin-left: auto; + } + } +} + + + +/** + * Site footer + */ +.site-footer { + border-top: 1px solid $border-color-01; + padding: $spacing-unit 0; +} + +.footer-heading { + @include relative-font-size(1.125); + margin-bottom: $spacing-unit * .5; +} + +.feed-subscribe .svg-icon { + padding: 5px 5px 2px 0 +} + +.contact-list, +.social-media-list { + list-style: none; + margin-left: 0; +} + +.footer-col-wrapper, +.social-links { + @include relative-font-size(0.9375); + color: $brand-color; +} + +.footer-col { + margin-bottom: $spacing-unit * .5; +} + +.footer-col-1, +.footer-col-2 { + width: calc(50% - (#{$spacing-unit} / 2)); +} + +.footer-col-3 { + width: calc(100% - (#{$spacing-unit} / 2)); +} + +@media screen and (min-width: $on-large) { + .footer-col-1 { + width: calc(35% - (#{$spacing-unit} / 2)); + } + + .footer-col-2 { + width: calc(20% - (#{$spacing-unit} / 2)); + } + + .footer-col-3 { + width: calc(45% - (#{$spacing-unit} / 2)); + } +} + +@media screen and (min-width: $on-medium) { + .footer-col-wrapper { + display: flex + } + + .footer-col { + width: calc(100% - (#{$spacing-unit} / 2)); + padding: 0 ($spacing-unit * .5); + + &:first-child { + padding-right: $spacing-unit * .5; + padding-left: 0; + } + + &:last-child { + padding-right: 0; + padding-left: $spacing-unit * .5; + } + } +} + + + +/** + * Page content + */ +.page-content { + padding: $spacing-unit 0; + flex: 1 0 auto; +} + +.page-heading { + @include relative-font-size(2); +} + +.post-list-heading { + @include relative-font-size(1.75); +} + +.post-list { + margin-left: 0; + list-style: none; + + > li { + margin-bottom: $spacing-unit; + } +} + +.post-meta { + font-size: $small-font-size; + color: $brand-color; +} + +.post-link { + display: block; + @include relative-font-size(1.5); +} + + + +/** + * Posts + */ +.post-header { + margin-bottom: $spacing-unit; +} + +.post-title, +.post-content h1 { + @include relative-font-size(2.625); + letter-spacing: -1px; + line-height: 1.15; + + @media screen and (min-width: $on-large) { + @include relative-font-size(2.625); + } +} + +.post-content { + margin-bottom: $spacing-unit; + + h1, h2, h3, h4, h5, h6 { margin-top: $spacing-unit } + + h2 { + @include relative-font-size(1.75); + + @media screen and (min-width: $on-large) { + @include relative-font-size(2); + } + } + + h3 { + @include relative-font-size(1.375); + + @media screen and (min-width: $on-large) { + @include relative-font-size(1.625); + } + } + + h4 { + @include relative-font-size(1.25); + } + + h5 { + @include relative-font-size(1.125); + } + h6 { + @include relative-font-size(1.0625); + } +} + + +.social-media-list { + display: table; + margin: 0 auto; + li { + float: left; + margin: 5px 10px 5px 0; + &:last-of-type { margin-right: 0 } + a { + display: block; + padding: 10px 12px; + border: 1px solid $border-color-01; + &:hover { border-color: $border-color-02 } + } + } +} + + + +/** + * Pagination navbar + */ +.pagination { + margin-bottom: $spacing-unit; + @extend .social-media-list; + li { + a, div { + min-width: 41px; + text-align: center; + box-sizing: border-box; + } + div { + display: block; + padding: $spacing-unit * .25; + border: 1px solid transparent; + + &.pager-edge { + color: $border-color-01; + border: 1px dashed; + } + } + } +} + + + +/** + * Grid helpers + */ +@media screen and (min-width: $on-large) { + .one-half { + width: calc(50% - (#{$spacing-unit} / 2)); + } +} diff --git a/_sass/minima/initialize.scss b/_sass/minima/initialize.scss new file mode 100644 index 0000000..76efd77 --- /dev/null +++ b/_sass/minima/initialize.scss @@ -0,0 +1,50 @@ +@charset "utf-8"; + +// Define defaults for each variable. + +$base-font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Segoe UI Emoji", "Segoe UI Symbol", "Apple Color Emoji", Roboto, Helvetica, Arial, sans-serif !default; +$code-font-family: "Menlo", "Inconsolata", "Consolas", "Roboto Mono", "Ubuntu Mono", "Liberation Mono", "Courier New", monospace; +$base-font-size: 16px !default; +$base-font-weight: 400 !default; +$small-font-size: $base-font-size * 0.875 !default; +$base-line-height: 1.5 !default; + +$spacing-unit: 30px !default; + +$table-text-align: left !default; + +// Width of the content area +$content-width: 800px !default; + +$on-palm: 600px !default; +$on-laptop: 800px !default; + +$on-medium: $on-palm !default; +$on-large: $on-laptop !default; + +// Use media queries like this: +// @include media-query($on-palm) { +// .wrapper { +// padding-right: $spacing-unit / 2; +// padding-left: $spacing-unit / 2; +// } +// } +// Notice the following mixin uses max-width, in a deprecated, desktop-first +// approach, whereas media queries used elsewhere now use min-width. +@mixin media-query($device) { + @media screen and (max-width: $device) { + @content; + } +} + +@mixin relative-font-size($ratio) { + font-size: #{$ratio}rem; +} + +// Import pre-styling-overrides hook and style-partials. +@import + "minima/custom-variables", // Hook to override predefined variables. + "minima/base", // Defines element resets. + "minima/layout", // Defines structure and style based on CSS selectors. + "minima/custom-styles" // Hook to override existing styles. +; diff --git a/_sass/minima/skins/auto.scss b/_sass/minima/skins/auto.scss new file mode 100644 index 0000000..8902e8c --- /dev/null +++ b/_sass/minima/skins/auto.scss @@ -0,0 +1,361 @@ +@charset "utf-8"; + +// Default color scheme settings +// These are overridden in classic.css and dark.scss + +$color-scheme-auto: true !default; +$color-scheme-dark: false !default; + + +// Light mode +// ---------- + +$lm-brand-color: #828282 !default; +$lm-brand-color-light: lighten($lm-brand-color, 40%) !default; +$lm-brand-color-dark: darken($lm-brand-color, 25%) !default; + +$lm-site-title-color: $lm-brand-color-dark !default; + +$lm-text-color: #111111 !default; +$lm-background-color: #fdfdfd !default; +$lm-code-background-color: #eeeeff !default; + +$lm-link-base-color: #2a7ae2 !default; +$lm-link-visited-color: darken($lm-link-base-color, 15%) !default; +$lm-link-hover-color: $lm-text-color !default; + +$lm-border-color-01: $lm-brand-color-light !default; +$lm-border-color-02: lighten($lm-brand-color, 35%) !default; +$lm-border-color-03: $lm-brand-color-dark !default; + +$lm-table-text-color: lighten($lm-text-color, 18%) !default; +$lm-table-zebra-color: lighten($lm-brand-color, 46%) !default; +$lm-table-header-bg-color: lighten($lm-brand-color, 43%) !default; +$lm-table-header-border: lighten($lm-brand-color, 37%) !default; +$lm-table-border-color: $lm-border-color-01 !default; + + +// Syntax highlighting styles should be adjusted appropriately for every "skin" +// ---------------------------------------------------------------------------- + +@mixin lm-highlight { + .highlight { + .c { color: #998; font-style: italic } // Comment + .err { color: #a61717; background-color: #e3d2d2 } // Error + .k { font-weight: bold } // Keyword + .o { font-weight: bold } // Operator + .cm { color: #998; font-style: italic } // Comment.Multiline + .cp { color: #999; font-weight: bold } // Comment.Preproc + .c1 { color: #998; font-style: italic } // Comment.Single + .cs { color: #999; font-weight: bold; font-style: italic } // Comment.Special + .gd { color: #000; background-color: #fdd } // Generic.Deleted + .gd .x { color: #000; background-color: #faa } // Generic.Deleted.Specific + .ge { font-style: italic } // Generic.Emph + .gr { color: #a00 } // Generic.Error + .gh { color: #999 } // Generic.Heading + .gi { color: #000; background-color: #dfd } // Generic.Inserted + .gi .x { color: #000; background-color: #afa } // Generic.Inserted.Specific + .go { color: #888 } // Generic.Output + .gp { color: #555 } // Generic.Prompt + .gs { font-weight: bold } // Generic.Strong + .gu { color: #aaa } // Generic.Subheading + .gt { color: #a00 } // Generic.Traceback + .kc { font-weight: bold } // Keyword.Constant + .kd { font-weight: bold } // Keyword.Declaration + .kp { font-weight: bold } // Keyword.Pseudo + .kr { font-weight: bold } // Keyword.Reserved + .kt { color: #458; font-weight: bold } // Keyword.Type + .m { color: #099 } // Literal.Number + .s { color: #d14 } // Literal.String + .na { color: #008080 } // Name.Attribute + .nb { color: #0086B3 } // Name.Builtin + .nc { color: #458; font-weight: bold } // Name.Class + .no { color: #008080 } // Name.Constant + .ni { color: #800080 } // Name.Entity + .ne { color: #900; font-weight: bold } // Name.Exception + .nf { color: #900; font-weight: bold } // Name.Function + .nn { color: #555 } // Name.Namespace + .nt { color: #000080 } // Name.Tag + .nv { color: #008080 } // Name.Variable + .ow { font-weight: bold } // Operator.Word + .w { color: #bbb } // Text.Whitespace + .mf { color: #099 } // Literal.Number.Float + .mh { color: #099 } // Literal.Number.Hex + .mi { color: #099 } // Literal.Number.Integer + .mo { color: #099 } // Literal.Number.Oct + .sb { color: #d14 } // Literal.String.Backtick + .sc { color: #d14 } // Literal.String.Char + .sd { color: #d14 } // Literal.String.Doc + .s2 { color: #d14 } // Literal.String.Double + .se { color: #d14 } // Literal.String.Escape + .sh { color: #d14 } // Literal.String.Heredoc + .si { color: #d14 } // Literal.String.Interpol + .sx { color: #d14 } // Literal.String.Other + .sr { color: #009926 } // Literal.String.Regex + .s1 { color: #d14 } // Literal.String.Single + .ss { color: #990073 } // Literal.String.Symbol + .bp { color: #999 } // Name.Builtin.Pseudo + .vc { color: #008080 } // Name.Variable.Class + .vg { color: #008080 } // Name.Variable.Global + .vi { color: #008080 } // Name.Variable.Instance + .il { color: #099 } // Literal.Number.Integer.Long + } +} + + +// Dark mode +// --------- + +$dm-brand-color: #999999 !default; +$dm-brand-color-light: lighten($dm-brand-color, 5%) !default; +$dm-brand-color-dark: darken($dm-brand-color, 35%) !default; + +$dm-site-title-color: $dm-brand-color-light !default; + +$dm-text-color: #bbbbbb !default; +$dm-background-color: #181818 !default; +$dm-code-background-color: #212121 !default; + +$dm-link-base-color: #79b8ff !default; +$dm-link-visited-color: $dm-link-base-color !default; +$dm-link-hover-color: $dm-text-color !default; + +$dm-border-color-01: $dm-brand-color-dark !default; +$dm-border-color-02: $dm-brand-color-light !default; +$dm-border-color-03: $dm-brand-color !default; + +$dm-table-text-color: $dm-text-color !default; +$dm-table-zebra-color: lighten($dm-background-color, 4%) !default; +$dm-table-header-bg-color: lighten($dm-background-color, 10%) !default; +$dm-table-header-border: lighten($dm-background-color, 21%) !default; +$dm-table-border-color: $dm-border-color-01 !default; + + +// Syntax highlighting styles should be adjusted appropriately for every "skin" +// List of tokens: https://github.com/rouge-ruby/rouge/wiki/List-of-tokens +// Some colors come from Material Theme Darker: +// https://github.com/material-theme/vsc-material-theme/blob/master/scripts/generator/settings/specific/darker-hc.ts +// https://github.com/material-theme/vsc-material-theme/blob/master/scripts/generator/color-set.ts +// ---------------------------------------------------------------------------- + +@mixin dm-highlight { + .highlight { + .c { color: #545454; font-style: italic } // Comment + .err { color: #f07178; background-color: #e3d2d2 } // Error + .k { color: #89DDFF; font-weight: bold } // Keyword + .o { font-weight: bold } // Operator + .cm { color: #545454; font-style: italic } // Comment.Multiline + .cp { color: #545454; font-weight: bold } // Comment.Preproc + .c1 { color: #545454; font-style: italic } // Comment.Single + .cs { color: #545454; font-weight: bold; font-style: italic } // Comment.Special + .gd { color: #000; background-color: #fdd } // Generic.Deleted + .gd .x { color: #000; background-color: #faa } // Generic.Deleted.Specific + .ge { font-style: italic } // Generic.Emph + .gr { color: #f07178 } // Generic.Error + .gh { color: #999 } // Generic.Heading + .gi { color: #000; background-color: #dfd } // Generic.Inserted + .gi .x { color: #000; background-color: #afa } // Generic.Inserted.Specific + .go { color: #888 } // Generic.Output + .gp { color: #555 } // Generic.Prompt + .gs { font-weight: bold } // Generic.Strong + .gu { color: #aaa } // Generic.Subheading + .gt { color: #f07178 } // Generic.Traceback + .kc { font-weight: bold } // Keyword.Constant + .kd { font-weight: bold } // Keyword.Declaration + .kp { font-weight: bold } // Keyword.Pseudo + .kr { font-weight: bold } // Keyword.Reserved + .kt { color: #FFCB6B; font-weight: bold } // Keyword.Type + .m { color: #F78C6C } // Literal.Number + .s { color: #C3E88D } // Literal.String + .na { color: #008080 } // Name.Attribute + .nb { color: #EEFFFF } // Name.Builtin + .nc { color: #FFCB6B; font-weight: bold } // Name.Class + .no { color: #008080 } // Name.Constant + .ni { color: #800080 } // Name.Entity + .ne { color: #900; font-weight: bold } // Name.Exception + .nf { color: #82AAFF; font-weight: bold } // Name.Function + .nn { color: #555 } // Name.Namespace + .nt { color: #FFCB6B } // Name.Tag + .nv { color: #EEFFFF } // Name.Variable + .ow { font-weight: bold } // Operator.Word + .w { color: #EEFFFF } // Text.Whitespace + .mf { color: #F78C6C } // Literal.Number.Float + .mh { color: #F78C6C } // Literal.Number.Hex + .mi { color: #F78C6C } // Literal.Number.Integer + .mo { color: #F78C6C } // Literal.Number.Oct + .sb { color: #C3E88D } // Literal.String.Backtick + .sc { color: #C3E88D } // Literal.String.Char + .sd { color: #C3E88D } // Literal.String.Doc + .s2 { color: #C3E88D } // Literal.String.Double + .se { color: #EEFFFF } // Literal.String.Escape + .sh { color: #C3E88D } // Literal.String.Heredoc + .si { color: #C3E88D } // Literal.String.Interpol + .sx { color: #C3E88D } // Literal.String.Other + .sr { color: #C3E88D } // Literal.String.Regex + .s1 { color: #C3E88D } // Literal.String.Single + .ss { color: #C3E88D } // Literal.String.Symbol + .bp { color: #999 } // Name.Builtin.Pseudo + .vc { color: #FFCB6B } // Name.Variable.Class + .vg { color: #EEFFFF } // Name.Variable.Global + .vi { color: #EEFFFF } // Name.Variable.Instance + .il { color: #F78C6C } // Literal.Number.Integer.Long + } +} + + +// Mode selection +// -------------- + + +// Classic skin (always light mode) +// Assign outside of the if construct to establish global variable scope + +$brand-color: $lm-brand-color; +$brand-color-light: $lm-brand-color-light; +$brand-color-dark: $lm-brand-color-dark; + +$site-title-color: $lm-site-title-color; + +$text-color: $lm-text-color; +$background-color: $lm-background-color; +$code-background-color: $lm-code-background-color; + +$link-base-color: $lm-link-base-color; +$link-visited-color: $lm-link-visited-color; +$link-hover-color: $lm-link-hover-color; + +$border-color-01: $lm-border-color-01; +$border-color-02: $lm-border-color-02; +$border-color-03: $lm-border-color-03; + +$table-text-color: $lm-table-text-color; +$table-zebra-color: $lm-table-zebra-color; +$table-header-bg-color: $lm-table-header-bg-color; +$table-header-border: $lm-table-header-border; +$table-border-color: $lm-table-border-color; + + +@if $color-scheme-auto { + + // Auto mode + + :root { + --minima-brand-color: #{$lm-brand-color}; + --minima-brand-color-light: #{$lm-brand-color-light}; + --minima-brand-color-dark: #{$lm-brand-color-dark}; + + --minima-site-title-color: #{$lm-site-title-color}; + + --minima-text-color: #{$lm-text-color}; + --minima-background-color: #{$lm-background-color}; + --minima-code-background-color: #{$lm-code-background-color}; + + --minima-link-base-color: #{$lm-link-base-color}; + --minima-link-visited-color: #{$lm-link-visited-color}; + --minima-link-hover-color: #{$lm-link-hover-color}; + + --minima-border-color-01: #{$lm-border-color-01}; + --minima-border-color-02: #{$lm-border-color-02}; + --minima-border-color-03: #{$lm-border-color-03}; + + --minima-table-text-color: #{$lm-table-text-color}; + --minima-table-zebra-color: #{$lm-table-zebra-color}; + --minima-table-header-bg-color: #{$lm-table-header-bg-color}; + --minima-table-header-border: #{$lm-table-header-border}; + --minima-table-border-color: #{$lm-table-border-color}; + } + + @include lm-highlight; + + @media (prefers-color-scheme: dark) { + :root { + --minima-brand-color: #{$dm-brand-color}; + --minima-brand-color-light: #{$dm-brand-color-light}; + --minima-brand-color-dark: #{$dm-brand-color-dark}; + + --minima-site-title-color: #{$dm-site-title-color}; + + --minima-text-color: #{$dm-text-color}; + --minima-background-color: #{$dm-background-color}; + --minima-code-background-color: #{$dm-code-background-color}; + + --minima-link-base-color: #{$dm-link-base-color}; + --minima-link-visited-color: #{$dm-link-visited-color}; + --minima-link-hover-color: #{$dm-link-hover-color}; + + --minima-border-color-01: #{$dm-border-color-01}; + --minima-border-color-02: #{$dm-border-color-02}; + --minima-border-color-03: #{$dm-border-color-03}; + + --minima-table-text-color: #{$dm-table-text-color}; + --minima-table-zebra-color: #{$dm-table-zebra-color}; + --minima-table-header-bg-color: #{$dm-table-header-bg-color}; + --minima-table-header-border: #{$dm-table-header-border}; + --minima-table-border-color: #{$dm-table-border-color}; + } + + @include dm-highlight; + } + + $brand-color: var(--minima-brand-color); + $brand-color-light: var(--minima-brand-color-light); + $brand-color-dark: var(--minima-brand-color-dark); + + $site-title-color: var(--minima-site-title-color); + + $text-color: var(--minima-text-color); + $background-color: var(--minima-background-color); + $code-background-color: var(--minima-code-background-color); + + $link-base-color: var(--minima-link-base-color); + $link-visited-color: var(--minima-link-visited-color); + $link-hover-color: var(--minima-link-hover-color); + + $border-color-01: var(--minima-border-color-01); + $border-color-02: var(--minima-border-color-02); + $border-color-03: var(--minima-border-color-03); + + $table-text-color: var(--minima-table-text-color); + $table-zebra-color: var(--minima-table-zebra-color); + $table-header-bg-color: var(--minima-table-header-bg-color); + $table-header-border: var(--minima-table-header-border); + $table-border-color: var(--minima-table-border-color); + + +} @else if $color-scheme-dark { + + // Dark skin (always dark mode) + + $brand-color: $dm-brand-color; + $brand-color-light: $dm-brand-color-light; + $brand-color-dark: $dm-brand-color-dark; + + $site-title-color: $dm-site-title-color; + + $text-color: $dm-text-color; + $background-color: $dm-background-color; + $code-background-color: $dm-code-background-color; + + $link-base-color: $dm-link-base-color; + $link-visited-color: $dm-link-visited-color; + $link-hover-color: $dm-link-hover-color; + + $border-color-01: $dm-border-color-01; + $border-color-02: $dm-border-color-02; + $border-color-03: $dm-border-color-03; + + $table-text-color: $dm-table-text-color; + $table-zebra-color: $dm-table-zebra-color; + $table-header-bg-color: $dm-table-header-bg-color; + $table-header-border: $dm-table-header-border; + $table-border-color: $dm-table-border-color; + + @include dm-highlight; + + +} @else { + + // Classic skin syntax highlighting + @include lm-highlight; + +} diff --git a/_sass/minima/skins/classic.scss b/_sass/minima/skins/classic.scss new file mode 100644 index 0000000..e61b078 --- /dev/null +++ b/_sass/minima/skins/classic.scss @@ -0,0 +1,5 @@ +@charset "utf-8"; + +$color-scheme-auto: false; +$color-scheme-dark: false; +@import "minima/skins/auto"; diff --git a/_sass/minima/skins/dark.scss b/_sass/minima/skins/dark.scss new file mode 100644 index 0000000..159226e --- /dev/null +++ b/_sass/minima/skins/dark.scss @@ -0,0 +1,5 @@ +@charset "utf-8"; + +$color-scheme-auto: false; +$color-scheme-dark: true; +@import "minima/skins/auto"; diff --git a/_sass/minima/skins/solarized-dark.scss b/_sass/minima/skins/solarized-dark.scss new file mode 100644 index 0000000..500dceb --- /dev/null +++ b/_sass/minima/skins/solarized-dark.scss @@ -0,0 +1,5 @@ +@charset "utf-8"; + +$sol-is-auto: false; +$sol-is-dark: true; +@import "minima/skins/solarized"; diff --git a/_sass/minima/skins/solarized-light.scss b/_sass/minima/skins/solarized-light.scss new file mode 100644 index 0000000..d2fc065 --- /dev/null +++ b/_sass/minima/skins/solarized-light.scss @@ -0,0 +1,4 @@ +@charset "utf-8"; + +$sol-is-auto: false; +@import "minima/skins/solarized"; diff --git a/_sass/minima/skins/solarized.scss b/_sass/minima/skins/solarized.scss new file mode 100644 index 0000000..7ac1f5a --- /dev/null +++ b/_sass/minima/skins/solarized.scss @@ -0,0 +1,201 @@ +@charset "utf-8"; + +// Solarized skin +// ============== +// Created by Sander Voerman using the Solarized +// color scheme by Ethan Schoonover . + +// This style sheet implements three options for the minima.skin setting: +// "solarized-light" for light mode, "solarized-dark" for dark mode, and +// "solarized" for light or dark mode depending on user preference. +$sol-is-auto: true !default; +$sol-is-dark: false !default; + + +// Color scheme +// ------------ +// The inline comments show the canonical L*a*b values for each color. + +$sol-base03: #002b36; // 15 -12 -12 +$sol-base02: #073642; // 20 -12 -12 +$sol-base01: #586e75; // 45 -07 -07 +$sol-base00: #657b83; // 50 -07 -07 +$sol-base0: #839496; // 60 -06 -03 +$sol-base1: #93a1a1; // 65 -05 -02 +$sol-base2: #eee8d5; // 92 -00 10 +$sol-base3: #fdf6e3; // 97 00 10 +$sol-yellow: #b58900; // 60 10 65 +$sol-orange: #cb4b16; // 50 50 55 +$sol-red: #dc322f; // 50 65 45 +$sol-magenta: #d33682; // 50 65 -05 +$sol-violet: #6c71c4; // 50 15 -45 +$sol-blue: #268bd2; // 55 -10 -45 +$sol-cyan: #2aa198; // 60 -35 -05 +$sol-green: #859900; // 60 -20 65 + + +// Mixed colors +// ------------ +// While not part of the original Solarized base tones, these derived tones +// are meant to replicate the visual style of the classic skin. They should +// not be used in cases where sufficiently contrasting colors are needed. + +$sol-light-mix1: mix($sol-base1, $sol-base3); +$sol-light-mix2: mix($sol-blue, $sol-base00); +$sol-light-mix3: mix($sol-base2, $sol-base3); +$sol-dark-mix1: mix($sol-base01, $sol-base03); +$sol-dark-mix2: mix($sol-blue, $sol-base0); +$sol-dark-mix3: mix($sol-base02, $sol-base03); + + +// Mode selection +// -------------- + +$sol-mono3: $sol-base3; +$sol-mono2: $sol-base2; +$sol-mono1: $sol-base1; +$sol-mono00: $sol-base00; +$sol-mono01: $sol-base01; +$sol-mix1: $sol-light-mix1; +$sol-mix2: $sol-light-mix2; +$sol-mix3: $sol-light-mix3; + +@if $sol-is-dark { + $sol-mono3: $sol-base03; + $sol-mono2: $sol-base02; + $sol-mono1: $sol-base01; + $sol-mono00: $sol-base0; + $sol-mono01: $sol-base1; + $sol-mix1: $sol-dark-mix1; + $sol-mix2: $sol-dark-mix2; + $sol-mix3: $sol-dark-mix3; +} + +@if $sol-is-auto { + :root { + --solarized-mono3: #{$sol-base3}; + --solarized-mono2: #{$sol-base2}; + --solarized-mono1: #{$sol-base1}; + --solarized-mono00: #{$sol-base00}; + --solarized-mono01: #{$sol-base01}; + --solarized-mix1: #{$sol-light-mix1}; + --solarized-mix2: #{$sol-light-mix2}; + --solarized-mix3: #{$sol-light-mix3}; + } + + @media (prefers-color-scheme: dark) { + :root { + --solarized-mono3: #{$sol-base03}; + --solarized-mono2: #{$sol-base02}; + --solarized-mono1: #{$sol-base01}; + --solarized-mono00: #{$sol-base0}; + --solarized-mono01: #{$sol-base1}; + --solarized-mix1: #{$sol-dark-mix1}; + --solarized-mix2: #{$sol-dark-mix2}; + --solarized-mix3: #{$sol-dark-mix3}; + } + } + + $sol-mono3: var(--solarized-mono3); + $sol-mono2: var(--solarized-mono2); + $sol-mono1: var(--solarized-mono1); + $sol-mono00: var(--solarized-mono00); + $sol-mono01: var(--solarized-mono01); + $sol-mix1: var(--solarized-mix1); + $sol-mix2: var(--solarized-mix2); + $sol-mix3: var(--solarized-mix3); +} + + +// Minima color variables +// ---------------------- + +$brand-color: $sol-mono1 !default; +$brand-color-light: $sol-mix1 !default; +$brand-color-dark: $sol-mono00 !default; + +$site-title-color: $sol-mono00 !default; + +$text-color: $sol-mono01 !default; +$background-color: $sol-mono3 !default; +$code-background-color: $sol-mono2 !default; + +$link-base-color: $sol-blue !default; +$link-visited-color: $sol-mix2 !default; +$link-hover-color: $sol-mono00 !default; + +$border-color-01: $brand-color-light !default; +$border-color-02: $sol-mono1 !default; +$border-color-03: $sol-mono00 !default; + +$table-text-color: $sol-mono00 !default; +$table-zebra-color: $sol-mix3 !default; +$table-header-bg-color: $sol-mono2 !default; +$table-header-border: $sol-mono1 !default; +$table-border-color: $sol-mono1 !default; + + +// Syntax highlighting styles +// -------------------------- + +.highlight { + .c { color: $sol-mono1; font-style: italic } // Comment + .err { color: $sol-red } // Error + .k { color: $sol-mono01; font-weight: bold } // Keyword + .o { color: $sol-mono01; font-weight: bold } // Operator + .cm { color: $sol-mono1; font-style: italic } // Comment.Multiline + .cp { color: $sol-mono1; font-weight: bold } // Comment.Preproc + .c1 { color: $sol-mono1; font-style: italic } // Comment.Single + .cs { color: $sol-mono1; font-weight: bold; font-style: italic } // Comment.Special + .gd { color: $sol-red } // Generic.Deleted + .gd .x { color: $sol-red } // Generic.Deleted.Specific + .ge { color: $sol-mono00; font-style: italic } // Generic.Emph + .gr { color: $sol-red } // Generic.Error + .gh { color: $sol-mono1 } // Generic.Heading + .gi { color: $sol-green } // Generic.Inserted + .gi .x { color: $sol-green } // Generic.Inserted.Specific + .go { color: $sol-mono00 } // Generic.Output + .gp { color: $sol-mono00 } // Generic.Prompt + .gs { color: $sol-mono01; font-weight: bold } // Generic.Strong + .gu { color: $sol-mono1 } // Generic.Subheading + .gt { color: $sol-red } // Generic.Traceback + .kc { color: $sol-mono01; font-weight: bold } // Keyword.Constant + .kd { color: $sol-mono01; font-weight: bold } // Keyword.Declaration + .kp { color: $sol-mono01; font-weight: bold } // Keyword.Pseudo + .kr { color: $sol-mono01; font-weight: bold } // Keyword.Reserved + .kt { color: $sol-violet; font-weight: bold } // Keyword.Type + .m { color: $sol-cyan } // Literal.Number + .s { color: $sol-magenta } // Literal.String + .na { color: $sol-cyan } // Name.Attribute + .nb { color: $sol-blue } // Name.Builtin + .nc { color: $sol-violet; font-weight: bold } // Name.Class + .no { color: $sol-cyan } // Name.Constant + .ni { color: $sol-violet } // Name.Entity + .ne { color: $sol-violet; font-weight: bold } // Name.Exception + .nf { color: $sol-blue; font-weight: bold } // Name.Function + .nn { color: $sol-mono00 } // Name.Namespace + .nt { color: $sol-blue } // Name.Tag + .nv { color: $sol-cyan } // Name.Variable + .ow { color: $sol-mono01; font-weight: bold } // Operator.Word + .w { color: $sol-mono1 } // Text.Whitespace + .mf { color: $sol-cyan } // Literal.Number.Float + .mh { color: $sol-cyan } // Literal.Number.Hex + .mi { color: $sol-cyan } // Literal.Number.Integer + .mo { color: $sol-cyan } // Literal.Number.Oct + .sb { color: $sol-magenta } // Literal.String.Backtick + .sc { color: $sol-magenta } // Literal.String.Char + .sd { color: $sol-magenta } // Literal.String.Doc + .s2 { color: $sol-magenta } // Literal.String.Double + .se { color: $sol-magenta } // Literal.String.Escape + .sh { color: $sol-magenta } // Literal.String.Heredoc + .si { color: $sol-magenta } // Literal.String.Interpol + .sx { color: $sol-magenta } // Literal.String.Other + .sr { color: $sol-green } // Literal.String.Regex + .s1 { color: $sol-magenta } // Literal.String.Single + .ss { color: $sol-magenta } // Literal.String.Symbol + .bp { color: $sol-mono1 } // Name.Builtin.Pseudo + .vc { color: $sol-cyan } // Name.Variable.Class + .vg { color: $sol-cyan } // Name.Variable.Global + .vi { color: $sol-cyan } // Name.Variable.Instance + .il { color: $sol-cyan } // Literal.Number.Integer.Long +} diff --git a/assets/css/style.scss b/assets/css/style.scss new file mode 100644 index 0000000..0d1fce9 --- /dev/null +++ b/assets/css/style.scss @@ -0,0 +1,7 @@ +--- +# Only the main Sass file needs front matter (the dashes are enough) +--- + +@import + "minima/skins/{{ site.minima.skin | default: 'classic' }}", + "minima/initialize"; diff --git a/minima-social-icons.liquid b/minima-social-icons.liquid new file mode 100644 index 0000000..d2951fa --- /dev/null +++ b/minima-social-icons.liquid @@ -0,0 +1,18 @@ +--- +permalink: /assets/minima-social-icons.svg +--- + + +{% comment %} + Iterate through {{ site.minima.social_links }} and render platform related SVG-symbol + unless the platform is "rss" because we need the "rss" symbol for the `Subscribe` link + in the footer and therefore inject the "rss" icon outside the iteration loop. +{% endcomment %} +{% for entry in site.minima.social_links %} + {%- assign symbol_id = entry.platform -%} + {%- unless symbol_id == "rss" -%} + {%- include svg_symbol.html key = symbol_id -%} + {% endunless %} +{%- endfor -%} + {%- include svg_symbol.html key = "rss" -%} + diff --git a/minima.gemspec b/minima.gemspec new file mode 100644 index 0000000..0877069 --- /dev/null +++ b/minima.gemspec @@ -0,0 +1,24 @@ +# frozen_string_literal: true + +Gem::Specification.new do |spec| + spec.name = "minima" + spec.version = "3.0.0.dev" + spec.authors = ["Joel Glovier"] + spec.email = ["jglovier@github.com"] + + spec.summary = "A beautiful, minimal theme for Jekyll." + spec.homepage = "https://github.com/jekyll/minima" + spec.license = "MIT" + + spec.metadata["plugin_type"] = "theme" + + spec.files = `git ls-files -z`.split("\x0").select do |f| + f.match(%r!^(assets|_(includes|layouts|sass)/|(LICENSE|README)((\.(txt|md|markdown)|$)))!i) + end + + spec.add_runtime_dependency "jekyll", ">= 3.5", "< 5.0" + spec.add_runtime_dependency "jekyll-feed", "~> 0.9" + spec.add_runtime_dependency "jekyll-seo-tag", "~> 2.1" + + spec.add_development_dependency "bundler" +end