June
f05175372c
All checks were successful
/ build (pull_request) Successful in 36s
Co-authored-by: c6ristian <c6ristian@christian.moe>
477 lines
8.7 KiB
SCSS
477 lines
8.7 KiB
SCSS
$roomstate_color_unknown: #dda218;
|
|
$roomstate_color_open: var(--ins-color);
|
|
$roomstate_color_closed: var(--del-color);
|
|
|
|
:root {
|
|
--spacing: 0.7rem;
|
|
}
|
|
|
|
// General Customizations
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|
|
header {
|
|
margin-bottom: 3rem;
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
}
|
|
|
|
body>footer {
|
|
padding-top: var(--spacing);
|
|
padding-bottom: var(--spacing);
|
|
|
|
nav {
|
|
ul {
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
}
|
|
}
|
|
}
|
|
|
|
body>main {
|
|
padding-bottom: var(--spacing);
|
|
}
|
|
|
|
.small {
|
|
font-size: 0.7em;
|
|
}
|
|
|
|
.on-hover {
|
|
display: none;
|
|
}
|
|
|
|
.on-hover-trg:hover .on-hover {
|
|
display: initial;
|
|
}
|
|
|
|
.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) * -0.5);
|
|
}
|
|
|
|
.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);
|
|
}
|
|
}
|
|
}
|
|
|
|
.float-left {
|
|
float: left;
|
|
margin-right: var(--grid-spacing-horizontal);
|
|
}
|
|
|
|
.float-right {
|
|
float: right;
|
|
margin-left: var(--grid-spacing-horizontal);
|
|
}
|
|
|
|
.clearfix {
|
|
&::after {
|
|
display: block;
|
|
clear: both;
|
|
content: "";
|
|
}
|
|
}
|
|
|
|
|
|
// Room State in Menu
|
|
#roomstate {
|
|
font-size: 0.9em;
|
|
line-height: 1.0em;
|
|
max-width: 8em;
|
|
padding: 5px;
|
|
white-space: nowrap;
|
|
|
|
color: $roomstate_color_unknown;
|
|
|
|
&.open {
|
|
color: $roomstate_color_open;
|
|
}
|
|
|
|
&.closed {
|
|
color: $roomstate_color_closed;
|
|
}
|
|
|
|
span.duration {
|
|
font-size: 0.7em;
|
|
}
|
|
}
|
|
|
|
// CCCHH icon & hamburger menu in header
|
|
@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);
|
|
|
|
margin-bottom: var(--typography-spacing-vertical);
|
|
padding-bottom: 1rem;
|
|
|
|
header {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
p {
|
|
margin: 0 1rem;
|
|
}
|
|
|
|
// .morelink {
|
|
// margin-top: calc((var(--typography-spacing-vertical) / 2) * -1);
|
|
// }
|
|
|
|
p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
@media only screen and (prefers-color-scheme: dark) {
|
|
.announcement {
|
|
background: var(--code-background-color);
|
|
}
|
|
}
|
|
|
|
// Home Friends&Family Gallery + Groups Gallery
|
|
.flex-grid {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
|
|
div {
|
|
width: 250px;
|
|
padding-left: 14px; // var(--grid-spacing-horizontal)
|
|
padding-right: 14px; // var(--grid-spacing-horizontal)
|
|
|
|
img.groups-img {
|
|
display: block;
|
|
margin: 0 auto;
|
|
// (250px - 2*var(--grid-spacing-horizontal)) * 3/4
|
|
max-height: (222px * 3/4);
|
|
}
|
|
|
|
// 2*250px + 2*var(--spacing) + 1px
|
|
@media only screen and (max-width: 533px) {
|
|
width: 150px;
|
|
|
|
img.groups-img {
|
|
// (150px - 2*var(--grid-spacing-horizontal)) * 3/4
|
|
max-height: (122px*3/4);
|
|
}
|
|
}
|
|
|
|
|
|
&.wide {
|
|
width: 350px;
|
|
|
|
img.groups-img {
|
|
// (350px - 2*var(--grid-spacing-horizontal)) * 3/4
|
|
max-height: (322px*3/4);
|
|
}
|
|
|
|
// 2*350px + 2*var(--spacing) + 1px
|
|
@media only screen and (max-width: 733px) {
|
|
width: 250px;
|
|
|
|
img.groups-img {
|
|
// (250px - 2*var(--grid-spacing-horizontal)) * 3/4
|
|
max-height: (222px*3/4);
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
}
|
|
|
|
.img-link {
|
|
a {
|
|
img {
|
|
display: block;
|
|
padding-top: 14px; // var(--grid-spacing-horizontal)
|
|
padding-bottom: 14px; // var(--grid-spacing-horizontal)
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
.main-header {
|
|
position: sticky;
|
|
top: 0;
|
|
background-color: var(--background-color);
|
|
border-bottom: 3px solid var(--muted-border-color);
|
|
box-shadow: var(--card-box-shadow);
|
|
padding: 0;
|
|
margin: 0;
|
|
|
|
--main-header-content-height: calc(var(--font-size) * var(--line-height));
|
|
|
|
.container {
|
|
display: block flex;
|
|
position: relative;
|
|
flex-direction: row;
|
|
justify-content: start;
|
|
align-items: center;
|
|
column-gap: var(--spacing);
|
|
}
|
|
|
|
.menu-button,
|
|
.hamburger,
|
|
.in-nav-home {
|
|
// Don't display, when not in mobile mode.
|
|
display: none;
|
|
}
|
|
|
|
.menu {
|
|
// Set this to 100% to force the roomstate to "right-align".
|
|
width: 100%;
|
|
}
|
|
|
|
.ccchh-logo {
|
|
padding-top: var(--nav-element-spacing-vertical);
|
|
padding-bottom: var(--nav-element-spacing-vertical);
|
|
|
|
img {
|
|
height: var(--main-header-content-height);
|
|
}
|
|
}
|
|
|
|
|
|
// When the header content doesn't display nicely anymore, switch to mobile mode.
|
|
@import "../pico-1.5.11/scss/variables";
|
|
|
|
@media (max-width: map-get($breakpoints, md)) {
|
|
.hamburger-button {
|
|
display: unset;
|
|
position: absolute;
|
|
top: calc(var(--nav-element-spacing-vertical));
|
|
right: var(--spacing);
|
|
height: var(--main-header-content-height);
|
|
// To have an attempt at a good-looking cross, when converting the burger
|
|
// stack to one, set the width to the height / sin(45).
|
|
width: calc(var(--main-header-content-height) / 0.707106781);
|
|
}
|
|
|
|
.menu-button {
|
|
z-index: 3;
|
|
opacity: 0%;
|
|
border: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.hamburger {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
|
|
.hamburger-line {
|
|
height: 4px;
|
|
width: 100%;
|
|
background-color: white;
|
|
}
|
|
}
|
|
|
|
.in-nav-home {
|
|
display: unset;
|
|
}
|
|
|
|
// Don't display the menu per default in mobile mode.
|
|
.menu {
|
|
display: none;
|
|
}
|
|
|
|
.menu-button:checked~.menu {
|
|
display: unset;
|
|
position: fixed;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: calc(var(--main-header-content-height) + (var(--nav-element-spacing-vertical) * 2) + 3px);
|
|
left: 0;
|
|
background-color: var(--background-color);
|
|
|
|
ul,
|
|
li {
|
|
display: block;
|
|
padding-top: calc(var(--nav-element-spacing-vertical) * 0.5);
|
|
padding-bottom: calc(var(--nav-element-spacing-vertical) * 0.5);
|
|
}
|
|
|
|
ul {
|
|
padding-left: var(--spacing);
|
|
padding-right: var(--spacing);
|
|
}
|
|
|
|
li {
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
border-bottom: 0.2em solid var(--muted-border-color);
|
|
display: flex;
|
|
|
|
// borrowed form pico css for li
|
|
margin-bottom: calc(var(--typography-spacing-vertical) * .25);
|
|
}
|
|
|
|
a {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.main-nav {
|
|
margin: auto;
|
|
}
|
|
|
|
// Use the media queries, which we need, from here:
|
|
@if map-get($breakpoints, "sm") {
|
|
@media (min-width: map-get($breakpoints, "sm")) {
|
|
ul {
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
|
|
.main-nav {
|
|
max-width: map-get($viewports, "sm");
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.hamburger-line-top {
|
|
transform-origin: top right;
|
|
transition: all 0.4s ease-in-out;
|
|
}
|
|
|
|
.hamburger-line-middle {
|
|
transition: all 0.2s ease-in-out;
|
|
}
|
|
|
|
.hamburger-line-bottom {
|
|
transform-origin: bottom right;
|
|
transition: all 0.4s ease-in-out;
|
|
}
|
|
|
|
.menu-button:checked~.hamburger {
|
|
.hamburger-line-top {
|
|
// After some adjustments to make the cross look decent, rotate -45deg.
|
|
transform: translateX(-1.5px) translateY(-1.5px) rotate(-45deg);
|
|
}
|
|
|
|
.hamburger-line-middle {
|
|
transform: scaleY(0);
|
|
}
|
|
|
|
.hamburger-line-bottom {
|
|
// After some adjustments to make the cross look decent, rotate 45deg.
|
|
transform: translateX(-1.5px) translateY(1.5px) rotate(45deg);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// Blog Overview: Categories list
|
|
div.nav-aside {
|
|
ul {
|
|
display: inline;
|
|
padding: 0;
|
|
|
|
li {
|
|
text-decoration: none;
|
|
display: inline;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.blog-header {
|
|
// General Customizations
|
|
border-top-left-radius: 10px;
|
|
border-top-right-radius: 10px;
|
|
border: 5px solid var(--muted-border-color);
|
|
background-color: var(--muted-border-color);
|
|
padding-bottom: 10px;
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6,
|
|
div {
|
|
margin: 15px var(--block-spacing-horizontal);
|
|
}
|
|
|
|
img {
|
|
padding: 15px var(--block-spacing-horizontal);
|
|
width: 100%;
|
|
height: 25cqw;
|
|
object-fit: cover;
|
|
object-position: top;
|
|
}
|
|
}
|
|
|
|
.blog {
|
|
background-color: var(--card-background-color);
|
|
border-bottom-left-radius: 10px;
|
|
border-bottom-right-radius: 10px;
|
|
border: 2px solid var(--card-background-color);
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
article.blog {
|
|
padding-bottom: var(--block-spacing-vertical);
|
|
}
|
|
|
|
article>header {
|
|
padding: unset;
|
|
}
|