oinam-jekyll 1.0.0 → 1.1.0

data/_includes/css/styles-extended.css

@@ -2,45 +2,76 @@
   jekyll supports sass out of the box.
   Use only when plain CSS do not suffice.
 */
-$breakpoint-small:  420px;
-$breakpoint-medium: 640px;
-$breakpoint-large:  800px;
-$breakpoint-extralarge: 1200px;
+$breakpoint-small:  640px;
+$breakpoint-medium: 800px;
+$breakpoint-large:  1024px;
+$breakpoint-extralarge: 1600px;
 
-header,
-footer {
+header.header,
+footer.footer {
   padding: var(--space-base) 0;
   font-family: var(--font-family-sans);
 }
 
+header.header {
+  text-align: center;
+  margin-bottom: var(--space-base);
+  border-bottom: var(--border-width) solid var(--border-color);
+}
+
 /* title/logo */
-header h1 {
-  font-family: var(--font-family-sans);
-  font-size: calc(var(--font-size) * calc(1.618 * var(--typescale-heading));
+header.header h1 {
+  font-size: calc(var(--font-size) * var(--typescale-heading) * var(--typescale-heading) * var(--typescale-heading));
   font-weight: 700;
+  margin-bottom: 0;
 }
 
-header h1 a, header h1 a:visited {
+header.header h1 a, header.header h1 a:visited {
   color: var(--text-color);
   text-decoration: none;
 }
 
-header h1 a:hover, header h1 a:active {
-  color: var(--text-color-link);
+header.header h1 a:hover, header.header h1 a:active {
+  color: var(--text-color-alt);
   text-decoration: none;
+  border-bottom: 2px solid var(--text-color);
 }
 
-footer {
-  font-size: var(--font-size-smaller);
+header.header h2 {
+  padding: 0;
+  margin: var(--space-half) 0;
+
+  font-size: calc(var(--font-size) * var(--typescale-heading));
+  font-weight: 400;
+}
+
+header.header :is(h1, h2, h3, h4, h5, h6) {
+  font-family: var(--font-family-sans);
+}
+
+footer.footer {
+  margin-top: var(--space-double);
+  border-top: var(--border-width) solid var(--border-color);
+}
+
+.footer__credit {
+  display: flex;
+  justify-content: space-between;
 }
 
 /* nav links (header/footer) */
-nav a {
-  padding: var(--space-quarter) 0;
-  margin: var(--space-quarter);
+nav {
+  margin: var(--space-base) 0 0;
+  padding: 0;
 
+  font-family: var(--font-family-sans);
   font-size: var(--font-size-smaller);
   text-transform: uppercase;
+}
+
+nav a {
+  padding: 0;
+  margin: 0 var(--space-half) 0 0;
   text-decoration: none;
 }
 
@@ -49,15 +80,19 @@ nav a:hover, nav a:active {
   border-bottom: 2px solid var(--text-color-link-hover);
 }
 
+
 /* larger screens */
 @media (min-width: $breakpoint-large) {
   blockquote,
-  .content-extend {
+  .content-medium {
     margin-left: calc(-1 * var(--space-double));
     margin-right: calc(-1 * var(--space-double));
   }
   
-  figure {
+  .content-large,
+  figure,
+  img.large,
+  img.large + em {
     margin-left: calc(50% - 50vw);
     margin-right: calc(50% - 50vw);
     
@@ -65,67 +100,136 @@ nav a:hover, nav a:active {
     max-width: var(--image-width-max);
     transform: translateX(calc(50vw - 50%));
   }
+
+  img.medium,
+  img.medium + em {
+    margin-left: calc(-1 * var(--space-double));
+    width: calc(var(--body-width) + calc(3 * var(--space-base)));
+    max-width: 100vw;
+  }
+
+  img.small {
+    max-width: 50%;
+    height: auto;
+  }
+
+  img.small.left,
+  img.small.right {
+    margin-top: var(--space-half);
+    margin-bottom: var(--space-base);
+  }
+
+  img.small.left  { float: left; margin-right: var(--space-base); margin-left: calc(-1 * var(--space-double)); }
+  img.small.right { float: right; margin-left: var(--space-half); margin-right: calc(-1 * var(--space-double)); }
+
+  .gallery {
+    column-count: 3;
+    padding: var(--space-half);
+  }
 }
 
-/* images --------------------------------------- */
-img.small-right,
-img.small-left {
-  max-width: 60%;
-  margin: 0 var(--space-base);
-  padding: 0;
+/* extra-large screens */
+@media (min-width: $breakpoint-extralarge) {
+  .gallery {
+    column-count: 4;
+    padding: var(--space-half);
+  }
+}
+
+.gallery {
+  line-height: 0;
+  column-gap: var(--space-half);
 }
 
-img.small-right { float: right; margin-right: 0; }
-img.small-left  { float: left;  margin-left: 0; }
+.gallery img {
+  width: 100% !important;
+  height: auto !important;
+  margin-bottom: var(--space-half);
+}
 
-img.large-center {
-  position: relative;
+.gallery a:hover img,
+.gallery a:active img {
+  opacity: var(--opacity-low);
+}
+
+/* images */
+/* need fix for images with hyperlinks */
+img + em,
+a + em.caption {
+  /* similar styling to figcaption */
+  display: block;
+  opacity: var(--opacity-low);
+  margin: calc(-1 * var(--space-half)) 0 0;
+  padding: var(--space-half);
   
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-smaller);
+  font-style: normal;
+  text-align: center;
+
+  background: var(--background-color-alt);
+  border-bottom-left-radius: var(--border-radius);
+  border-bottom-right-radius: var(--border-radius);
+  border-bottom: 1px solid var(--border-color);
+}
+
+.content-full,
+img.full,
+img.full + em {
+  position: relative;
   left: 50%;
   right: 50%;
+  
   margin-left: -50vw;
   margin-right: -50vw;
-
+  
   width: 100vw;
-  height: auto;
-  max-width: var(--image-width-max);
+  max-width: 100vw;
   
-  transform: translateX(calc(50vw - 50%));
+  border-radius: 0;
 }
 
-/* for smaller screens, have full-width contents but not round corners */
-@media (max-width: $breakpoint-medium) {
-  figure,
-  figure img,
-  main img,
-  img.large-center {
-    border-radius: 0;
-  }
 
-  main img {
-    position: relative;
+/* pages */
+.home_posts {}
+
+.home_posts__title {
+  margin: var(--space-double) 0 var(--space-base);
   
-    left: 50%;
-    right: 50%;
-    margin-left: -50vw;
-    margin-right: -50vw;
+  color: var(--text-color-alt);
+  font-weight: 400;
+  font-size: calc(var(--font-size) * var(--typescale-heading));
+}
 
-    width: 100vw;
-    height: auto;
-    max-width: var(--image-width-max);
-    
-    transform: translateX(calc(50vw - 50%));
-  }
+.home_posts__meta {
+  padding: 0 var(--space-half);
+  font-size: var(--font-size-smaller);
+  text-transform: lowercase;
+}
 
-  /* reset images inside figure */
-  figure img {
-   left: 0;
-  }
+
+/*
+  articles/posts/pages lists
+  list of items with a heading and lists
+  DIV.items-list [h1/h2/h3 > ul/ol > li]
+--------------------------------------- */
+.items-list :is(h1, h2, h3, h4, h5, h6) {
+  display: inline-block;
+  margin: var(--space-base) var(--space-double) 0;
+  padding: var(--space-quarter) var(--space-base);
+
+  color: var(--text-color-alt);
+  background: var(--background-color-alt);
+  border: 1px solid var(--border-color);
+  border-top-left-radius: var(--border-radius);
+  border-top-right-radius: var(--border-radius);
+  border-bottom: 0 none;
+  
+  font-size: calc(var(--font-size) * var(--typescale-heading));
 }
 
-/* articles lists --------------------------------------- */
-.blog-articles__list {
-  margin: var(--space-base) 0;
+.items-list :is(ul, ol) {
+  margin: 0 0 var(--space-base) 0;
   padding: 0;
   
   background: var(--background-color);
@@ -133,24 +237,34 @@ img.large-center {
   border-radius: var(--border-radius);
 }
 
-.blog-articles__list li {
+/*.items-list:is(ul, ol) li {}*/
+
+.items-list :is(ul, ol) li {
   list-style: none;
   padding: calc(1.5 * var(--space-quarter)) var(--space-double);
   border-bottom: 1px solid var(--border-color);
 }
 
-.blog-articles__list li:last-child {
+.items-list :is(ul, ol) li:first-child {
+  border-top-left-radius: var(--border-radius);
+  border-top-right-radius: var(--border-radius);
+}
+
+.items-list :is(ul, ol) li:last-child {
+  border-bottom-left-radius: var(--border-radius);
+  border-bottom-right-radius: var(--border-radius);
   border: 0 none;
 }
 
-.blog-articles__list li:nth-child(even) {
+.items-list :is(ul, ol) li:nth-child(even) {
   background: var(--background-color-alt);
 }
 
-.blog-articles__list time {
+.items-list :is(ul, ol) time {
   margin: 0;
   padding: 0 var(--space-quarter);
   
+  white-space: nowrap;
   font-family: var(--font-family-monospace);
   font-size: var(--font-size-smallest);
   color: var(--text-color-alt);
@@ -181,52 +295,43 @@ img.large-center {
   text-decoration: none;
 }
 
-/* powered by Google Programmable Search, https://programmablesearchengine.google.com/ */
-.site-search {
-  margin: 0 0 var(--space-double);
-  padding: var(--space-half);
-  
-  border-radius: var(--border-radius);
-  background: var(--color-white);
-  box-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px;
-}
-
-/* responsive video */
+/* responsive video embeds */
 .video-wrap {
   position: relative;
-  margin-top: var(--space-base);
-  margin-bottom: var(--space-base);
-  padding-bottom: 56.25%; /* 16:9 */
-  padding-top: 0;
-  max-width: 100%;
+  margin-bottom: 1em;
+  padding-bottom: 56.25%;
   height: 0;
   overflow: hidden;
+  max-width: 100%;
+
   border-radius: var(--border-radius);
 }
-  
-.video-wrap iframe,
-.video-wrap object,
-.video-wrap embed {
+.video-wrap :is(iframe, object, embed) {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
-}
 
-/* rogue syntax highlighter - applies to both the DIV and PRE */
-.highlight {
-  margin: var(--space-base) 0;
-  padding: 0;
-  width: 100%;
-  transform: translateX(0);
-  text-align: left;
-  background: none;
-  border: 0 none;
   border-radius: var(--border-radius);
 }
 
+.content-full .video-wrap,
+.content-full .video-wrap :is(iframe, object, embed) {
+  border-radius: 0;
+}
 
+/* footnotes are generated by Kramdown powered Markdown */
+.footnotes {
+  margin-top: var(--space-double);
+  padding: var(--space-base) var(--space-half);
+  border-top: var(--border-width) solid var(--border-color);
+  font-size: var(--font-size-small);
+}
+
+.footnotes .reversefootnote {
+  text-decoration: none;
+}
 
 /* UTILITIES --------------------------------------- */
 
@@ -238,11 +343,14 @@ img.large-center {
   -webkit-box-orient: vertical;
 }
 
-/* debug: attach a "?" class to debug with a blinking box */
-.\? {
-  animation: \?wobble 0.5s ease-in-out alternate infinite;
-}
-@keyframes \?wobble {
-  0% { box-shadow: inset 1px 1px gold, inset -1px -1px gold; }
-  100% { box-shadow: inset 5px 5px red, inset -5px -5px red; }
-}
+.visually-hidden {
+  display: block;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  clip: rect(1px 1px 1px 1px);
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(1px);
+  white-space: nowrap;
+  position: absolute;
+}

data/_includes/css/styles.css

@@ -7,6 +7,7 @@
 html {
   margin: 0;
   padding: 0;
+  height: 100%;
 }
 
 body {
@@ -25,10 +26,14 @@ body {
   margin: 0 auto;
   padding: 0 var(--space-half);
   max-width: var(--body-width);
+  height: 100%;
   
   overflow-x: hidden;
   word-break: break-word;
   overflow-wrap: break-word;
+
+  /* transition for color-theme */
+  transition: background 500ms ease-in-out, color 200ms ease;
 }
 
 h1, h2, h3, h4, h5, h6 {
@@ -200,6 +205,7 @@ mark {
 }
 
 img {
+  display: inline-block;
   max-width: 100%;
   height: auto;
   border-radius: var(--border-radius);
@@ -244,6 +250,7 @@ audio {
 }
 
 table {
+  margin: var(--space-base) 0;
   border-collapse: collapse;
   width: 100%;
 }
@@ -261,3 +268,7 @@ table caption {
   font-weight: bold;
   margin-bottom: var(--space-half);
 }
+
+footer {
+  font-size: var(--font-size-small);
+}