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.
145 lines
2.1 KiB
SCSS
145 lines
2.1 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;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: block;
|
|
background-color: $highlight;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
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%;
|
|
}
|
|
}
|
|
|