diff --git a/assets/css/main.css b/assets/css/main.css new file mode 100755 index 0000000..b1ed90f --- /dev/null +++ b/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; + } +} diff --git a/assets/css/terminal.css b/assets/css/terminal.css new file mode 100755 index 0000000..f0d9b60 --- /dev/null +++ b/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;text-transform:uppercase;letter-spacing:.04em}hr{width:100%;border:none;background:var(--accent);height:2px}h1,h2,h3,h4,h5,h6,b,strong,th,button{font-weight:600}