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

314 lines
4.9 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;
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);
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;
}
// 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;
}