personal_site/_sass/blogroll.scss
2023-10-13 15:50:00 +02:00

58 lines
1.0 KiB
SCSS

$image_size: clamp(5em, 25vw, 8em);
$left_pad: calc(clamp(5em, 25vw, 8em) + 1em);
h2.blogroll-title {
a {
text-decoration: none;
}
}
hr.blogroll {
border: 0px solid rgba(128, 128, 128, 0.2);
width: 66%;
margin-top: 1em;
margin-bottom: 1em;
}
article.blogroll {
padding-bottom: 0px;
display: flex;
h2 {margin-top: 0;
font-size: 1.3em;
}
time {
display: block;
margin-bottom: 0.2em;
font-size: 14px;
}
figure {
margin-right: 1em;
width: $image_size;
height: 100%;
flex-shrink: 0;
margin: 0 1em 0 0;
padding: 0;
}
img {
margin: 0;
max-width: $image_size;
max-height: $image_size;
border-radius: 0.5em;
}
}
@media
only screen and (max-width: $horizontal_breakpoint),
only screen and (max-height: $vertical_breakpoint)
{
hr.blogroll {border-width: 1px}
article.blogroll {
h2 {
font-size: 1.2em;
}
}
}