~wuz/wuz.sh

cacdc20d5d9e141152d0ab43b1f58add40bf8f89 — Conlin Durbin 1 year, 1 month ago c18e090
Adding new styles and writing
23 files changed, 85 insertions(+), 69 deletions(-)

M _includes/layouts/logo.liquid
M _includes/layouts/nav.liquid
M _includes/layouts/post.liquid
R _includes/styles/{color.css => atoms/color.css}
R _includes/styles/{flex.css => atoms/flex.css}
A _includes/styles/atoms/general.css
R _includes/styles/{grid.css => atoms/grid.css}
R _includes/styles/{size.css => atoms/size.css}
R _includes/styles/{spacing.css => atoms/spacing.css}
R _includes/styles/{type.css => atoms/type.css}
R _includes/styles/{fonts.css => ats/fonts.css}
R _includes/styles/{AspectRatio.css => components/aspect-ratio.css}
R _includes/styles/{ColorToggle.css => components/color-switch.css}
R _includes/styles/{markdown.css => components/markdown.css}
R _includes/styles/{prism.css => components/prism.css}
R _includes/styles/{generic.css => generics/html.css}
R _includes/styles/{reset.css => generics/reset.css}
M _includes/styles/main.css
A _includes/styles/objects/post.css
M index.html
M js/dark-mode.js
M writing.html
M writing/deno.md
M _includes/layouts/logo.liquid => _includes/layouts/logo.liquid +1 -1
@@ 1,4 1,4 @@
<svg viewBox="0 0 167 135" class="img:responsive" style="width:100px;">
<svg viewBox="0 0 167 135" data-responsive style="width: 100px;">
  <path
    fill-rule="evenodd"
    class="fill:night d:fill:white"

M _includes/layouts/nav.liquid => _includes/layouts/nav.liquid +2 -2
@@ 8,8 8,8 @@
  <nav class="grid:span-1 flex ai:center jc:center">
    <a href="/writing" class="margin:1:right text:strawberry">Writing</a>
    <!-- <a href="/kit" class="margin:1:right text:strawberry">Kit</a> -->
    <div class="ColorSwitch-container">
      <button class="ColorSwitch" aria-label="Toggle Dark Mode">
    <div class="color-switch-container">
      <button class="color-switch" aria-label="Toggle Dark Mode">
        <span role="img" aria-label="dark mode">
          🌝
        </span>

M _includes/layouts/post.liquid => _includes/layouts/post.liquid +7 -3
@@ 1,13 1,17 @@
{% include head.liquid %}
<div
  class="typescale:2 text:night bg:white typescale:5 d:bg:night d:text:white"
  >
>
  <section class="container padding:2">
    {% include nav.liquid %}
    <main class="content">
      <img class="img:responsive" src="{{ cover_image }}" />
      {% if cover_image != "" %}
      <img data-responsive src="{{ cover_image }}" />
      {% endif %}
      <h1 class="typescale:12 wght:800 bdr:rainbow:bottom">{{ title }}</h1>
      <h2 class="typescale:9 text:stone wght:500">{{ description }}</h2>
      <h2 class="typescale:9 text:stone wght:500 margin:2:top">
        {{ description }}
      </h2>
      <article class="markdown">
        {{ content }}
      </article>

R _includes/styles/color.css => _includes/styles/atoms/color.css +0 -0
R _includes/styles/flex.css => _includes/styles/atoms/flex.css +0 -0
A _includes/styles/atoms/general.css => _includes/styles/atoms/general.css +13 -0
@@ 0,0 1,13 @@
.content {
  max-width: 42em;
}

.container {
  width: 100%;
  max-width: 60em;
  margin: 0 auto;
}

.no-decoration {
  text-decoration: none;
}

R _includes/styles/grid.css => _includes/styles/atoms/grid.css +0 -0
R _includes/styles/size.css => _includes/styles/atoms/size.css +0 -0
R _includes/styles/spacing.css => _includes/styles/atoms/spacing.css +0 -17
@@ 40,20 40,3 @@
    }
  }
}

.o\:writing {
  display: grid;
  grid-template-rows: 20px 100px 2fr 20px;
  height: 250px;

  & h1 {
    margin-bottom: 10px;
    justify-self: stretch;
  }

  & a {
    align-self: flex-end;
    justify-self: end;
    height: 20px;
  }
}

R _includes/styles/type.css => _includes/styles/atoms/type.css +0 -0
R _includes/styles/fonts.css => _includes/styles/ats/fonts.css +0 -0
R _includes/styles/AspectRatio.css => _includes/styles/components/aspect-ratio.css +2 -4
@@ 4,9 4,7 @@
[style*="--aspect-ratio"] > img {
  height: auto;
}
[style*="--aspect-ratio"] {
  margin: em(spacing(1)) 0;
}

