ccchh-website/themes/ccchh/assets/sass/main.scss

165 lines
2.4 KiB
SCSS

$roomstate_color_unknown: #dda218;
$roomstate_color_open: var(--ins-color);
$roomstate_color_closed: var(--del-color);
:root {
--spacing: 0.7rem;
}
// General Customizations
header {
margin-bottom: 3rem;
h1 {
margin-bottom: 0;
}
h2 {
margin-bottom: 0;
}
}
body>footer {
padding-top: var(--spacing);
padding-bottom: var(--spacing);
}
body>main {
padding-bottom: var(--spacing);
}
.li-comma {
&::after {
content: ", ";
}
&:last-child::after {
content: "";
}
}
.li-space {
&::after {
content: "";
padding-right: 1rem;
}
&:last-child::after {
padding-right: 0;
}
}
.morelink {
margin-top: calc(var(--typography-spacing-vertical) * -1);
}
.pagination {
display: flex;
justify-content: center;
li {
list-style: none;
a {
border-radius: 0;
}
&:first-child>a {
border-top-left-radius: var(--border-radius);
border-bottom-left-radius: var(--border-radius);
}
&:last-child>a {
border-top-right-radius: var(--border-radius);
border-bottom-right-radius: var(--border-radius);
}
}
}
// Room State in Menu
#roomstate {
font-size: 0.9em;
line-height: 1.0em;
max-width: 8em;
padding: 5px;
color: $roomstate_color_unknown;
&.open {
color: $roomstate_color_open;
}
&.closed {
color: $roomstate_color_closed;
}
span.duration {
font-size: 0.7em;
}
}
// CCCHH Icon in Menu
@media only screen and (prefers-color-scheme: light) {
.invert-on-light {
filter: invert(1);
}
}
// Home page Announcements
.announcement {
border-radius: var(--border-radius);
background: var(--code-background-color);
padding: 10px 15px;
margin-bottom: var(--typography-spacing-vertical);
p:last-child {
margin-bottom: 0;
}
}
@media only screen and (prefers-color-scheme: dark) {
.announcement {
background: var(--code-background-color);
}
}
// Home Friends&Family Gallery
.flex-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
div {
width: 250px;
// 2*250px + 2*var(--spacing) + 1px
@media only screen and (max-width: 533px) {
width: 150px;
}
}
}
.img-link {
a {
img {
display: block;
padding: var(--grid-spacing-horizontal);
margin: 0 auto;
}
}
}
// Blog Overview: Categories list
div.nav-aside {
ul {
display: inline;
padding: 0;
li {
text-decoration: none;
display: inline;
}
}
}