elf-notes/sass/main.scss

109 lines
2.2 KiB
SCSS
Raw Normal View History

@import "./base.scss";
@import "components/code";
:root {
font-size: var(--default-font-size);
font-family: "Nunito", sans-serif;
}
body {
padding-top: 3.625rem;
font-size: var(--default-font-size);
font-family: "Nunito", sans-serif;
font-weight: 400;
}
header.navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: var(--background-color, #ffffff);
.identity {
margin-right: var(--space-s);
font-size: var(--step-2);
padding: var(--space-3xs) 0 var(--space-3xs) 0;
font-weight: 700;
white-space: nowrap;
color: var(--text-color, #1f000d);
text-decoration: none;
}
}
article.text-article {
max-width: 32em;
}
.container {
padding: 0 var(--space-xs-m) 0 var(--space-xs-m);
margin-right: auto;
margin-left: auto;
}
// Left sidebar
.topic-list {
margin-top: var(--space-s);
@media screen and (min-width: 541px) {
margin-top: var(--space-l);
}
> h2 {
text-align: center;
}
.topic-cards {
margin-top: 1rem;
@media screen and (min-width: 541px) {
margin-top: 2rem;
}
display: flex;
flex-direction: row;
flex-wrap: wrap;
flex-gap: 1rem;
.topic-card {
border-radius: 0.5rem;
border: 1px solid var(--border-color, #dadce0);
transition: all 0.18s ease;
padding: 0.5rem;
flex: 0 0 100%;
> h3 {
text-align: center;
a {
color: var(--primary-color, #520022);
text-decoration: none;
&:hover {
color: var(--text-color, #1f000d);
}
}
}
@media screen and (min-width: 361px) {
flex: 0 0 50%;
}
@media screen and (min-width: 541px) {
flex: 0 0 33%;
}
@media screen and (min-width: 721px) {
flex: 0 0 25%;
}
}
}
}
dl {
margin-left: var(--space-m);
dt {
font-weight: 500;
}
dd {
margin-left: var(--space-m);
}
}