You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
516 lines
9.8 KiB
CSS
516 lines
9.8 KiB
CSS
*,
|
|
*::before,
|
|
*::after {
|
|
font: inherit;
|
|
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
min-height: 100vh;
|
|
}
|
|
|
|
img {
|
|
display: block;
|
|
}
|
|
|
|
/* Root */
|
|
|
|
:root {
|
|
font-size: 18px;
|
|
|
|
--blue: oklch(from royalblue calc(l + 0.05) c h);
|
|
--red: oklch(63.11% 0.2387 32.0573);
|
|
--green: oklch(60.3% 0.3 134.48);
|
|
--orange: oklch(76.96% 0.1692 67.6368);
|
|
}
|
|
|
|
body {
|
|
color: #333;
|
|
background: hsl(240, 100%, 98%);
|
|
|
|
font-family: 'Inria Sans', sans-serif;
|
|
line-height: 1.5;
|
|
|
|
display: grid;
|
|
justify-items: center;
|
|
align-content: start;
|
|
|
|
padding: 6rem 1rem 12rem;
|
|
gap: 1rem;
|
|
}
|
|
|
|
/* Typography */
|
|
|
|
h1,
|
|
h2 {
|
|
font-family: 'Source Code Pro Variable', monospace;
|
|
font-weight: 600;
|
|
line-height: 1.25;
|
|
}
|
|
|
|
h3,
|
|
h4 {
|
|
font-family: 'Inria Sans', sans-serif;
|
|
font-weight: 700;
|
|
line-height: 1.25;
|
|
color: #000000c6;
|
|
}
|
|
|
|
:root {
|
|
--font-size-base: 16px;
|
|
--line-height: 1;
|
|
--font-size-factor: 1.41;
|
|
}
|
|
|
|
h1 {
|
|
font-size: calc(var(--font-size-base) * pow(var(--font-size-factor), 3));
|
|
}
|
|
|
|
h2 {
|
|
font-size: calc(var(--font-size-base) * pow(var(--font-size-factor), 2));
|
|
}
|
|
|
|
h3 {
|
|
font-size: calc(var(--font-size-base) * var(--font-size-factor));
|
|
}
|
|
|
|
h4 {
|
|
font-size: var(--font-size-base);
|
|
}
|
|
|
|
strong {
|
|
font-weight: 700;
|
|
}
|
|
|
|
em {
|
|
font-style: italic;
|
|
}
|
|
|
|
code {
|
|
font-family: 'Source Code Pro', monospace;
|
|
}
|
|
|
|
a {
|
|
color: oklch(from var(--tint, royalblue) 0.3 c h);
|
|
text-decoration: underline 2px solid;
|
|
}
|
|
|
|
.chip {
|
|
display: inline-block;
|
|
align-content: center;
|
|
|
|
height: 1.75rem;
|
|
padding: 0 0.5rem;
|
|
border-radius: 0.25rem;
|
|
|
|
color: oklch(from var(--tint) 0.15 0.1 h);
|
|
background: oklch(from var(--tint) calc(l + 0.3) c h);
|
|
box-shadow: 2px 2px 0 oklch(from var(--tint) calc(l - 0.2) 0.1 h);
|
|
}
|
|
|
|
.text-large {
|
|
font-size: 20px;
|
|
}
|
|
|
|
/* Components */
|
|
|
|
.card {
|
|
padding: 0.75rem;
|
|
border: 2px solid #333;
|
|
border-radius: 0.5rem;
|
|
|
|
color: oklch(from var(--tint) 0.15 0.1 h);
|
|
background: linear-gradient(-15deg, var(--tint), oklch(from var(--tint) calc(l + 0.25) c h));
|
|
box-shadow: 3px 3px 0 oklch(from var(--tint) l 0.1 h);
|
|
|
|
min-width: 80ch;
|
|
|
|
@media screen and (max-width: 768px) {
|
|
min-width: 100%;
|
|
}
|
|
}
|
|
|
|
.tint-blue {
|
|
--tint: var(--blue);
|
|
}
|
|
|
|
.tint-red {
|
|
--tint: var(--red);
|
|
}
|
|
|
|
.tint-green {
|
|
--tint: var(--green);
|
|
}
|
|
|
|
.tint-orange {
|
|
--tint: var(--orange);
|
|
}
|
|
|
|
.stack-v {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
|
|
&.center {
|
|
align-items: center;
|
|
}
|
|
|
|
> .fill {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
@media screen and (max-width: 768px) {
|
|
flex-wrap: wrap;
|
|
}
|
|
}
|
|
|
|
.stack-h {
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 0.75rem;
|
|
|
|
&.center {
|
|
align-items: center;
|
|
}
|
|
|
|
> .fill {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
@media screen and (max-width: 768px) {
|
|
flex-wrap: wrap;
|
|
}
|
|
}
|
|
|
|
.fill-w {
|
|
width: 100%;
|
|
}
|
|
|
|
.fill-h {
|
|
height: 100%;
|
|
}
|
|
|
|
.icon {
|
|
font-family: 'Material Symbols Outlined Variable';
|
|
font-weight: 400;
|
|
font-size: 20px !important;
|
|
|
|
display: grid;
|
|
place-content: center;
|
|
}
|
|
|
|
input[type='text'],
|
|
input[type='number'] {
|
|
max-width: unset;
|
|
height: 2rem;
|
|
|
|
padding: 0 0.25rem;
|
|
border: 2px solid #333;
|
|
border-radius: 0.25rem;
|
|
|
|
background: #fff;
|
|
color: #333;
|
|
box-shadow: 3px 3px 0 oklch(from var(--tint) calc(l - 0.2) 0.1 h);
|
|
|
|
outline: none;
|
|
|
|
&:focus {
|
|
background: oklch(from var(--tint) calc(l + 1) 0.05 h);
|
|
}
|
|
}
|
|
|
|
select {
|
|
height: 2rem;
|
|
|
|
padding: 0 0.25rem;
|
|
border: 2px solid #333;
|
|
border-radius: 0.25rem;
|
|
|
|
background: #fff;
|
|
color: #333;
|
|
box-shadow: 3px 3px 0 oklch(from var(--tint) calc(l - 0.2) 0.1 h);
|
|
|
|
outline: none;
|
|
|
|
&:hover {
|
|
background: oklch(from var(--tint) calc(l + 1) 0.05 h);
|
|
}
|
|
}
|
|
|
|
button {
|
|
height: 2rem;
|
|
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
color: #444;
|
|
|
|
padding: 0 0.75rem;
|
|
border: 2px solid #333;
|
|
border-radius: 0.25rem;
|
|
|
|
color: oklch(from var(--tint) 0.15 0.1 h);
|
|
background: oklch(from var(--tint) calc(l + 0.3) c h);
|
|
cursor: pointer;
|
|
|
|
box-shadow: 2px 2px 0 oklch(from var(--tint) calc(l - 0.2) 0.1 h);
|
|
|
|
display: grid;
|
|
place-content: center;
|
|
place-items: center;
|
|
grid-auto-flow: column;
|
|
gap: 0.25rem;
|
|
|
|
&:where(:has(.icon:first-child)) {
|
|
padding-left: 0.25rem;
|
|
}
|
|
|
|
&.square {
|
|
padding: 0;
|
|
border-radius: 0.25rem;
|
|
|
|
width: 2rem;
|
|
height: 2rem;
|
|
}
|
|
|
|
&:hover {
|
|
background: oklch(from var(--tint) calc(l + 0.25) c h);
|
|
}
|
|
|
|
&:active {
|
|
background: oklch(from var(--tint) calc(l + 0.2) c h);
|
|
|
|
transform: translate(1px, 1px);
|
|
box-shadow: 1px 1px 0 oklch(from var(--tint) calc(l - 0.2) 0.1 h);
|
|
}
|
|
|
|
&.primary {
|
|
background: var(--accent);
|
|
color: #fff;
|
|
|
|
&:hover {
|
|
background: var(--accent-light);
|
|
}
|
|
|
|
&:active {
|
|
background: var(--accent-dark);
|
|
}
|
|
}
|
|
|
|
.icon {
|
|
font-size: 20px;
|
|
}
|
|
}
|
|
|
|
.leaderboard {
|
|
display: grid;
|
|
|
|
place-items: center;
|
|
|
|
grid-template-columns: auto auto repeat(var(--question-count), 1fr);
|
|
grid-template-rows: auto auto auto;
|
|
|
|
> .questions {
|
|
display: grid;
|
|
|
|
grid-column: 3 / -1;
|
|
grid-row: span 2;
|
|
|
|
grid-template-columns: subgrid;
|
|
grid-template-rows: subgrid;
|
|
|
|
> .question-header {
|
|
display: grid;
|
|
|
|
grid-template-columns: subgrid;
|
|
grid-template-rows: subgrid;
|
|
|
|
grid-area: span 2 / span 1;
|
|
|
|
border-top: 2px solid var(--orange);
|
|
border-right: 2px solid var(--orange);
|
|
|
|
border-top-left-radius: 8px;
|
|
border-top-right-radius: 8px;
|
|
|
|
background: var(--orange);
|
|
|
|
box-shadow: 2px 2px 0 #333;
|
|
|
|
/* > .name {
|
|
grid-area: 1 / 1;
|
|
|
|
} */
|
|
|
|
padding: 0.5rem 0.25rem;
|
|
|
|
text-align: center;
|
|
font-size: 22px;
|
|
font-weight: 500;
|
|
/*
|
|
> .score {
|
|
grid-area: 2 / 1;
|
|
font-size: 16px;
|
|
|
|
padding: 0.25rem 0.25rem;
|
|
} */
|
|
|
|
&:first-child {
|
|
border-left: 2px solid var(--orange);
|
|
}
|
|
|
|
position: relative;
|
|
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: -2px;
|
|
left: -2px;
|
|
right: -2px;
|
|
bottom: -2px;
|
|
|
|
border-top-left-radius: 8px;
|
|
border-top-right-radius: 8px;
|
|
|
|
border-top: 2px solid #333;
|
|
border-right: 2px solid #333;
|
|
border-left: 2px solid #333;
|
|
}
|
|
}
|
|
}
|
|
|
|
> .team-answers-container {
|
|
display: grid;
|
|
|
|
grid-template-columns: subgrid;
|
|
grid-template-rows: repeat(var(--team-count), 1fr);
|
|
|
|
grid-area: 3 / 1 / -1 / -1;
|
|
|
|
> .row {
|
|
display: grid;
|
|
|
|
grid-column: 1 / -1;
|
|
grid-row: span 1;
|
|
|
|
grid-template-columns: subgrid;
|
|
grid-template-rows: subgrid;
|
|
|
|
> .team {
|
|
display: grid;
|
|
|
|
grid-template-columns: subgrid;
|
|
grid-template-rows: subgrid;
|
|
|
|
grid-area: span 1 / span 2;
|
|
|
|
border-left: 2px solid #333;
|
|
border-bottom: 2px solid #333;
|
|
|
|
border-top-left-radius: 8px;
|
|
border-bottom-left-radius: 8px;
|
|
|
|
padding: 0.25rem 0.5rem;
|
|
gap: 1rem;
|
|
|
|
color: #fff;
|
|
background: var(--green);
|
|
|
|
box-shadow: 2px 2px 0 #333;
|
|
|
|
> .name {
|
|
grid-area: 1 / 1;
|
|
font-weight: 500;
|
|
}
|
|
|
|
> .score {
|
|
grid-area: 1 / 2;
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
|
|
> .answers {
|
|
display: grid;
|
|
|
|
grid-column: 3 / -1;
|
|
grid-row: span 1;
|
|
|
|
grid-template-columns: subgrid;
|
|
grid-template-rows: subgrid;
|
|
|
|
> .answer {
|
|
display: grid;
|
|
place-content: center;
|
|
|
|
background: #fff;
|
|
|
|
border-right: 2px solid #333;
|
|
border-bottom: 2px solid #333;
|
|
|
|
&:first-child {
|
|
border-left: 2px solid #333;
|
|
}
|
|
|
|
&:last-child {
|
|
box-shadow: 2px 2px 0 #333;
|
|
}
|
|
|
|
position: relative;
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
|
|
top: -2px;
|
|
left: -2px;
|
|
right: -2px;
|
|
bottom: -2px;
|
|
|
|
border: 4px dashed var(--blue);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&:first-child {
|
|
> .team {
|
|
border-top: 2px solid #333;
|
|
}
|
|
|
|
> .answers {
|
|
> .answer {
|
|
border-top: 2px solid #333;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:last-child {
|
|
.answer {
|
|
box-shadow: 2px 2px 0 #333;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
.team {
|
|
background: oklch(from var(--green) calc(l + 0.1) c h);
|
|
}
|
|
|
|
.answer {
|
|
background: #e0e0e0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Pages */
|
|
|
|
/* Misc */
|