infra/website
2
0
Fork 0
Code Issues Pull requests Activity Actions

redesign calendar
All checks were successful
/ Build and deploy website (push) Successful in 4m35s
Details

Browse source
This commit is contained in:
kleines Filmröllchen 2025-10-12 23:30:32 +02:00
parent e5b078da25
commit fffc6a912b
Signed by: filmroellchen
SSH key fingerprint: SHA256:UMhcHaeI+VGsiUL2Drpw3aj1iRiQUlx8nxZqUPvoaVw
3 changed files with 72 additions and 55 deletions
Download patch file Download diff file Expand all files Collapse all files

66
static/main.css
View file

@ -2,6 +2,7 @@
:root {
--main-bg-color: oklch(1% 0 0);
--main-bg-contrast-color: oklch(40% 0 0);
--lighter-bg-contrast-color: oklch(20% 0 0);
--main-text-color: oklch(92% 0 none);
--main-accent-color: oklch(85.23% 0.1662 89.73);
--secondary-accent-color: oklch(64.41% 0.1662 44.98);
@ -18,6 +19,7 @@
:root {
--main-bg-color: oklch(99% 0 0);
--main-bg-contrast-color: oklch(90% 0 0);
--lighter-bg-contrast-color: oklch(95% 0 0);
--main-text-color: oklch(15% 0 0);
--main-accent-color: oklch(50% 0.1662 44.98);
--secondary-accent-color: oklch(79% 0.18 89.03);
@ -29,9 +31,9 @@
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
font-family:
-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
"Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
@ -57,8 +59,8 @@ a {
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
font-family:
source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
}
img {
@ -171,7 +173,8 @@ header {
}
nav {
transition: max-height 0.2s cubic-bezier(0.86, 0, 0.07, 1),
transition:
max-height 0.2s cubic-bezier(0.86, 0, 0.07, 1),
margin 0.2s cubic-bezier(0.86, 0, 0.07, 1);
overflow-y: hidden;
height: auto;
@ -273,7 +276,9 @@ nav {
margin-bottom: 0.4em;
text-transform: uppercase;
text-decoration: underline 0.15em var(--main-text-color);
transition: text-decoration-color 0.3s, color 0.25s;
transition:
text-decoration-color 0.3s,
color 0.25s;
&:focus,
&:hover {
@ -322,32 +327,55 @@ footer {
/* calendar */
#dbkcalendar {
display: grid;
grid-auto-flow: row;
grid-template-columns: auto 10em;
column-gap: 1em;
* {
border-radius: 0.25em;
}
.calendar-date th {
.calendar-date {
grid-column: 1 / span 2;
padding: 0.5em 1em;
background: var(--main-bg-contrast-color);
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
td {
.calendar-entry {
grid-column: 1 / span 2;
display: grid;
grid-template-columns: subgrid;
grid-auto-flow: column;
padding: 1em;
padding-top: 0.5em;
margin-bottom: 1em;
background: var(--lighter-bg-contrast-color);
border-top-left-radius: 0;
border-top-right-radius: 0;
}
p {
margin: 0;
max-height: min-content;
}
&.categories {
margin-top: 0.2em;
.categories {
margin-top: 0.2em;
em {
background-color: var(--secondary-accent-color);
padding: 0 0.25em;
margin-right: 0.2em;
font-style: normal;
font-weight: bold;
color: var(--main-bg-color);
}
em {
background-color: var(--secondary-accent-color);
padding: 0 0.25em;
margin-right: 0.2em;
font-style: normal;
font-weight: bold;
color: var(--main-bg-color);
}
}
}