diff --git a/bearblog/theme-aug132026.css b/bearblog/theme-aug132026.css new file mode 100644 index 0000000..37591bc --- /dev/null +++ b/bearblog/theme-aug132026.css @@ -0,0 +1,299 @@ +@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital@0;1&display=swap'); + +:root { + --width: 720px; + --font-main: Arial; + --font-secondary: Arial; + --font-scale: .9em; + --background-color: #000084; + --heading-color: #000000; + --heading-background: #FF80B3; + --text-color: #B7B7B7; + --link-color: #000000; + --visited-color: #000000; + --code-background-color: #B7B7B7; + --code-color: #222; + --blockquote-color: #B7B7B7; +} +ul.blog-posts li::before { + content: "🛸"; + margin-right: 0.5rem; + opacity: 0.8; + transform: translateY(1px); +} +body { + font-family: var(--font-secondary); + font-size: var(--font-scale); + margin: auto; + padding: 20px 0px; + max-width: var(--width); + text-align: left; +background: #ff80b3; +background: linear-gradient(90deg, rgba(255, 128, 179, 1) 0%, rgba(87, 199, 133, 1) 50%, rgba(255, 135, 197, 1) 100%); 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); + padding: 0.4em 0.6em; +background: #ff80b3; +background: linear-gradient(90deg, rgba(255, 128, 179, 1) 0%, rgba(201, 255, 226, 1) 50%, rgba(255, 135, 197, 1) 100%); + font-size: 1em; + font-weight: 500; +} + +h1 { + font-size: 1.2em; +} + +h2 { + font-size: 1.1em; +} + +h3 { + font-size: 1em; +} + +h4 { + font-size: .9em; +} + +h5 { + font-size: .8em; +} + +h6 { + font-size: .7em; +} + +a { + color: var(--link-color); + cursor: pointer; + text-decoration: underline; +} + +a:hover { + color: #000000 !important; + background-color: var(--link-color); + text-decoration: underline; +} + +nav { + border: 10px double #C9FFE2; +background: #ff80b3; +background: linear-gradient(90deg, rgba(255, 128, 179, 1) 0%, rgba(201, 255, 226, 1) 50%, rgba(255, 135, 197, 1) 100%);} + +nav p { + margin-top: 0px; + margin-bottom: 0px; +} + +nav a { + color: #000; + margin-right: 0px; + padding: 5px 12px; + display: inline-block; +} + +nav a:hover { + + background: hotpink; +} + +button { + margin: 0; + cursor: pointer; +} + +main { + border: 8px inset hotpink; + padding: 20px; + margin: 25px 0px; +} + +main { + background-color: #C9FFE2; + color: #000; + line-height: 1.6; +} + +table { + width: 100%; +} + +hr { + border: 0; + border-top: 1px dashed; +} + +img { + max-width: 100%; +} + +code { + font-family: monospace; + padding: 2px; + background-color: var(--code-background-color); + color: var(--code-color); + border-radius: 0px; +} + +blockquote { + border-left: 1px solid #999; + color: var(--blockquote-color); + padding-left: 20px; + font-style: italic; +} + +footer { + text-align: center; + color: var(--heading-color); + padding: 0.4em 0.6em !important; + background: var(--heading-background); +} + +.title:hover { + text-decoration: none; +} + +.title { + text-decoration: none; +} + +.title h1 { + font-size: 1.5em; + margin-top: 0px; + margin-bottom: 0px; +} + +.inline { + width: auto !important; +} + +.highlight, +.code { + padding: 1px 15px; + background-color: var(--code-background-color); + color: var(--code-color); + border-radius: 0px; + margin-block-start: 1em; + margin-block-end: 1em; + overflow-x: auto; +} + +/* blog post list */ +ul.blog-posts { + list-style-type: none; + padding: unset; +} + +ul.blog-posts li { + display: flex; + margin-bottom: 12px; +} + +ul.blog-posts li span { + flex: 0 0 130px; +} + +ul.blog-posts li a:visited { + color: var(--visited-color); +} + +th { + border-bottom: 1px solid #ffffff; + padding-bottom: 5px; + margin-bottom: 10px; +} + +.upvote-button svg { + display: none; +} +.upvote-button::before { /* Untoasted */ + content: '🛸BLAST THIS POST INTO OUTER SPACE!'; + border: 3px inset hotpink; + border-radius: .5em; + padding: .5em; + background: #ff80b3; +background: linear-gradient(90deg, rgba(255, 128, 179, 1) 0%, rgba(201, 255, 226, 1) 50%, rgba(255, 135, 197, 1) 100%); + color: #000; +} +.upvote-button:hover::before { /* Hover */ + content: 'did you like my poast :)'; + cursor: pointer; +} +.upvote-button[disabled]::before { /* Toasted */ + content: '👽YOU FOUND: AN EXTRATERRESTRIAL!'; + cursor: default; + color: GrayText; /* To change the salmon color */ +} +.upvote-button { + flex-direction: row; + gap: .75em; /* Add space between button and upvote count */ +} +.upvote-count { + margin: initial; /* Reset the negative margin (it's not needed anymore) */ + color: GrayText; /* To change the salmon color */ +} +.upvote-count::after { + content: ' thought this post was pretty cool'; +} + +html { + margin-left: calc(100vw - 100%); +} + +:root { + --light-notes-bg: #; + --light-notes-border: #9893a5; + --light-notes-shadow: rgba(0, 0, 0, .075); + + --dark-notes-bg: #26233a; + --dark-notes-border: #908caa; + --dark-notes-shadow: rgba(0, 0, 0, .3); +} +.tiny-notes { + max-width: 225px; + padding: 2em; +background: #ff80b3; +background: linear-gradient(90deg, rgba(255, 128, 179, 1) 0%, rgba(201, 255, 226, 1) 50%, rgba(255, 135, 197, 1) 100%); font-family: "TT2020"; + font-size: 1em; + box-shadow: 0 3px 3px light-dark(var(--light-notes-shadow), var(--dark-notes-shadow)); + line-height: 1; +} +@media (min-width: 1200px) { + .tiny-notes { + position: absolute; + top: 2em; + right: 4em; + rotate: 1.75deg; + } +} +@media (max-width: 1199.98px) { + .tiny-notes { + rotate: -1deg; + margin: 2em auto; + } +} +.tiny-notes ul { + list-style-type: none; + padding: 0; + margin: 0; +} +.tiny-notes > ul > li { + border-bottom: 1px hotpink; + margin-bottom: 2em; + padding-bottom: 2em; +} +.tiny-notes > ul > li > ul { + font-size: .875rem; + font-style: italic; +} \ No newline at end of file