116 lines
2.1 KiB
CSS
116 lines
2.1 KiB
CSS
/* Font stuff */
|
|
@import url('https://fonts.googleapis.com/css?family=Abel:700|Abel:400');
|
|
body {
|
|
font-family: 'Abel';
|
|
font-weight: 400;
|
|
}
|
|
h1, h2, h3, h4, h5 {
|
|
font-family: 'Abel';
|
|
font-weight: 700;
|
|
}
|
|
html {font-size: 100%;} /* 16px */
|
|
h1 {font-size: 4.210rem; /* 67.36px */}
|
|
h2 {font-size: 3.158rem; /* 50.56px */}
|
|
h3 {font-size: 2.369rem; /* 37.92px */}
|
|
h4 {font-size: 1.777rem; /* 28.48px */}
|
|
h5 {font-size: 1.333rem; /* 21.28px */}
|
|
small {font-size: 0.750rem; /* 12px */}
|
|
|
|
:root {
|
|
--text: #b4bfc0;
|
|
--background: #010202;
|
|
--primary: #e3eff2;
|
|
--secondary: #00bcd1;
|
|
--accent: #8c240d;
|
|
--paper: #050606;
|
|
}
|
|
|
|
/* Custom CSS */
|
|
body {
|
|
color-scheme: dark;
|
|
background-color: var(--background);
|
|
accent-color: var(--accent);
|
|
caret-color: var(--text);
|
|
color: var(--text);
|
|
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
a:link, a:active{
|
|
color: var(--primary);
|
|
}
|
|
a:visited {
|
|
color: var(--accent);
|
|
}
|
|
a:hover {
|
|
color: var(--secondary);
|
|
}
|
|
|
|
.header {
|
|
background-color: var(--paper);
|
|
padding: 1rem;
|
|
}
|
|
|
|
.homepage-header {
|
|
background-color: var(--paper);
|
|
padding: 2rem;
|
|
}
|
|
|
|
footer {
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
padding: .5rem;
|
|
background: var(--paper);
|
|
color: var(--text);
|
|
font-weight: var(--text);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 0.2rem;
|
|
}
|
|
|
|
.flex-wrap-container {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1000px;
|
|
min-width: 800px;
|
|
padding: 10px;
|
|
background-color: var(--paper);
|
|
margin: 10px auto;
|
|
}
|
|
|
|
.flex-wrap-container .container {
|
|
max-width: 800px;
|
|
}
|
|
|
|
.summary {
|
|
z-index: 1;
|
|
max-width: 500px;
|
|
}
|
|
|
|
#article-content img {
|
|
max-width: 100%;
|
|
max-height: 50vh;
|
|
height: auto;
|
|
display: block;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
div.summary__img_container {
|
|
position:relative; top:0; left:0; width:600px; height:250px;
|
|
z-index: 0;
|
|
}
|
|
|
|
img.summary__img {
|
|
position:absolute; top:0; right:0; width:600px; height:100%;
|
|
-webkit-mask-image:-webkit-gradient(linear, right top, left top, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
|
|
mask-image: linear-gradient(to left, rgba(0,0,0,1), rgba(0,0,0,0));
|
|
}
|