Last active
February 8, 2025 07:44
-
-
Save lawgimenez/3c3663f617f8e6cb87aa00f6711fff35 to your computer and use it in GitHub Desktop.
My Bear Blog Theme
This file contains hidden or 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://cdn.jsdelivr.net/npm/@fontsource/[email protected]/400.min.css'); | |
| :root { | |
| --width: 1000px; | |
| --font-main: 'Monaspace Argon'; | |
| --font-secondary: 'Monaspace Argon'; | |
| --font-scale: 1em; | |
| --background-color: #2e2e2e; | |
| --heading-color: #A9DC76; | |
| --text-color: #A9DC76; | |
| --link-color: #A9DC76; | |
| --visited-color: #A9DC76; | |
| --code-background-color: #A9DC76; | |
| --code-color: #222129; | |
| --blockquote-color: #fff; | |
| } | |
| body { | |
| font-family: var(--font-secondary); | |
| font-size: var(--font-scale); | |
| margin: auto; | |
| padding: 20px; | |
| max-width: var(--width); | |
| text-align: left; | |
| background-color: var(--background-color); | |
| word-wrap: break-word; | |
| overflow-wrap: break-word; | |
| line-height: 1.5; | |
| color: var(--text-color); | |
| } | |
| h1, | |
| h2, | |
| h3, | |
| h4, | |
| h5, | |
| h6 { | |
| font-family: var(--font-main); | |
| color: var(--heading-color); | |
| } | |
| a { | |
| color: var(--link-color); | |
| cursor: pointer; | |
| text-decoration: underline; | |
| } | |
| a:hover { | |
| text-decoration: underline; | |
| } | |
| main { | |
| margin-top: 40px; | |
| margin-bottom: 20px; | |
| padding: 30px; | |
| border: 0px solid var(--link-color); | |
| } | |
| nav a { | |
| margin-right: 8px; | |
| } | |
| strong, | |
| b { | |
| color: var(--heading-color); | |
| } | |
| button { | |
| margin: 0; | |
| cursor: pointer; | |
| } | |
| main { | |
| line-height: 1.6; | |
| } | |
| table { | |
| width: 100%; | |
| } | |
| hr { | |
| border: 0; | |
| border-top: 1px dashed; | |
| } | |
| img { | |
| max-width: 100%; | |
| } | |
| blockquote { | |
| border-top: 1px solid var(--heading-color); | |
| border-bottom: 1px solid var(--heading-color); | |
| color: var(--text-color); | |
| padding: 20px; | |
| font-style: italic; | |
| margin-left: 0px; | |
| margin-right: 0px; | |
| } | |
| footer { | |
| padding: 25px 0; | |
| text-align: center; | |
| opacity: 0.6; | |
| } | |
| .title:hover { | |
| text-decoration: none; | |
| } | |
| .title h1 { | |
| font-size: 1em; | |
| padding: 5px 10px; | |
| background: var(--heading-color); | |
| color: var(--background-color); | |
| display: inline-block; | |
| font-weight: 400; | |
| } | |
| .inline { | |
| width: auto !important; | |
| } | |
| pre { | |
| font-family: var(--font-secondary); | |
| font-size: var(--font-scale); | |
| } | |
| .highlight, | |
| .code { | |
| font-size: var(--font-scale); | |
| padding: 1px 15px; | |
| background-color: var(--code-background-color); | |
| color: var(--code-color); | |
| border-radius: 3px; | |
| margin-block-start: 1em; | |
| margin-block-end: 1em; | |
| overflow-x: auto; | |
| } | |
| .highlight { | |
| border-left: 5px solid var(--heading-color); | |
| } | |
| /* blog post list */ | |
| ul.blog-posts { | |
| list-style-type: none; | |
| padding: unset; | |
| } | |
| ul.blog-posts li { | |
| display: flex; | |
| margin-bottom: 20px; | |
| } | |
| code { | |
| font-family: var(--font-main); | |
| font-size: var(--font-scale); | |
| padding: 2px; | |
| background-color: var(--code-background-color); | |
| color: var(--code-color); | |
| border-radius: 3px; | |
| } | |
| ul.blog-posts li time { | |
| font-style: normal; | |
| } | |
| ul.blog-posts li span { | |
| flex: 0 0 130px; | |
| } | |
| ul.blog-posts li a:visited { | |
| color: var(--visited-color); | |
| } | |
| table { | |
| border-collapse: collapse; | |
| } | |
| table, | |
| th, | |
| td { | |
| border: 1px dashed var(--heading-color); | |
| padding: 10px; | |
| } | |
| @media only screen and (max-width:767px) { | |
| main { | |
| padding: 20px; | |
| margin-top: 30px; | |
| margin-bottom: 10px; | |
| } | |
| ul.blog-posts li { | |
| flex-direction: column; | |
| } | |
| ul.blog-posts li span { | |
| flex: unset; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment