Make the calendar using pure HTML in Hugo

This commit is contained in:
2024-01-13 20:30:30 +01:00
parent 30bf4dab28
commit a2a55bf3a7
4 changed files with 350 additions and 0 deletions

View File

@@ -157,6 +157,91 @@ h1 {
}
}
.calendar-manual {
font-size: xx-small;
@include media-large() {
font-size: small;
}
tr {
height: 20px;
&.first-min {
border-top: solid lightgray 1px;
}
&:nth-of-type(n) {
background-color: unset;
}
.time {
vertical-align: top;
}
.time:last-of-type, .first-col-of-room {
border-left: solid lightgray 1px;
}
.day-title {
text-align: center;
}
}
.calendar-block {
position: relative;
.calendar-block-entity {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 1.5px;
box-sizing: border-box;
&.height-1 {
height: 20px;
}
&.height-2 {
height: 40px;
}
&.height-3 {
height: 60px;
}
&.height-4 {
height: 80px;
}
&.height-5 {
height: 100px;
}
&.height-6 {
height: 120px;
}
&.height-7 {
height: 140px;
}
&.height-8 {
height: 160px;
}
.room-block {
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 3px;
overflow: hidden;
}
.room-vorne {
background-color: var(--color-vhvorne);
}
.room-mitte {
background-color: var(--color-vhmitte);
}
.room-hinten {
background-color: var(--color-vhhinten);
color: white;
}
}
}
}
.float-right {
float: right;
margin: 7px 0 7px 15px;