69 lines
1.1 KiB
CSS
69 lines
1.1 KiB
CSS
|
h2 {
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
#freshness {
|
||
|
|
padding: 1em 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
#freshness .grid {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: fit-content(50%) min-content auto;
|
||
|
|
width: fit-content;
|
||
|
|
|
||
|
|
/* do this instead of grid gap so we can use
|
||
|
|
* borders/backgrounds for rows */
|
||
|
|
span {
|
||
|
|
padding: 0.3em 0;
|
||
|
|
border-bottom: 1px solid var(--line-color);
|
||
|
|
|
||
|
|
&:nth-child(3n+1),
|
||
|
|
&:nth-child(3n+2) {
|
||
|
|
padding-right: 0.5em;
|
||
|
|
}
|
||
|
|
|
||
|
|
&:nth-child(3n+2),
|
||
|
|
&:nth-child(3n+3) {
|
||
|
|
padding-left: 0.5em;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.th {
|
||
|
|
font-size: small;
|
||
|
|
font-weight: bold;
|
||
|
|
border-bottom: 1px solid navy;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
#birthdays {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
padding: 1em 0;
|
||
|
|
width: fit-content;
|
||
|
|
|
||
|
|
h2 {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
#birthday-sections {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: row;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
gap: 1em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.datelist {
|
||
|
|
flex: 1;
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: fit-content min-content;
|
||
|
|
column-gap: 0.5em;
|
||
|
|
row-gap: 0.3em;
|
||
|
|
|
||
|
|
h3 {
|
||
|
|
grid-column: span 2;
|
||
|
|
font-weight: bold;
|
||
|
|
font-size: small;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|