html {
height: 100%;
/* TODO
* get the default values from the code.
*/
--editmode: 1.0;
--event-font-size: 8pt;
--gray: #757575;
--btn-height: 0.5ex;
}
html, body {
height: 100%;
margin: 0;
}
.root {
display: grid;
margin: 0;
max-width: 100%;
height: 100%;
grid-template-columns: auto auto 20em;
grid-template-rows: auto;
grid-template-areas:
"main main nav"
"main main cal"
"main main details"
"main main events"
"footer footer events";
}
@media (max-aspect-ratio: 3/4) {
.root {
grid-template-areas:
"main main"
"nav events"
"cal events"
"details events"
". events"
"footer events";
grid-template-rows: 70% auto;
grid-template-columns: 50% auto;
}
}
.hidelink {
color: inherit;
text-decoration: none;
}
.root main {
min-width: 0; /* for wide */
min-height: 0; /* for tall */
/* apparently required if one wants to have multiple
items within main, without it overflowing
*/
display: flex;
flex-direction: column;
}
/* Page footer
----------------------------------------
*/
.root footer {
margin: 0.5em;
color: ray;
font-size: 8pt;
display: flex;
justify-content: space-between;
flex-direction: row;
}
@media (max-aspect-ratio: 3/4) {
.root footer {
flex-direction: column;
}
}
.root footer span {
margin: 0 1em;
white-space: nowrap;
}
/* Change View
----------------------------------------
"Buttons" for changing between weekly and monthly layout
*/
.change-view {
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
.change-view .btn {
margin-top: 1ex;
margin-bottom: 1ex;
}
.btn {
padding: 0.5em;
background-color: #3399ff;
color: white;
box-shadow: var(--btn-height) var(--btn-height) gray;
/* if a */
text-decoration: none;
/* if button */
border: none;
}
.btn:active {
transform: translate(var(--btn-height), var(--btn-height));
box-shadow: none;
}
/* Eventlist
----------------------------------------
The sidebar with all the events
*/
.eventlist {
min-height: 0;
overflow: auto;
border-top: 3px solid var(--gray);
/* mostly for long links */
word-break: break-word;
}
.eventlist article {
border-bottom: 1px solid black;
margin-top: 1em;
border-left-style: solid;
border-left-width: 6px;
padding-left: 2px;
}
/* Text day
----------------------------------------
Each event within the eventlist
*/
.text-day {
border-left: 2px solid black;
border-top: 2px solid black;
padding-left: 2px;
margin-top: 1em;
}
.text-day header h2 {
width: 100%;
text-align: center;
font-size: 14pt;
}
/* Small calendar
----------------------------------------
*/
.smallcal {
display: flex;
justify-content: center;
}
.smallcall-head {
text-align: center;
font-weight: bold;
}
.smallcal .nav {
/* height: 100%; */
display: flex;
flex-direction: column;
justify-content: center;
font-size: 150%;
}
.small-calendar {
display: grid;
grid-template-rows: auto;
/* grid-auto-rows: 2em; */
grid-template-columns: auto;
/* grid-auto-columns: 1fr; */
grid-auto-flow: dense;
}
.small-calendar > * {
/* border: 1px solid black; */
/* justify-content: center; /\* flow right *\/ */
text-align: center;
}
.small-calendar > *:not(.column-head) {
display: flex;
align-items: center; /* vertically center */
text-align: right;
}
.small-calendar > * > time {
width: 100%;
text-align: right;
/* padding place in