jekyll-theme-horizon-flow 1.0.2 → 1.1.0

data/_sass/functions/_mixins.scss

@@ -36,7 +36,7 @@
     text-shadow: 0px 2px 4px rgba(100,100,100,0.5);
     color: $primary-color;
     font-family: Inter;
-    font-size: 36px;
+    font-size: 3em;
     font-weight: 700;
     text-align: center;
     margin-top: 0;
@@ -70,6 +70,13 @@
         text-decoration: none;
         font-weight: bold;
     }
+
+    @media screen and (max-width: $large) {
+        font-size: 1em;
+        flex-wrap: wrap;
+    }
+
+
 }
 
 @mixin findresults_day() {
@@ -90,8 +97,16 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: -5px;
-    margin: auto;
+    // gap: -5px;
+    min-width: 6em;
+
+    @media screen and (max-width: $large) {
+        border: 1px solid black;
+        background-color: $secondary-color;
+        border-radius: 500px;
+        padding: 1em;
+    }
+
 }
 
 @mixin findresults_summary() {
@@ -101,6 +116,12 @@
     a:hover {
         @include hover();
     }
+
+    @media screen and (max-width: $large) {
+        margin-top: 1em;
+        padding-bottom: 3em;
+        border-bottom: 1px dotted $primary-color;
+    }
 }
 
 @mixin showlinks($rows: 4) {
@@ -108,11 +129,11 @@
         content: "";
         display: block;
         border-top: 1px solid $secondary-color;
-        margin-left: -100vw;
-        margin-right: -100vw;
-        margin-bottom: 4em;
-        margin-top: 4em;
-        width: 200vw; //only working with overflow-x: hidden; in body in _base.scss
+        width: 98vw;
+        height: 0px;
+        margin: 4em 0;
+        position: relative;
+        left: -20%;
     }
 
     ul {
@@ -189,4 +210,109 @@
             }
         }
     }
+}
+
+
+@mixin footer_elements($rows: 5) {
+    ul {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        display: flex;
+        flex-wrap: wrap;
+        row-gap: 0;
+        column-gap: 0;
+
+        // Each item takes half of the container width minus the gap
+        @if $rows == 1 {
+            li {
+                width: calc(100% - 1rem);
+            }
+        } @else if $rows == 2 {
+            li {
+                width: calc(50% - 1rem);
+            }
+        } @else if $rows == 3 {
+            li {
+                width: calc(33.33% - 1rem);
+            }
+        } @else if $rows == 4 {
+            li {
+                width: calc(25% - 1rem);
+            }
+        } @else if $rows == 5 {
+            li {
+                width: calc(20% - 1rem);
+            }
+        }
+
+        li {
+            display: flex;
+            justify-content: space-between;
+            align-items: left;
+            cursor: pointer;
+            overflow-wrap: break-word;
+
+            a {
+                text-decoration: none;
+                color: $background-color;
+                text-transform: lowercase;
+                letter-spacing: -1px;
+                width: 100%;
+                display: flex;
+                justify-content: space-between;
+                padding: 0.5em;
+                text-align: left;
+                border: 1px solid rgba(0, 0, 0, 0.1);
+
+                &:hover {
+                    @include hover();
+                }
+            }
+
+            .archive_linktitle {
+                flex: 1;
+            }
+        }
+    }
+}
+
+@mixin footer_elements_auto() {
+    ul {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        display: flex;
+        flex-wrap: wrap;
+        row-gap: 0;
+        column-gap: 0;
+        width: fit-content;
+
+        li {
+            display: flex;
+            justify-content: space-between;
+            align-items: left;
+            cursor: pointer;
+            overflow-wrap: break-word;
+            a {
+                text-decoration: none;
+                color: $background-color;
+                text-transform: lowercase;
+                letter-spacing: -1px;
+                width: 100%;
+                display: flex;
+                justify-content: space-between;
+                padding: 0.5em;
+                text-align: left;
+
+                &:hover {
+                    @include hover();
+                }
+            }
+
+            .archive_linktitle {
+                flex: 1;
+            }
+        }
+    }
 }

