initial commit

css/code.css

@@ -0,0 +1,90 @@
+code.language-html,
+code.language-css,
+code.language-md,
+code.language-cmd,
+code.language-bash,
+code.language-text,
+code.language-js,
+span.o,
+span.nx {
+  color: black;
+  line-height: 1.4;
+}
+span.c {
+  color: hsl(120, 100%, 20%);
+}
+
+span.p,
+span.s1,
+span.s2,
+span.nt {
+  color: hsl(40, 100%, 30%);
+}
+
+span.gs,
+span.gh,
+span.ge {
+  color: hsl(208, 100%, 50%);
+}
+
+span.gs {
+  font-weight: bold;
+}
+
+span.ge {
+  font-style: italic;
+}
+
+pre,
+code {
+  @apply font-mono;
+}
+
+code {
+  background-color: hsl(0, 0%, 98%);
+  border-radius: 3px;
+  color: hsl(120, 100%, 20%);
+  font-size: 85%;
+}
+
+pre {
+  margin: 0;
+  margin: 0;
+  padding: 1rem;
+  overflow: scroll;
+}
+
+pre code {
+  background-color: transparent;
+  color: inherit;
+  font-size: 100%;
+  padding: 0;
+}
+
+.highlight {
+  background-color: transparent;
+  border-radius: 3px;
+  margin: 0 0 0.5rem;
+  padding: 0;
+
+  & pre {
+    margin-bottom: 0;
+    overflow-x: auto;
+  }
+
+  & .lineno {
+    color: hsla(0, 0%, 67%, 0.72);
+    display: inline-block; /* Ensures the null space also isn't selectable */
+    padding: 0 0.75rem 0 0.25rem;
+    /* Make sure numbers aren't selectable */
+  }
+}
+
+/* TODO: dark theme for future
+@media (prefers-color-scheme: dark) {
+  code {
+    color: #fff;
+    background: hsl(200, 63%, 15%);
+  }
+}
+*/

css/ffoxobliq.css

@@ -0,0 +1,9 @@
+/* === handling obliquing issues in Firefox */
+
+@supports (-moz-appearance: none) {
+  .italic, i, cite, em, var, address, dfn, h3, .h3, h5, .h5 {
+    font-style: oblique 8deg;
+  }
+}
+
+/* === end, handling obliquing issues in Firefox */

css/index.css

@@ -0,0 +1,9 @@
+/*! purgecss start ignore */
+@import 'nav.css';
+@import 'code.css';
+@import 'tailwindcss/base';
+@import 'layout.css';
+@import 'tailwindcss/components';
+@import 'ffoxobliq.css';
+/*! purgecss end ignore */
+@import 'tailwindcss/utilities';

css/layout.css

