jekyll-theme-miniplex 0.11.1 → 0.12.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f9c11f637c111319d8ae149ae36b8d8215908f1053c6d24f2f5be9be01a94180
-  data.tar.gz: 329c554bbe5a8dcfc45a1dd52cad6ed5a8a392d9a2448b9f1bef975936736d4d
+  metadata.gz: 5f1ab9dc8b592c92d3965aa0fe9344c3e375c14f01f973f80b9cdf33a079e767
+  data.tar.gz: 1723b9f2f7c59944209952462163581d941ed29b4b88e80814230fc8031b13ce
 SHA512:
-  metadata.gz: 5c16965f1cf14bb73c6daefb1c2ddb223b0304d607f84f4e22f33c18e99ea324b5ea45e2d35211225f5ded5494d3660eb89950268dcba183d9fa6df3b24686e6
-  data.tar.gz: c280e7c8fe1d404056d4294b4c599f4bb869e56b34709b418237a1dce4f888505d7cac8ff0264db690654db0349df47c7f7693851028e824ace87fba89499e85
+  metadata.gz: fd276a2608f125119bac29acbb6164875fe2562eeb8459d41bc574711c0f7b9de4fe3111011ded081c7e2f9472b5b7e617c69f5cb12cb1ae7483e99c0c26d130
+  data.tar.gz: a7269b37cf85927bbd95ca61e3c361156d238498ebb6e1f08d48f341efcac27144dee08f58699ed1dd0a4d85f4ec30ff6d2ebb9b897c948c4c1668faa1c2ef2e

data/README.md

@@ -90,8 +90,9 @@ Optionally, put any of the following files into the `_includes` folder to overri
 
 ## ToDos & Missing Features
 
-- [ ] In-page navigation
+- [ ] Font legibility & weights optimizations
 - [ ] Maximizable tables
+- [ ] In-page navigation
 - [ ] Breadcrumbs, if possible
 - [ ] Side notes, if possible
 
@@ -100,6 +101,9 @@ Optionally, put any of the following files into the `_includes` folder to overri
 
 Most recent at the top.
 
+- [X] Tests & fixes for mobile navigation. Issues:
+  - [X] Chrome on Android: Navigation bar position (floating or hidden)
+  - [X] Missing shadow on mobile nav
 - [X] Footer
 - [X] Dark mode
 - [X] Print CSS

data/_sass/jekyll-theme-miniplex.sass

@@ -2,6 +2,7 @@
 @use "sass:map"
 @use "sass:math"
 @use "sass:list"
+@use "sass:color"
 
 @import "reset"
 
@@ -220,7 +221,11 @@ $large_breakpoint: $medium_breakpoint + $large_minimum_left_navigation_width + 2
 @mixin quote_font
   font-family: IBMPlexSerif
   font-style: italic
-  color: var(--accent_color_1)
+
+@mixin monospaced_font
+  font-family: IBMPlexMono
+  font-weight: normal
+  font-style: normal
 
 // Accessibility
 .visually-hidden
@@ -243,6 +248,8 @@ $large_breakpoint: $medium_breakpoint + $large_minimum_left_navigation_width + 2
   // Colors for light mode
   --primary_foreground_color: #444444
   --heading_foreground_color: #333333
+  // Needs to be written as RGB, not hex, so that CSS rgba() works
+  --shadow_color: 51, 51, 51, 0.4
   --interactive_color: #777777
   --interactive_background_color: #eeeeee
   --accent_color_1: #777777
@@ -255,6 +262,8 @@ $large_breakpoint: $medium_breakpoint + $large_minimum_left_navigation_width + 2
   @media (prefers-color-scheme: dark)
     --primary_foreground_color: #ffffff
     --heading_foreground_color: #eeeeee
+    // Needs to be written as RGB, not hex, so that CSS rgba() works
+    --shadow_color: 255, 255, 255, 1.0 
     --interactive_color: #eeeeee
     --interactive_background_color: #777777
     --accent_color_1: #dddddd
@@ -279,10 +288,20 @@ body
 
     @include below_large_mode
       display: flex
+      position: fixed
+      height: 100vh 
+      width: 100vw
+      max-height: 100%
+      top: 0
+      left: 0
+      bottom: 0
+      right: 0
+      overflow-y: scroll
+
       flex-flow: column nowrap
       align-items: stretch
       justify-content: space-between
-      height: 100vh 
+      
     
     main#content
       background: var(--content_background_color)
@@ -344,10 +363,11 @@ body
         
       a
         color: var(--interactive_color)
-        background-color: var(--interactive_background_color)
+        background-image: linear-gradient(to right,var(--interactive_background_color) 0,var(--interactive_background_color) 100%)
+        background-size: 100% 20%
+        background-repeat: repeat-x
+        background-position: bottom
         text-decoration: none
-        padding-left: math.div($unit, 4)
-        padding-right: math.div($unit, 4)
 
         @include print_mode
           text-decoration: underline
