From 31fefee2192ed7cda20326ce3d7797075637cd25 Mon Sep 17 00:00:00 2001 From: Benjamin Sanders Date: Fri, 18 Sep 2026 11:13:51 -0400 Subject: published Building bsimg.net: Project Log --- rafts/assets/css/main.css | 203 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 203 insertions(+) create mode 100644 rafts/assets/css/main.css (limited to 'rafts/assets/css/main.css') diff --git a/rafts/assets/css/main.css b/rafts/assets/css/main.css new file mode 100644 index 0000000..04e36e2 --- /dev/null +++ b/rafts/assets/css/main.css @@ -0,0 +1,203 @@ +:root { + --primary-bg-color: #0f1700; + --primary-text-color: white; + --primary-link-color: #1a73e8; + --primary-font-family: arial; + --text-dim: #9099a6; + --max-wid: 1070px +} + +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +html, body { + background-color: var(--primary-bg-color); + color: var(--primary-text-color); + font-family: var(--primary-font-family); + margin: 0 auto; + padding: 0; +} + +a { + color: var(--primary-link-color); + text-decoration: none; +} + +h2, h3 { + padding: 0.5em 0 1em 0; +} + +.about-grid { + display: grid; + grid-template-columns: 1fr 1fr; +} + +.about-grid p { + padding-bottom: 10px; +} + +.wrap { + max-width: var(--max-wid); + margin: 0 auto; + padding: 0 28px; +} + +nav { + display: flex; + align-items: center; + justify-content: space-between; + padding: 16px 0; +} + +.logo { + display: flex; + align-items: center; + gap: 18px; + font-family: var(--primary-font-family); + font-weight: 600; + font-size: 16px; + color: white; +} + +.nav-link { + display: flex; + align-items: center; + gap:32px; +} + +.nav-link a { + font-size: 14.5px; + color: var(--text-dim); + transition: color .15s ease; +} + +.nav-link a:hover { + color: white; +} + +.linktree { + padding: 88px 0 96px; +} + +.linktree-grid { + display: grid; + grid-template-columns: 1.05fr 0.95fr; + align-items: center; +} + +.profile img { + width: 250px; + border-radius: 50%; +} + +.profile { + text-align: center;; +} + +.linktree-nav { + display: grid; + text-align: left; +} + +.linktree-nav a { + color: var(--text-dim); + transition: color .15s ease; +} + +.linktree a:hover { color: white; } + +.link-container { + display: flex; + flex-wrap: wrap; +} + +.links { + flex: 1 0 21%; /* explanation below */ + margin: 5px; + height: 100px; +} + + +.links ul { + padding: 0; + margin: 0; +} + +.links ul li { + list-style-type: none; +} + +.gear-grid { + display: grid; + grid-template-columns: 1fr 1fr 1fr; +} + +#blog ul li { + list-style: none; + padding: 0; + text-align: center; +} + +.article-grid { + width: 100%; + max-width: 750px; +} + +.article-grid img { + width: 100%; +} + +.article-grid p { + padding: 1em 0 1em 0; + line-height: 1.5; + font-size: 1.1rem; +} + +#post { + width: 100%; + max-width: 1080px; + margin: auto; +} + +#post h2 { + text-align: center; + padding: 0; +} + +#post .meta { + text-align: center; + padding: 10px 0 0 0; + display: block; +} + +pre { + background-color: #333; + border: 1px solid black; + color: white; + page-break-inside: avoid; + font-family: monospace; + font-size: 15px; + line-height: 1.6; + margin-bottom: 1.6em; + max-width: 100%; + overflow: auto; + white-space: pre-wrap; + padding: 1em 1.5em; + display: block; + word-wrap: break-word; +} + +.language-plaintext.highlighter-rouge { + background-color: #333; + border: 1px solid black; + color: white; +} + +footer { + width: 100%; + max-width: 1070px; + margin: 0 auto; +} \ No newline at end of file -- cgit v1.2.3