Restructure for animated gifs
Animated gifs can't go through the asset pipeline since they come out as a single frame of the original animation. Previously, I had only a couple of them and didn't have my assets structured very well. I had the assets that needed to be passthrough copied alongside those that could go through the pipeline. It wasn't bad since there weren't many animations. I mapped just those to passthrough copy to go to a single directory. This will become more fraught as I add more since there's more opportunity for collisions. When mapping to an output directory, I can't maintain the inner structure of that directory. The files are flattened. I moved everything around, both to separate images that can go through the pipeline from those which can't and to allow for a simple passthrough copy that will maintain the directory structure so that each blog post can have its own directory of passthrough copied animated gifs in the build.
This commit is contained in:
Devon Campbell
parent
cb2aa96e90
commit
ae0487886b
69 changed files with 122 additions and 115 deletions
405
css/theme.css
Normal file
405
css/theme.css
Normal file
|
|
@ -0,0 +1,405 @@
|
|||
@font-face {
|
||||
font-family: "BitBold";
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
src: local("BitBold"), url("../fonts/BitBold.woff") format("woff");
|
||||
}
|
||||
|
||||
:root {
|
||||
--accent: #890b63;
|
||||
--accent-alt: #6b2957;
|
||||
--code-color: #632d55;
|
||||
--text-over-background: #dcdcdc;
|
||||
--fancy-font-stack: BitBold, monospace;
|
||||
--accent-over-background: rgb(62, 249, 138);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--accent: rgb(62, 249, 138);
|
||||
--accent-alt: #06cb56;
|
||||
--code-color: #ddfde3;
|
||||
}
|
||||
}
|
||||
|
||||
.sr-only:not(:focus):not(:active) {
|
||||
clip: rect(0 0 0 0);
|
||||
clip-path: inset(50%);
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
body > * {
|
||||
grid-column: unset;
|
||||
}
|
||||
body {
|
||||
background-image: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='70' height='70' patternTransform='scale(4) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='hsla(318, 45%, 29%, 1)'/><path d='M-4.8 4.44L4 16.59 16.14 7.8M32 30.54l-13.23 7.07 7.06 13.23M-9 38.04l-3.81 14.5 14.5 3.81M65.22 4.44L74 16.59 86.15 7.8M61 38.04l-3.81 14.5 14.5 3.81' stroke-linecap='square' stroke-width='1' stroke='hsla(258.5,59.4%,59.4%,1)' fill='none'/><path d='M59.71 62.88v3h3M4.84 25.54L2.87 27.8l2.26 1.97m7.65 16.4l-2.21-2.03-2.03 2.21m29.26 7.13l.56 2.95 2.95-.55' stroke-linecap='square' stroke-width='1' stroke='hsla(144, 94%, 61%, 1)' fill='none'/><path d='M58.98 27.57l-2.35-10.74-10.75 2.36M31.98-4.87l2.74 10.65 10.65-2.73M31.98 65.13l2.74 10.66 10.65-2.74' stroke-linecap='square' stroke-width='1' stroke='hsla(199, 98%, 48%, 1)' fill='none'/><path d='M8.42 62.57l6.4 2.82 2.82-6.41m33.13-15.24l-4.86-5.03-5.03 4.86m-14-19.64l4.84-5.06-5.06-4.84' stroke-linecap='square' stroke-width='1' stroke='hsla(326, 100%, 50%, 1)' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>");
|
||||
background-attachment: fixed;
|
||||
font-size: 1.35rem;
|
||||
grid-template-columns: 1fr;
|
||||
justify-items: start;
|
||||
column-gap: 3rem;
|
||||
}
|
||||
|
||||
body > nav,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: var(--fancy-font-stack);
|
||||
}
|
||||
|
||||
img {
|
||||
opacity: 1;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
transition: 0.2s;
|
||||
}
|
||||
a:visited {
|
||||
color: var(--accent-alt);
|
||||
}
|
||||
a:hover,
|
||||
a:visited:hover {
|
||||
text-shadow: 0 0 2px #fff, 0 0 8px var(--accent);
|
||||
}
|
||||
|
||||
code {
|
||||
color: var(--code-color);
|
||||
}
|
||||
|
||||
body > nav {
|
||||
align-self: start;
|
||||
grid-row: 2;
|
||||
position: relative;
|
||||
margin-bottom: 2rem;
|
||||
overflow: auto;
|
||||
}
|
||||
body > nav ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
}
|
||||
body > nav li {
|
||||
font-size: 2.5rem;
|
||||
margin: 0 1rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
body > nav li:first-of-type {
|
||||
margin: 0 1rem 0 0;
|
||||
}
|
||||
body > nav a {
|
||||
transition: 0.2s;
|
||||
}
|
||||
body > nav a,
|
||||
body > nav a:visited {
|
||||
text-decoration: none;
|
||||
color: var(--text-over-background);
|
||||
text-shadow: 3px 3px 0 black;
|
||||
}
|
||||
body > nav a[disabled] {
|
||||
cursor: no-drop;
|
||||
}
|
||||
body > nav a:hover:not([disabled]) {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.5rem;
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
margin-top: 0;
|
||||
text-shadow: 0.1em 0 black;
|
||||
color: var(--text-over-background);
|
||||
}
|
||||
h1 + article {
|
||||
margin-top: -1.9rem;
|
||||
}
|
||||
|
||||
.logo {
|
||||
max-width: 100%;
|
||||
margin: 2rem 1rem 3rem 2rem;
|
||||
}
|
||||
.logo img {
|
||||
width: 25rem;
|
||||
max-width: 100%;
|
||||
}
|
||||
body > .logo {
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
article {
|
||||
border-radius: 0;
|
||||
}
|
||||
body > article {
|
||||
grid-row: 4;
|
||||
justify-self: stretch;
|
||||
}
|
||||
|
||||
body > article,
|
||||
body > h1,
|
||||
body > nav,
|
||||
body > .logo {
|
||||
grid-column: 1;
|
||||
}
|
||||
body > h1 {
|
||||
grid-row: 3;
|
||||
}
|
||||
body > h1 {
|
||||
margin: 1rem;
|
||||
}
|
||||
body > nav {
|
||||
padding-left: 1rem;
|
||||
width: 100%;
|
||||
}
|
||||
body > footer {
|
||||
align-self: end;
|
||||
grid-row: 5;
|
||||
border: none;
|
||||
color: var(--text-over-background);
|
||||
margin-top: 2rem;
|
||||
}
|
||||
body > footer a, body > footer a:visited {
|
||||
color: var(--accent-over-background);
|
||||
}
|
||||
footer img {
|
||||
width: 5rem;
|
||||
}
|
||||
@media screen and (min-width: 50rem) {
|
||||
body > h1 {
|
||||
margin-left: 2rem;
|
||||
}
|
||||
body > nav {
|
||||
padding-left: 2rem;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 67rem) {
|
||||
body {
|
||||
grid-template-columns: minmax(45rem, 70rem) minmax(18rem, 1fr);
|
||||
}
|
||||
body > nav ul {
|
||||
display: block;
|
||||
}
|
||||
body > nav li {
|
||||
margin: 0;
|
||||
}
|
||||
body > nav {
|
||||
grid-column: 2;
|
||||
grid-row: 3;
|
||||
width: auto;
|
||||
overflow: unset;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
body > .logo {
|
||||
grid-row: 1;
|
||||
}
|
||||
body > h1 {
|
||||
grid-row: 2;
|
||||
}
|
||||
body > article {
|
||||
grid-row: 3 / 5;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
body > footer {
|
||||
align-self: end;
|
||||
grid-column: 2;
|
||||
grid-row: 4;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
body > nav a:hover:not([disabled]) {
|
||||
text-shadow: 0 0 5px var(--accent-over-background), 0 0 25px var(--accent-over-background),
|
||||
0 0 50px var(--accent-over-background), 0 0 100px var(--accent-over-background);
|
||||
}
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
h1:hover .anchor,
|
||||
h2:hover .anchor,
|
||||
h3:hover .anchor,
|
||||
h4:hover .anchor,
|
||||
h5:hover .anchor,
|
||||
h6:hover .anchor {
|
||||
display: block;
|
||||
}
|
||||
.anchor {
|
||||
display: none;
|
||||
font-size: 0.6em;
|
||||
opacity: 0.6;
|
||||
color: var(--text);
|
||||
order: 2;
|
||||
text-decoration: none;
|
||||
margin-left: 0.25em;
|
||||
}
|
||||
|
||||
p:first-of-type {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.glow {
|
||||
border: none;
|
||||
box-shadow: 0 0 5px #fff, 0 0 20px 10px var(--accent-over-background);
|
||||
}
|
||||
|
||||
.bg {
|
||||
position: relative;
|
||||
padding: 1rem;
|
||||
}
|
||||
/* I'm using the Simple.css lightweight CSS framework. This allows me to use
|
||||
the main background color from that framework (the CSS variable `--bg` and
|
||||
use it only behind the article. */
|
||||
.bg::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: var(--bg);
|
||||
opacity: 0.85;
|
||||
z-index: -1;
|
||||
}
|
||||
@media screen and (min-width: 50rem) {
|
||||
.bg {
|
||||
padding: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.post-list {
|
||||
list-style-type: none;
|
||||
margin: 4rem 0 0;
|
||||
padding: 0;
|
||||
}
|
||||
.post-list li:not(:last-of-type) {
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
.post-list h2 {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
.post-list small {
|
||||
display: block;
|
||||
opacity: 0.8;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.pagination ol {
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
display: grid;
|
||||
list-style-type: none;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
margin: 4rem 0 0 0;
|
||||
}
|
||||
.pagination .newer-item {
|
||||
grid-column: 1;
|
||||
justify-self: start;
|
||||
}
|
||||
.pagination .older-item {
|
||||
grid-column: 2;
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
.webmentions-likes, .webmentions-boosts, .webmentions-replies {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.webmentions-replies li {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.webmentions-replies li:not(:last-child) {
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
.webmentions-replies li > a,
|
||||
.webmentions-likes li > a,
|
||||
.webmentions-boosts li > a {
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
.webmentions-likes li > a,
|
||||
.webmentions-boosts li > a {
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
}
|
||||
.webmentions-replies li > a {
|
||||
width: 6rem;
|
||||
height: 6rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
.webmentions-replies .from-mastodon > a::before,
|
||||
.webmentions-likes .from-mastodon > a::before,
|
||||
.webmentions-boosts .from-mastodon > a::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
background: url('/images/mastodon-logo.png') no-repeat center center;
|
||||
background-size: contain;
|
||||
filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
|
||||
}
|
||||
.webmentions-replies .from-mastodon > a::before {
|
||||
bottom: 0.25rem;
|
||||
left: 0.25rem;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
.webmentions-likes .from-mastodon > a::before,
|
||||
.webmentions-boosts .from-mastodon > a::before {
|
||||
bottom: 0.15rem;
|
||||
left: 0.15rem;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
.webmentions-replies li img {
|
||||
width: 6rem;
|
||||
}
|
||||
.webmentions-replies li .content {
|
||||
flex: 1;
|
||||
}
|
||||
.webmentions-replies li .content .published-datetime {
|
||||
font-size: 0.8em;
|
||||
opacity: 0.8;
|
||||
}
|
||||
.webmentions-replies li .content > a {
|
||||
color: var(--text);
|
||||
}
|
||||
.webmentions-likes, .webmentions-boosts {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.webmentions-likes li img, .webmentions-boosts li img {
|
||||
width: 4rem;
|
||||
}
|
||||
.mention-heading {
|
||||
margin-bottom: 1.2rem;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue