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

432 lines
8.1 KiB
SCSS
Raw Normal View History

2023-10-02 12:08:18 +02:00
$roomstate_color_unknown: #dda218;
$roomstate_color_open: var(--ins-color);
$roomstate_color_closed: var(--del-color);
:root {
--spacing: 0.7rem;
}
2023-10-02 12:08:18 +02:00
// General Customizations
2023-10-11 23:33:28 +02:00
h4,
h5,
h6 {
margin-bottom: 0.5em;
}
header {
margin-bottom: 3rem;
2023-10-08 17:38:54 +02:00
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);
}
2023-10-22 00:17:53 +02:00
.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) * -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);
}
}
}
.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: "";
}
}
2023-10-02 12:08:18 +02:00
// Room State in Menu
#roomstate {
font-size: 0.9em;
line-height: 1.0em;
max-width: 8em;
padding: 5px;
white-space: nowrap;
2023-10-02 12:08:18 +02:00
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
2023-10-02 12:08:18 +02:00
@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);
2023-10-08 17:38:54 +02:00
header {
margin-bottom: 1rem;
}
p {
margin-bottom: calc(var(--typography-spacing-vertical) / 2);
}
// .morelink {
// margin-top: calc((var(--typography-spacing-vertical) / 2) * -1);
// }
2023-10-02 12:08:18 +02:00
p:last-child {
margin-bottom: 0;
}
}
@media only screen and (prefers-color-scheme: dark) {
.announcement {
background: var(--code-background-color);
}
}
2023-10-17 22:52:36 +02:00
// Home Friends&Family Gallery + Groups Gallery
2023-10-02 12:08:18 +02:00
.flex-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
div {
width: 250px;
2023-10-17 22:52:36 +02:00
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);
}
2023-10-02 12:08:18 +02:00
// 2*250px + 2*var(--spacing) + 1px
@media only screen and (max-width: 533px) {
width: 150px;
2023-10-17 22:52:36 +02:00
img.groups-img {
// (150px - 2*var(--grid-spacing-horizontal)) * 3/4
max-height: (122px*3/4);
}
2023-10-02 12:08:18 +02:00
}
2023-10-17 22:52:36 +02:00
&.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);
}
}
}
2023-10-02 12:08:18 +02:00
}
}
.img-link {
a {
img {
display: block;
2023-10-17 22:52:36 +02:00
padding-top: 14px; // var(--grid-spacing-horizontal)
padding-bottom: 14px; // var(--grid-spacing-horizontal)
2023-10-02 12:08:18 +02:00
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);
}
}
// Use the brakpoints and viewports, which we need, from here:
// https://github.com/picocss/pico/blob/5f6e3c1abd56a4e55d395f16b526f9e5548bda34/scss/_variables.scss#L46
$breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
) !default;
$viewports: (
sm: 510px,
) !default;
// When the header content doesn't display nicely anymore, switch to mobile mode.
@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;
}
.main-nav {
margin: auto;
}
// Use the media queries, which we need, from here:
// https://github.com/picocss/pico/blob/5f6e3c1abd56a4e55d395f16b526f9e5548bda34/scss/layout/_container.scss#L15
@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);
}
}
}
}
2023-10-17 22:52:36 +02:00
// Blog Overview: Categories list
div.nav-aside {
ul {
display: inline;
padding: 0;
li {
text-decoration: none;
display: inline;
}
}
}