jekyll-theme-horizon-flow 0.1.1 → 1.0.3

data/_sass/default/_base.scss

@@ -6,7 +6,6 @@
 
 html {
   height: 100%;
-  //overflow-x: hidden;
 }
 
 body {
@@ -14,18 +13,46 @@ body {
   width: 100%;
   position: relative;
   margin: 0;
-  display: flex;
-  flex-direction: column;
   background-color: $background-color;
   overflow-x: hidden;
+  display: flex;
+  flex-direction: column;
+  word-break: break-word;
 }
 
-img {
-  max-width: 100%;
-  height: auto;
+header {
+  position: fixed;
+  margin: auto;
+  top: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  font-size: 1.1em;
+  z-index: 100;
 }
 
 main {
   max-width: 70%;
   margin: 5rem auto;
+  flex: 1;
+}
+
+
+footer {
+  width: 100%;
+  color: $background-color;
+  margin-top: 4em;
+  flex-shrink: 0;
+}
+
+
+// @media (width >= $small) and (max-width: $large) 
+@media screen and (max-width: $large) {
+  body {
+      font-size: 2.5em;
+  }
+
+  main {
+    margin-top: 8rem;
+  }
 }

data/_sass/default/_footer.scss

@@ -1,20 +1,9 @@
-footer {
-  width: 100%;
-  color: $background-color;
-  font-size: 0.8em;
-  margin-top: auto;
-}
-
 footer ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
 }
 
-footer ul li {
-  padding-bottom: 0.2em;
-}
-
 footer a {
   @include links($background-color);
   padding: 0;
@@ -53,6 +42,7 @@ footer .social-icons .divider::before {
   font-size: 0.8em;
 }
 
+
 /* ---------------------------------------------------- */
 /* ---------------------------------------------------- */
 /* footer sidebar */
@@ -111,52 +101,92 @@ footer aside section:first-child {
   padding: 0;
 }
 
+.footer_sitedescription1, 
+.footer_customcontent1, 
+.footer_customcontent21, 
+.footer_recentposts1, 
+.footer_categories1, 
+.footer_tags1 {
+  @include footer_elements(1);
+}
 
+.footer_sitedescription2, 
+.footer_customcontent2, 
+.footer_customcontent22, 
+.footer_recentposts2, 
+.footer_categories2, 
+.footer_tags2 {
+  @include footer_elements(2);
+}
 
-.footer_categories, .footer_tags {
-  ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-    columns: 5;
-  }
-
-  a {
-    text-decoration: none;
-    color: $background-color;
-    letter-spacing: -1px;
-    width: 100%;
-    cursor: pointer;
-  }
+.footer_sitedescription3, 
+.footer_customcontent3, 
+.footer_customcontent23, 
+.footer_recentposts3, 
+.footer_categories3, 
+.footer_tags3 {
+  @include footer_elements(3);
 }
 
-.footer_categories1, .footer_tags1, .footer_tags, .footer_recentposts1  {
+.footer_sitedescription4, 
+.footer_customcontent4, 
+.footer_customcontent24, 
+.footer_recentposts4, 
+.footer_categories4, 
+.footer_tags4 {
+  @include footer_elements(4);
+}
 
+.footer_sitedescription5, 
+.footer_customcontent5, 
+.footer_customcontent25, 
+.footer_recentposts5, 
+.footer_categories5, 
+.footer_tags5 {
+  @include footer_elements(5);
 }
 
-.footer_recentposts {
-  ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-    columns: 2;
+
+
+@media (width >= $small) and (max-width: $large) {
+  footer {
+    font-size: 1.5em;
   }
 
-  a {
-    text-decoration: none;
-    color: $background-color;
-    letter-spacing: -1px;
-    width: 100%;
-    cursor: pointer;
+  footer .social-icons {
+    flex-wrap: wrap; /* Allow the icons to wrap to the next line */
+  }
+
+  footer .social-icons > * {
+    margin: 0.5em 0.5em; /* Adjust the margin as needed */
+  }
+
+  footer aside  {
+    flex-direction: column;
+  }
+
+  footer li {
+      width: 100%;
+    }
+
+  .footer_sitedescription, .footer_customcontent, .footer_customcontent2, .footer_recentposts, .footer_categories, .footer_tags {
+    ul li {
+      width: 100%;
+    }
   }
-}
 
-.footer_sitedescription, .footer_extracontent {
-    a {
-    text-decoration: none;
-    color: $background-color;
-    letter-spacing: -1px;
-    width: 100%;
-    cursor: pointer;
+  footer aside section:first-child:nth-last-child(1),
+  footer aside section:first-child:nth-last-child(2),
+  footer aside section:first-child:nth-last-child(2) ~ section,
+  footer aside section:first-child:nth-last-child(3),
+  footer aside section:first-child:nth-last-child(3) ~ section,
+  footer aside section:first-child:nth-last-child(4),
+  footer aside section:first-child:nth-last-child(4) ~ section,
+  footer aside section:first-child:nth-last-child(5),
+  footer aside section:first-child:nth-last-child(5) ~ section,
+  footer aside section:first-child {
+    padding: 0 0 0 1em;
+    flex-grow: 1;
+    max-width: 100%;
   }
 }

data/_sass/default/_header.scss

@@ -1,15 +1,3 @@
-header {
-  position: fixed;
-  margin: auto;
-  top: 0;
-  left: 0;
-  right: 0;
-  width: 100%;
-  font-size: 1.1em;
-  z-index: 100;
-}
-
-
 header nav {
 	background-color: $primary-color;
 	width: fit-content;
@@ -60,3 +48,9 @@ nav li a {
 	margin: 0;
 	padding: 0;
 }
+
+@media (width >= $small) and (max-width: $large) {
+	header {
+		font-size: 1em;
+	}
+}

data/_sass/external/_normalize.scss

@@ -145,7 +145,10 @@ sup {
  * Remove the border on images inside links in IE 10.
  */
 
+
 img {
+  max-width: 100%;
+  height: auto;
   border-style: none;
 }
 

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,17 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: -5px;
+    // gap: -5px;
     margin: auto;
+    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 +117,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 +130,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 +211,69 @@
             }
         }
     }
+}
+
+
+@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;
+            }
+        }
+    }
 }

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;

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;
@@ -49,7 +49,6 @@
 
 	.summary {
 		margin-top: 2em;
-		margin-bottom: 4em;
 	}
 
 	.supplements-sep::before {
@@ -68,6 +67,11 @@
 .pagination {
 	display: flex;
 	justify-content: space-between;
+	color: $primary-color;
+
+	a {
+		color: $primary-color;
+	}
 
 
 	.page_count {
@@ -75,21 +79,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 +97,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

@@ -26,6 +26,7 @@
 		margin-top: 3em;
 		background-color: $background-color;
 		margin-left: calc(-1em + 5px);; // 14px*2 padding - 5px border
+		overflow-wrap: break-word;
 	}
 
 
@@ -167,7 +168,6 @@
 /* ---------------------------------------------------- */
 /* ---------------------------------------------------- */
 
-
 article {
 	position: relative;
 }
@@ -192,7 +192,7 @@ article {
 	position: fixed;
 	bottom: 0;
 	right: 0;
-	padding: 16px;
+	padding: 1rem; /* Adjust padding as needed */
 	z-index: 1;
 }
 
@@ -200,11 +200,10 @@ article {
 	display: block;
 	border: 1px solid $primary-color;
 	position: fixed;
-	top: 1em;
-	right: 1em;
-	bottom: 1em;
+	top: 3vw; /* Adjust top, right, bottom, and left as needed */
+	right: 3vw;
 	min-width: 10vw;
-	max-width: 30vw;
+	max-width: 40vw;
 	background-color: $background-color;
 	z-index: 1;
 	overflow-x: hidden;
@@ -212,30 +211,32 @@ article {
 	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); /* Adjust text-shadow as needed */
 		color: $primary-color;
 		font-size: 2em;
 		font-weight: bold;
-		letter-spacing: 20px;
+		letter-spacing: 1rem; /* Adjust letter-spacing as needed */
 		text-align: center;
 	}
 
 	ul {
 		list-style: none;
+		padding-left: 24px; /* Remove default list padding */
 	}
 
-	li a{
+	li a {
 		border-bottom: 1px dashed $secondary-color;
 		opacity: 0.8;
 		width: 80%;
 		display: block;
+		margin: 1rem auto; /* Adjust margin as needed */
 	}
 
 	a {
 		text-decoration: none;
 		color: $secondary-color;
 		font-size: 1em;
-		line-height: 1.5em;
+		line-height: 1.5;
 	}
 
 	a:hover {
@@ -244,6 +245,38 @@ 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;
+    }
+  }
+}
+
+
+
+
+
 /* ---------------------------------------------------- */
 /* ---------------------------------------------------- */
 /* header layout */
@@ -252,14 +285,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 {
@@ -300,6 +333,7 @@ article {
 		.supplements a {
 			/* Set links to display as block-level elements so capitalize works*/
 			display: inline-block;
+			word-break: break-all;
 			&:hover {
 				@include hover();
 			}

data/_sass/layouts/_tags.scss

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