site/sass/style.scss
Simon Bruder 4817f92495
Make navbar handle longer descriptions better
This is achieved by using a smaller font and enabling hyphenation (where
possible) and justification.
2021-11-30 21:32:18 +01:00

93 lines
1.6 KiB
SCSS

$navbar-breakpoint: 640px;
@import "../vendor/bulma/sass/utilities/_all";
@import "../vendor/bulma/sass/base/_all";
@import "../vendor/bulma/sass/components/navbar";
@import "../vendor/bulma/sass/components/pagination";
@import "../vendor/bulma/sass/elements/button";
@import "../vendor/bulma/sass/elements/container";
@import "../vendor/bulma/sass/elements/content";
@import "../vendor/bulma/sass/elements/title";
@import "../vendor/bulma/sass/grid/columns";
@import "../vendor/bulma/sass/helpers/color";
@import "../vendor/bulma/sass/helpers/spacing";
@import "../vendor/bulma/sass/helpers/typography";
@import "../vendor/bulma/sass/layout/footer";
#page-wrapper {
@include desktop {
margin-top: 2rem;
margin-bottom: 2rem;
}
max-width: 1000px;
}
#banner {
display: block;
}
#main-wrapper {
padding: 2rem 7.6%;
}
#navbar-description {
// Better layout (small column)
// only works with Firefox, though
hyphens: auto;
text-align: justify;
}
nav {
padding: 0 7.6%;
}
aside {
h3 {
margin-bottom: .5rem;
text-transform: uppercase;
font-size: .75rem;
}
}
h2 a {
color: black;
&:hover {
color: $link;
}
}
.post-meta {
font-size: 0.75rem;
}
// noscript fallbacks
.podlove-player > audio {
width: 100%;
}
.noscript-subscribe-button {
width: 100%;
border: none;
font-size: 16px;
height: 54px;
margin-bottom: 4px;
cursor: pointer;
font-family: "Roboto", sans-serif;
font-weight: 500;
letter-spacing: 0.5px;
text-transform: uppercase;
// default colours from podlove, not customisable
background-color: #2b8ac6;
color: #dfeef8;
&:hover {
background-color: #226d9c;
color: #b5d8ef;
}
}