210 lines
4 KiB
SCSS
210 lines
4 KiB
SCSS
@charset "UTF-8";
|
|
/**
|
|
* Extend or override Bulma's components,
|
|
* ../../node_modules/bulma/sass/components
|
|
*/
|
|
|
|
@use "variables" as *;
|
|
@use "../../node_modules/bulma/sass/utilities/mixins" as *;
|
|
@use "../../node_modules/bulma/sass/utilities/initial-variables" as *;
|
|
|
|
/**
|
|
* Make menu items slightly less far apart so we never entirely lose
|
|
* 'Community' on mid-size screens.
|
|
* See https://gitlab.com/drutopia/octavia/issues/52
|
|
*/
|
|
.navbar-item, .navbar-link {
|
|
padding-left: .75rem;
|
|
padding-right: .75rem;
|
|
@include from($widescreen) {
|
|
padding-left: 1rem;
|
|
padding-right: 1rem;
|
|
}
|
|
}
|
|
|
|
.site-title {
|
|
display: inline-block;
|
|
width: 4.6em;
|
|
word-break: keep-all; // Shouldn't be needed but Chrome needs it.
|
|
font-size: 37px;
|
|
line-height: 38px;
|
|
}
|
|
|
|
.geo-logo-name {
|
|
display: flex !important;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
.logo, .sitename {
|
|
display: table-cell;
|
|
}
|
|
.logo a {
|
|
display: block;
|
|
// width: 199px;
|
|
}
|
|
.logo img {
|
|
height: 7.5rem;
|
|
}
|
|
@include from($tablet) {
|
|
width: fit-content;
|
|
}
|
|
@include until($mini) {
|
|
justify-content: flex-end;
|
|
}
|
|
}
|
|
|
|
@include until($desktop) {
|
|
.search-bar {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
// Mostly to reduce the impact of the ridiculous (mostly on Chrome) ghost mobile horizontal scroll.
|
|
.search-icon {
|
|
padding-right: 1rem;
|
|
}
|
|
|
|
#navbar-menu {
|
|
display: flex;
|
|
// More modern Bulma has is-flex-wrap-wrap as a class for this.
|
|
flex-wrap: wrap;
|
|
@include until($tablet) {
|
|
width: 100%;
|
|
justify-content: space-around;
|
|
}
|
|
@include from($desktop) {
|
|
flex-wrap: nowrap;
|
|
margin-right: -1rem;
|
|
}
|
|
}
|
|
|
|
|
|
/* Featured images on article pages */
|
|
.featured-image figure.image {
|
|
width: 100vw;
|
|
position: relative;
|
|
left: 50%;
|
|
right: 50%;
|
|
margin-left: -50vw;
|
|
margin-right: -50vw;
|
|
max-height: 27rem;
|
|
overflow-y: hidden;
|
|
img {
|
|
width: 100%;
|
|
}
|
|
@include from($widescreen) {
|
|
max-height: 36rem;
|
|
}
|
|
}
|
|
|
|
/* Hero image in hero block */
|
|
.footer {
|
|
.paragraph {
|
|
margin-bottom: 0;
|
|
}
|
|
.has-background-image.hero.is-medium {
|
|
background-color: black;
|
|
width: 100vw;
|
|
position: relative;
|
|
left: 50%;
|
|
right: 50%;
|
|
margin-left: -50vw;
|
|
margin-right: -50vw;
|
|
height: 200px;
|
|
@include from ($tablet) {
|
|
height: 400px;
|
|
}
|
|
img {
|
|
opacity: .7;
|
|
}
|
|
.hero-body {
|
|
padding: 3rem 1.5rem;
|
|
@include from ($tablet) {
|
|
padding-top: 9rem;
|
|
padding-bottom: 7rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.has-background-image.hero.is-medium {
|
|
img {
|
|
height: 200px;
|
|
max-height: 400px;
|
|
object-fit: cover;
|
|
position: absolute;
|
|
@include from($tablet) {
|
|
height: auto;
|
|
}
|
|
}
|
|
.hero-body {
|
|
padding: 5.5rem 1rem;
|
|
@include from ($tablet) {
|
|
padding-top: 12rem;
|
|
padding-bottom: 12rem;
|
|
}
|
|
.container.is-fluid {
|
|
margin-left: 32px;
|
|
margin-right: 32px;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/* Slim down section vertical padding a bit.*/
|
|
.section {
|
|
padding: 0.5rem 1.5rem 1.5rem;
|
|
}
|
|
|
|
/* Give titles, from which we removed the Hero classes, the same padding as sections. */
|
|
.block-page-title-block {
|
|
padding: 1rem 1.5rem;
|
|
}
|
|
|
|
/**
|
|
* Give enough of a background around text in the footer that it is legible on
|
|
* any part of the grassy field image used as the background.
|
|
*
|
|
* The link and changed text are not dark so we need a pretty high opacity.
|
|
*/
|
|
.footer .views-field {
|
|
.field-content {
|
|
background-color: rgba($offwhite, 0.9);
|
|
padding: 0.2em;
|
|
border-radius: 0.3em;
|
|
}
|
|
/* We're not displaying this at all anymore
|
|
&.views-field-changed {
|
|
font-size: 0.8em;
|
|
color: $green-gray;
|
|
margin-top: 0.2rem;
|
|
margin-bottom: 0.4rem;
|
|
text-align: right;
|
|
}
|
|
*/
|
|
}
|
|
|
|
.page-title .title > span {
|
|
background-color: rgba($offwhite, 0.66);
|
|
padding: 0.4em 0.3em 0.3em 0.3em;
|
|
border-radius: 0.4em;
|
|
line-height: 1.8;
|
|
}
|
|
|
|
.block--footer_menus {
|
|
background-color: rgba($offwhite, 0.9);
|
|
padding: 0.2em;
|
|
border-radius: 0.3em;
|
|
}
|
|
|
|
@include until($tablet) {
|
|
.comment-section {
|
|
|
|
article {
|
|
display: block;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.content p:not(:last-child) {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|