data/_sass/functions/_values.scss

@@ -4,6 +4,8 @@ $medium: 768px !default;
 $large: 1024px !default;
 $xlarge: 1280px !default;
 
+// @media only screen and (max-width: $small)
+
 $darker: #060606;
 $dark: #404040;
 $mid: #9c9b9b;
@@ -18,4 +20,11 @@ $darkblue: #032539;
 $primary-color:#032539;
 $secondary-color: #1c768f;
 $background-color: #fbf3f2;
-$accent-color: #fa991c;
+$accent-color: #fa991c;
+
+@media (prefers-color-scheme: dark) {
+    $primary-color: #fbf3f2;
+    $secondary-color: #1c768f;
+    $background-color: #032539;
+    $accent-color: #fa991c;
+}

data/_sass/jekyll-theme-horizon-flow.scss

@@ -1,9 +1,10 @@
-@import "external/_normalize.scss";
-@import "external/_highlighter_rougify_base16dark.scss";
-
 @import "functions/_mixins.scss";
 @import "functions/_values.scss";
 
+@import "external/_normalize.scss";
+@import "external/_highlighter_rougify_base16dark.scss";
+@import "external/_comments.scss";
+
 @import "layouts/_archive.scss";
 @import "layouts/_categories.scss";
 @import "layouts/_home.scss";

data/_sass/layouts/_archive.scss

@@ -13,10 +13,6 @@
 /* ---------------------------------------------------- */
 
 
-.archive_all_years {
-	@include showlinks(2);
-}
-
 .archive_all_years1 {
 	@include showlinks(1);
 }
@@ -33,8 +29,10 @@
 	@include showlinks(4);
 }
 
-.archive_all_years5 {
-	@include showlinks(5);
+@media screen and (max-width: $large) {
+.archive_all_years {
+	@include showlinks(1);
+	}
 }
 
 /* ---------------------------------------------------- */

data/_sass/layouts/_categories.scss

@@ -13,10 +13,6 @@
 /* ---------------------------------------------------- */
 
 
-.categories_all {
-	@include showlinks(3);
-}
-
 .categories_all1 {
 	@include showlinks(1);
 }
@@ -37,6 +33,11 @@
 	@include showlinks(5);
 }
 
+@media screen and (max-width: $large) {
+	.categories_all {
+		@include showlinks(1);
+	}
+}
 
 /* ---------------------------------------------------- */
 /* ---------------------------------------------------- */

data/_sass/layouts/_home.scss

@@ -9,21 +9,21 @@
 /* ---------------------------------------------------- */
 // Supplements = Date + Tags
 
