tildes-statistics/source/scss/index.scss

76 lines
1.2 KiB
SCSS

@mixin responsive-container($breakpoint) {
margin-left: auto;
margin-right: auto;
width: $breakpoint;
@media (max-width: $breakpoint) {
width: 100%;
}
}
.page-header,
.page-main,
.page-footer {
@include responsive-container(900px);
margin-bottom: var(--large-spacing);
}
.page-header {
border-bottom: 4px solid var(--background-2);
padding: var(--large-spacing);
}
.page-main {
h2,
img,
p,
table {
margin-bottom: var(--medium-spacing);
&:last-child {
margin-bottom: 0;
}
}
table {
border: 2px solid var(--background-2);
border-collapse: collapse;
width: 100%;
}
thead {
background-color: var(--background-2);
border-bottom: 2px solid var(--background-2);
text-align: left;
}
tr {
border: 2px solid var(--background-2);
}
td,
th {
padding: var(--medium-spacing);
}
tbody {
> tr:nth-of-type(2n) {
background-color: var(--background-2);
}
}
.chart {
display: block;
width: 100%;
}
}
.page-footer {
background-color: var(--background-2);
display: flex;
flex-direction: column;
gap: var(--large-spacing);
padding: var(--large-spacing);
}