@@ -485,11 +505,27 @@ body
         @include quote_font
         @include responsive_property(margin-top, $xs: 0.75 * $unit, $s: 0.875 * $unit, $m: 1 * $unit, $otherwise: 1 * $unit)
         @include responsive_property(margin-bottom, $xs: 0.75 * $unit, $s: 0.875 * $unit, $m: 1 * $unit, $otherwise: 1 * $unit)
+        color: var(--accent_color_1)
         background-color: var(--group_color_level_1)
         padding: $unit
 
         p
           margin-bottom: 0
+
+      pre
+        @include monospaced_font
+        @include responsive_property(margin-top, $xs: 0.75 * $unit, $s: 0.875 * $unit, $m: 1 * $unit, $otherwise: 1 * $unit)
+        @include responsive_property(margin-bottom, $xs: 0.75 * $unit, $s: 0.875 * $unit, $m: 1 * $unit, $otherwise: 1 * $unit)
+        background-color: var(--group_color_level_1)
+        padding: $unit
+        overflow-x: scroll
+        color: var(--accent_color_1)
+
+      code 
+        @include monospaced_font
+        color: var(--accent_color_1)
+        background-color: var(--group_color_level_1)
+        padding: math.div($unit, 4)
         
       table
         @include responsive_property(margin-bottom, $xs: 1.5 * $unit, $s: 1.75 * $unit, $m: 2 * $unit, $otherwise: 2 * $unit)
@@ -734,7 +770,9 @@ body
 
     // Mobile Navigation, start state
     nav#navigation-mobile
+      position: -webkit-sticky
       position: sticky
+      align-self: stretch
 
       @include print_mode
         display: none
@@ -748,7 +786,7 @@ body
         display: none
 
       #navigation-controls
-        box-shadow: 0 math.div($unit, 2) math.div($unit, 1) rgba(var(--heading_foreground_color), 0.4)
+        box-shadow: 0 math.div($unit, 2) math.div($unit, 1) rgba(var(--shadow_color))
 
         button#mobile-navigation-toggle
           --icon-url: url("/assets/images/menu-outline.svg")
@@ -762,7 +800,7 @@ body
 
       #navigation-items
         display: block
-        box-shadow: 0 math.div($unit, 2) math.div($unit, 1) rgba(var(--heading_foreground_color), 0.4)
+        box-shadow: 0 math.div($unit, 2) math.div($unit, 1) rgba(var(--shadow_color))
 
       #navigation-controls
         button#mobile-navigation-toggle

data/assets/js/main.coffee

@@ -26,13 +26,13 @@ document.addEventListener "DOMContentLoaded", (DOMLoadedEvent) ->
         # Open navigation
         mobileNavigation.dataset.state = "open"
 
-        body.style.overflow = "hidden"
-
         mobileNavigation.style.position = "fixed"
         mobileNavigation.style.width = "100vw"
         mobileNavigation.style.height = "100vh"
         mobileNavigation.style.removeProperty("grid-template-rows")
 
+        body.style.overflow = "hidden"
+
         navigationToggleButton.setAttribute "aria-expanded", "true"
         mobileNavigationItems.setAttribute "aria-hidden", "false"
         
@@ -41,13 +41,14 @@ document.addEventListener "DOMContentLoaded", (DOMLoadedEvent) ->
         navigationToggleButton.setAttribute "aria-expanded", "false"
         mobileNavigation.dataset.state = "closed"
 
-        body.style.overflow = "initial"
-
         mobileNavigation.style.position = "sticky"
         mobileNavigation.style.removeProperty("width")
         mobileNavigation.style.removeProperty("height")
         mobileNavigation.style.gridTemplateRows = "[transparent-nav-close-area] 0 [navigation-items] 0 [navigation-controls] min-content"
 
+        body.style.overflow = "initial"
+
+        navigationToggleButton.setAttribute "aria-expanded", "false"
         mobileNavigationItems.setAttribute "aria-hidden", "true"
 
         mobileNavigation.scrollIntoView {block: "end"}

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-theme-miniplex
 version: !ruby/object:Gem::Version
-  version: 0.11.1
+  version: 0.12.1
 platform: ruby
 authors:
 - Timo Würsch
-autorequire: 
+autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-03-03 00:00:00.000000000 Z
+date: 2023-03-23 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -38,7 +38,7 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: 2.0.0
-description: 
+description:
 email:
 - twuersch@fastmail.com
 executables: []
@@ -78,7 +78,7 @@ homepage: https://gitlab.com/twuersch/jekyll-theme-miniplex
 licenses:
 - MIT
 metadata: {}
-post_install_message: 
+post_install_message:
 rdoc_options: []
 require_paths:
 - lib
@@ -93,8 +93,8 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.3.26
-signing_key: 
+rubygems_version: 3.3.7
+signing_key:
 specification_version: 4
 summary: A Jekyll theme.
 test_files: []