jekyll-indieweb 2.0.0.pre.beta

data/assets/css/_inc/hcard.css

@@ -0,0 +1,231 @@
+/* Inspiration https://responsivemart.com/ui_design/css-user-profile-card/ */
+
+.usercard-wrapper {
+    margin: 5em auto;
+    max-width: 1100px;
+}
+
+.usercard-wrapper .row {
+    display: flex;
+    flex-direction: column;
+}
+
+.usercard-wrapper .row .col {
+    flex-grow: 1;
+}
+.usercard {
+    background: var(--gray);
+    display: flex;
+    flex-basis: 0;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+    overflow: hidden;
+    border-radius: 4px;
+}
+
+.profiles {
+    display: flex;
+    list-style-type: none;
+	flex-flow: row wrap;
+	justify-content: center;
+	margin: 1.5em 0;
+}
+
+.profile svg {
+    width: 1em;
+    height: 1em;
+    border-radius: 50%;
+    border: none;
+    outline: none;
+    font-size: 3em;
+    cursor: pointer;
+    opacity: .9;
+}
+
+.profile .icon {
+    fill: var(--light);
+}
+
+.usercard-avatar {
+    position: relative;
+    width: 50%;
+    z-index: 49;
+    overflow: hidden; 
+}
+
+    .usercard-img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      transition: .3s;
+}
+    
+ .usercard-body {
+    position: relative;
+    width: 60%;
+    padding: 3em 3em 2em;
+    background-color: var(--dark-gray);
+    color: var(--light);
+    text-align: center;
+}
+
+    .usercard .title {
+    color: var(--very-light-gray);
+    font-size: 2.5rem;
+    margin-bottom: .4em;
+      
+}
+
+  .usercard:hover .usercard-img {
+    transform: scale(1.1) rotate(3deg);
+}
+
+@media (max-width: 550px) {
+    .usercard {
+        flex-direction: column;
+    }
+
+
+  .usercard-avatar {
+      width: 100%;
+  }
+
+  .usercard-body {
+      width: 100%;
+  };
+}
+
+@media (min-width: 550px) {
+    .usercard .usercard-avatar:after {
+        content: '';
+        position: absolute;
+        right: -16%;
+        top: 0;
+        transform: skewx(-10deg);
+        height: 100%;
+        width: 20%;
+        min-width: 90px;
+        background: var(--dark-gray);
+  }
+}
+
+/* ripped from Rachel Andrews https://gridbyexample.com/patterns/media-object/ */
+
+
+
+.media {
+    margin-bottom: 2em;
+    padding: 10px;
+  }
+  
+  .media > .media-title { grid-area: media-title; }
+  .media > .img { grid-area: img; }
+  .media > .media-content { grid-area: bd; }
+  .media > .media-footer { grid-area: ft; }
+  
+  .media {
+    background: var(--gray);
+    display: grid;
+    grid-column-gap: 20px;
+    grid-template-areas:
+      "media-title"
+      "img"
+      "bd"
+      "ft";
+  }
+  
+  
+  @media (min-width: 600px) {
+  
+    /* clearfix*/
+    .media:after {
+      content: "";
+      display: block;
+      clear: both;
+    }
+  
+    .media > .media {
+      margin-left: 160px;
+      clear: both;
+    }
+  
+    .media .img {
+      float: left;
+      margin: 0 10px 0 0;
+      width: 150px;
+    }
+    
+    .media .media-footer {
+      background-color: var(--gray);
+      padding: 10px;
+    }
+
+    .media-footer .profiles {
+      padding: 0;
+      margin: 0;
+    }
+  
+    .media.media-flip .img {
+      float: right;
+      margin: 0 0 0 10px;
+    }
+  
+    .media > * {
+      margin: 0 0 0 160px;
+    }
+  
+    .media.media-flip > * {
+      margin: 0 160px 0 0;
+    }
+  
+    @supports(display: grid ) {
+      /* override */
+      .media > *,
+      .media.media-flip > * {
+        margin: 0;
+      }
+      .media .img,
+      .media.media-flip .img {
+        width: auto;
+        margin: 0;
+      }
+      .media:after {
+        content: none;
+      }
+  
+      .media {
+        display: grid;
+        grid-column-gap: 20px;
+        grid-template-columns: 150px 3fr;
+        grid-template-rows: auto 1fr auto;
+        grid-template-areas:
+          "img media-title"
+          "img bd"
+          "ft ft";
+      }
+  
+      .media.media-flip {
+        grid-template-columns: 3fr 150px ;
+        grid-template-areas:
+          "media-title img"
+          "bd img"
+          "ft ft";
+      }
+  
+      .media.img-flexie {
+        grid-template-columns: minmax(150px, 1fr) 3fr;
+      }
+  
+      .media.media-flip.img-flexie {
+        grid-template-columns: 3fr minmax(150px, 1fr);
+      }
+  
+      /* nested */
+      .media > .media {
+        grid-column: 2 / -1 ;
+        margin: 0; /* override */
+        margin-top: 1em;
+      }
+    }
+  
+  
+  }

data/assets/css/_inc/header.css

@@ -0,0 +1,50 @@
+/*
+    Header
+*/
+
+.mainheader {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background-color: var(--very-dark-gray);
+    color: #fff;
+}
+
+.mainheader h1 {
+    font-size: 1.3rem;
+}
+
+.site-branding {
+    display: flex;
+    justify-content: space-around;
+}
+
+.site-branding img {
+    height: 3em;
+    width: 3em;
+    margin-right: 1em;
+}
+
+
+.mainnav {
+    width: auto;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    font-size: 24px;
+}
+
+.mainnav a {
+    padding: .5em;
+}
+
+@media (min-width: 900px) {
+    .mainheader {
+        flex-direction: row;
+        justify-content: space-around;
+    }
+
+    .mainnav a {
+        padding: .5em .8em;
+    }
+}

