You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

151 lines
2.2 KiB
SCSS

@import "https://cdn.jsdelivr.net/npm/remixicon@3.2.0/fonts/remixicon.css";
@import "_common.scss";
body {
font-family: "Noto Sans", "Verdana", sans-serif;
background-color: $background;
color: $text;
}
img {
image-orientation: from-image;
}
a {
text-decoration-line: underline;
text-decoration-color: $secondary;
text-decoration-thickness: .125em;
color: $text;
}
footer.footer {
position: fixed;
bottom: 0;
left:0;
margin: 0.5em;
padding: 0 0.5em;
overflow: hidden;
background-color: $highlight;
color: grey;
width: calc(100% - 2em);
.footer-item {
display: block;
padding: 0.5em 1em;
}
a {
color: grey;
text-decoration: none;
}
}
.container {
padding-top: 3em;
padding-bottom: 2em;
}
.badge {
padding: 0.25em;
display: inline-block;
border-radius: 0.5em;
background-color: $highlight;
color: $highlight-text;
.icon, span {
float: left;
padding-right: 0.25em;
margin: auto;
line-height: 1;
}
margin: 0.25em;
}
.figure {
width: 100%;
margin: auto;
border-radius: .5em;
background-color: $highlight;
color: $highlight-text;
padding-bottom: 0.125em;
a {
color: $highlight-text;
}
figcaption {
margin: 0 0.25em 0.25em;
}
img {
border-radius: .5em;
width: 100%;
}
}
.card {
width: 50%;
margin: auto;
}
ul.navbar {
list-style-type: none;
position: fixed;
margin: 0;
padding: 0;
display: block;
background-color: $highlight;
overflow: hidden;
width: calc(100% - 1em);
color: $highlight-text;
li {
display: inline;
float: left;
a {
display: block;
padding: 1em 2em;
text-decoration: none;
font-weight: bold;
color: $highlight-text;
&:hover {
background-color: darken($highlight, 5%);
}
}
}
li.selected a {
background-color: lighten($highlight, 5%);
}
}
.content {
margin: auto;
width: 75%;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
@media (max-width: 500px) {
.card, .content {
width: 100%;
}
}
@media (min-width: 500px) and (max-width: 1000px){
.card {
width: 75%;
}
.content {
width: 80%;
}
}