@@ -0,0 +1,466 @@
+main {
+  @apply pt-0;
+}
+
+/*
+html, body {
+  @apply dark:bg-black;
+
+body {
+  @apply font-serif dark:text-gray-200;
+}
+*/
+
+p,
+li {
+  /* for handling Markdown-created <p> and <li> */
+  @apply mb-3 text-lg;
+}
+
+pre,
+code {
+  font-feature-settings: normal;
+}
+
+.navWhite,
+.navWhite:visited {
+  @apply text-white;
+}
+
+.navWhite:focus,
+.navWhite:active {
+  @apply text-gray-400;
+}
+
+.text-blue-light {
+  @apply text-blue-500;
+}
+
+.text-blue-dark {
+  /* for dark mode 
+  @apply text-blue-200;
+  */
+}
+
+.text-shadow-titles {
+  text-shadow: 4px 4px 2px #000;
+}
+
+.gradient-titles {
+  @apply bg-gradient-to-b from-blue-700 to-black;
+}
+
+.ctr {
+  @apply text-center;
+}
+
+.legal {
+  @apply text-xs;
+}
+
+a,
+a:focus,
+a:hover,
+a:active {
+  @apply no-underline border-b border-solid border-blue-500;
+}
+
+nav a,
+nav a:focus,
+nav a:hover,
+nav a:active {
+  @apply border-0 text-white hover:text-gray-300;
+}
+
+/*
+a {
+  @apply text-blue-500 dark:text-blue-200 dark:border-blue-200;
+}
+*/
+
+a:focus,
+a:hover,
+a:active {
+  @apply text-blue-800 border-blue-500;
+}
+
+/*
+a:hover {
+  @apply dark:text-blue-300;
+}
+*/
+
+sup a,
+a.previous,
+a.next,
+.footnote-return {
+  @apply border-b-0;
+}
+
+#nav-toggle:checked + #navMenu {
+  @apply block;
+}
+
+a.navborderless {
+  @apply border-b-0;
+}
+/*
+.dateInfo {
+  @apply text-gray-700 dark:text-gray-400;
+}
+*/
+
+h1,
+.h1,
+h2,
+.h2,
+h3,
+.h3,
+h4,
+.h4,
+h5,
+.h5,
+h6,
+.h6 {
+  @apply font-sans leading-tight tracking-tight;
+}
+
+h1,
+.h1 {
+  @apply text-4xl mb-4 font-extrabold;
+}
+
+h2,
+.h2,
+h3,
+.h3,
+h4,
+.h4,
+h5,
+.h5,
+h6,
+.h6 {
+  @apply font-bold;
+}
+
+h2,
+.h2 {
+  @apply text-4xl;
+}
+
+h3,
+.h3 {
+  @apply text-3xl italic;
+}
+
+h4,
+.h4 {
+  @apply text-2xl;
+}
+
+h5,
+.h5,
+h6,
+.h6 {
+  @apply text-lg;
+}
+
+.height-hero {
+  height: 45vh;
+  max-height: 45vh;
+  overflow: hidden;
+}
+
+.height-post {
+  height: 35vh;
+  max-height: 35vh;
+}
+
+.imgCover {
+  @apply object-cover object-center h-full w-full;
+}
+
+.background-hero-image-div {
+  @apply relative overflow-hidden w-full bg-black;
+  /* Have to allow for mobile browsers' own "chrome"; can't go by Inspector simulations of smaller breakpoints */
+  height: 80vh;
+  max-height: 80vh;
+}
+
+.background-hero-title-block-fit {
+  @apply block w-full absolute bottom-0 px-4 pt-3 pb-6 bg-gradient-to-t from-black;
+}
+
+.background-hero-title-text {
+  text-shadow: 4px 4px 2px #000;
+}
+
+@media screen and (min-width: 768px) {
+  .background-hero-title-block-fit {
+    @apply px-12;
+  }
+
+  .background-hero-image-div {
+    height: 85vh;
+    max-height: 85vh;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  .background-hero-title-block-fit {
+    @apply px-16;
+  }
+
+  .background-hero-image-div {
+    height: 95vh;
+    max-height: 95vh;
+  }
+}
+
+.text-nowrap,
+.text-nobrk {
+  @apply whitespace-nowrap;
+}
+
+article h1,
+article h2,
+article h3,
+article h4 {
+  @apply tracking-tight mt-8 mb-6;
+}
+
+article p,
+li {
+  @apply text-lg mt-6 mb-6 leading-relaxed;
+}
+
+article img.containedImage {
+  min-width: 100%;
+  max-width: 100%;
+  @apply w-full h-auto;
+}
+
+@media screen and (min-width: 768px) {
+  .height-hero {
+    height: 70vh;
+    max-height: 70vh;
+  }
+
+  .height-post {
+    height: 40vh;
+    max-height: 40vh;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  article p,
+  li {
+    @apply text-xl leading-relaxed;
+  }
+}
+
+@media screen and (min-width: 1920px) {
+  article p,
+  li {
+    @apply text-2xl leading-relaxed;
+  }
+}
+/*
+.yellowBox {
+  @apply font-sans bg-yellow-200 border border-gray-900 border-solid mx-auto my-2 w-full px-6 py-2 dark:bg-gray-800 dark:border-gray-500;
+}
+*/
+
+.yellowbox p {
+  @apply w-full p-2 m-0;
+}
+
+ul,
+ol {
+  @apply pl-8;
+}
+
+ul {
+  @apply list-disc;
+}
+
+ol {
+  @apply list-decimal;
+}
+
+.twitter-tweet {
+  @apply mt-4 mx-auto mb-0;
+}
+
+table.leagues {
+  @apply w-11/12 mt-4 mx-auto mb-0 border-0 border-collapse;
+}
+
+table.leagues td.col {
+  @apply w-1/2;
+}
+
+@media (min-width: 900px) {
+  table.leagues {
+    @apply w-3/5;
+  }
+  table.noborders {
+    @apply w-11/12;
+  }
+}
+
+table.noborders {
+  @apply w-full border-0 border-collapse mt-6 mx-auto mb-4;
+}
+
+table.noborders td {
+  @apply text-gray-800 text-left align-middle py-1 pr-0 pl-2;
+  /* text-align: left !important; */
+}
+
+table.noborders td img {
+  @apply inline-block align-middle m-0;
+}
+
+table.noborders tr {
+  @apply bg-blue-100;
+}
+
+table.noborders tr:nth-child(even) {
+  @apply bg-gray-200;
+}
+
+table.noborders thead tr {
+  @apply bg-blue-700;
+}
+
+table.noborders thead td {
+  @apply text-white font-bold;
+}
+
+table.noborders td.td70 {
+  width: 70%;
+}
+table.noborders td.td70 img {
+  @apply block w-1/2 h-auto;
+  max-width: 50%;
+}
+
+table.noborders td.td30 {
+  width: 30%;
+}
+/*
+blockquote {
+  @apply px-6 text-gray-700 dark:text-gray-400;
+}
+*/
+
+/* start, footnotes */
+
+.footnote-definition,
+.footnote-reference {
+  @apply font-sans;
+}
+
+.footnote-reference {
+  font-size: 0.65em;
+  top: -0.5em;
+}
+
+.footnote-sim {
+  font-size: 0.65em;
+  color: #0000ff;
+  @media (prefers-color-scheme: dark) {
+    color: #00aaff;
+  }
+}
+
+.footnotes {
+  & ol {
+    padding-inline-start: 1.5rem;
+  }
+  & ol li {
+    margin-bottom: 0.5rem;
+    font-size: $pokey;
+  }
+  & li p {
+    font-size: 100%;
+    line-height: 1.4;
+  }
+  & .footnote-backref {
+    font-size: 75%;
+  }
+}
+
+a.footnote-return {
+  font-size: 50%;
+}
+
+article > .footnote-definition {
+  border-top: 1px solid black;
+  padding-top: 1em;
+  margin-top: 1em;
+}
+
+article > .footnote-definition ~ .footnote-definition {
+  border-top: 0;
+  padding-top: 0;
+  margin-top: 0;
+}
+
+.footnote-definition-label {
+  top: -0.4em;
+  font-size: 0.65em;
+}
+
+.footnote-definition-label + p {
+  font-size: 75%;
+  margin-top: -1.75em;
+  margin-left: 1em;
+  line-height: 1.35;
+}
+
+.footnote-definition-label::after {
+  content: ".";
+}
+
+/* == end, footnotes */
+
+.aspect-16x9 {
+  padding-bottom: 56.25%;
+}
+/*
+hr {
+  @apply border-solid border-gray-900 dark:border-gray-100;
+}
+*/
+
+footer {
+  @apply font-sans;
+}
+
+.lazypicturecaption {
+  @apply text-sm p-0 mt-2 leading-snug text-center;
+}
+
+.home-colOne p {
+  @apply leading-8 mb-4;
+}
+
+.home-colOne img {
+  @apply my-4;
+}
+
+.container-comments {
+  margin: 0 auto;
+  font-size: 85%;
+  width: 85%;
+  max-width: 720px !important;
+  margin-bottom: 0;
+}
+
+@media screen and (min-width: 900px) {
+  .container-comments {
+    width: 40%;
+  }
+}

css/nav.css

@@ -0,0 +1,166 @@
+/*
+CSS-only and **accessible** menu based on... https://codepen.io/jonraedeke/pen/WRwJQX ...but considerably changed since then, especially due to change to Tailwind CSS
+*/
+
+.nav__item {
+  margin: 0px;
+}
+/*
+  @apply font-sans p-0 m-0;
+
+
+  & a {
+    @apply block py-1 px-4 mb-1 text-white no-underline transition-opacity duration-500 ease-linear;
+
+    &:link,
+    &:visited {
+      @apply text-blue;
+    }
+
+    &:hover,
+    &:focus {
+      @apply no-underline opacity-75;
+    }
+  }
+}
+
+*/
+@media (min-width: 900px) {
+  .nav__item {
+    @apply font-bold lowercase text-xs inline-block;
+    font-variant: small-caps;
+    letter-spacing: 0.15rem;
+    & a {
+      @apply inline-block pt-1 pb-0 no-underline;
+    }
+  }
+}
+
+.nav__icon {
+  @apply block absolute cursor-pointer;
+  top: 15px;
+  right: 13px;
+  height: 27px;
+  width: 27px;
+  text-indent: -9999px;
+  /* hide the label */
+  transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
+  /* Remove blinking cursor */
+  @apply border-none text-transparent text-center;
+  text-shadow: 0 0 0 gray;
+  &:focus {
+    @apply outline-none;
+  }
+}
+@media (min-width: 900px) {
+  .nav__icon {
+    @apply hidden;
+  }
+}
+
+.nav__icon-line {
+  @apply absolute block bg-white rounded left-0 transition-all duration-500 w-6 h-1 ease-linear;
+
+  &:first-child {
+    @apply top-0;
+  }
+
+  &:nth-child(2) {
+    top: 8px;
+  }
+
+  &:nth-child(3) {
+    top: 16px;
+  }
+}
+
+/* Checkbox hack for toggling mobile menu */
+input[type="checkbox"] {
+  @apply hidden invisible;
+  &:checked {
+    & ~ nav .nav__items {
+      height: auto;
+      /*@apply bg-black dark:bg-blue-700 transition-all duration-500 ease-linear;*/
+      max-height: 30rem;
+    }
+    & ~ label .nav__icon-line:first-child {
+      @apply top-0 -rotate-45 translate-y-2 w-6;
+    }
+    & ~ label .nav__icon-line:nth-child(2) {
+      @apply opacity-0;
+    }
+    & ~ label .nav__icon-line:nth-child(3) {
+      @apply rotate-45 -translate-y-2 w-6;
+    }
+  }
+}
+
+nav {
+  @apply absolute text-left left-0 w-full transition duration-500 ease-linear scale-x-100 scale-y-0 origin-top;
+  top: 100%;
+  & ul {
+    @apply pl-0 m-0 text-right list-none transition duration-500 ease-linear;
+  }
+  & li {
+    @apply mb-2 inline;
+    margin-right: 5%;
+    @media screen and (max-width: 899px) {
+      display: inherit;
+    }
+  }
+  & a {
+    @apply text-white text-lg opacity-0;
+    text-decoration: none !important;
+    border: 0 !important;
+  } /*
+  & a:hover, & a:active {
+    @apply border-b-0 text-gray-500;
+  }*/
+}
+
+.nav-toggle:checked ~ nav {
+  transform: scale(1, 1);
+  & a {
+    opacity: 1;
+  }
+}
+
+/* === Beginning of primary settings for larger screens === */
+@media screen and (min-width: 900px) {
+  .nav-toggle-label {
+    @apply hidden;
+  }
+
+  header {
+    @apply fixed grid grid-cols-5;
+  }
+
+  .site-logo {
+    @apply z-50 text-left col-start-1 col-end-3 text-lg;
+    padding-left: 8%;
+  }
+
+  nav {
+    @apply mt-0 col-start-4 col-end-6;
+    top: 15%;
+    transform: none;
+    & a {
+      @apply opacity-100 relative;
+    }
+    & ul {
+      padding-right: 10%;
+      @apply text-right;
+    }
+    & li {
+      @apply inline-block p-0 mb-0;
+    }
+  }
+}
+
+.site-logo-holder {
+  @apply mt-1 pt-1 w-full;
+  & a {
+    @apply no-underline border-b-0;
+  }
+}
+/* === End of primary settings for larger screens === */