-.single_article {
-	&::after {
-		content: "";
-		display: block;
+#home {
+	.article-divider {
+		width: 98vw;
+		height: 0px;
 		border-top: 1px dashed $secondary-color;
-		margin-left: -100vw;
-		margin-right: -100vw;
-		margin-bottom: 4em; //same as .single_article .summary
-		width: 200vw; //only working with overflow-x: hidden; in body in _base.scss
+		margin: 4em 0;
+		position: relative;
+		left: -20%;
 	}
+}
 
-
+.single_article {
 	h3 {
 		//font-family: Inter;
-		font-size: 36px;
+		font-size: 2em;
 		font-weight: 700;
 		letter-spacing: 2px;
 		margin: 0;
@@ -31,7 +31,7 @@
 	}
 
 	a {
-		color: #022539;
+		color: $secondary-color;
 		text-decoration: none;
 
 		&:hover {
@@ -49,7 +49,6 @@
 
 	.summary {
 		margin-top: 2em;
-		margin-bottom: 4em;
 	}
 
 	.supplements-sep::before {
@@ -68,6 +67,17 @@
 .pagination {
 	display: flex;
 	justify-content: space-between;
+	color: $primary-color;
+
+	a {
+		color: $primary-color;
+	}
+
+	span {
+		&:hover {
+			@include hover();
+		}
+	}
 
 
 	.page_count {
@@ -75,21 +85,14 @@
 	}
 
 	.spannext {
-		padding-right: 15px;
-		padding-left: 12px;
-		border: 1px solid black;
-		padding-top: 0;
-		padding-bottom: 5px;
+		padding: 5px 15px;
+		border: 1px solid $primary-color;
 		height: 1em;
-		position: relative;
 	}
 
 	.spanprevious {
-		padding-right: 12px;
-		padding-left: 15px;
-		border: 1px solid black;
-		padding-top: 0;
-		padding-bottom: 5px;
+		padding: 5px 15px;
+		border: 1px solid $primary-color;
 		height: 1em;
 	}
 
@@ -100,21 +103,4 @@
 	.previous {
 		float: left;
 	}
-
-	.arrow {
-	  border: solid $primary-color;
-	  border-width: 0 3px 3px 0;
-	  display: inline-block;
-	  padding: 3px;
-	}
-
-	.right {
-	  transform: rotate(-45deg);
-	  -webkit-transform: rotate(-45deg);
-	}
-
-	.left {
-	  transform: rotate(135deg);
-	  -webkit-transform: rotate(135deg);
-	}
 }

data/_sass/layouts/_post.scss

@@ -5,6 +5,30 @@
 
 
 
+/* ---------------------------------------------------- */
+/* ---------------------------------------------------- */
+/* grid */
+/* ---------------------------------------------------- */
+/* ---------------------------------------------------- */
+
+.grid {
+	display: grid;
+	grid-template-columns: repeat(12,minmax(0,1fr));
+}
+
+
+.post_header {
+	grid-column: span 12/span 12;
+}
+
+.post_content {
+	grid-column: span 10/span 10;
+}
+
+#toc2 {
+	grid-column: span 2/span 2;
+}
+
 /* ---------------------------------------------------- */
 /* ---------------------------------------------------- */
 /* content layout */
@@ -26,8 +50,12 @@
 		margin-top: 3em;
 		background-color: $background-color;
 		margin-left: calc(-1em + 5px);; // 14px*2 padding - 5px border
+		overflow-wrap: break-word;
 	}
 
+	h1:first-child{
+		margin-top: 0;
+	}
 
 	h2 {
 		@include default_header(0);
@@ -62,7 +90,7 @@
 		padding: 16px;
 
 		i {
-			color: $accent-color;
+			color: $primary-color;
 			font-size: 1.8em;
 		}
 	}
@@ -147,27 +175,18 @@
 	code.highlighter-rouge {
 		font-style: italic;
 		color: $primary-color;
-		background-color: $background-color;
+		background-color: rgba(0, 0, 0, 33%);
 		padding: 0 5px;
 	}
 }
 
 
-
-
-
-
-
-
-
-
 /* ---------------------------------------------------- */
 /* ---------------------------------------------------- */
 /* TOC */
 /* ---------------------------------------------------- */
 /* ---------------------------------------------------- */
 
-
 article {
 	position: relative;
 }
@@ -188,11 +207,11 @@ article {
 
 #tocMenuButtonLabel {
 	font-size: 2em;
-	color: $accent-color;
+	color: $primary-color;
 	position: fixed;
 	bottom: 0;
 	right: 0;
-	padding: 16px;
+	padding: 1rem;
 	z-index: 1;
 }
 
@@ -200,42 +219,46 @@ article {
 	display: block;
 	border: 1px solid $primary-color;
 	position: fixed;
-	top: 1em;
-	right: 1em;
-	bottom: 1em;
+	top: 4vw;
+	right: 4vw;
 	min-width: 10vw;
-	max-width: 30vw;
+	max-width: 40vw;
 	background-color: $background-color;
-	z-index: 1;
+	z-index: 2;
 	overflow-x: hidden;
 	min-height: 10vh;
 	max-height: 80vh;
 
 	h1 {
-		text-shadow: 0px 2px 4px rgba(100,100,100,0.5);
+		text-shadow: 0px 0.1em 0.2em rgba(100, 100, 100, 0.5);
 		color: $primary-color;
 		font-size: 2em;
 		font-weight: bold;
-		letter-spacing: 20px;
+		letter-spacing: 1rem;
 		text-align: center;
 	}
 
 	ul {
 		list-style: none;
+		padding-inline-start: 0;
+		ul {
+				padding-left: 1em;
+		}
 	}
 
-	li a{
+	li a {
 		border-bottom: 1px dashed $secondary-color;
 		opacity: 0.8;
 		width: 80%;
 		display: block;
+		margin: 1rem auto;
 	}
 
 	a {
 		text-decoration: none;
 		color: $secondary-color;
 		font-size: 1em;
-		line-height: 1.5em;
+		line-height: 1.5;
 	}
 
 	a:hover {
@@ -244,6 +267,90 @@ article {
 }
 
 
+@media screen and (max-width: $large) {
+  #tocMenuButtonLabel {
+    font-size: 1.5em;
+    padding: 0.5rem;
+  }
+
+  #tocMenuButton:checked ~ #tocContainer {
+    max-width: 80vw;
+    height: 80vh;
+    top: 10vw;
+    left: 10vw;
+    font-size: 1.5em;
+
+    h1 {
+      font-size: 1.5em;
+      letter-spacing: 0.5rem;
+    }
+
+    ul {
+      margin: 0;
+    }
+
+    li a {
+      margin: 0.5rem auto;
+    }
+  }
+}
+
+
+#toc2 {
+	font-size: 0.75em;
+	position: sticky;
+	top: 2vw;
+	z-index: 1;
+	transform: translate(2.5em);
+	color: $secondary-color;
+	align-self: start;
+	letter-spacing: -1px;
+
+	ul {
+		padding: 0;
+	}
+
+	ul ul {
+		padding-left: 0.8em;
+	}
+
+
+
+	li::marker {
+		content: ' >   ';
+		font-size: 0.8em;
+		font-weight: bold;
+		font-family: "Georgia";
+		vertical-align: middle;
+	  position: relative;
+	  top: -3px;
+	}
+
+	li a {
+		text-decoration: none;
+		color: $primary-color;
+		line-height: 1.5em;
+	}
+
+	li a:hover {
+		@include hover();
+		//font-size: 1.2em;
+	}
+}
+
+@media screen and (max-width: $xlarge) {
+	#toc2 {
+		font-size: 0.5em;
+	}
+}
+
+@media screen and (max-width: $large) {
+	#toc2 {
+		display: none;
+	}
+}
+
+
 /* ---------------------------------------------------- */
 /* ---------------------------------------------------- */
 /* header layout */
