mirror of
https://github.com/PretendoNetwork/website.git
synced 2025-04-02 11:11:50 -04:00
74d1fb8182
blog post no longer scrolls to far when using table of contents to navigate, previously the header would hide part of selected section (when viewport wider than 900px), forcing user to scroll back up
236 lines
3.8 KiB
CSS
236 lines
3.8 KiB
CSS
.wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 95%;
|
|
min-height: 100vh;
|
|
}
|
|
header {
|
|
width: 100%;
|
|
}
|
|
|
|
.card-wrap {
|
|
width: 100%;
|
|
}
|
|
|
|
.blog-card {
|
|
padding: 60px;
|
|
max-width: 1100px;
|
|
margin: 50px auto;
|
|
color: var(--text-shade-1);
|
|
}
|
|
|
|
.blog-card h1,
|
|
.blog-card h2,
|
|
.blog-card h3,
|
|
.blog-card h4,
|
|
.blog-card h5,
|
|
.blog-card h6 {
|
|
margin: 40px 0 10px;
|
|
color: var(--text-shade-3);
|
|
}
|
|
|
|
.blog-card strong {
|
|
color: var(--text-shade-3);
|
|
}
|
|
|
|
.blog-card a,
|
|
.blog-card a * {
|
|
color: var(--accent-shade-1);
|
|
text-decoration: none;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.blog-card a:hover,
|
|
.blog-card a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.blog-card del {
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
.blog-card .title {
|
|
margin: 0;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.blog-card .pub-info {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: left;
|
|
margin-top: auto;
|
|
margin-bottom: 30px;
|
|
}
|
|
.blog-card .pub-info .date {
|
|
font-weight: bold;
|
|
color: var(--text-shade-3);
|
|
}
|
|
.blog-card .pub-info > * {
|
|
margin-right: 0.5em;
|
|
margin-top: 0.2em;
|
|
}
|
|
.blog-card .profile {
|
|
display: inline-grid;
|
|
grid-template-columns: 30px auto;
|
|
grid-gap: 10px;
|
|
font-weight: bold;
|
|
color: var(--text-shade-3);
|
|
align-items: center;
|
|
height: 32px;
|
|
margin-right: 0.3em;
|
|
}
|
|
.blog-card .profile img {
|
|
margin: 0;
|
|
border-radius: 4px;
|
|
border: 1px solid var(--border);
|
|
max-width: 100%;
|
|
}
|
|
|
|
.blog-card p,
|
|
.post-info {
|
|
color: var(--text-shade-1);
|
|
}
|
|
|
|
.blog-card img {
|
|
max-width: 100%;
|
|
max-height: 800px;
|
|
margin: 10px auto;
|
|
display: block;
|
|
border-radius: 4px;
|
|
border: 1px solid var(--border);
|
|
}
|
|
.blog-card img.emoji {
|
|
display: inline;
|
|
margin: 0;
|
|
border: none;
|
|
}
|
|
|
|
.blog-card video {
|
|
width: 100%;
|
|
border-radius: 4px;
|
|
border: 1px solid var(--border);
|
|
}
|
|
|
|
.blog-card iframe {
|
|
width: 100%;
|
|
aspect-ratio: 16/9;
|
|
border-radius: 4px;
|
|
border: 1px solid var(--border);
|
|
}
|
|
/* Fallback for aspect-ratio since it's unsupported by some browsers (looking at you Safari) */
|
|
@supports not (aspect-ratio: 16/9) {
|
|
.blog-card .aspectratio-fallback {
|
|
position: relative;
|
|
height: 0;
|
|
padding-top: 56.25%;
|
|
}
|
|
.blog-card iframe {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
border: 0;
|
|
}
|
|
}
|
|
/* Some twitter iframe specific stuff */
|
|
.blog-card .twitter-tweet {
|
|
margin: auto;
|
|
}
|
|
.blog-card .twitter-tweet iframe {
|
|
border: none; /* Fixes the double border */
|
|
}
|
|
|
|
.blog-card table {
|
|
border-radius: 4px;
|
|
border-collapse: collapse;
|
|
background: var(--bg-shade-3);
|
|
margin-bottom: 30px;
|
|
overflow: hidden;
|
|
}
|
|
.blog-card table th {
|
|
padding: 8px 12px;
|
|
background: var(--bg-shade-4);
|
|
color: var(--text-shade-3);
|
|
}
|
|
.blog-card table td {
|
|
padding: 8px 12px;
|
|
vertical-align: top;
|
|
border-radius: inherit;
|
|
}
|
|
.blog-card table tr:nth-child(even) {
|
|
background: var(--bg-shade-2);
|
|
}
|
|
|
|
.blog-card pre code {
|
|
border-radius: 4px;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.blog-card input[type="checkbox"] {
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
display: inline-block;
|
|
background: var(--bg-shade-3);
|
|
padding: 12px;
|
|
margin: 4px;
|
|
border-radius: 4px;
|
|
vertical-align: -60%;
|
|
}
|
|
.blog-card input[type="checkbox"]:checked {
|
|
content: "checkboxtest";
|
|
background: no-repeat center/contain url(../images/check.svg),
|
|
var(--bg-shade-3);
|
|
}
|
|
|
|
.blog-card hr {
|
|
border: 1px solid var(--text-shade-1);
|
|
margin: 30px 0;
|
|
}
|
|
|
|
.blog-card blockquote {
|
|
border-left: 2px solid var(--text-shade-1);
|
|
padding: 8px 24px;
|
|
margin: 0;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
@media screen and (min-width: 901px) {
|
|
.blog-card h1,
|
|
.blog-card h2,
|
|
.blog-card h3,
|
|
.blog-card h4,
|
|
.blog-card h5,
|
|
.blog-card h6 {
|
|
scroll-margin-top: 110px;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 800px) {
|
|
.blog-card {
|
|
padding: 40px;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 600px) {
|
|
.wrapper {
|
|
width: 100%;
|
|
}
|
|
|
|
header {
|
|
width: 90%;
|
|
margin: 35px auto;
|
|
}
|
|
|
|
.blog-card {
|
|
padding: 40px 5vw;
|
|
border-radius: 0;
|
|
margin-top: 0;
|
|
}
|
|
|
|
footer {
|
|
width: 95%;
|
|
margin: auto auto 40px;
|
|
}
|
|
}
|