data/assets/css/_inc/links.css

@@ -0,0 +1,41 @@
+a {
+    outline        : none;
+    text-decoration: none;
+    padding        : 2px 1px 0;
+}
+
+
+a:link {
+    color: var(--color3light);
+}
+
+a:visited { 
+    color: var(--red);
+}
+
+a:focus {
+    border-bottom: 1px solid var(--red);
+    background: var(--yellow);
+}
+
+a:hover {
+    border-bottom: 1px solid;     
+    background: var(--yellow);
+  }
+
+.profiles a:hover {
+    border: none;
+    background: none;
+}
+
+.tags a, .tags a:visited {
+    color: var(--very-light-gray)
+}
+
+.tags a:hover {
+    border: none;
+}
+  
+  a:active {
+    color: var(--highlight);
+  }

data/assets/css/_inc/main.css

@@ -0,0 +1,27 @@
+@import "variables";
+@import "remedy";
+@import "grid.css";
+@import "header.css";
+@import "hcard.css";
+@import "links.css";
+@import "article.css";
+@import"footer.css";
+@import "darkmode.css";
+
+html {
+    background: var(--bg);
+    color: var(--text);
+}
+
+.visuallyhidden {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: auto;
+    margin: 0;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+    white-space: nowrap;
+}
+

data/assets/css/_inc/remedy.css

@@ -0,0 +1,89 @@
+/* Level the playing field some */
+
+* { box-sizing: border-box; } /* Switch to border-box for box-sizing. */
+
+/* Immediately jump any animation to the end point if the user has set their device to "prefers reduced motion". */
+/* This could create bad unintended consequences. Remove as needed, and write your own appropriate code for prefers-reduced-motion. */
+@​media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0.001s !important;
+    transition-duration: 0.001s !important;
+  }
+}
+
+body {
+  margin: 0; /* Remove the tiny space around the edge of the page */
+}
+
+/* Switch to using rem units for typography. Fix line-height on headlines. */
+h1 {
+  font-size: 2rem; /* Make all H1 large, remove nested-shrinking sizes. */
+  margin: 0.67em 0;
+}
+h2 {
+  font-size: 1.5rem;
+}
+h3 {
+  font-size: 1.17rem;
+}
+h4 {
+  font-size: 1.00rem;
+}
+h5 {
+  font-size: 0.83rem;
+}
+h6 {
+  font-size: 0.67rem;
+}
+
+h2, h3, h4, h5, h6{
+  line-height: 1;
+}
+
+/* Improve readibility */
+p {
+  line-height: 1.5; 
+}
+
+
+pre { 
+  white-space: pre-wrap; /* Overflow by default is bad. */
+}
+
+
+/* are browsers now consistent with margin & padding on lists?
+  See: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation  */
+nav ul {
+  list-style: none;
+}
+
+ 
+img {
+  border-style: none; /* Remove the border on images inside links in IE 10 and earlier. */
+  vertical-align: bottom;  /* Fix problem with images having a tiny gap for a decender under them. */
+  display: block; /* Switch display mode to block, since that's what we usually want for images. */
+  max-width: 100%; /* Make images flexible by default. */
+  height: auto; /* ensure images maintain their aspect ratio when max-width comes into play. */
+}
+
+
+/* In English, when styling the <q> element, use curly quotes instead of straight quotes. */
+
+/* Code for this is now in the quotes.css file */ 
+
+
+/* Support upcoming properties that haven't been broadly implemented yet,
+   but for which the initial value and legacy behavior is not be the best behavior.
+*/
+
+/* Consistent line spacing, which does not unecessarily grow to accomodate things that would fit anyway */
+:root {
+  line-sizing: normal;
+}
+
+/* Improve spacing of punctuation marks and at script changes in CJK languages */
+:root {
+  text-spacing: trim-start allow-end trim-adjacent ideograph-alpha ideograph-numeric;
+}
+
+

data/assets/css/_inc/variables.css

@@ -0,0 +1,45 @@
+:root {
+    /* CityLights http://citylights.xyz */
+    --very-light-gray: #B7C5D3;
+    --light-gray: #718CA1;
+    --gray: #41505E;
+    --dark-gray: #333F4A;
+    --very-dark-gray: #1D252C;
+
+    --color1light: #70E1E8;
+    --color1medium: #33CED8;
+    --color1dark: #008B94;
+
+    --color2light: #5EC4FF;
+    --color2medium: #68A1F0;
+    --color2dark: #539AFC;
+
+    --color3light:#E27E8D;
+    --color3medium:#D95468;
+    --color3dark:#B62D65;
+
+    --color4light: #EBBF83;
+    --color4dark: #D98E48;
+
+    --color5light: #8BD49C;
+
+    --color6dark: #718CA1;
+
+    --color7light: #8BD49C;
+
+
+    --cyan: var(--color1light);
+    --blue: var(--color2light);
+    --purple: var(--color3dar)k;
+    --pink: var(--color3ligh)t;
+    --yellow: var(--color4light);
+    --green: var(--color5light);
+    --red: var(--color3medium);
+    --orange: var(--color4dark);
+    --light-orange: var(--color4light);
+
+    --bg: var(--very-light-gray);
+    --text: var(--dark-gray);
+    --highlight: #ecf285;
+}
+