Reworking assets

resources/sass-orig/_articles.scss

@@ -0,0 +1,5 @@
+//articles.scss
+
+article.h-entry {
+    width: $mainWidth;
+}

resources/sass-orig/_base.scss

@@ -0,0 +1,22 @@
+// _base.scss
+
+// Fonts
+html {
+    font-family: montserrat, sans-serif;
+    font-weight: 300;
+    font-style: normal;
+    font-size: 20px;
+}
+
+h1 {
+    font-family: bebas-neue, sans-serif;
+    font-weight: 400;
+    font-style: normal;
+}
+
+code {
+    font-family: "Operator Mono", monospace;
+}
+
+// Variables
+$mainWidth: 40rem;

resources/sass-orig/_bio.scss

@@ -0,0 +1,11 @@
+// bio.scss
+
+.personal-bio {
+    width: $mainWidth;
+}
+
+@media screen and (max-width: $mainWidth) {
+    .personal-bio {
+        width: 95vw;
+    }
+}

resources/sass-orig/_emoji.scss

@@ -0,0 +1,49 @@
+//emoji.scss
+
+//thanks to http://adrianroselli.com/2016/12/accessible-emoji-tweaked.html
+
+span[role=img][aria-label] {
+    position: relative;
+}
+
+span[role=img][aria-label]:focus::after,
+span[role=img][aria-label]:hover::after {
+    position: absolute;
+    display: block;
+    z-index: 1;
+    bottom: 1.5em;
+    left: 0;
+    padding: 0.5em 0.75em;
+    border: 0.05em solid rgba(255, 255, 255, 1);
+    border-radius: 0.2em;
+    box-shadow: 0.15em 0.15em 0.5em rgba(0, 0, 0, 1);
+    content: attr(aria-label);
+    background-color: rgba(0, 0, 0, 0.85);
+    color: rgba(255, 255, 255, 1);
+    font-size: 80%;
+    animation: TOOLTIP 0.1s ease-out 1;
+}
+
+@keyframes TOOLTIP {
+    from {
+        bottom: 0.5em;
+        background-color: rgba(0, 0, 0, 0);
+        border: 0.05em solid rgba(255, 255, 255, 0);
+        color: rgba(255, 255, 255, 0);
+        box-shadow: 0 0 0 rgba(0, 0, 0, 1);
+    }
+
+    to {
+        bottom: 1.5em;
+        background-color: rgba(0, 0, 0, 0.85);
+        border: 0.05em solid rgba(255, 255, 255, 1);
+        color: rgba(255, 255, 255, 1);
+        box-shadow: 0.15em 0.15em 0.5em rgba(0, 0, 0, 1);
+    }
+}
+
+@media print {
+    span[role=img][aria-label]::after {
+        content: " (" attr(aria-label) ") ";
+    }
+}

resources/sass-orig/_footer.scss

@@ -0,0 +1,38 @@
+// footer.scss
+
+footer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background-color: var(--white);
+    color: var(--black);
+
+    a {
+        color: var(--blue);
+        text-decoration: none;
+    }
+
+    form:first-child {
+        margin-bottom: 1rem;
+    }
+
+    p {
+        margin-bottom: 0;
+    }
+}
+
+@media screen and (max-width: $mainWidth) {
+    footer {
+        img {
+            width: 95%;
+        }
+
+        form {
+            width: 95vw;
+        }
+
+        select {
+            width: 90vw;
+        }
+    }
+}

resources/sass-orig/_main.scss

@@ -0,0 +1,21 @@
+// main.scss
+
+main {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background-color: var(--white);
+    color: var(--black);
+
+    a {
+        color: var(--blue);
+        text-decoration: none;
+    }
+
+    .h-entry {
+        margin: 3rem 0;
+    }
+}
+
+@import "pagination";
+@import "bio";

resources/sass-orig/_mapbox.scss

@@ -0,0 +1,5 @@
+//mapbox.scss
+
+.map {
+    height: 200px;
+}

resources/sass-orig/_notes.scss

@@ -0,0 +1,17 @@
+// notes.scss
+
+.h-entry .note {
+    width: $mainWidth;
+}
+
+@media screen and (max-width: $mainWidth) {
+    .h-entry .note {
+        width: 95vw;
+
+        .e-content {
+            img {
+                width: 100%;
+            }
+        }
+    }
+}

resources/sass-orig/_pagination.scss

@@ -0,0 +1,16 @@
+// pagination.scss
+
+.pagination {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    list-style-type: none;
+    width: $mainWidth;
+}
+
+@media screen and (max-width: $mainWidth) {
+    .pagination {
+        width: 95vw;
+    }
+}

resources/sass-orig/_site-header.scss

@@ -0,0 +1,25 @@
+// site-header.scss
+
+#topheader {
+    display: flex;
+    width: 100vw;
+    flex-direction: column;
+    align-items: center;
+    background-color: var(--black);
+
+    a {
+        color: var(--white);
+        text-decoration: none;
+    }
+
+    h1 {
+        margin-top: 0;
+        padding-top: 1rem;
+        font-size: 3rem;
+    }
+
+    nav {
+        padding-bottom: 1rem;
+        font-size: 1.5rem;
+    }
+}

resources/sass-orig/_syndication.scss

@@ -0,0 +1,16 @@
+//syndication.scss
+
+.note-metadata {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+
+    .social-links {
+        flex-direction: row;
+
+        svg {
+            height: 1em;
+            width: auto;
+        }
+    }
+}

resources/sass-orig/app.scss

@@ -0,0 +1,18 @@
+// app.scss
+
+// General styles
+@import "base";
+@import "site-header";
+@import "main";
+@import "articles";
+@import "notes";
+@import "footer";
+
+// Mapbox styles
+@import "mapbox";
+
+// The syndication links at the end of notes
+@import "syndication";
+
+// Accessible emoji
+@import "emoji";