@@ -252,14 +359,14 @@ article {
 
 
 .post_header::after {
-	content: "";
-	display: block;
-	border-top: 1px solid $secondary-color;
-	margin-left: -100vw;
-	margin-right: -100vw;
-	margin-bottom: 4em;
-	margin-top: 4em;
-	width: 200vw; //only working with overflow-x: hidden; in body in _base.scss
+    content: "";
+    display: block;
+    border-top: 1px solid $secondary-color;
+    width: 98vw;
+    height: 0px;
+    margin: 4em 0;
+    position: relative;
+    left: -20%;
 }
 
 #post article {
@@ -298,17 +405,12 @@ article {
 		}
 
 		.supplements a {
-			/* Set links to display as block-level elements so capitalize works*/
-			display: inline-block;
+			word-break: break-all;
 			&:hover {
 				@include hover();
 			}
 		  }
 
-		.supplements a::first-letter {
-			text-transform: capitalize;
-		  }
-
 		.supplements-sep::before {
 		    content: "\2022";
 		    padding-left: 0.5em;
@@ -319,4 +421,4 @@ article {
 	.post_header_content_parting_line {
 		margin: 2em 0;
 	}
-}
+}

data/_sass/layouts/_tags.scss

@@ -37,6 +37,11 @@
     @include showlinks(5);
 }
 
+@media screen and (max-width: $large) {
+.tags_all {
+    @include showlinks(1);
+}
+}
 
 
 /* ---------------------------------------------------- */