Update

assets/css/main.css

@@ -0,0 +1,527 @@
+:root {
+  --background: #1a170f;
+  --foreground: #eceae5;
+  --accent: #eec35e;
+  --font-size: 1rem;
+  --line-height: 1.54em;
+  --radius: 0;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+  word-break: break-word;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  font-family: "Fira Code", Monaco, Consolas, "Ubuntu Mono", monospace;
+  font-size: var(--font-size);
+  line-height: var(--line-height);
+  background-color: var(--background);
+  color: var(--foreground);
+  text-rendering: optimizelegibility;
+  -webkit-font-smoothing: antialiased;
+  -webkit-overflow-scrolling: touch;
+  text-size-adjust: 100%;
+}
+
+h1 {
+  font-size: calc(var(--font-size) * 1.45);
+  letter-spacing: 0;
+}
+
+h2 {
+  font-size: calc(var(--font-size) * 1.35);
+  letter-spacing: 0;
+}
+
+h3 {
+  font-size: calc(var(--font-size) * 1.15);
+  letter-spacing: 0;
+}
+
+h4,
+h5,
+h6 {
+  font-size: calc(var(--font-size) * 1);
+  letter-spacing: 0;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ul,
+ol,
+img,
+figure,
+video,
+table {
+  margin: 25px 0;
+}
+
+a {
+  color: var(--accent);
+}
+
+button {
+  position: relative;
+  font: inherit;
+  font-weight: bold;
+  text-decoration: none;
+  text-align: center;
+  background: transparent;
+  color: var(--accent);
+  padding: 5px 18px;
+  border: 4px solid var(--accent);
+  border-radius: var(--radius);
+  transition: background 0.15s linear;
+  appearance: none;
+  cursor: pointer;
+  outline: none;
+}
+
+button:hover {
+  background: color-mix(in srgb, var(--accent) 15%, transparent);
+}
+
+button:focus-visible,
+a:focus-visible {
+  outline: 1px solid var(--accent);
+  outline-offset: 2px;
+}
+
+fieldset {
+  display: inline-block;
+  border: 2px solid var(--foreground);
+  border-radius: calc(var(--radius) * 1.6);
+  padding: 10px;
+}
+
+fieldset *:first-child {
+  margin-top: 0;
+}
+
+fieldset input,
+fieldset select,
+fieldset textarea,
+fieldset label,
+fieldset button {
+  margin-top: calc(var(--line-height) * 0.5);
+  width: 100%;
+}
+
+label {
+  display: inline-block;
+}
+
+label input {
+  margin-top: 0;
+}
+
+input,
+textarea,
+select {
+  background: transparent;
+  color: var(--foreground);
+  border: 1px solid var(--foreground);
+  border-radius: var(--radius);
+  padding: 10px;
+  font: inherit;
+  appearance: none;
+}
+
+input[type="checkbox"] {
+  width: auto;
+}
+
+input:focus-visible,
+input:active,
+textarea:focus-visible,
+textarea:active,
+select:focus-visible,
+select:active {
+  border-color: var(--accent);
+  outline: 1px solid var(--accent);
+  outline-offset: 2px;
+}
+
+input:active,
+textarea:active,
+select:active {
+  box-shadow: none;
+}
+
+select {
+  background-image: linear-gradient(
+    45deg,
+    transparent 50%,
+    var(--foreground) 50%
+  ),
+    linear-gradient(135deg, var(--foreground) 50%, transparent 50%);
+  background-position: calc(100% - 20px), calc(100% - 1em);
+  background-size:
+    5px 5px,
+    5px 5px;
+  background-repeat: no-repeat;
+  padding-right: 40px;
+}
+
+select option {
+  background: var(--background);
+}
+
+input[type="checkbox"] {
+  vertical-align: middle;
+  padding: 10px;
+  box-shadow: inset 0 0 0 3px var(--background);
+}
+
+input[type="checkbox"]:checked {
+  background: var(--accent);
+}
+
+img {
+  display: block;
+  max-width: 100%;
+  border: 8px solid var(--accent);
+  border-radius: var(--radius);
+  padding: 8px;
+  overflow: hidden;
+}
+
+img.left {
+  margin-right: auto;
+}
+
+img.center {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+img.right {
+  margin-left: auto;
+}
+
+figure {
+  width: fit-content;
+}
+
+figure.left {
+  margin-right: auto;
+}
+
+figure.center {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+figure.right {
+  margin-left: auto;
+}
+
+figure img,
+figure video {
+  margin-bottom: 0;
+}
+
+figure figcaption {
+  background: var(--accent);
+  color: var(--background);
+  text-align: center;
+  font-size: var(--font-size);
+  font-weight: normal;
+  margin-top: -8px;
+  padding: 0 8px;
+  border-radius: 0 0 var(--radius) var(--radius);
+}
+
+figure figcaption p:first-child {
+  margin-top: 0;
+}
+
+figure a.webbutton img {
+  display: inline-block;
+  position: relative;
+  top: 5px;
+  margin-top: -5px;
+}
+
+ul,
+ol {
+  margin-left: 4ch;
+  padding: 0;
+}
+
+ul ul,
+ul ol,
+ol ul,
+ol ol {
+  margin-top: 0;
+}
+
+li::marker {
+  color: var(--accent);
+}
+
+ul li,
+ol li {
+  position: relative;
+}
+
+code,
+kbd {
+  font-family:
+    "Fira Code",
+    Monaco,
+    Consolas,
+    "Ubuntu Mono",
+    monospace !important;
+  font-feature-settings: normal;
+  background: color-mix(in srgb, var(--foreground) 5%, transparent);
+  border: 1px solid var(--code-border);
+  padding: 1px 6px;
+  margin: 0 2px;
+  font-size: calc(var(--font-size) * 0.95);
+}
+
+kbd {
+  border-top: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
+  border-left: 1px solid var(--accent);
+  border-right: 1px solid var(--accent);
+  border-bottom: 4px solid var(--accent);
+  border-radius: 4px;
+}
+
+code code {
+  background: transparent;
+  padding: 0;
+  margin: 0;
+}
+
+pre {
+  tab-size: 4;
+  background: color-mix(in srgb, var(--foreground) 5%, transparent) !important;
+  color: var(--foreground);
+  padding: 20px 10px;
+  font-size: calc(var(--font-size) * 0.95) !important;
+  overflow: auto;
+  border-radius: var(--radius);
+  border: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
+}
+
+pre code {
+  background: none !important;
+  margin: 0;
+  padding: 0;
+  border: none;
+}
+
+sup {
+  line-height: 0;
+}
+
+abbr {
+  position: relative;
+  text-decoration-style: wavy;
+  text-decoration-color: var(--accent);
+  cursor: help;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.25em;
+}
+
+mark {
+  background: color-mix(in srgb, var(--accent) 45%, transparent);
+  color: var(--foreground);
+}
+
+blockquote {
+  position: relative;
+  border-top: 1px solid var(--accent);
+  border-bottom: 1px solid var(--accent);
+  margin: 0;
+  padding: 25px;
+}
+
+blockquote::before {
+  content: ">";
+  display: block;
+  position: absolute;
+  left: 0;
+  color: var(--accent);
+}
+
+blockquote p:first-child {
+  margin-top: 0;
+}
+
+blockquote p:last-child {
+  margin-bottom: 0;
+}
+
+table {
+  table-layout: auto;
+  border-collapse: collapse;
+}
+
+table,
+th,
+td {
+  border: 2px solid var(--foreground);
+  padding: 10px;
+}
+
+th {
+  border-style: solid;
+  color: var(--foreground);
+  text-align: left;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+hr {
+  width: 100%;
+  border: none;
+  background: var(--accent);
+  height: 2px;
+}
+
+/* One Heading Size */
+.headings--one-size h1,
+.headings--one-size h2,
+.headings--one-size h3,
+.headings--one-size h4,
+.headings--one-size h5,
+.headings--one-size h6 {
+  font-size: 1.4rem;
+  line-height: 1.3;
+  margin: 20px 0;
+}
+
+.headings--one-size ~ h1:first-child,
+.headings--one-size ~ h2:first-child,
+.headings--one-size ~ h3:first-child,
+.headings--one-size ~ h4:first-child,
+.headings--one-size ~ h5:first-child,
+.headings--one-size ~ h6:first-child {
+  margin-top: 20px;
+}
+
+blockquote.twitter-tweet {
+  position: relative;
+  background: var(--background);
+  font: inherit;
+  color: inherit;
+  border: 1px solid var(--accent);
+  padding-top: 60px;
+}
+
+blockquote.twitter-tweet a {
+  color: var(--accent);
+  text-decoration: underline;
+}
+
+blockquote.twitter-tweet::before {
+  content: "> From X:";
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  color: var(--accent);
+  font-weight: bold;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  padding: 40px;
+  max-width: 864px;
+  min-height: 100vh;
+  border-right: 1px solid color-mix(in srgb, var(--accent) 10%, transparent);
+}
+
+.container.full, .container.center {
+  border: none;
+  margin: 0 auto;
+}
+
+.container.full {
+  max-width: 100%;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+}
+
+.hidden {
+  display: none;
+}
+
+.__h_video {
+  position: relative;
+  overflow: visible !important;
+  height: auto !important;
+  padding-bottom: 0 !important;
+}
+
+.__h_video a {
+  position: relative;
+  display: block;
+  width: 100%;
+}
+
+.__h_video a img {
+  width: 100%;
+}
+
+.__h_video a .play {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+  width: 60px;
+  height: 60px;
+}
+
+iframe[src*="youtube.com"] {
+  border: 8px solid var(--accent) !important;
+  padding: 8px !important;
+}
+
+@media (max-width: 684px) {
+  :root {
+    --font-size: 0.95rem;
+  }
+
+  .container {
+    padding: 20px;
+  }
+}
+
+@media print {
+  .container {
+    display: initial;
+  }
+
+  .content {
+    display: initial;
+  }
+}

assets/css/terminal.css

@@ -0,0 +1,3 @@
+/* Placeholder file for your custom settings. */
+/* You can get the color scheme variables from https://panr.github.io/terminal-css/ */
+@import 'https://cdn.staticdelivr.com/gfonts/css2?family=Fira+Code:wght@300..700&display=swap';:root{--background:#1c2c2b;--foreground:#fff6d6;--accent:#ec4646;--radius:0;--font-size:1rem;--line-height:1.54em}html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit;margin:0;padding:0}body{font-family:fira code,jetbrains mono,Monaco,Consolas,ubuntu mono,monospace;font-size:var(--font-size);font-weight:400;line-height:var(--line-height);background-color:var(--background);color:var(--foreground);text-rendering:optimizeLegibility;font-variant-ligatures:contextual;-webkit-overflow-scrolling:touch;-webkit-text-size-adjust:100%;margin:0;padding:0}h1{font-size:calc(var(--font-size) * 1.45);letter-spacing:0}h2{font-size:calc(var(--font-size) * 1.35);letter-spacing:0}h3{font-size:calc(var(--font-size) * 1.15);letter-spacing:0}h4,h5,h6{font-size:calc(var(--font-size) * 1);letter-spacing:0}h1,h2,h3,h4,h5,h6,p,ul,ol,img,figure,video,table{margin:25px 0}a{color:var(--accent)}button{position:relative;font:inherit;font-weight:700;text-decoration:none;text-align:center;background:0 0;color:var(--accent);padding:5px 18px;border:4px solid var(--accent);border-radius:var(--radius);transition:background .15s linear;appearance:none;cursor:pointer;outline:none}button:hover{background:color-mix(in srgb,var(--accent) 15%,transparent)}button:focus-visible,a:focus-visible{outline:1px solid var(--accent);outline-offset:2px}fieldset{display:inline-block;border:2px solid var(--foreground);border-radius:calc(var(--radius) * 1.6);padding:10px}fieldset *:first-child{margin-top:0}fieldset input,fieldset select,fieldset textarea,fieldset label,fieldset button{margin-top:calc(var(--line-height) * .5);width:100%}label{display:inline-block}label input{margin-top:0}input,textarea,select{background:0 0;color:var(--foreground);border:1px solid var(--foreground);border-radius:var(--radius);padding:10px;font:inherit;appearance:none}input[type=checkbox]{width:auto}input:focus-visible,input:active,textarea:focus-visible,textarea:active,select:focus-visible,select:active{border-color:var(--accent);outline:1px solid var(--accent);outline-offset:2px}input:active,textarea:active,select:active{box-shadow:none}select{background-image:linear-gradient( 45deg,transparent 50%,var(--foreground) 50% ),linear-gradient(135deg,var(--foreground) 50%,transparent 50%);background-position:calc(100% - 20px),calc(100% - 15px);background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:40px}select option{background:var(--background)}input[type=checkbox],input[type=radio]{vertical-align:middle;padding:10px;box-shadow:inset 0 0 0 3px var(--background)}input[type=radio]{display:inline-block;width:10px!important;height:10px!important;border-radius:20px}input[type=checkbox]:checked,input[type=radio]:checked{background:var(--accent)}img{display:block;max-width:100%;border:8px solid var(--accent);border-radius:var(--radius);padding:8px;overflow:hidden}figure img,figure video{margin-bottom:0}figure figcaption{background:var(--accent);color:var(--background);text-align:center;font-size:1em;font-weight:400;margin-top:-8px;border-radius:0 0 var(--radius)var(--radius)}ul,ol{margin-left:4ch;padding:0}ul ul,ul ol,ol ul,ol ol{margin-top:0}li::marker{color:var(--accent)}ul li,ol li{position:relative}code,kbd{font-family:fira code,jetbrains mono,Monaco,Consolas,Ubuntu Mono,monospace!important;font-feature-settings:normal;background:color-mix(in srgb,var(--foreground) 5%,transparent);color:color-mix(in srgb,var(--foreground) 5%,var(--accent));padding:0 6px;margin:0 2px;font-size:.95em}code{border:1px solid color-mix(in srgb,var(--foreground) 25%,transparent)}kbd{border-top:1px solid color-mix(in srgb,var(--accent) 25%,transparent);border-left:1px solid var(--accent);border-right:1px solid var(--accent);border-bottom:4px solid var(--accent);border-radius:4px}code code{background:0 0;padding:0;margin:0}pre{tab-size:4;background:color-mix(in srgb,var(--foreground) 5%,transparent)!important;color:color-mix(in srgb,var(--foreground) 5%,var(--accent));padding:20px 10px;font-size:.95em!important;overflow:auto;border-radius:var(--radius);border:1px solid color-mix(in srgb,var(--foreground) 25%,transparent)}pre code{background:0 0!important;margin:0;padding:0;font-size:inherit;border:none}sup{line-height:0}abbr{position:relative;text-decoration-style:wavy;text-decoration-color:var(--accent);cursor:help}sub{bottom:-.25em}sup{top:-.25em}mark{background:color-mix(in srgb,var(--accent) 45%,transparent);color:var(--foreground)}blockquote{position:relative;border-top:1px solid var(--accent);border-bottom:1px solid var(--accent);margin:0;padding:25px}blockquote:before{content:">";display:block;position:absolute;left:0;color:var(--accent)}blockquote p:first-child{margin-top:0}blockquote p:last-child{margin-bottom:0}table{table-layout:auto;border-collapse:collapse}table,th,td{border:2px solid var(--foreground);padding:10px}th{border-style:solid;color:var(--foreground);text-align:left;tLine truncated