@supports (--custom: property) {
  [style*="--aspect-ratio"] {
    position: relative;


@@ 14,7 12,7 @@
  [style*="--aspect-ratio"]::before {
    content: "";
    display: block;
    padding-bottom: calc(100% / (var(--aspect-ratio)));
    padding-bottom: calc(100% / (16 / 9));
  }
  [style*="--aspect-ratio"] > :first-child {
    position: absolute;

R _includes/styles/ColorToggle.css => _includes/styles/components/color-switch.css +6 -6
@@ 1,11 1,11 @@
.ColorSwitch-container {
.color-switch-container {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.ColorSwitch {
.color-switch {
  outline: none;
  display: inline-flex;
  align-items: center;


@@ 18,11 18,11 @@
  cursor: pointer;
}

.ColorSwitch:focus {
.color-switch:focus {
  border-bottom-color: #191b2a;
}

.ColorSwitch:before {
.color-switch:before {
  content: "🌎";
  display: block;
  /* height: 15px; */


@@ 34,11 34,11 @@
  transform: translateX(0px);
}

body.dark-mode .ColorSwitch:focus {
body.dark-mode .color-switch:focus {
  border-bottom-color: #eff0f6;
}

body.dark-mode .ColorSwitch:before {
body.dark-mode .color-switch:before {
  /* background-color: #191b2a; */
  transform: translateX(100%);
}

R _includes/styles/markdown.css => _includes/styles/components/markdown.css +0 -4
@@ 15,8 15,4 @@
  & pre {
    border-radius: 4px;
  }

  p {
    margin-bottom: em(spacing(2));
  }
}

R _includes/styles/prism.css => _includes/styles/components/prism.css +0 -0
R _includes/styles/generic.css => _includes/styles/generics/html.css +1 -15
@@ 19,27 19,13 @@ body {
  }
}

.img\:responsive {
[data-responsive] {
  object-fit: cover;
  width: 100%;
  height: auto;
}

.content {
  max-width: 42em;
}

.container {
  width: 100%;
  max-width: 60em;
  margin: 0 auto;
}

a {
  color: var(--c-strawberry);
  text-decoration: underline var(--c-strawberry) solid 2px;
}

.no-decoration {
  text-decoration: none;
}

R _includes/styles/reset.css => _includes/styles/generics/reset.css +2 -0
@@ 17,6 17,8 @@ h1,
h2,
h3,
h4,
h5,
h6,
p,
ul[class],
ol[class],

M _includes/styles/main.css => _includes/styles/main.css +22 -14
@@ 1,15 1,23 @@
@import "fonts.css";
/* SCCSS */

@import "token.css";
@import "reset.css";
@import "generic.css";
@import "type.css";
@import "spacing.css";
@import "color.css";
@import "grid.css";
@import "flex.css";
@import "size.css";
@import "markdown.css";
@import "prism.css";

@import "AspectRatio.css";
@import "ColorToggle.css";

@import "ats/fonts.css";

@import "generics/reset.css";
@import "generics/html.css";

@import "objects/post.css";

@import "components/markdown.css";
@import "components/prism.css";
@import "components/aspect-ratio.css";
@import "components/color-switch.css";

@import "atoms/general.css";
@import "atoms/type.css";
@import "atoms/spacing.css";
@import "atoms/color.css";
@import "atoms/grid.css";
@import "atoms/flex.css";
@import "atoms/size.css";

A _includes/styles/objects/post.css => _includes/styles/objects/post.css +17 -0
@@ 0,0 1,17 @@
.o\:post {
  display: grid;
  grid-template-rows: 20px 120px 2fr 20px;
  height: 250px;

  & h1 {
    margin: 10px 0;
    justify-self: stretch;
    align-self: flex-end;
  }

  & a {
    align-self: flex-end;
    justify-self: end;
    height: 20px;
  }
}

M index.html => index.html +10 -0
@@ 21,6 21,16 @@ pageTitle: Howdy, I'm Wuz!
  </div>
  <div>
    <h1 class="typescale:6 wght:600">Recent Writing</h1>
    <ul>
      {%- for post in collections.writing -%}
      <li>
        <a href="{{post.url}}">{{ post.data.title }}</a> |
        <time datetime="{{page.date}}">
          {{ page.date | prettyDate }}
        </time>
      </li>
      {%- endfor -%}
    </ul>
  </div>
  <div>
    <h1 class="typescale:6 wght:600">Find me on the web</h1>

M js/dark-mode.js => js/dark-mode.js +1 -1
@@ 35,7 35,7 @@ if (localStorageExists) {
}

document.addEventListener("DOMContentLoaded", () => {
  const colorToggle = document.querySelector(".ColorSwitch");
  const colorToggle = document.querySelector(".color-switch");
  if (colorToggle) {
    colorToggle.addEventListener("click", () => {
      const isDarkMode = document.body.classList.contains(classNameDark);

M writing.html => writing.html +1 -1
@@ 6,7 6,7 @@ layout: layouts/index
<h1 class="typescale:9 wght:800 margin:2:bottom">Writing</h1>
<ul class="grid grid:auto-fit">
  {%- for post in collections.writing -%}
  <li class="o:writing">
  <li class="o:post">
    <time class="typescale:3" datetime="{{page.date}}">
      {{ page.date | prettyDate }}
    </time>

M writing/deno.md => writing/deno.md +0 -1
@@ 1,5 1,4 @@
---
cover_image: /assets/radar.png
date: 2019-04-12T23:10:14.789Z
title: Getting started with Deno
description: A new runtime for Javascript and Typescript from the founder of Node