From 413bb8b9b145af549bdffb1a6730bd2a5253bf1c Mon Sep 17 00:00:00 2001
From: Eric Bower <me@erock.io>
Date: Thu, 24 Oct 2024 23:22:20 -0400
Subject: [PATCH] style: update smol css

---
 _readme.md  |   1 +
 _styles.css | 849 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 850 insertions(+)
 create mode 100644 _styles.css

diff --git a/_readme.md b/_readme.md
index 148a6ee..2ad89d5 100644
--- a/_readme.md
+++ b/_readme.md
@@ -1,6 +1,7 @@
 ---
 title: team pico
 description: official blog for pico.sh services
+with_styles: false
 nav:
   - site: https://pico.sh
   - email: mailto:hello@pico.sh
diff --git a/_styles.css b/_styles.css
new file mode 100644
index 0000000..f39db01
--- /dev/null
+++ b/_styles.css
@@ -0,0 +1,849 @@
+*,
+::before,
+::after {
+  box-sizing: border-box;
+}
+
+::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+
+:root {
+  --line-height: 1.3rem;
+  --grid-height: 0.65rem;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    --white: #2e3f53;
+    --white-light: #cfe0f4;
+    --white-dark: #6c6a6a;
+    --code: #52576f;
+    --pre: #e1e7ee;
+    --bg-color: #f4f4f4;
+    --text-color: #24292f;
+    --link-color: #005cc5;
+    --visited: #6f42c1;
+    --blockquote: #005cc5;
+    --blockquote-bg: #cfe0f4;
+    --hover: #c11e7a;
+    --grey: #ccc;
+    --grey-light: #6a708e;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --white: #f2f2f2;
+    --white-light: #f2f2f2;
+    --white-dark: #e8e8e8;
+    --code: #414558;
+    --pre: #252525;
+    --bg-color: #282a36;
+    --text-color: #f2f2f2;
+    --link-color: #8be9fd;
+    --visited: #bd93f9;
+    --blockquote: #bd93f9;
+    --blockquote-bg: #353548;
+    --hover: #ff80bf;
+    --grey: #414558;
+    --grey-light: #6a708e;
+  }
+}
+
+html {
+  background-color: var(--bg-color);
+  color: var(--text-color);
+  font-size: 16px;
+  line-height: var(--line-height);
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+    Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial,
+    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  -webkit-text-size-adjust: 100%;
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+}
+
+body {
+  margin: 0 auto;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+b,
+strong {
+  font-weight: bold;
+}
+
+code,
+kbd,
+samp,
+pre {
+  font-family: monospace;
+}
+
+code,
+kbd,
+samp {
+  border: 2px solid var(--code);
+}
+
+pre > code {
+  background-color: inherit;
+  padding: 0;
+  border: none;
+  border-radius: 0;
+}
+
+code {
+  font-size: 90%;
+  border-radius: 0.3rem;
+  padding: 0.025rem 0.3rem;
+}
+
+pre {
+  font-size: 0.8rem;
+  border-radius: 1px;
+  padding: var(--line-height);
+  overflow-x: auto;
+  background-color: var(--pre) !important;
+}
+
+small {
+  font-size: 0.8rem;
+}
+
+details {
+  border: 2px solid var(--grey-light);
+  padding: calc(var(--line-height) - 2px) 1ch;
+  margin-bottom: var(--line-height);
+}
+
+details[open] summary {
+  margin-bottom: var(--line-height);
+}
+
+summary {
+  display: list-item;
+  cursor: pointer;
+}
+
+h1,
+h2,
+h3,
+h4 {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-style: normal;
+  font-weight: inherit;
+  font-size: inherit;
+}
+
+path {
+  fill: var(--text-color);
+  stroke: var(--text-color);
+}
+
+hr {
+  color: inherit;
+  border: 0;
+  height: 2px;
+  background: var(--grey);
+  margin: calc(var(--grid-height) - 2px) auto;
+}
+
+a {
+  text-decoration: none;
+  color: var(--link-color);
+}
+
+a:hover,
+a:visited:hover {
+  text-decoration: underline;
+}
+
+a:visited {
+  color: var(--visited);
+}
+
+section {
+  margin-bottom: 1.4rem;
+}
+
+section:last-child {
+  margin-bottom: 0;
+}
+
+header {
+  margin: 1rem auto;
+}
+
+p {
+  margin-top: var(--line-height);
+  margin-bottom: var(--line-height);
+}
+
+article {
+  overflow-wrap: break-word;
+}
+
+blockquote {
+  border-left: 5px solid var(--blockquote);
+  background-color: var(--blockquote-bg);
+  padding: var(--grid-height);
+  margin: var(--line-height) 0;
+}
+
+blockquote > p {
+  margin: 0;
+}
+
+blockquote code {
+  border: 1px solid var(--blockquote);
+}
+
+ul,
+ol {
+  padding: 0 0 0 var(--line-height);
+  list-style-position: inside;
+  list-style-type: square;
+  margin: var(--line-height) 0;
+}
+
+ul[style*="list-style-type: none;"] {
+  padding: 0;
+}
+
+ol ul, ol ol, ul ol, ul ul {
+  padding: 0 0 0 3ch;
+  margin: 0;
+}
+
+li {
+  margin: 0;
+  padding: 0;
+}
+
+li::marker {
+  line-height: 0;
+}
+
+li > pre {
+  padding: 0;
+}
+
+footer {
+  text-align: center;
+  margin-bottom: calc(var(--line-height) * 3);
+}
+
+dt {
+  font-weight: bold;
+}
+
+dd {
+  margin-left: 0;
+}
+
+dd:not(:last-child) {
+  margin-bottom: 0.5rem;
+}
+
+figure {
+  margin: 0;
+}
+
+#toc {
+  margin-top: var(--line-height);
+}
+
+.container {
+  max-width: 50em;
+  width: 100%;
+}
+
+.container-sm {
+  max-width: 40em;
+  width: 100%;
+}
+
+.container-center {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.mono {
+  font-family: monospace;
+}
+
+.link-alt-hover,
+.link-alt-hover:visited,
+.link-alt-hover:visited:hover,
+.link-alt-hover:hover {
+  color: var(--hover);
+  text-decoration: none;
+}
+
+.link-alt-hover:visited:hover,
+.link-alt-hover:hover {
+  text-decoration: underline;
+}
+
+.link-alt,
+.link-alt:visited,
+.link-alt:visited:hover,
+.link-alt:hover {
+  color: var(--white);
+  text-decoration: none;
+}
+
+.link-alt:visited:hover,
+.link-alt:hover {
+  text-decoration: underline;
+}
+
+.text-2xl code, .text-xl code, .text-lg code, .text-md code {
+  text-transform: none;
+}
+
+.text-2xl {
+  font-size: var(--line-height);
+  font-weight: bold;
+  line-height: var(--line-height);
+  margin-bottom: var(--grid-height);
+  text-transform: uppercase;
+}
+
+.text-xl, .text-lg, .text-md {
+  font-size: 1rem;
+  font-weight: bold;
+  line-height: var(--line-height);
+  margin-bottom: var(--grid-height);
+  text-transform: uppercase;
+}
+
+.text-sm {
+  font-size: 0.8rem;
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.w-full {
+  width: 100%;
+}
+
+.h-full {
+  height: 100%;
+}
+
+.border {
+  border: 2px solid var(--grey-light);
+}
+
+.text-left {
+  text-align: left;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-underline {
+  text-decoration: underline;
+  text-decoration-thickness: 2px;
+}
+
+.text-hdr {
+  color: var(--hover);
+}
+
+.font-bold {
+  font-weight: bold;
+}
+
+.font-italic {
+  font-style: italic;
+}
+
+.inline {
+  display: inline;
+}
+
+.inline-block {
+  display: inline-block;
+}
+
+.max-w-half {
+  max-width: 50%;
+}
+
+.h-screen {
+  height: 100vh;
+}
+
+.w-screen {
+  width: 100vw;
+}
+
+.flex {
+  display: flex;
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.m-0 {
+  margin: 0;
+}
+
+.mt-0 {
+  margin-top: 0;
+}
+
+.mt {
+  margin-top: var(--grid-height);
+}
+
+.mt-2 {
+  margin-top: var(--line-height);
+}
+
+.mt-4 {
+  margin-top: calc(var(--line-height) * 2);
+}
+
+.mb {
+  margin-bottom: var(--grid-height);
+}
+
+.mb-2 {
+  margin-bottom: var(--line-height);
+}
+
+.mb-4 {
+  margin-bottom: calc(var(--line-height) * 2);
+}
+
+.mr {
+  margin-right: 0.5rem;
+}
+
+.ml-sm {
+  margin-left: 0.25rem;
+}
+
+.ml {
+  margin-left: 0.5rem;
+}
+
+.pt-0 {
+  padding-top: 0;
+}
+
+.my {
+  margin-top: var(--grid-height);
+  margin-bottom: var(--grid-height);
+}
+
+.my-2 {
+  margin-top: var(--line-height);
+  margin-bottom: var(--line-height);
+}
+
+.my-4 {
+  margin-top: calc(var(--line-height) * 2);
+  margin-bottom: calc(var(--line-height) * 2);
+}
+
+.mx {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+
+.mx-2 {
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
+
+.m-1 {
+  margin: var(--grid-height);
+}
+
+.p-1 {
+  padding: var(--grid-height);
+}
+
+.p-0 {
+  padding: 0;
+}
+
+.px-2 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.px-4 {
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
+
+.py {
+  padding-top: var(--grid-height);
+  padding-bottom: var(--grid-height);
+}
+
+.py-2 {
+  padding-top: var(--line-height);
+  padding-bottom: var(--line-height);
+}
+
+.py-4 {
+  padding-top: calc(var(--line-height) * 2);
+  padding-bottom: calc(var(--line-height) * 2);
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.gap {
+  gap: var(--grid-height);
+}
+
+.gap-2 {
+  gap: var(--line-height);
+}
+
+.group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--grid-height);
+}
+
+.group-2 {
+  display: flex;
+  flex-direction: column;
+  gap: var(--line-height);
+}
+
+.group-h {
+  display: flex;
+  gap: var(--grid-height);
+  align-items: center;
+}
+
+.flex-1 {
+  flex: 1;
+}
+
+.items-end {
+  align-items: end;
+}
+
+.items-start {
+  align-items: start;
+}
+
+.justify-end {
+  justify-content: end;
+}
+
+.font-grey-light {
+  color: var(--grey-light);
+}
+
+.hidden {
+  display: none;
+}
+
+.align-right {
+  text-align: right;
+}
+
+/* ==== MARKDOWN ==== */
+
+.md h1,
+.md h2,
+.md h3,
+.md h4 {
+  padding: 0;
+  margin: 0;
+  /* margin: 1.5rem 0 0.9rem 0; */
+  font-weight: bold;
+}
+
+.md h1 a,
+.md h2 a,
+.md h3 a,
+.md h4 a {
+  color: var(--grey-light);
+  text-decoration: none;
+}
+
+h1 code, h2 code, h3 code, h4 code {
+  text-transform: none;
+}
+
+.md h1 {
+  font-size: 1rem;
+  line-height: var(--line-height);
+  margin-top: calc(var(--line-height) * 2);
+  margin-bottom: var(--grid-height);
+  text-transform: uppercase;
+}
+
+.md h2, .md h3, .md h4 {
+  font-size: 1rem;
+  line-height: var(--line-height);
+  margin-top: calc(var(--line-height) * 2);
+  margin-bottom: var(--line-height);
+  text-transform: uppercase;
+  color: var(--white-dark);
+}
+
+/* ==== HELPERS ==== */
+
+.logo-header {
+  line-height: 1;
+  display: inline-block;
+  background-color: #FF79C6;
+  background-image: linear-gradient(to right, #FF5555, #FF79C6, #F8F859);
+  color: transparent;
+  background-clip: text;
+  border: 3px solid #FF79C6;
+  padding: 8px 10px 10px 10px;
+  border-radius: 10px;
+  background-size: 100%;
+  margin: 0;
+  -webkit-background-clip: text;
+  -moz-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  -moz-text-fill-color: transparent;
+}
+
+.btn {
+  border: 2px solid var(--link-color);
+  color: var(--link-color);
+  padding: 0.4rem 1rem;
+  font-weight: bold;
+  display: inline-block;
+}
+
+.btn-link,
+.btn-link:visited {
+  border: 2px solid var(--link-color);
+  color: var(--link-color);
+  padding: var(--grid-height) 1rem;
+  text-decoration: none;
+  font-weight: bold;
+  display: inline-block;
+}
+
+.box {
+  border: 2px solid var(--grey-light);
+  padding: var(--line-height);
+}
+
+.box-sm {
+  border: 2px solid var(--grey-light);
+  padding: var(--grid-height);
+}
+
+.box-alert {
+  border: 2px solid var(--hover);
+  padding: var(--line-height);
+}
+
+.box-sm-alert {
+  border: 2px solid var(--hover);
+  padding: var(--grid-height);
+}
+
+.list-none {
+  list-style-type: none;
+}
+
+.list-square {
+  list-style-type: square;
+}
+
+.list-disc {
+  list-style-type: disc;
+}
+
+.list-decimal {
+  list-style-type: decimal;
+}
+
+.pill {
+  border: 1px solid var(--link-color);
+  color: var(--link-color);
+}
+
+.pill-alert {
+  border: 1px solid var(--hover);
+  color: var(--hover);
+}
+
+.pill-info {
+  border: 1px solid var(--visited);
+  color: var(--visited);
+}
+
+@media only screen and (max-width: 40em) {
+  body {
+    padding: 0 1rem;
+  }
+
+  header {
+    margin: 0;
+  }
+
+  .flex-collapse {
+    flex-direction: column;
+  }
+}
+
+#debug {
+  position: relative;
+}
+
+#debug .debug-grid {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: -1;
+  background-image:
+    repeating-linear-gradient(var(--code) 0 1px, transparent 1px 100%),
+    repeating-linear-gradient(90deg, var(--code) 0 1px, transparent 1px 100%);
+  background-size: 1ch var(--grid-height);
+  margin: 0;
+}
+body {
+  max-width: var(--body-max-width, 720px);
+}
+
+table {
+  display: block;
+  max-width: fit-content;
+  margin: 0 auto;
+  overflow-x: auto;
+  white-space: nowrap;
+  border-spacing: 10px;
+  border-collapse: separate;
+}
+
+header blockquote {
+  margin: var(--grid-height) 0;
+}
+
+.transform-none {
+  text-transform: none;
+}
+
+.post-date {
+  width: 110px;
+}
+
+.layout-aside {
+  max-width: 50rem;
+}
+
+.layout-aside aside {
+  width: 200px;
+}
+
+.layout-aside img {
+  border-radius: 5px;
+}
+
+.footnotes li p {
+  display: inline;
+}
+
+#readme {
+  display: none;
+}
+
+.albums {
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(auto-fill, 200px);
+  grid-row-gap: 0.5rem;
+  grid-column-gap: 1rem;
+}
+
+.thumbnail-container {
+  position: relative;
+  background-color: #000;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 3px;
+  min-height: 200px;
+}
+
+.thumbnail {
+  z-index: 1;
+  object-fit: contain;
+  max-width: 200px;
+  height: auto;
+}
+
+#toc {
+  margin: 0;
+}
+
+.thumbnail-link {
+  z-index: 1;
+}
+
+@media only screen and (max-width: 600px) {
+  .layout-aside main {
+    flex-direction: column;
+  }
+
+  aside {
+    display: none;
+  }
+
+  #readme {
+    display: block;
+  }
+
+  .albums {
+    grid-template-columns: repeat(1, 1fr);
+    justify-content: center;
+  }
+}