🐻 Bearblog Stylesheets
The CSS code I use to style my bearblog.
| Files | Last updated |
|---|---|
| Dashboard CSS | 2024-06-03 |
| Blog CSS | 2024-06-03 |
Last active
June 3, 2024 17:56
-
-
Save semanticdata/e7e7a9abc0692116d9f4bf4166d4165a to your computer and use it in GitHub Desktop.
Bearblog Stylesheets
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Font */ | |
| @import url("https://fonts.googleapis.com/css2?family=Inter&display=swap"); | |
| /* Focus behaviour */ | |
| :is(a, button, input, textarea, summary) { | |
| --outline-size: max(2px, 0.08em); | |
| --outline-style: solid; | |
| --outline-color: var(--color-primary); | |
| --outline-offset: 3px; | |
| } | |
| :is(a, button, input, textarea, summary):focus { | |
| outline: var(--outline-size) var(--outline-style) var(--outline-color); | |
| outline-offset: var(--outline-offset, var(--outline-size)); | |
| } | |
| :is(a, button, input, textarea, summary):focus-visible { | |
| outline: var(--outline-size) var(--outline-style) var(--outline-color); | |
| outline-offset: var(--outline-offset, var(--outline-size)); | |
| } | |
| :is(a, button, input, textarea, summary):focus:not(:focus-visible) { | |
| outline: none; | |
| } | |
| :is(a, button, input, textarea, summary):hover { | |
| outline: var(--outline-size) var(--outline-style) var(--outline-color); | |
| outline-offset: var(--outline-offset, var(--outline-size)); | |
| } | |
| /* Settings */ | |
| :root { | |
| /* @link https://utopia.fyi/type/calculator?c=320,16,1.2,1240,18,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */ | |
| --size-step--2: clamp(0.6944rem, 0.6856rem + 0.0444vi, 0.72rem); | |
| --size-step--1: clamp(0.8333rem, 0.8101rem + 0.1159vi, 0.9rem); | |
| --size-step-0: clamp(1rem, 0.9565rem + 0.2174vi, 1.125rem); | |
| --size-step-1: clamp(1.2rem, 1.1283rem + 0.3587vi, 1.4063rem); | |
| --size-step-2: clamp(1.44rem, 1.3295rem + 0.5527vi, 1.7578rem); | |
| --size-step-3: clamp(1.728rem, 1.5648rem + 0.8161vi, 2.1973rem); | |
| --size-step-4: clamp(2.0736rem, 1.8395rem + 1.1704vi, 2.7466rem); | |
| --size-step-5: clamp(2.4883rem, 2.1597rem + 1.6433vi, 3.4332rem); | |
| --color-accent: salmon; | |
| --color-background: #fff; | |
| --color-code-background: #ddd; | |
| --color-code: #000; | |
| --color-dark-alt: #222; | |
| --color-dark: #1a1a1a; | |
| --color-heading: #222; | |
| --color-light-alt: #f2f2f2; | |
| --color-light: #fafafa; | |
| --color-link: #3273dc; | |
| --color-primary: #1a8fe3; | |
| --color-text: #444; | |
| --font-main: Verdana, sans-serif; | |
| --font-stack: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI"; | |
| --page-width: 100ch; | |
| --spacing: 1.5rem; | |
| --visited-color: #8b6fcb; | |
| } | |
| @media (prefers-color-scheme: dark) { | |
| :root { | |
| --color-background: #2f2f2f; | |
| --color-code-background: #000; | |
| --color-code: #ddd; | |
| --color-heading: #eee; | |
| --color-link: #8cc2dd; | |
| --color-text: #ddd; | |
| } | |
| } | |
| body { | |
| font-family: var(--font-stack); | |
| font-size: var(--size-step-0); | |
| margin: auto; | |
| word-wrap: break-word; | |
| overflow-wrap: break-word; | |
| line-height: 1.5; | |
| color: var(--color-light); | |
| background: var(--color-background); | |
| max-width: var(--page-width); | |
| } | |
| h1, | |
| h2, | |
| h3, | |
| h4, | |
| h5, | |
| h6 { | |
| font-family: var(--font-main); | |
| color: var(--color-heading); | |
| } | |
| a { | |
| color: var(--link-color); | |
| cursor: pointer; | |
| text-decoration: none; | |
| } | |
| strong, | |
| b { | |
| color: var(--color-heading); | |
| } | |
| table { | |
| width: 100%; | |
| } | |
| hr { | |
| border: 0; | |
| border-top: 1px dashed; | |
| } | |
| img { | |
| max-width: 100%; | |
| } | |
| code { | |
| font-family: monospace; | |
| padding: 2px; | |
| background-color: var(--color-code-background); | |
| color: var(--color-code); | |
| border-radius: 3px; | |
| } | |
| blockquote { | |
| border-left: 1px solid #999; | |
| color: var(--color-code); | |
| padding-left: 20px; | |
| font-style: italic; | |
| } | |
| .inline { | |
| width: auto !important; | |
| } | |
| .highlight, | |
| .code { | |
| padding: 1px 15px; | |
| background-color: var(--color-code-background); | |
| color: var(--color-code); | |
| border-radius: 3px; | |
| margin-block-start: 1em; | |
| margin-block-end: 1em; | |
| overflow-x: auto; | |
| } | |
| .title-bear { | |
| font-weight: 400; | |
| } | |
| @keyframes blink { | |
| 0%, | |
| 96% { | |
| content: "ᕦʕ •ᴥ•ʔᕤ"; | |
| } | |
| 97%, | |
| 100% { | |
| content: "ᕦʕ -ᴥ-ʔᕤ"; | |
| } | |
| } | |
| .bear::before { | |
| content: "ᕦʕ •ᴥ•ʔᕤ"; | |
| font-weight: 400; | |
| animation: blink 5s infinite; | |
| } | |
| .bear:hover::before { | |
| content: "ᕙʕ ಠᴥಠʔᕗ"; | |
| animation: none; | |
| } | |
| .upgrade .bear::before { | |
| content: "ᕦʕ.•ᴥ•ʔᕤ"; | |
| font-weight: 400; | |
| } | |
| .upgrade:hover .bear::before { | |
| content: "ᕙʕ.ಠᴥಠʔᕗ"; | |
| } | |
| .account:hover { | |
| outline: none; | |
| outline-offset: var(--outline-offset, var(--outline-size)); | |
| } | |
| .account::before { | |
| content: "ʕ-ᴥ-ʔ"; | |
| width: 45px; | |
| display: inline-block; | |
| text-align: center; | |
| } | |
| .account:hover::before { | |
| content: "ʕ•ᴥ•ʔ"; | |
| text-decoration: none; | |
| } | |
| label { | |
| font-weight: bold; | |
| } | |
| time { | |
| font-family: monospace; | |
| font-size: var(--size-step--1); | |
| } | |
| textarea, | |
| input:not([type="submit"]), | |
| .editable { | |
| background-color: #eceff4; | |
| border: none; | |
| line-height: 1.5; | |
| font-size: var(--size-step-0); | |
| padding: calc(var(--spacing) / 2) var(--spacing); | |
| } | |
| @media (prefers-color-scheme: dark) { | |
| textarea, | |
| input:not([type="submit"]), | |
| .editable { | |
| background-color: var(--color-code-background); | |
| } | |
| } | |
| .full-width textarea, | |
| .full-width input:not([type="submit"], [type="checkbox"], [type="radio"]) { | |
| width: calc(100% - 20px); | |
| } | |
| textarea:required, | |
| input:required:not([type="submit"]) { | |
| border-left: 1px solid #f99f9f; | |
| max-width: 100% !important; | |
| padding-inline: calc(var(--spacing) / 2); | |
| } | |
| input[type="checkbox"], | |
| input[type="radio"] { | |
| height: 15px; | |
| margin-right: 10px; | |
| } | |
| button { | |
| background-color: #eceff4; | |
| border-radius: 0.3rem; | |
| border: none; | |
| cursor: pointer; | |
| font-size: 1rem; | |
| margin: calc(var(--spacing) / 2) auto; | |
| margin-right: calc(var(--spacing) / 2); | |
| padding: 0.5rem 0.75rem; | |
| } | |
| button:hover { | |
| background: var(--color-accent); | |
| } | |
| button.floating { | |
| position: fixed; | |
| bottom: 20px; | |
| right: 25px; | |
| } | |
| button#toggle-full-screen { | |
| float: right; | |
| } | |
| .sticky-controls { | |
| position: sticky; | |
| top: 0; | |
| background-color: white; | |
| line-height: 0; | |
| z-index: 10; | |
| } | |
| .helptext { | |
| display: flex; | |
| justify-content: space-evenly; | |
| color: #777; | |
| font-size: small; | |
| } | |
| .helptext.sticky { | |
| position: relative; | |
| bottom: 0; | |
| background-color: white; | |
| padding: 3px 0; | |
| } | |
| @media (prefers-color-scheme: dark) { | |
| .helptext.sticky, | |
| .sticky-controls { | |
| background-color: var(--color-background); | |
| } | |
| } | |
| .errorlist { | |
| color: #eba613; | |
| font-size: small; | |
| } | |
| #date-range { | |
| display: none; | |
| } | |
| #date-range:target { | |
| display: block; | |
| } | |
| .notification { | |
| width: 100%; | |
| text-align: left; | |
| padding: 5px 0; | |
| margin-bottom: -15px; | |
| } | |
| .notification a { | |
| margin: 0; | |
| } | |
| /* dashboard post list and analytics */ | |
| ul.post-list { | |
| list-style-type: none; | |
| padding: unset; | |
| } | |
| ul.post-list li { | |
| display: flex; | |
| align-items: baseline; | |
| padding: 10px 0; | |
| border-bottom: 1px solid #eceff4; | |
| } | |
| ul.post-list li span { | |
| flex: 0 0 130px; | |
| } | |
| ul.post-list li span.number { | |
| flex: 0 0 50px; | |
| } | |
| ul.post-list li a { | |
| flex: max-content; | |
| } | |
| ul.post-list li small { | |
| text-align: right; | |
| flex: 0 0 115px; | |
| } | |
| /* discovery feed */ | |
| ul.discover-posts { | |
| list-style-type: none; | |
| padding: unset; | |
| } | |
| ul.discover-posts li { | |
| display: flex; | |
| line-height: 1.2; | |
| position: relative; | |
| } | |
| ul.discover-posts li span { | |
| flex: 0 0 40px; | |
| } | |
| ul.discover-posts li a:visited { | |
| color: #8b6fcb; | |
| } | |
| ul.discover-posts li div { | |
| padding-bottom: 8px; | |
| } | |
| ul.discover-posts li small span, | |
| ul.discover-posts li small span a { | |
| color: #777 !important; | |
| } | |
| @media (prefers-color-scheme: dark) { | |
| .helptext { | |
| color: #aaa; | |
| } | |
| } | |
| summary { | |
| border-radius: 0.3rem; | |
| padding-inline: 1rem; | |
| margin-inline: 0; | |
| font-size: var(--size-step-0); | |
| } | |
| summary:hover { | |
| cursor: pointer; | |
| } | |
| details[open] > summary { | |
| border-bottom: 1px solid var(--color-accent); | |
| border-radius: 0; | |
| } | |
| details { | |
| border: 1px solid var(--color-accent); | |
| border-radius: 0.3rem; | |
| font-size: var(--size-step-0); | |
| } | |
| details[open] { | |
| padding-bottom: 1rem; | |
| } | |
| details p { | |
| font-size: var(--size-step-0); | |
| padding-inline: 1rem; | |
| } | |
| details a { | |
| font-size: var(--size-step-0); | |
| padding-inline: 1rem; | |
| } | |
| textarea { | |
| background: var(--color-dark); | |
| border-radius: 0.3rem; | |
| border: 1px solid var(--color-accent) !important; | |
| color: var(--color-light); | |
| height: 29rem; | |
| margin-block-start: var(--spacing); | |
| max-width: calc(100% - 45px); | |
| padding: var(--spacing); | |
| resize: vertical; | |
| } | |
| footer { | |
| padding-top: calc(var(--spacing) / 8); | |
| padding-top: 0 !important; | |
| text-align: center; | |
| } | |
| footer p { | |
| font-size: var(--size-step--1); | |
| } | |
| .helptext span { | |
| display: inline-block; | |
| padding: calc(var(--spacing) / 2); | |
| } | |
| .helptext > span a { | |
| margin-inline-end: 3rem; | |
| font-size: var(--size-step-0); | |
| border: 1px solid var(--color-accent); | |
| padding: calc(var(--spacing) / 8) calc(var(--spacing) / 3); | |
| } | |
| h1 { | |
| margin-bottom: 0; | |
| font-size: var(--size-step-2); | |
| } | |
| .title { | |
| display: inline-block; | |
| } | |
| .title:hover { | |
| outline: none; | |
| } | |
| .title:focus { | |
| } | |
| .title:focus-visible { | |
| } | |
| .title:focus:not(:focus-visible) { | |
| } | |
| .title > h1 { | |
| margin-top: 0; | |
| } | |
| .title > h1:hover { | |
| color: var(--color-accent); | |
| } | |
| .title > h1:focus { | |
| } | |
| .title > h1:focus-visible { | |
| } | |
| .title > h1:focus:not(:focus-visible) { | |
| } | |
| @media screen and (max-width: 600px) { | |
| h1 { | |
| margin-top: calc(var(--spacing) * 2); | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import url("https://fonts.googleapis.com/css2?family=Inter&display=swap"); | |
| :root { | |
| --callout-icon-abstract: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" viewBox="0 0 24 24" fill="none" stroke="%2356e8e6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><path d="M12 11h4"></path><path d="M12 16h4"></path><path d="M8 11h.01"></path><path d="M8 16h.01"></path></svg>'); | |
| --callout-icon-bug: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" viewBox="0 0 24 24" fill="none" stroke="%23ea4348" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="8" height="14" x="8" y="6" rx="4"></rect><path d="m19 7-3 2"></path><path d="m5 7 3 2"></path><path d="m19 19-3-2"></path><path d="m5 19 3-2"></path><path d="M20 13h-4"></path><path d="M4 13h4"></path><path d="m10 4 1 2"></path><path d="m14 4-1 2"></path></svg>'); | |
| --callout-icon-danger: url('data:image/svg+xml; utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" viewBox="0 0 24 24" fill="none" stroke="%23ea4348" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg> '); | |
| --callout-icon-example: url('data:image/svg+xml; utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" viewBox="0 0 24 24" fill="none" stroke="%23b38aff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"></line><line x1="8" y1="18" x2="21" y2="18"></line><line x1="3" y1="6" x2="3.01" y2="6"></line><line x1="3" y1="12" x2="3.01" y2="12"></line><line x1="3" y1="18" x2="3.01" y2="18"></line></svg> '); | |
| --callout-icon-failure: url('data:image/svg+xml; utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" viewBox="0 0 24 24" fill="none" stroke="%23ea4348" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg> '); | |
| --callout-icon-fold: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23b38aff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpolyline points="6 9 12 15 18 9"%3E%3C/polyline%3E%3C/svg%3E'); | |
| --callout-icon-info: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" viewBox="0 0 24 24" fill="none" stroke="%231a8fe3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>'); | |
| --callout-icon-note: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" viewBox="0 0 24 24" fill="none" stroke="%231a8fe3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="2" x2="22" y2="6"></line><path d="M7.5 20.5 19 9l-4-4L3.5 16.5 2 22z"></path></svg>'); | |
| --callout-icon-question: url('data:image/svg+xml; utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" viewBox="0 0 24 24" fill="none" stroke="%23ee9a40" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg> '); | |
| --callout-icon-quote: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" viewBox="0 0 24 24" fill="none" stroke="%239e9e9e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 21c3 0 7-1 7-8V5c0-1.25-.756-2.017-2-2H4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V20c0 1 0 1 1 1z"></path><path d="M15 21c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2h-4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2h.75c0 2.25.25 4-2.75 4v3c0 1 0 1 1 1z"></path></svg>'); | |
| --callout-icon-success: url('data:image/svg+xml; utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" viewBox="0 0 24 24" fill="none" stroke="%2345d370" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg> '); | |
| --callout-icon-tip: url('data:image/svg+xml; utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" viewBox="0 0 24 24" fill="none" stroke="%2356e8e6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"></path></svg> '); | |
| --callout-icon-todo: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" viewBox="0 0 24 24" fill="none" stroke="%231a8fe3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"></path><path d="m9 12 2 2 4-4"></path></svg>'); | |
| --callout-icon-warning: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" viewBox="0 0 24 24" fill="none" stroke="%23dba642" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>'); | |
| --color-cyan: #56e8e6; | |
| --color-red: #ea4348; | |
| --color-purple: #b38aff; | |
| --color-blue: #1a8fe3; | |
| --color-orange: #ee9a40; | |
| --color-green: #45d370; | |
| --color-grey: #9e9e9e; | |
| --callout-color-quote-garden: #9be895; | |
| --callout-color-abstract: var(--color-cyan); | |
| --callout-color-bug: var(--color-red); | |
| --callout-color-danger: var(--color-red); | |
| --callout-color-example: var(--color-purple); | |
| --callout-color-failure: var(--color-red); | |
| --callout-color-fold: var(--color-purple); | |
| --callout-color-info: var(--color-blue); | |
| --callout-color-note: var(--color-blue); | |
| --callout-color-question: var(--color-orange); | |
| --callout-color-quote: var(--color-grey); | |
| --callout-color-success: var(--color-green); | |
| --callout-color-tip: var(--color-cyan); | |
| --callout-color-todo: var(--color-blue); | |
| --callout-color-warning: var(--color-orange); | |
| } | |
| .callout-abstract, | |
| .callout-bug, | |
| .callout-danger, | |
| .callout-example, | |
| .callout-failure, | |
| .callout-fold, | |
| .callout-info, | |
| .callout-note, | |
| .callout-question, | |
| .callout-quote, | |
| .callout-success, | |
| .callout-tip, | |
| .callout-todo, | |
| .callout-warning { | |
| border: 2px solid; | |
| margin-block: 1rem; | |
| border-radius: 5px; | |
| padding: 1rem 2rem; | |
| box-sizing: border-box; | |
| background-color: #000; | |
| } | |
| .callout-abstract { | |
| border-color: var(--callout-color-abstract); | |
| } | |
| .callout-bug { | |
| border-color: var(--callout-color-bug); | |
| } | |
| .callout-danger { | |
| border-color: var(--callout-color-danger); | |
| } | |
| .callout-example { | |
| border-color: var(--callout-color-example); | |
| } | |
| .callout-failure { | |
| border-color: var(--callout-color-failure); | |
| } | |
| .callout-fold { | |
| border-color: var(--callout-color-fold); | |
| } | |
| .callout-info { | |
| border-color: var(--callout-color-info); | |
| } | |
| .callout-note { | |
| border-color: var(--callout-color-note); | |
| } | |
| .callout-question { | |
| border-color: var(--callout-color-question); | |
| } | |
| .callout-quote { | |
| border-color: var(--callout-color-quote); | |
| } | |
| .callout-success { | |
| border-color: var(--callout-color-success); | |
| } | |
| .callout-tip { | |
| border-color: var(--callout-color-tip); | |
| } | |
| .callout-todo { | |
| border-color: var(--callout-color-todo); | |
| } | |
| .callout-warning { | |
| border-color: var(--callout-color-warning); | |
| } | |
| .callout-abstract::before { | |
| content: var(--callout-icon-abstract) " Abstract" "\a"; | |
| white-space: pre; | |
| color: var(--callout-color-abstract); | |
| font-size: 24px; | |
| } | |
| .callout-bug::before { | |
| content: var(--callout-icon-bug) " Bug" "\a"; | |
| white-space: pre; | |
| color: var(--callout-color-bug); | |
| font-size: 24px; | |
| } | |
| .callout-danger::before { | |
| content: var(--callout-icon-danger) " Danger" "\a"; | |
| white-space: pre; | |
| color: var(--callout-color-danger); | |
| font-size: 24px; | |
| } | |
| .callout-example::before { | |
| content: var(--callout-icon-example) " Example" "\a"; | |
| white-space: pre; | |
| color: var(--callout-color-example); | |
| font-size: 24px; | |
| } | |
| .callout-failure::before { | |
| content: var(--callout-icon-failure) " Failure" "\a"; | |
| white-space: pre; | |
| color: var(--callout-color-failure); | |
| font-size: 24px; | |
| } | |
| .callout-fold::before { | |
| content: var(--callout-icon-fold) " Fold" "\a"; | |
| white-space: pre; | |
| color: var(--callout-color-fold); | |
| font-size: 24px; | |
| } | |
| .callout-info::before { | |
| content: var(--callout-icon-info) " Info" "\a"; | |
| white-space: pre; | |
| color: var(--callout-color-info); | |
| font-size: 24px; | |
| } | |
| .callout-note::before { | |
| content: var(--callout-icon-note) " Note" "\a"; | |
| white-space: pre; | |
| color: var(--callout-color-note); | |
| font-size: 24px; | |
| } | |
| .callout-question::before { | |
| content: var(--callout-icon-question) " Question" "\a"; | |
| white-space: pre; | |
| color: var(--callout-color-question); | |
| font-size: 24px; | |
| } | |
| .callout-quote::before { | |
| content: var(--callout-icon-quote) " Quote" "\a"; | |
| white-space: pre; | |
| color: var(--callout-color-quote); | |
| font-size: 24px; | |
| } | |
| .callout-success::before { | |
| content: var(--callout-icon-success) " Success" "\a"; | |
| white-space: pre; | |
| color: var(--callout-color-success); | |
| font-size: 24px; | |
| } | |
| .callout-tip::before { | |
| content: var(--callout-icon-tip) " Tip" "\a"; | |
| white-space: pre; | |
| color: var(--callout-color-tip); | |
| font-size: 24px; | |
| } | |
| .callout-todo::before { | |
| content: var(--callout-icon-todo) " Todo" "\a"; | |
| white-space: pre; | |
| color: var(--callout-color-todo); | |
| font-size: 24px; | |
| } | |
| .callout-warning::before { | |
| content: var(--callout-icon-warning) " Warning" "\a"; | |
| white-space: pre; | |
| color: var(--callout-color-warning); | |
| font-size: 24px; | |
| } | |
| :is(a, input, textarea, summary, code) { | |
| --outline-size: max(2px, 0.08em); | |
| --outline-style: solid; | |
| --outline-color: var(--color-primary); | |
| --outline-offset: 3px; | |
| } | |
| :is(a, input, textarea, summary, code):focus { | |
| outline: var(--outline-size) var(--outline-style) var(--outline-color); | |
| outline-offset: var(--outline-offset, var(--outline-size)); | |
| } | |
| :is(a, input, textarea, summary, code):focus-visible { | |
| outline: var(--outline-size) var(--outline-style) var(--outline-color); | |
| outline-offset: var(--outline-offset, var(--outline-size)); | |
| } | |
| :is(a, input, textarea, summary, code):focus:not(:focus-visible) { | |
| outline: none; | |
| } | |
| :is(a, input, textarea, summary, code):hover { | |
| outline: var(--outline-size) var(--outline-style) var(--outline-color); | |
| outline-offset: var(--outline-offset, var(--outline-size)); | |
| } | |
| :root { | |
| --size-step--2: clamp(0.6944rem, 0.6856rem + 0.0444vi, 0.72rem); | |
| --size-step--1: clamp(0.8333rem, 0.8101rem + 0.1159vi, 0.9rem); | |
| --size-step-0: clamp(1rem, 0.9565rem + 0.2174vi, 1.125rem); | |
| --size-step-1: clamp(1.2rem, 1.1283rem + 0.3587vi, 1.4063rem); | |
| --size-step-2: clamp(1.44rem, 1.3295rem + 0.5527vi, 1.7578rem); | |
| --size-step-3: clamp(1.728rem, 1.5648rem + 0.8161vi, 2.1973rem); | |
| --size-step-4: clamp(2.0736rem, 1.8395rem + 1.1704vi, 2.7466rem); | |
| --size-step-5: clamp(2.4883rem, 2.1597rem + 1.6433vi, 3.4332rem); | |
| --color-accent: salmon; | |
| --color-background: #fff; | |
| --color-code-background: #ddd; | |
| --color-code: #000; | |
| --color-dark-alt: #222; | |
| --color-dark: #1a1a1a; | |
| --color-heading: #222; | |
| --color-light-alt: #f2f2f2; | |
| --color-light: #fafafa; | |
| --color-link: #3273dc; | |
| --color-primary: #1a8fe3; | |
| --color-text: #444; | |
| --font-main: Verdana, sans-serif; | |
| --font-stack: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI"; | |
| --page-width: 80ch; | |
| --spacing: 1.5rem; | |
| --visited-color: #8b6fcb; | |
| } | |
| @media (prefers-color-scheme: dark) { | |
| :root { | |
| --color-dark: #fafafa; | |
| --color-light: #1a1a1a; | |
| --color-background: #2f2f2f; | |
| --color-code-background: #000; | |
| --color-code: #ddd; | |
| --color-heading: #eee; | |
| --color-link: #8cc2dd; | |
| --color-text: #ddd; | |
| } | |
| } | |
| * { | |
| box-sizing: border-box; | |
| } | |
| body { | |
| background: var(--color-light); | |
| color: var(--color-dark); | |
| padding: 1.5rem clamp(0.75rem, 5vw, 4.5rem); | |
| font-family: var(--font-stack); | |
| font-size: var(--size-step-0); | |
| line-height: 1.5; | |
| display: flex; | |
| flex-direction: column; | |
| min-height: 100vh; | |
| margin: 0; | |
| } | |
| main { | |
| flex: 1; | |
| } | |
| header { | |
| padding-bottom: 1.5rem; | |
| margin-bottom: 1.5rem; | |
| } | |
| header, | |
| main, | |
| footer { | |
| width: 100%; | |
| } | |
| a { | |
| color: var(--color-dark); | |
| display: inline-block; | |
| } | |
| a:hover { | |
| text-decoration: none; | |
| color: var(--color-primary); | |
| } | |
| img { | |
| display: block; | |
| max-width: 100%; | |
| height: auto; | |
| border: 2px solid var(--color-dark); | |
| border-radius: 3px; | |
| } | |
| img:hover { | |
| border-color: var(--color-primary); | |
| } | |
| h1, | |
| h2, | |
| h3, | |
| h4, | |
| h5, | |
| h6 { | |
| font-weight: 100; | |
| line-height: 1.5; | |
| text-wrap: balance; | |
| } | |
| h1 { | |
| font-size: var(--size-step-5); | |
| margin-block-start: 0; | |
| } | |
| h2 { | |
| font-size: var(--size-step-3); | |
| } | |
| h3 { | |
| font-size: var(--size-step-2); | |
| } | |
| h4 { | |
| font-size: var(--size-step-1); | |
| } | |
| h5 { | |
| font-size: var(--size-step-0); | |
| } | |
| h6 { | |
| font-size: var(--size-step--1); | |
| } | |
| ul, | |
| ol { | |
| -webkit-padding-start: 1.5rem; | |
| padding-inline-start: 1.5rem; | |
| } | |
| li { | |
| padding-block-start: cal(0.75rem); | |
| } | |
| blockquote { | |
| -webkit-padding-start: 1.5rem; | |
| padding-inline-start: 1.5rem; | |
| -webkit-border-start: 0.3em solid; | |
| border-inline-start: 0.3em solid; | |
| font-style: italic; | |
| font-size: var(--size-step-1); | |
| margin-left: 0; | |
| } | |
| content > div > * { | |
| -webkit-margin-before: var(--flow-space, 1.5rem); | |
| margin-block-start: var(--flow-space, 1.5rem); | |
| } | |
| :is(h1, h2, h3, h4, h5, blockquote) { | |
| --flow-space: calc($spacing * 2); | |
| margin-block-end: 0.75rem; | |
| } | |
| :is(h1, h2, h3, h4, h5) + * { | |
| --flow-space: calc($spacing / 3); | |
| } | |
| :is(h1, h2, h3, h4, h5) + :where(h2, h3, h4, h5) { | |
| --flow-space: calc($spacing); | |
| } | |
| main, | |
| header, | |
| footer { | |
| max-width: 65ch; | |
| margin-inline: auto; | |
| } | |
| blockquote { | |
| max-width: 50ch; | |
| } | |
| .title { | |
| text-decoration: none; | |
| } | |
| .title h1 { | |
| font-size: var(--size-step-1); | |
| margin-bottom: 0; | |
| } | |
| .title:hover { | |
| text-decoration: none; | |
| padding-inline: inherit; | |
| } | |
| nav p { | |
| display: block; | |
| font-size: var(--size-step-0); | |
| } | |
| ul.blog-posts { | |
| list-style-type: none; | |
| padding: unset; | |
| } | |
| ul.blog-posts li span { | |
| font-size: var(--size-step-0); | |
| min-width: 11ch; | |
| display: block; | |
| margin-block-start: 1.5rem; | |
| } | |
| .highlight, | |
| .code { | |
| padding: 1.5rem 1px; | |
| background-color: var(--code-background-color); | |
| color: var(--code-color); | |
| } | |
| pre, | |
| code { | |
| outline: 1px solid var(--color-text); | |
| background-color: var(--color-code-background); | |
| } | |
| code { | |
| padding-inline: 3px; | |
| text-wrap: pretty; | |
| } | |
| pre { | |
| border-radius: 5px; | |
| padding: 0.75rem; | |
| overflow: auto; | |
| } | |
| table { | |
| width: 100%; | |
| margin: 1.5rem auto; | |
| border: 1px solid var(--color-text); | |
| border-collapse: collapse; | |
| font-size: var(--size-step-0); | |
| } | |
| table thead th, | |
| table tfoot th { | |
| background: rgba(255, 255, 255, 0.1); | |
| } | |
| table th, | |
| table td { | |
| padding: 2px 4px; | |
| border: 1px solid var(--color-text); | |
| } | |
| .journals-page .blog-posts > li:first-child { | |
| margin-block-start: 0; | |
| } | |
| .journals-page .blog-posts > li { | |
| margin-block-start: 2rem; | |
| } | |
| .journals-page ul.blog-posts li span { | |
| display: none; | |
| } | |
| .journals-page ul.blog-posts li span + a { | |
| display: block; | |
| text-decoration: none; | |
| font-size: var(--size-step-2); | |
| } | |
| .journals-page ul.blog-posts li span + a:hover { | |
| background: inherit; | |
| padding-inline: initial; | |
| display: inline-block; | |
| } | |
| /* | |
| #journal::after { | |
| display: flex; | |
| font-size: var(--size-step-0); | |
| font-weight: 400; | |
| margin-block-start: 1.5rem; | |
| outline: 2px solid orange; | |
| padding: 1rem; | |
| content: "This page explores the concept of keeping a public journal, something I haven’t done before. I’m still defining what exactly I should include in this journal. I’m currently making sure it’s not too technical, or difficult to read."; | |
| } | |
| */ | |
| .journal-year { | |
| outline: 2px solid green; | |
| padding: 1rem; | |
| margin-block-start: 1rem; | |
| } | |
| .journal-year h2 { | |
| margin-block-start: 0; | |
| font-size: var(--size-step-3); | |
| } | |
| footer p { | |
| float: inline-end; | |
| text-align: right; | |
| margin: 0; | |
| } | |
| footer span + span { | |
| float: inline-start; | |
| } | |
| @media screen and (max-width: 600px) { | |
| footer p { | |
| display: block; | |
| text-align: center; | |
| float: none; | |
| } | |
| footer span + span { | |
| margin-block-start: 0.75rem; | |
| display: block; | |
| text-align: center; | |
| float: none; | |
| } | |
| } | |
| section.footnotes p { | |
| margin: 0.1875rem 0; | |
| } | |
| .not-found { | |
| overflow: hidden; | |
| } | |
| .not-found .progress__wrapper, | |
| .subscribe .progress__wrapper, | |
| .home .progress__wrapper, | |
| body.not-found header { | |
| display: none; | |
| } | |
| .progress__wrapper { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| z-index: 100; | |
| width: 100%; | |
| height: 0.65rem; | |
| background-color: #2c2c2c; | |
| } | |
| .progress__bar { | |
| filter: grayscale(0.5); | |
| display: block; | |
| width: 0; | |
| height: inherit; | |
| background: linear-gradient(90deg, blue, indigo, #9400d3); | |
| } | |
| a[href^="http://"]:not([href*="miguelpimentel.do"]):hover,a[href^="https://"]:not([href*="miguelpimentel.do"]):hover | |
| { | |
| color: var(--color-accent); | |
| outline-color: var(--color-accent); | |
| } | |
| .tablink, | |
| .tablink2 { | |
| background-color: #555; | |
| color: #fff; | |
| float: left; | |
| border: none; | |
| outline: none; | |
| cursor: pointer; | |
| font-size: var(--size-step-0); | |
| padding: 0.2rem 1rem; | |
| } | |
| .tabcontent, | |
| .tabcontent2 { | |
| color: #fff; | |
| display: none; | |
| } | |
| p:has(+ .tabcontent), | |
| p:has(+ .tabcontent2) { | |
| display: flex; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .tabcontent .highlight, | |
| .tabcontent2 .highlight { | |
| padding: 0; | |
| margin: 0; | |
| } | |
| .highlight pre { | |
| margin: 0 auto; | |
| } | |
| .post h1 { | |
| font-size: var(--size-step-4); | |
| } | |
| #buttons { | |
| display: flex; | |
| } | |
| :is(button):hover { | |
| background: var(--color-accent); | |
| } | |
| hr { | |
| border-color: var(--color-primary); | |
| } | |
| mark { | |
| padding-inline: 3px; | |
| } | |
| blockquote { | |
| border-color: var(--color-primary); | |
| } | |
| .title { | |
| text-decoration: none; | |
| } | |
| .title h1 { | |
| font-size: var(--size-step-1); | |
| margin-bottom: 0; | |
| } | |
| .title:hover { | |
| text-decoration: none; | |
| padding-inline: inherit; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment