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.
 
 

147 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: $background-color;
}
}
}
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: $beetbox-blue;
}
a:visited, a:hover {
color: $visited-link;
}
.content-wrapper, .article-meta {
max-width: 820px;
margin: auto;
padding: 4px;
img {
width: 100%;
}
}
.center-text {
text-align: center;
flex-basis: 100%;
}
.break {
flex-basis: 100%;
height: 0px;
}
a, p, span, li, h2, code {
font-size: 1.25rem;
}
main > h2 {
font-size: 1.3rem;
}
p {
text-align: justify;
}
img {
object-fit: cover;
}
.small-text {
font-size: 1rem;
}
.article-meta {
display: flex;
justify-content: center;
align-items: center;
gap: 4px 8px;
flex-wrap: wrap;
h1 {
font-size: 2rem;
}
img {
border-radius: 8px;
}
img.large-image {
width: 100%;
max-height: 500px;
}
}
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%
}