Bearteal Theme
This is my CSS styling code, feel free to use it. The code is mostly from Bearming theme.
:root {
--pfp: url("https://res.cloudinary.com/w3teall/image/upload/logo_bmdnb3.svg");
--en-flag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 1300 650'%3E%3Cdefs%3E%3Cg id='b'%3E%3Cuse xlink:href='%23a' transform='rotate(-144)'/%3E%3Cuse xlink:href='%23a' transform='rotate(-72)'/%3E%3Cuse xlink:href='%23a'/%3E%3Cuse xlink:href='%23a' transform='rotate(72)'/%3E%3Cuse xlink:href='%23a' transform='rotate(144)'/%3E%3C/g%3E%3Cg id='c'%3E%3Cuse xlink:href='%23b' x='-.252'/%3E%3Cuse xlink:href='%23b' x='-.126'/%3E%3Cuse xlink:href='%23b'/%3E%3Cuse xlink:href='%23b' x='.126'/%3E%3Cuse xlink:href='%23b' x='.252'/%3E%3C/g%3E%3Cg id='d'%3E%3Cuse xlink:href='%23c' x='-.063'/%3E%3Cuse xlink:href='%23b' x='.315'/%3E%3C/g%3E%3Cg id='e'%3E%3Cuse xlink:href='%23d'/%3E%3Cuse xlink:href='%23c' y='.054'/%3E%3Cuse xlink:href='%23d' y='.108'/%3E%3Cuse xlink:href='%23c' y='.162'/%3E%3C/g%3E%3Cg id='g'%3E%3Cuse xlink:href='%23e' y='-.216'/%3E%3Cuse xlink:href='%23e'/%3E%3Cuse xlink:href='%23d' y='.216'/%3E%3C/g%3E%3Cpath id='a' fill='%23FFF' d='M-.162 0 0-.5l.162.5z' transform='scale(.0616)'/%3E%3Cpath id='f' fill='%23B22234' d='M0 0h1300v50H0z'/%3E%3C/defs%3E%3Cpath fill='%23FFF' d='M0 0h1300v650H0z'/%3E%3Cuse xlink:href='%23f'/%3E%3Cuse xlink:href='%23f' y='100'/%3E%3Cuse xlink:href='%23f' y='200'/%3E%3Cuse xlink:href='%23f' y='300'/%3E%3Cuse xlink:href='%23f' y='400'/%3E%3Cuse xlink:href='%23f' y='500'/%3E%3Cuse xlink:href='%23f' y='600'/%3E%3Cpath fill='%233C3B6E' d='M0 0h494v350H0z'/%3E%3Cuse xlink:href='%23g' transform='matrix(650 0 0 650 247 175)'/%3E%3Csvg viewBox='0 0 60 30'%3E%3CclipPath id='i'%3E%3Cpath d='m30 15 30 15V15H0v15h30z'/%3E%3C/clipPath%3E%3CclipPath id='h'%3E%3Cpath d='M0 30h60V0z'/%3E%3C/clipPath%3E%3Cg clip-path='url(%23h)'%3E%3Cpath fill='%2300247d' d='M0 0v30h60V0z'/%3E%3Cpath stroke='%23fff' stroke-width='6' d='m0 0 60 30m0-30L0 30'/%3E%3Cpath fill='none' stroke='%23cf142b' stroke-width='4' d='m0 30 30-15 30 15' clip-path='url(%23i)'/%3E%3Cpath stroke='%23fff' stroke-width='10' d='M30 0v30M0 15h60'/%3E%3Cpath stroke='%23cf142b' stroke-width='6' d='M30 0v30M0 15h60'/%3E%3C/g%3E%3C/svg%3E%3C/svg%3E");
--indicator: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' fill='none' aria-hidden='true' viewBox='0 0 24 24'%3E%3Cpath stroke='%23888' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M5.636 18.364 18.364 5.636m0 0h-9.9m9.9 0v9.9'/%3E%3C/svg%3E");
}
:root {
--size-step-min-1: clamp(0.6875rem, 0.65rem + 0.2vw, 0.875rem);
--size-step-min: clamp(0.8125rem, 0.75rem + 0.29vw, 1rem);
--size-step-0: clamp(1rem, 0.88rem + 0.58vw, 1.375rem);
--size-step-1: clamp(1.1875rem, 1.01rem + 0.87vw, 1.75rem);
--size-step-2: clamp(1.4375rem, 1.21rem + 1.15vw, 2.1875rem);
--size-step-3: clamp(1.6875rem, 1.36rem + 1.63vw, 2.75rem);
}
:root {
--width: 65rem;
--font-main: Arial, sans-serif;
--font-secondary: Arial, sans-serif;
--font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
--font-scale: var(--size-step-0);
--background-color: #fff;
--heading-color: #222;
--text-color: #333333;
--link-color: #07bbbc;
--visited-color: #07bbbc;
--code-background-color: #f2f2f2;
--code-color: #222;
--blockquote-color: #222;
--accent-color: #f0f0f0;
}
@media (prefers-color-scheme: dark) {
:root {
--background-color: #01242e;
--heading-color: #eee;
--text-color: #ddd;
--code-background-color: #000;
--code-color: #ddd;
--blockquote-color: #ccc;
--accent-color: #003645;
}
}
* {
box-sizing: border-box;
}
body {
display: grid;
grid-template-areas:
"header content content"
"header footer footer";
grid-template-columns: 1fr 4fr;
gap: 1em;
font-family: var(--font-secondary);
font-size: var(--font-scale);
margin: auto;
padding: 0 1.15em;
max-width: var(--width);
background-color: var(--background-color);
word-wrap: break-word;
word-break: break-word;
overflow-wrap: break-word;
line-height: 1.4;
color: var(--text-color);
}
header {
grid-area: header;
}
main {
grid-area: content;
}
header,
main {
padding-top: 1em;
}
footer {
grid-area: footer;
}
main {
line-height: 1.55;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-main);
font-weight: 500;
letter-spacing: -1px;
color: var(--heading-color);
margin: 1.75em 0 0;
}
h1:first-of-type {
margin-top: .5em;
}
h1:first-child+p {
margin-bottom: 2em;
}
h1 {
font-size: var(--size-step-3)
}
h2 {
font-size: var(--size-step-2)
}
h3 {
font-size: var(--size-step-1)
}
a {
color: var(--link-color);
cursor: pointer;
}
a:hover,
nav a {
text-decoration: none;
}
a:focus {
outline: 3px dashed;
}
/** Full width anchor in nav for wide screen **/
nav a:not(.small a) {
display: block;
padding: .5em .5em .5em 0;
}
nav a:not(.small a):hover {
background: var(--accent-color);
}
nav p {
margin-top: 0;
}
.small {
font-size: var(--size-step-min-1);
line-height: 1.45;
}
@media only screen and (max-width: 600px) {
body {
display: block;
}
nav a:not(.small a) {
display: inline-block;
text-decoration: none;
}
}
p time {
display: block;
margin: -1em 0 1.5em;
}
strong,
b {
color: var(--heading-color);
}
button {
margin: 0;
cursor: pointer;
}
time,
del {
opacity: .5;
}
hr {
border: 0;
margin: 2em 0;
border-top: 2px dashed var(--accent-color);
}
blockquote {
border-left: 2px solid var(--accent-color);
padding-left: 1em;
margin-left: .75em;
font-style: italic;
}
img {
max-width: 100%;
}
img[height] {
height: auto;
}
/** Table **/
table {
border-collapse: collapse;
width: 100%;
}
td,
th {
padding: .25em .65em;
vertical-align: top;
word-wrap: break-word;
border: 2px solid var(--accent-color);
}
th {
position: sticky;
top: 0;
background-color: var(--accent-color);
}
/** Code things **/
.highlight,
.code {
font-family: var(--font-mono);
padding: .1em 1em;
background-color: var(--code-background-color);
color: var(--code-color);
border-radius: 3px;
margin-block-start: 1em;
margin-block-end: 1em;
overflow-x: auto;
}
pre {
font-family: var(--font-mono);
overflow-x: auto;
font-size: var(--size-step-min);
}
code {
font-family: var(--font-mono);
padding: .1em;
background-color: var(--code-background-color);
color: var(--code-color);
border-radius: 3px;
}
/** Title **/
.title:hover {
text-decoration: none;
}
/** Make title name for screen reader only
https://gist.github.com/ffoodd/000b59f431e3e64e4ce1a24d5bb36034 **/
.title h1 {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
white-space: nowrap;
}
/** My logo image
From bearming add-on https://birming.com/bearming-add-ons/ **/
.title::before {
--size: 5rem;
display: inline-block;
content: "";
background: var(--pfp) no-repeat;
width: var(--size);
height: var(--size);
background-size: var(--size);
}
.inline {
width: auto !important;
}
.footnotes,
.tags,
:not(.tags)+form {
margin: 2.75em 0 .25em;
}
.tags,
form,
footer {
display: flex !important;
flex-direction: column;
align-items: center;
text-align: center;
}
ul>li {
margin: .3em 0;
}
.blog-posts {
padding: 0;
margin: 1em 0;
}
.blog-posts li {
display: flex;
}
.blog-posts li span {
flex: 0 0 13rem;
}
/* Blog list in card style */
:is(.card, .home, .status) .blog-posts {
display: grid;
gap: 1em;
}
:is(.card, .home, .status) .blog-posts li {
position: relative;
display: flex;
flex-direction: column;
padding: .55em .65em;
margin: 0;
background: var(--accent-color);
border: 4px solid var(--accent-color);
border-radius: .3em;
}
:is(.card, .home) .blog-posts li:hover {
border: 4px solid var(--link-color);
}
:is(.card, .home) .blog-posts li>a:focus {
outline: none;
}
:is(.card, .home, .status) .blog-posts li span {
flex: none;
}
:is(.card, .home) .blog-posts a {
text-decoration: none;
font-size: var(--size-step-1);
}
:is(.card, .home) .blog-posts a:after {
position: absolute;
content: "";
bottom: 0;
left: 0;
right: 0;
top: 0;
}
@media only screen and (min-width: 600px) {
:is(.card, .home) .blog-posts {
grid-template-columns: 1fr 1fr;
}
header {
position: sticky;
top: 0;
height: 100vh;
overflow-x: auto;
}
/** Scrollbar in sidebar **/
header::-webkit-scrollbar {
width: 4px
}
header::-webkit-scrollbar-thumb {
background: transparent;
border-radius: 4px
}
header:hover::-webkit-scrollbar-thumb {
background: hsla(0, 0%, 53.3%, .4)
}
header:hover::-webkit-scrollbar-track {
background: hsla(0, 0%, 53.3%, .1)
}
}
/* Upvote button */
.upvote-button svg {
display: none;
}
.upvote-button {
font-size: var(--size-step-1);
flex-direction: row !important;
gap: .2em;
}
.upvote-button::before,
.upvote-button[disabled]::before {
font-size: inherit;
color: var(--text-color);
}
.upvote-button::before {
content: "👍";
margin-bottom: .2rem;
}
.upvote-button[disabled]::before {
opacity: .5;
}
.upvote-button[disabled] {
cursor: default;
}
.upvote-button.upvoted {
color: var(--text-color) !important;
}
.upvote-count {
margin-bottom: -7px;
}
:has(.no-upvote) #upvote-form {
display: none !important;
}
/** External link identifier **/
a[href^=http]:not([href*="w3teal.bearblog.dev"]):not(.no-indicator) {
padding-inline-end: .8em;
}
a[href^="http"]:not([href*="w3teal.bearblog.dev"]):not(.no-indicator)::after {
content: "(external link)";
display: inline-block;
position: absolute;
overflow: hidden;
inline-size: 1em;
block-size: 1em;
text-indent: 1em;
white-space: nowrap;
background: center / 60% no-repeat var(--indicator);
}
/** Hide collection tag **/
.tags a[href$="posts"],
.tags a[href$="status"] {
display: none;
}
.tags a[href$="en"]::before {
content: var(--en-flag);
display: inline-block;
width: var(--size-step-2);
height: var(--size-step-0);
margin-right: .3em;
}
/** Status **/
.status ul.embedded.blog-posts>li>a {
visibility: hidden;
font-size: 0px;
text-decoration: none;
}
.status ul.embedded.blog-posts>li div p:first-child {
margin: .25em 0;
}