190 lines
3.5 KiB
CSS
190 lines
3.5 KiB
CSS
/*
|
|
The CSS in this style tag is based off of Bear Blog's default CSS.
|
|
https://github.com/HermanMartinus/bearblog/blob/297026a877bc2ab2b3bdfbd6b9f7961c350917dd/templates/styles/blog/default.css
|
|
License MIT: https://github.com/HermanMartinus/bearblog/blob/master/LICENSE.md
|
|
*/
|
|
|
|
:root {
|
|
--accent: #2337ff;
|
|
--accent-dark: #000d8a;
|
|
--black: 15, 18, 25;
|
|
--gray: 96, 115, 159;
|
|
--gray-light: 229, 233, 240;
|
|
--gray-dark: 34, 41, 57;
|
|
--gray-gradient: rgba(var(--gray-light), 50%), #fff;
|
|
--box-shadow: 0 2px 6px rgba(var(--gray), 25%), 0 8px 24px rgba(var(--gray), 33%),
|
|
0 16px 32px rgba(var(--gray), 33%);
|
|
|
|
/* TODO: Here we start our custom CSS Remove above later */
|
|
--breakpoint-mobile: 767px;
|
|
--breakpoint-tablet: 1200px;
|
|
|
|
--color-text-primary: #ffffff;
|
|
--color-text-secondary: rgba(255, 255, 255, 60%);
|
|
--color-accent-primary: #c16b6b;
|
|
--color-accent-secondary: #b46f8e;
|
|
|
|
--gutter: 24px;
|
|
}
|
|
|
|
/* typography.css */
|
|
|
|
* {
|
|
font-family: "proxima-nova", sans-serif;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
a,
|
|
p,
|
|
span {
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
h1 {
|
|
font-weight: 700;
|
|
font-size: 6.25rem; /* 100px ÷ 16 */
|
|
}
|
|
|
|
h2 {
|
|
font-weight: 700;
|
|
font-size: 3.125rem; /* 50px ÷ 16 */
|
|
}
|
|
|
|
h3 {
|
|
font-weight: 600;
|
|
font-size: 1.5625rem; /* 25px ÷ 16 */
|
|
}
|
|
|
|
h4 {
|
|
font-weight: 900;
|
|
font-size: 2.1875rem; /* 35px ÷ 16 */
|
|
}
|
|
|
|
h5 {
|
|
font-weight: 700;
|
|
font-size: 1.875rem; /* 30px ÷ 16 */
|
|
}
|
|
|
|
h6 {
|
|
font-size: 1.125rem; /* 18px ÷ 16 */
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05rem;
|
|
font-weight: normal;
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
p {
|
|
font-weight: 400;
|
|
font-size: 1.125rem; /* 18px ÷ 16 */
|
|
}
|
|
|
|
.gray {
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
h1 {
|
|
font-weight: 800;
|
|
font-size: 2.5rem; /* 40px ÷ 16 */
|
|
line-height: normal;
|
|
}
|
|
|
|
h2 {
|
|
font-weight: 700;
|
|
font-size: 1.875rem; /* 30px ÷ 16 */
|
|
line-height: normal;
|
|
}
|
|
|
|
h3 {
|
|
font-weight: 700;
|
|
font-size: 1.375rem; /* 22px ÷ 16 */
|
|
line-height: normal;
|
|
}
|
|
|
|
p {
|
|
line-height: normal;
|
|
font-size: 1rem; /* 16px ÷ 16 */
|
|
}
|
|
}
|
|
|
|
/* TODO: Remove above code later */
|
|
body {
|
|
background-color: #111111;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
.container {
|
|
display: grid;
|
|
grid-template-columns: repeat(12, minmax(0, 96px));
|
|
gap: var(--gutter);
|
|
margin: 0 auto;
|
|
width: 100%;
|
|
max-width: 1224px;
|
|
grid-column: 1 / 13;
|
|
padding: 0 20px;
|
|
}
|
|
|
|
.container > * {
|
|
grid-column: 1 / 13;
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.container {
|
|
grid-template-columns: repeat(6, 1fr);
|
|
max-width: 100%;
|
|
width: auto;
|
|
}
|
|
|
|
.container > * {
|
|
grid-column: 1 / 7;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.container-mobile {
|
|
padding: 0 20px;
|
|
display: grid;
|
|
grid-template-columns: repeat(6, 1fr);
|
|
max-width: 100%;
|
|
width: auto;
|
|
}
|
|
|
|
.container-mobile > * {
|
|
grid-column: 1 / 7;
|
|
}
|
|
}
|
|
|
|
section.container {
|
|
padding-right: 20px;
|
|
padding-left: 20px;
|
|
}
|
|
|
|
div.container {
|
|
padding-right: 0;
|
|
padding-left: 0;
|
|
}
|
|
|
|
.main-page {
|
|
overflow-x: hidden;
|
|
position: relative;
|
|
|
|
.intro-bg {
|
|
background: radial-gradient(
|
|
100% 100% at 0% 0%,
|
|
rgba(226, 90, 146, 0.15) 0%,
|
|
rgba(141, 162, 243, 0.063) 35.82%,
|
|
rgba(23, 23, 23, 0) 100%
|
|
);
|
|
}
|
|
}
|