Format style.css to Zed's liking, whatever

This commit is contained in:
Sami Samhuri 2025-06-06 17:08:31 -07:00
parent f37eb4c7e7
commit 67aa48f0e5
No known key found for this signature in database

View file

@ -11,66 +11,66 @@
/* 64 rem ~ 1024px */ /* 64 rem ~ 1024px */
body { body {
font-size: 100%; font-size: 100%;
} }
@media (min-width: 40rem) { @media (min-width: 40rem) {
body { body {
font-size: 112%; font-size: 112%;
} }
} }
@media (min-width: 64rem) { @media (min-width: 64rem) {
body { body {
font-size: 120%; font-size: 120%;
} }
} }
*, *,
*:before, *:before,
*:after { *:after {
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
} }
.container { .container {
margin: 0 auto; margin: 0 auto;
max-width: 48rem; max-width: 48rem;
width: 90%; width: 90%;
padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left); padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left);
} }
@media (min-width: 40rem) { @media (min-width: 40rem) {
.column { .column {
float: left; float: left;
padding-left: 1rem; padding-left: 1rem;
padding-right: 1rem; padding-right: 1rem;
} }
.column.full { .column.full {
width: 100%; width: 100%;
} }
.column.two-thirds { .column.two-thirds {
width: 66.7%; width: 66.7%;
} }
.column.half { .column.half {
width: 50%; width: 50%;
} }
.column.third { .column.third {
width: 33.3%; width: 33.3%;
} }
.column.fourth { .column.fourth {
width: 24.95%; width: 24.95%;
} }
.column.flow-opposite { .column.flow-opposite {
float: right; float: right;
} }
} }
/** /**
@ -80,19 +80,19 @@ body {
.clearfix:before, .clearfix:before,
.clearfix:after { .clearfix:after {
content: " "; content: " ";
display: table; display: table;
} }
.clearfix:after { .clearfix:after {
clear: both; clear: both;
} }
/** /**
* Super barebones responsive images * Super barebones responsive images
*/ */
img { img {
max-width: 100%; max-width: 100%;
} }
/** /**
@ -101,11 +101,11 @@ img {
*/ */
body { body {
background-color: #f7f7f7; background-color: #f7f7f7;
color: #222; color: #222;
font-family: 'museo-sans', 'Helvetica Neue', 'Verdana', 'Roboto', sans-serif; font-family: "museo-sans", "Helvetica Neue", "Verdana", "Roboto", sans-serif;
font-display: swap; font-display: swap;
padding-bottom: env(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom);
} }
h1, h1,
@ -114,204 +114,205 @@ h3,
h4, h4,
h5, h5,
h6 { h6 {
font-family: 'Helvetica Neue', 'Verdana', sans-serif; font-family: "Helvetica Neue", "Verdana", sans-serif;
} }
nav { nav {
font-family: 'Helvetica Neue', 'Roboto', 'Arial', sans-serif; font-family: "Helvetica Neue", "Roboto", "Arial", sans-serif;
} }
a { a {
color: #c30000; color: #c30000;
} }
a:visited { a:visited {
color: #a00; color: #a00;
} }
hr { hr {
width: 55%; width: 55%;
height: 0; height: 0;
margin: 0 auto; margin: 0 auto;
border: 0; border: 0;
border-top: 1px solid #ddd; border-top: 1px solid #ddd;
} }
header.primary { header.primary {
background-color: #151515; background-color: #151515;
color: #f7f7f7; color: #f7f7f7;
padding: 0.8rem max(1.2rem, env(safe-area-inset-right)) 0.8rem max(1.2rem, env(safe-area-inset-left)); padding: 0.8rem max(1.2rem, env(safe-area-inset-right)) 0.8rem
border-bottom: solid 1px #888888; max(1.2rem, env(safe-area-inset-left));
box-shadow: 0 0 12px 2px #222; border-bottom: solid 1px #888888;
box-shadow: 0 0 12px 2px #222;
} }
header.primary .title { header.primary .title {
float: left; float: left;
} }
header.primary h1, header.primary h1,
header.primary h4 { header.primary h4 {
display: inline-block; display: inline-block;
margin: 0; margin: 0;
padding: 0; padding: 0;
word-wrap: break-word; word-wrap: break-word;
font-family: 'museo-sans', 'Helvetica Neue', 'Verdana', 'Roboto', sans-serif; font-family: "museo-sans", "Helvetica Neue", "Verdana", "Roboto", sans-serif;
font-display: swap; font-display: swap;
font-weight: normal; font-weight: normal;
} }
header.primary h1 { header.primary h1 {
height: 1.3rem; height: 1.3rem;
font-size: 1.3rem; font-size: 1.3rem;
} }
header.primary h1 a, header.primary h1 a,
header.primary h1 a:visited { header.primary h1 a:visited {
color: #f7f7f7; color: #f7f7f7;
} }
header.primary h4 { header.primary h4 {
height: 0.8rem; height: 0.8rem;
font-size: 0.8rem; font-size: 0.8rem;
color: #dedede; color: #dedede;
} }
header.primary h4 a { header.primary h4 a {
color: #dedede; color: #dedede;
text-decoration: none; text-decoration: none;
} }
header.primary h4 a:hover { header.primary h4 a:hover {
color: #f7f7f7; color: #f7f7f7;
text-decoration: underline; text-decoration: underline;
} }
header.primary nav.local { header.primary nav.local {
float: left; float: left;
clear: left; clear: left;
} }
header.primary nav.remote { header.primary nav.remote {
float: right; float: right;
margin-left: 1.4rem; margin-left: 1.4rem;
} }
@media (min-width: 35.5rem) { @media (min-width: 35.5rem) {
header.primary nav.local { header.primary nav.local {
float: right; float: right;
clear: none; clear: none;
} }
} }
header.primary nav a, header.primary nav a,
header.primary nav a:visited { header.primary nav a:visited {
color: #ce0000; color: #ce0000;
} }
header.primary nav ul { header.primary nav ul {
margin: 0; margin: 0;
padding: 0.5rem 0; padding: 0.5rem 0;
} }
header.primary nav ul li { header.primary nav ul li {
display: inline-block; display: inline-block;
list-style-type: none; list-style-type: none;
padding: 0.2rem 0.4rem; padding: 0.2rem 0.4rem;
font-size: 1.3rem; font-size: 1.3rem;
} }
header.primary nav ul li:first-child { header.primary nav ul li:first-child {
padding-left: 0; padding-left: 0;
} }
header.primary nav ul li:last-child { header.primary nav ul li:last-child {
padding-right: 0; padding-right: 0;
} }
header.primary nav ul li i.fa { header.primary nav ul li i.fa {
font-size: 1.4rem; font-size: 1.4rem;
padding: 0.2rem; padding: 0.2rem;
} }
header.primary nav ul li.rss i.fa-rss { header.primary nav ul li.rss i.fa-rss {
color: #e66b19; color: #e66b19;
} }
header.primary nav ul li.mastodon i.fa-mastodon { header.primary nav ul li.mastodon i.fa-mastodon {
color: #5e4fe5; color: #5e4fe5;
} }
header.primary nav ul li.github i.fa-github { header.primary nav ul li.github i.fa-github {
color: #4183c4; color: #4183c4;
} }
footer { footer {
padding: 1rem 0; padding: 1rem 0;
text-align: center; text-align: center;
color: #6f6f6f; color: #6f6f6f;
font-family: 'Helvetica Neue', 'Verdana', 'Roboto', sans-serif; font-family: "Helvetica Neue", "Verdana", "Roboto", sans-serif;
} }
footer a, footer a,
footer a:visited { footer a:visited {
color: #6f6f6f; color: #6f6f6f;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
body { body {
background-color: #000; background-color: #000;
color: #ddd; color: #ddd;
} }
a { a {
color: #b30000; color: #b30000;
} }
a:visited { a:visited {
color: #900; color: #900;
} }
hr { hr {
border-top-color: #ddd; border-top-color: #ddd;
} }
header.primary { header.primary {
background-color: #121212; background-color: #121212;
color: #ddd; color: #ddd;
border-bottom: solid 1px #4d4d4d; border-bottom: solid 1px #4d4d4d;
box-shadow: 0 0 8px 2px #333; box-shadow: 0 0 8px 2px #333;
} }
header.primary h1 a, header.primary h1 a,
header.primary h1 a:visited { header.primary h1 a:visited {
color: #ddd; color: #ddd;
} }
header.primary h4 { header.primary h4 {
color: #c4c4c4; color: #c4c4c4;
} }
header.primary h4 a { header.primary h4 a {
color: #c4c4c4; color: #c4c4c4;
} }
header.primary h4 a:hover { header.primary h4 a:hover {
color: #ddd; color: #ddd;
} }
header.primary nav a, header.primary nav a,
header.primary nav a:visited { header.primary nav a:visited {
color: #cc0000; color: #cc0000;
} }
footer { footer {
color: #919191; color: #919191;
} }
footer a, footer a,
footer a:visited { footer a:visited {
color: #919191; color: #919191;
} }
} }
/** /**
@ -322,48 +323,47 @@ h2.year a,
h2.year a:visited, h2.year a:visited,
h2.month a, h2.month a,
h2.month a:visited { h2.month a:visited {
color: #000; color: #000;
} }
ul.archive { ul.archive {
padding-left: 0; padding-left: 0;
margin-left: 5%; margin-left: 5%;
margin-bottom: 2rem; margin-bottom: 2rem;
list-style-type: none; list-style-type: none;
} }
@media (min-width: 40rem) { @media (min-width: 40rem) {
ul.archive { ul.archive {
margin-right: 5%; margin-right: 5%;
} }
} }
ul.archive li { ul.archive li {
margin: 0.8rem 0; margin: 0.8rem 0;
} }
ul.archive li a { ul.archive li a {
text-decoration: none; text-decoration: none;
} }
ul.archive li time { ul.archive li time {
font-size: 80%; font-size: 80%;
padding-left: 0.5rem; padding-left: 0.5rem;
color: #6f6f6f; color: #6f6f6f;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
h2.year a,
h2.year a:visited,
h2.month a,
h2.month a:visited {
color: #ddd;
}
h2.year a, ul.archive li time {
h2.year a:visited, color: #919191;
h2.month a, }
h2.month a:visited {
color: #ddd;
}
ul.archive li time {
color: #919191;
}
} }
/** /**
@ -371,47 +371,47 @@ ul.archive li time {
*/ */
.project-listing { .project-listing {
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.project-listing h4 { .project-listing h4 {
margin: 0.5rem 0 1rem; margin: 0.5rem 0 1rem;
} }
.project-listing p { .project-listing p {
margin: 0.5rem 0 2rem; margin: 0.5rem 0 2rem;
} }
.project-stats { .project-stats {
text-align: center; text-align: center;
margin: 2rem 0; margin: 2rem 0;
} }
.project-stats a { .project-stats a {
padding: 0 0.3rem; padding: 0 0.3rem;
} }
article.project h1, article.project h1,
article.project h4 { article.project h4 {
text-align: center; text-align: center;
} }
.project-info h3 { .project-info h3 {
text-align: center; text-align: center;
margin-bottom: 0.2rem; margin-bottom: 0.2rem;
} }
.project-info .column { .project-info .column {
margin-bottom: 2rem; margin-bottom: 2rem;
} }
.project-info ul { .project-info ul {
padding-left: 0; padding-left: 0;
text-align: center; text-align: center;
} }
.project-info ul li { .project-info ul li {
list-style-type: none; list-style-type: none;
} }
/** /**
@ -419,83 +419,84 @@ article.project h4 {
*/ */
article { article {
word-wrap: break-word; word-wrap: break-word;
} }
article header h1, article header h1,
article header h2 { article header h2 {
word-wrap: break-word; word-wrap: break-word;
margin-bottom: 0.3rem; margin-bottom: 0.3rem;
} }
article header time { article header time {
margin-top: 0.3rem; margin-top: 0.3rem;
color: #7b7b7b; color: #7b7b7b;
font-family: 'Helvetica Neue', 'Verdana', sans-serif; font-family: "Helvetica Neue", "Verdana", sans-serif;
} }
p.fin { p.fin {
text-align: center; text-align: center;
color: #c4c4c4; color: #c4c4c4;
margin: 1rem 0; margin: 1rem 0;
} }
blockquote { blockquote {
margin-left: 6%; margin-left: 6%;
font-family: 'Helvetica Neue', 'Verdana', 'Roboto', sans-serif; font-family: "Helvetica Neue", "Verdana", "Roboto", sans-serif;
font-style: italic; font-style: italic;
color: #484848; color: #484848;
} }
blockquote:before { blockquote:before {
content: '\201F'; content: "\201F";
float: left; float: left;
margin-top: -0.35rem; margin-top: -0.35rem;
margin-left: -1rem; margin-left: -1rem;
font-size: 150%; font-size: 150%;
} }
ul.audio li { ul.audio li {
height: 2rem; height: 2rem;
margin: 0.5rem 0; margin: 0.5rem 0;
} }
ul.audio audio { ul.audio audio {
vertical-align: middle; vertical-align: middle;
} }
pre { pre {
background-color: #eaeaea; background-color: #eaeaea;
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
} }
code, code,
pre { pre {
font-family: 'Fira Code', 'JetBrains Mono', 'Meslo LG M', 'Inconsolata', 'Menlo', 'Courier New', monospace; font-family: "Fira Code", "JetBrains Mono", "Meslo LG M", "Inconsolata", "Menlo", "Courier New",
monospace;
} }
pre.line-numbers { pre.line-numbers {
float: left; float: left;
margin-top: 0; margin-top: 0;
color: #888; color: #888;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
article header time { article header time {
color: #aaaaaa; color: #aaaaaa;
} }
p.fin { p.fin {
color: #4d4d4d; color: #4d4d4d;
} }
blockquote { blockquote {
color: #b7b7b7; color: #b7b7b7;
} }
pre { pre {
background-color: #141414; background-color: #141414;
} }
} }
/** /**
@ -503,7 +504,8 @@ pre.line-numbers {
*/ */
.gist { .gist {
font-size: 0.8rem; font-size: 0.8rem;
line-height: 1.2rem; line-height: 1.2rem;
font-family: 'Fira Code', 'JetBrains Mono', 'Meslo LG M', 'Inconsolata', 'Menlo', 'Courier New', monospace; font-family: "Fira Code", "JetBrains Mono", "Meslo LG M", "Inconsolata", "Menlo", "Courier New",
} monospace;
}