Martyn's notes Bear Blog theme
So the theme is still in progress. It is not done yet. Compared to the CSS I'm actually using, this one doesn't have styles for things like Material Symbols I'm using. I just worked on the default theme and I haven't touched some parts yet. So, this is what I've done so far. I recommend 1920px x 350px or 800 x 145 ratio images for page cover photos. You can use class="cover-photo" for that. And also, you can use class="responsive-profile-image" for something like my profile picture in my about page. There are a lot of variables for colors. I am still trying to figure out some stuffs. It is quite a mess actually. I am posting this only because I wanna see some posts already xD.
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
:root {
--width: 700px;
--heading-font: "Inter", sans-serif;
--heading-font-weight: 700;
--paragraph-font: "Inter", sans-serif;
--paragraph-font-scale: 100%;
--paragraph-font-weight: 400;
--body-background-color: #1a1918;
--main-background-color: #242322;
--heading-color: #f7f1ee;
--text-color: #f2ebe8;
--general-color: #f2ebe8;
--accent-color: #1f60cf;
--secondary-accent-color: #375280;
--link-color: #73a7ff;
--visited-color: #8b6fcb;
--code-color: black;
--code-background-color: #e3e8ff;
--blockquote-color: #222;
}
body {
margin: auto;
padding: 20px 0;
max-width: var(--width);
font-family: var(--paragraph-font);
font-size: var(--paragraph-font-scale);
font-weight: var(--paragraph-font-weight);
text-align: left;
color: var(--text-color);
background-color: var(--body-background-color);
word-wrap: break-word;
overflow-wrap: break-word;
line-height: 1;
}
/* --- HEADER --- */
header {
background-color: var(--main-background-color);
padding: 20px 30px 10px;
border-radius: 15px;
box-shadow: 1px 1px 5px #141414;
margin-bottom: 10px;
}
a.title {
text-decoration: none;
}
a.title h1 {
color: var(--heading-color);
font-weight: 750;
font-size: 1.7em;
margin: 0;
line-height: 1.2;
}
nav a {
color: var(--link-color);
margin-right: 30px;
font-weight: 600;
cursor: pointer;
text-decoration: solid underline var(--secondary-accent-color) 1.5px;
text-underline-offset: 2.5px;
}
/* ----- Header End ------ */
/* --- MAIN --- */
main {
background-color: var(--main-background-color);
padding: 20px 30px;
border-radius: 15px;
box-shadow: 1px 1px 5px #141414;
margin: 5px 0 0 0;
line-height: 1.65;
position: relative;
}
main img.cover-photo{
position: absolute;
top: 0px;
left: 0px;
width: 800px;
border-radius: 15px 15px 0 0;
height: auto;
}
img + h1 {
margin: 155px 0 0;
}
img.responsive-profile-image {
max-width: 200px;
display: block;
margin: 15px 0;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--heading-font);
font-weight: var(--heading-font-weight);
color: var(--heading-color);
margin: 1em 0 0.5em 0;
line-height: 1.2;
}
h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p {
margin: 0.5em 0 1em;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
}
h3 {
font-size: 1.3em;
}
h4 {
font-size: 1.2em;
}
h5 {
font-size: 1.1em;
}
h6 {
font-size: 1em;
}
p {
font-size: 1.1em;
}
a {
color: var(--link-color);
cursor: pointer;
text-decoration: solid underline var(--secondary-accent-color) 1.5px;
text-underline-offset: 2.5px;
}
a:hover {
color: var(--text-color);
text-decoration: solid underline #727882 1.5px;
text-underline-offset: 2.5px;
}
strong, b {
color: var(--heading-color);
}
button {
margin: 0;
cursor: pointer;
}
time {
font-family: monospace;
font-style: normal;
font-size: 15px;
}
table {
width: 100%;
}
hr {
border: 0;
border-top: 1px solid;
margin-top: 10px 0;
}
img {
max-width: 100%;
}
code {
font-family: monospace;
padding: 2px;
background-color: var(--code-background-color);
color: black;
border-radius: 3px;
}
blockquote {
border-left: 1px solid #999;
color: var(--code-color);
padding-left: 20px;
font-style: italic;
}
footer {
padding: 25px 0;
text-align: center;
}
.title:hover {
text-decoration: none;
}
.title h1 {
font-size: 1.5em;
}
.inline {
width: auto !important;
}
.highlight, .code {
padding: 1px 15px;
background-color: var(--code-background-color);
color: black;
border-radius: 3px;
margin-block-start: 1em;
margin-block-end: 1em;
overflow-x: auto;
}
/* ----- Main End ----- */
/* --- BLOG POST LIST --- */
ul.blog-posts {
list-style-type: none;
padding: unset;
}
ul.blog-posts li {
display: flex;
}
ul.blog-posts li span {
flex: 0 0 130px;
}
ul.blog-posts li a:visited {
color: var(--visited-color);
}
/* ----- Blog Post List End ----- */
/* --- RESPONSIVE --- */
@media only screen and (max-width: 600px) {
.responsive-profile-image {
width: 80%;
margin: 15px auto;
}
body {
padding: 15px;
}
main {
padding: 30px 20px;
}
main img.cover-photo {
position: absolute;
top: 0;
left: 0;
height: 145px;
border-radius: 15px 15px 0 0;
object-fit: cover;
object-position: center;
}
}