jekyll-theme-peaceful-gates 1.2.0 → 2.0.0

data/_sass/jekyll-theme-peaceful-gates/_centered.scss

@@ -1,29 +1,29 @@
-.centered-root {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-
-    display: grid;
-    grid-template-rows: 1fr;
-    grid-template-columns: 1fr;
-    place-items: center;
-}
-
-.centered-container {
-    transform: translateY(-50%);
-}
-
-.centered-header {
-    margin: $spacing-3 0pt;
-    text-align: center;
-    * { margin: 0pt; }
-
-    .centered-title {
-        font-size: $mega-font-size;
-    }
-
-    .centered-subtitle {
-        font-size: $medium-font-size;
-        font-weight: normal;
-    }
+.centered-root {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+
+    display: grid;
+    grid-template-rows: 1fr;
+    grid-template-columns: 1fr;
+    place-items: center;
+}
+
+.centered-container {
+    transform: translateY(-50%);
+}
+
+.centered-header {
+    margin: $spacing-3 0pt;
+    text-align: center;
+    * { margin: 0pt; }
+
+    .centered-title {
+        font-size: $mega-font-size;
+    }
+
+    .centered-subtitle {
+        font-size: $medium-font-size;
+        font-weight: normal;
+    }
 }

data/_sass/jekyll-theme-peaceful-gates/_code.scss

@@ -1,121 +1,121 @@
-code {
-    font-family: $code-font-family;
-    * { font-family: $code-font-family; }
-    @include with-theme {
-        color: color-for(primary);
-    }
-}
-
-pre {
-    overflow-x: auto;
-    margin: $spacing-3 0pt;
-    padding: $spacing-3;
-    @include with-theme {
-        background-color: color-for(hl-area);
-    }
-    border-radius: $spacing-1;
-    > code {
-        background: none;
-        border-radius: 0pt;
-        padding: 0pt;
-        @include with-theme {
-            color: color-for(text);
-        }
-    }
-}
-
-/**
- * Syntax highlighting styles
- */
- .highlight {
-    // Highlight takes care of syntax highlighting stuff
-    margin: $spacing-3 0pt;
-    padding: $spacing-3;
-    border-radius: $spacing-1;
-    > pre { 
-        margin: 0pt;
-        padding: 0pt;
-        border-radius: 0pt;
-        background: none;
-    }
-
-    @include with-theme {
-        background-color: color-for(hl-area);
-
-        // Syntax scopes
-
-        // Comment
-        .c, .cm, .cp, .c1, .cs  { color: color-for(hl); font-style: italic } // Comment
-        // .cm    { color: darken($color: $white-color, $amount: 30%); font-style: italic } // Comment.Multiline
-        // .cp    { color: darken($color: $white-color, $amount: 30%); font-weight: bold } // Comment.Preproc
-        // .c1    { color: darken($color: $white-color, $amount: 30%); font-style: italic } // Comment.Single
-        // .cs    { color: darken($color: $white-color, $amount: 30%); font-weight: bold; font-style: italic } // Comment.Special
-
-        // Keywords
-        .k, .kd { color: color-for(primary); font-weight: bold; } // Keyword
-        // .kd  { color: darken($color: $white-color, $amount: 10%); font-weight: bold } // Keyword.Declaration
-        // .kt  { } // Keyword.Type
-        // .kc  { color: darken($color: $white-color, $amount: 10%); font-weight: bold } // Keyword.Constant
-        // .kp  { color: darken($color: $white-color, $amount: 10%); font-weight: bold } // Keyword.Pseudo
-        // .kr  { color: darken($color: $white-color, $amount: 10%); font-weight: bold } // Keyword.Reserved
-
-        // Operators
-        // .o     { color: darken($color: $white-color, $amount: 10%); font-weight: bold } // Operator
-        // .ow    { color: darken($color: $white-color, $amount: 10%); font-weight: bold } // Operator.Word
-
-        // Generic
-        // .go    { color: darken($color: $white-color, $amount: 30%); } // Generic.Output
-        // .gh    { color: #999 } // Generic.Heading
-        // .ge    { font-style: italic } // Generic.Emph
-        // .gd    { color: #000; background-color: #fdd } // Generic.Deleted
-        // .gd .x { color: #000; background-color: #faa } // Generic.Deleted.Specific
-        // .gi    { color: #000; background-color: #dfd } // Generic.Inserted
-        // .gi .x { color: #000; background-color: #afa } // Generic.Inserted.Specific
-        // .gp    { color: #555 } // Generic.Prompt
-        // .gs    { font-weight: bold } // Generic.Strong
-        // .gt    { color: #f00 } // Generic.Traceback
-        // .gu    { color: #aaa } // Generic.Subheading
-
-        // Names
-        .na  { color: color-for(primary) } // Name.Attribute
-        // .nb  { color: lighten($color: $back-color, $amount: 50%); } // Name.Builtin
-        // .nc  { color: lighten($color: $back-color, $amount: 40%); font-weight: bold } // Name.Class
-        // .no  { color: lighten($color: $back-color, $amount: 40%) } // Name.Constant
-        // .ni  { color: darken($color: $white-color, $amount: 20%) } // Name.Entity
-        // .ne  { color: #900; font-weight: bold } // Name.Exception
-        // .nf  { color: lighten($color: $back-color, $amount: 55%); font-weight: bold } // Name.Function
-        // .nn  { color: darken($color: $white-color, $amount: 20%) } // Name.Namespace
-        .nt     { color: color-for(primary); font-weight: bold; } // Name.Tag
-        // .nv  { color: darken($color: $white-color, $amount: 20%) } // Name.Variable
-        // .bp  { color: darken($color: $white-color, $amount: 20%) } // Name.Builtin.Pseudo
-        // .vc  { color: darken($color: $white-color, $amount: 20%) } // Name.Variable.Class
-        // .vg  { color: darken($color: $white-color, $amount: 20%) } // Name.Variable.Global
-        // .vi  { color: darken($color: $white-color, $amount: 20%) } // Name.Variable.Instance
-        
-        // Literal.Number
-        .m, .mf, .mh, .mi, .mo, .il { color: color-for(primary); }
-        // .mf    { color: #880 } // Literal.Number.Float
-        // .mh    { color: #880 } // Literal.Number.Hex
-        // .mi    { color: #880 } // Literal.Number.Integer
-        // .mo    { color: #880 } // Literal.Number.Oct
-        // .il    { color: #099 } // Literal.Number.Integer.Long
-        
-        // Literal.String
-        .dl, .s, .sb, .sc, .sd, .s2, .se, .si, .sx, .sr, .s1, .ss { color: color-for(hl); }
-        // .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
-        
-        // .w     { color: #bbb } // Text.Whitespace
-        // .gr    { color: #f00 } // Generic.Error
-        // .err   { color: #f00 } // Error
-    }
+code {
+    font-family: $code-font-family;
+    * { font-family: $code-font-family; }
+    @include with-theme {
+        color: color-for(primary);
+    }
+}
+
+pre {
+    overflow-x: auto;
+    margin: $spacing-3 0pt;
+    padding: $spacing-3;
+    @include with-theme {
+        background-color: color-for(hl-area);
+    }
+    border-radius: $spacing-1;
+    > code {
+        background: none;
+        border-radius: 0pt;
+        padding: 0pt;
+        @include with-theme {
+            color: color-for(text);
+        }
+    }
+}
+
+/**
+ * Syntax highlighting styles
+ */
+ .highlight {
+    // Highlight takes care of syntax highlighting stuff
+    margin: $spacing-3 0pt;
+    padding: $spacing-3;
+    border-radius: $spacing-1;
+    > pre { 
+        margin: 0pt;
+        padding: 0pt;
+        border-radius: 0pt;
+        background: none;
+    }
+
+    @include with-theme {
+        background-color: color-for(hl-area);
+
+        // Syntax scopes
+
+        // Comment
+        .c, .cm, .cp, .c1, .cs  { color: color-for(hl); font-style: italic } // Comment
+        // .cm    { color: darken($color: $white-color, $amount: 30%); font-style: italic } // Comment.Multiline
+        // .cp    { color: darken($color: $white-color, $amount: 30%); font-weight: bold } // Comment.Preproc
+        // .c1    { color: darken($color: $white-color, $amount: 30%); font-style: italic } // Comment.Single
+        // .cs    { color: darken($color: $white-color, $amount: 30%); font-weight: bold; font-style: italic } // Comment.Special
+
+        // Keywords
+        .k, .kd { color: color-for(primary); font-weight: bold; } // Keyword
+        // .kd  { color: darken($color: $white-color, $amount: 10%); font-weight: bold } // Keyword.Declaration
+        // .kt  { } // Keyword.Type
+        // .kc  { color: darken($color: $white-color, $amount: 10%); font-weight: bold } // Keyword.Constant
+        // .kp  { color: darken($color: $white-color, $amount: 10%); font-weight: bold } // Keyword.Pseudo
+        // .kr  { color: darken($color: $white-color, $amount: 10%); font-weight: bold } // Keyword.Reserved
+
+        // Operators
+        // .o     { color: darken($color: $white-color, $amount: 10%); font-weight: bold } // Operator
+        // .ow    { color: darken($color: $white-color, $amount: 10%); font-weight: bold } // Operator.Word
+
+        // Generic
+        // .go    { color: darken($color: $white-color, $amount: 30%); } // Generic.Output
+        // .gh    { color: #999 } // Generic.Heading
+        // .ge    { font-style: italic } // Generic.Emph
+        // .gd    { color: #000; background-color: #fdd } // Generic.Deleted
+        // .gd .x { color: #000; background-color: #faa } // Generic.Deleted.Specific
+        // .gi    { color: #000; background-color: #dfd } // Generic.Inserted
+        // .gi .x { color: #000; background-color: #afa } // Generic.Inserted.Specific
+        // .gp    { color: #555 } // Generic.Prompt
+        // .gs    { font-weight: bold } // Generic.Strong
+        // .gt    { color: #f00 } // Generic.Traceback
+        // .gu    { color: #aaa } // Generic.Subheading
+
+        // Names
+        .na  { color: color-for(primary) } // Name.Attribute
+        // .nb  { color: lighten($color: $back-color, $amount: 50%); } // Name.Builtin
+        // .nc  { color: lighten($color: $back-color, $amount: 40%); font-weight: bold } // Name.Class
+        // .no  { color: lighten($color: $back-color, $amount: 40%) } // Name.Constant
+        // .ni  { color: darken($color: $white-color, $amount: 20%) } // Name.Entity
+        // .ne  { color: #900; font-weight: bold } // Name.Exception
+        // .nf  { color: lighten($color: $back-color, $amount: 55%); font-weight: bold } // Name.Function
+        // .nn  { color: darken($color: $white-color, $amount: 20%) } // Name.Namespace
+        .nt     { color: color-for(primary); font-weight: bold; } // Name.Tag
+        // .nv  { color: darken($color: $white-color, $amount: 20%) } // Name.Variable
+        // .bp  { color: darken($color: $white-color, $amount: 20%) } // Name.Builtin.Pseudo
+        // .vc  { color: darken($color: $white-color, $amount: 20%) } // Name.Variable.Class
+        // .vg  { color: darken($color: $white-color, $amount: 20%) } // Name.Variable.Global
+        // .vi  { color: darken($color: $white-color, $amount: 20%) } // Name.Variable.Instance
+        
+        // Literal.Number
+        .m, .mf, .mh, .mi, .mo, .il { color: color-for(primary); }
+        // .mf    { color: #880 } // Literal.Number.Float
+        // .mh    { color: #880 } // Literal.Number.Hex
+        // .mi    { color: #880 } // Literal.Number.Integer
+        // .mo    { color: #880 } // Literal.Number.Oct
+        // .il    { color: #099 } // Literal.Number.Integer.Long
+        
+        // Literal.String
+        .dl, .s, .sb, .sc, .sd, .s2, .se, .si, .sx, .sr, .s1, .ss { color: color-for(hl); }
+        // .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
+        
+        // .w     { color: #bbb } // Text.Whitespace
+        // .gr    { color: #f00 } // Generic.Error
+        // .err   { color: #f00 } // Error
+    }
 }

data/_sass/jekyll-theme-peaceful-gates/_footer.scss

@@ -1,55 +1,62 @@
-.footer {
-    padding: $spacing-3;
-    @include on-desktop {
-        padding: $spacing-3 $content-gutters-width;
-        margin-top: $spacing-3;
-        margin-left: $desktop-menu-width;
-    }
-    font-size: $small-font-size;
-    text-align: center;
-    @include with-theme {
-        color: color-for(hl);
-    }
-}
-
-@mixin footer-section {
-    margin: $spacing-1 0pt;
-}
-
-.site-description {
-    @include footer-section;
-    text-align: justify;
-}
-
-.social-bar {
-    @include footer-section;
-}
-
-.copyright {
-    @include footer-section;
-    font-style: italic;
-}
-
-.social-link {
-    // Sizing and spacing
-    margin: $spacing-1;
-
-    // Sizing is scaled by font
-    $font-size: $medium-font-size;
-
-    // Manually set width and height
-    width: $font-size + 2*$spacing-1;
-    height: $font-size + 2*$spacing-1;
-    border-radius: $font-size;
-
-    // Center icon
-    display: inline-grid;
-    grid-template-rows: 1fr;
-    grid-template-columns: 1fr;
-    place-items: center;
-
-    // Style icon
-    font-size: $font-size;
-    text-decoration: none;
-    color: inherit !important;
+.footer {
+    margin-top: $spacing-3;
+    padding: $spacing-3;
+    font-size: $small-font-size;
+    text-align: center;
+    @include with-theme {
+        background-color: color-for(hl-area);
+        color: color-for(hl);
+    }
+}
+
+.footer-container {
+    margin: auto;
+    @include on-desktop {
+        max-width: 50%;
+    }
+    @include on-tablet {
+        max-width: 75%;
+    }
+}
+
+@mixin footer-section {
+    margin: $spacing-1 0pt;
+}
+
+.site-description {
+    @include footer-section;
+    text-align: justify;
+}
+
+.social-bar {
+    @include footer-section;
+}
+
+.copyright {
+    @include footer-section;
+    font-style: italic;
+}
+
+.social-link {
+    // Sizing and spacing
+    margin: $spacing-1;
+
+    // Sizing is scaled by font
+    $font-size: $medium-font-size;
+
+    // Manually set width and height
+    width: $font-size + 2*$spacing-1;
+    height: $font-size + 2*$spacing-1;
+    border-radius: $font-size;
+
+    // Center icon
+    display: inline-grid;
+    grid-template-rows: 1fr;
+    grid-template-columns: 1fr;
+    place-items: center;
+
+    // Style icon
+    font-size: $font-size;
+    text-decoration: none;
+    color: inherit !important;
 }

data/_sass/jekyll-theme-peaceful-gates/_menu.scss

@@ -1,107 +1,112 @@
-.scroll-lock {
-    overflow: hidden;
-}
-
-.main-container {
-    margin: $spacing-3;
-    @include on-desktop {
-        margin: 0pt $spacing-3;
-        margin-left: $desktop-menu-width + $spacing-3;
-    }
-}
-
-.menu-window {
-    z-index: 1;
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    display: none;
-
-    @include on-desktop {
-        display: block;
-        width: $desktop-menu-width;
-    }
-}
-
-.menu {
-    position: absolute;
-    height: 100%;
-    width: 100%;
-    left: -100%;
-    @include on-desktop {
-        left: 0%;
-    }
-
-    display: grid;
-    grid-template-rows: auto;
-    grid-auto-columns: auto;
-
-    // Coloring
-    @include with-theme {
-        background-color: color-for(hl-area);
-        color: color-for(text);
-    }
-}
-
-.menu-container {
-    margin: $spacing-3;
-    display: grid;
-    grid-template-rows: auto 1fr auto;
-    grid-template-columns: 1fr;
-}
-
-.menu-header {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-
-    @include with-theme {
-        color: color-for(primary);
-    }
-
-    .menu-header-left {
-        flex: 0 1 auto;
-        display: flex;
-        align-items: center;
-    }
-
-    .menu-header-right {
-        flex: 1;
-        text-align: right;
-    }
-}
-
-.menu-title {
-    font-size: $mega-font-size;
-    font-weight: bold;
-    text-decoration: none;
-    color: inherit !important;
-    &:hover {
-        text-decoration: underline;
-    }
-}
-
-.menu-links {
-    list-style-type: none;
-    padding: 0pt;
-    text-align: right;
-    & > li {
-        margin: $spacing-2 0pt;
-        > a {
-            color: inherit !important;
-            text-decoration: none;
-            font-size: $large-font-size;
-            &:hover {
-                text-decoration: underline;
-            }
-        }
-    }
-}
-
-.menu-controls {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
+.main-container {
+    padding: $spacing-3;
+}
+
+.menu {
+    padding: $spacing-2 $spacing-2;
+    margin-bottom: $spacing-3;
+
+    @include with-theme {
+        background-color: color-for(primary);
+        color: color-for(text-on-primary);
+    }
+}
+
+.menu-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    @include on-mobile {
+        display: block;
+    }
+}
+
+.menu-header {
+    flex-grow: auto;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.menu-title-container {
+    flex: 1;
+}
+
+.menu-title {
+    margin: 0pt $spacing-2;
+    font-size: $large-font-size;
+    font-weight: bold;
+    text-decoration: none;
+    color: inherit !important;
+    &:hover {
+        text-decoration: underline;
+    }
+}
+
+.menu-dropdown-controls {
+    > .icon-button {
+        margin: 0pt;
+        @include with-theme {
+            color: color-for(text-on-primary);
+        }
+    }
+}
+
+.menu-dropdown {
+    @include not-on-mobile {
+        flex: 1 !important;
+        display: flex !important;
+        flex-direction: row !important;
+    }
+    @include on-mobile {
+        display: none;
+        text-align: right;
+    }
+}
+
+.menu-links {
+    // Spacing and alignment
+    margin: 0pt;
+    padding: 0pt;
+    list-style-type: none;
+
+    // Align
+    flex: 1;
+    display: flex;
+    align-items: center;
+    @include on-mobile {
+        display: block;
+    }
+
+    // List element styling
+    & > li {
+        // Spacing
+        margin: 0pt $spacing-2;
+        @include on-mobile {
+            margin: $spacing-2;
+        }
+        > a {
+            color: inherit !important;
+            text-decoration: none;
+            font-size: $normal-font-size;
+            &:hover {
+                text-decoration: underline;
+            }
+        }
+    }
+}
+
+.menu-controls {
+    // Align
+    display: flex;
+    flex-direction: row-reverse;
+    align-items: center;
+
+    .icon-button {
+        padding: $spacing-1;
+        font-size: $medium-font-size;
+        @include with-theme {
+            color: color-for(text-on-primary);
+        }
+    }
 }