feature: Problem sorting, solution view raw toggle button

This commit is contained in:
2022-11-23 19:08:29 +01:00
parent dcaa052f30
commit 28a1a85531
9 changed files with 222 additions and 70 deletions
+46 -9
View File
@@ -35,7 +35,7 @@ textarea {
padding: 1rem;
box-shadow: -2px 4px 8px 1px #00000010, 0 0 4px 0px #00000010;
box-shadow: -2px 4px 6px 1px #00000018, 0 0 4px 0px #00000010;
border-radius: 0.25rem;
background: #ffffff;
}
@@ -162,12 +162,12 @@ button {
}
&.icon {
padding: 0.25rem;
padding: 0.125rem;
display: grid;
place-content: center;
.material-symbols-outlined {
font-size: 20px;
font-size: 19px;
}
}
}
@@ -189,6 +189,10 @@ a:visited {
// Typography
//
.dotted {
text-decoration: underline dotted gray;
}
.math-inline {
font-size: 95%;
}
@@ -324,12 +328,16 @@ details {
}
.solution-list {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
.controls {
display: flex;
width: 100%;
gap: 1rem;
}
}
header {
@@ -381,7 +389,7 @@ header {
max-width: 80ch;
box-shadow: -2px 4px 8px 1px #00000010, 0 0 4px 0px #00000010;
box-shadow: -2px 4px 6px 1px #00000018, 0 0 4px 0px #00000010;
border-radius: 0.5rem;
background: #ffffff;
@@ -410,12 +418,12 @@ header {
}
.solution {
padding: 1rem;
padding: 1rem 0.5rem 0.5rem 1rem;
width: 100%;
max-width: 80ch;
box-shadow: -2px 4px 8px 1px #00000010, 0 0 4px 0px #00000010;
box-shadow: -2px 4px 6px 1px #00000018, 0 0 4px 0px #00000010;
border-radius: 0.5rem;
background: #ffffff;
@@ -438,10 +446,30 @@ header {
gap: 0.25rem;
font-size: 18px;
line-height: 1.25;
}
.solution-content {
@extend .text-body;
pre,
code {
margin: 0;
font-family: 'DM Mono', monospace;
font-size: 16px;
background: #f0f0f0;
}
pre {
padding: 0.25rem;
overflow-x: auto;
border-radius: 0.25rem;
}
padding-right: 0.5rem;
}
.solution-footer {
@@ -550,7 +578,7 @@ header {
padding: 1rem;
box-shadow: -2px 4px 8px 1px #00000010, 0 0 4px 0px #00000010;
box-shadow: -2px 4px 6px 1px #00000018, 0 0 4px 0px #00000010;
border-radius: 0.25rem;
background: #ffffff;
}
@@ -622,6 +650,15 @@ header {
.markdown-editor .preview .preview-content {
padding: 0.75rem;
}
.solution {
.solution-content {
pre {
white-space: pre-line;
word-break: break-all;
}
}
}
}
@media screen and (max-width: $device-m-width), (pointer: coarse) {