The current Hugo theme for the beetbox.io website
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

144 lines
2.0 KiB

@import 'colors.scss';
@import 'cards.scss';
@import 'code.scss';
@import 'fonts.scss';
@mixin screen-max($max) {
@media (max-width: $max - 1) {
@content
}
}
body {
background-color: $background-color;
color: $font-color;
margin: 0px;
overflow-y: scroll;
font-family: 'Source Sans Pro';
}
header {
background-color: $top-bar;
box-shadow: 0px 5px 10px black;
.spread {
gap: 24px;
display: flex;
align-items: flex-end;
justify-content: space-between;
@include screen-max(1000px){justify-content: center;}
ul {
margin: 0px;
padding: 0px;
list-style-type: none;
a {
text-align: center;
margin: auto;
font-weight: bold;
text-decoration: none;
color: $font-color-alternate;
}
}
}
nav {
max-width: 1400px;
margin: 0px auto;
padding: 8px;
flex-wrap: wrap;
a {
@include screen-max(1000px){flex-basis: 100%;}
}
img {
max-width: 300px;
display: block;
@include screen-max(1000px){margin: auto; flex-basis: 100%;}
}
}
}
a {
color: $link-color;
2 years ago
&:visited, &:hover {
color: $link-color-visited;
2 years ago
}
}
main {
max-width: 820px;
margin: auto;
@include screen-max(840px){padding: 0px 16px;}
img {
width: 100%;
}
}
.center-text {
text-align: center;
flex-basis: 100%;
}
a, p, li, h2 {
font-size: 1.25rem;
}
img {
object-fit: cover;
}
img.featured {
border-radius: 8px;
max-height: 500px;
max-width: 100%;
display: block;
}
.margin {
margin: 12px auto;
}
.small-text {
font-size: 1rem;
}
.large-text {
font-size: 2rem;
}
.left-to-right {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: space-evenly;
align-items: end;
}
.align-center {
align-items: center;
}
section {
max-width: 1000px;
margin: 16px auto;
padding: 8px;
}
section.article-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 40px;
}
.center-box {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.fill-wh {
width: 100%;
height: 100%
}