tildes-statistics/source/scss/index.scss

83 lines
1.3 KiB
SCSS
Raw Normal View History

@mixin responsive-container($breakpoint) {
margin-left: auto;
margin-right: auto;
width: $breakpoint;
@media (max-width: $breakpoint) {
width: 100%;
}
}
.page-header,
.page-main,
.page-footer {
2022-10-07 13:54:59 +00:00
@include responsive-container(900px);
margin-bottom: var(--large-spacing);
}
.page-header {
2022-10-09 11:37:37 +00:00
align-items: center;
border-bottom: 4px solid var(--background-2);
2022-10-09 11:37:37 +00:00
display: flex;
2022-10-07 13:54:59 +00:00
padding: var(--large-spacing);
2022-10-09 11:37:37 +00:00
img {
height: 4rem;
margin-right: var(--large-spacing);
}
}
.page-main {
2022-10-07 13:31:36 +00:00
h2,
img,
2022-10-08 20:11:52 +00:00
p,
table {
margin-bottom: var(--medium-spacing);
2022-10-07 13:33:13 +00:00
&:last-child {
margin-bottom: 0;
}
}
2022-10-08 20:11:52 +00:00
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);
}
}
2022-10-09 11:34:46 +00:00
.chart {
display: block;
width: 100%;
}
}
.page-footer {
background-color: var(--background-2);
display: flex;
flex-direction: column;
gap: var(--large-spacing);
2022-10-07 13:54:59 +00:00
padding: var(--large-spacing);
}