jtbx
e4ff96aee2
If a page is not a page bundle, it can't access files in the same directory via the .Resources variable. So we need to detect this condition and get the image file in another way.
197 lines
2.9 KiB
SCSS
197 lines
2.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
|
|
header {
|
|
margin-bottom: 3rem;
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
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);
|
|
}
|
|
}
|
|
}
|
|
|
|
.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);
|
|
padding: 10px 15px;
|
|
|
|
margin-bottom: var(--typography-spacing-vertical);
|
|
|
|
header {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
p {
|
|
margin-bottom: calc(var(--typography-spacing-vertical) / 2);
|
|
}
|
|
|
|
// .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
|
|
.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;
|
|
}
|
|
}
|
|
} |