@import 'global';
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";
/* main the graphical portion
of both the wide and the table
view */
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;
.event:target {
box-shadow:
1em 1em 0.5em gold,
-1em -1em 0.5em gold,
1em -1em 0.5em gold,
-1em 1em 0.5em gold;
z-index: 1;
}
}
footer {
margin: 0.5em;
color: ray;
font-size: 8pt;
display: flex;
justify-content: space-between;
flex-direction: row;
span {
margin: 0 1em;
white-space: nowrap;
}
}
}
@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;
footer {
flex-direction: column;
}
}
}
.hidelink {
color: inherit;
text-decoration: none;
}
/* Change View
----------------------------------------
"Buttons" for changing between weekly and monthly layout
*/
.calnav {
display: flex;
flex-direction: column;
padding-left: 2em;
padding-right: 2em;
}
.change-view {
display: flex;
flex-direction: row;
justify-content: space-between;
padding-top: 1ex;
padding-bottom: 1ex;
}
#jump-to {
> form {
display: flex;
}
input {
flex-grow: 2;
margin-right: 1em;
}
button, a {
/* Same as height, figure out way to force this */
width: 2.5em;
}
}
/* button
--------------------------------------------------
*/
.btn {
padding: 0;
/* if a */
text-decoration: none;
/* if button */
border: none;
background-color: inherit;
> div {
padding: 0.5em;
background-color: $blue;
color: white;
box-sizing: border-box;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
/* shouldn't be needed, but otherwise wont align with a text input
inside a shared flex-container.
It however seems to make and