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.
 
 

83 lines
1.4 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: 'Helvetica';
font-size: 1.1rem;
}
header {
background-color: $top-bar;
box-shadow: 0px 5px 10px black;
nav {
@include screen-max(840px){text-align: center;}
img { max-width: 300px; }
a {
margin-right: 12px;
font-weight: bold;
text-decoration: none;
color: $font-color-alternate;
&:visited {color: $font-color-alternate;}
}
}
}
header, main, section, nav {padding: 0 16px;}
main, section, nav {max-width: 920px; margin: auto;}
main img {max-width: 100%}
footer {text-align: center;}
a {
color: $link-color;
&:visited, &:hover { color: $link-color-visited; }
}
img.featured {
display: block;
border-radius: 8px;
margin: 12px auto;
max-height: 888px;
object-fit: cover;
aspect-ratio: 4/3;
}
.left-to-right {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: space-evenly;
align-items: end;
}
.align-center {
align-items: center;
}
section.article-list {
margin: 8px 0px;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 40px;
}
.fill-wh {
width: 100%;
height: 100%
}