Added some pages
This commit is contained in:
+188
-82
@@ -1,3 +1,6 @@
|
||||
$device-s-width: 640px;
|
||||
$device-m-width: 1200px;
|
||||
|
||||
// Normalize
|
||||
|
||||
*,
|
||||
@@ -14,11 +17,85 @@ body {
|
||||
margin: 0;
|
||||
|
||||
font-family: 'Lato', sans-serif;
|
||||
font-weight: 300;
|
||||
font-size: 20px;
|
||||
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
textarea {
|
||||
border: none;
|
||||
outline: gray;
|
||||
|
||||
width: 100%;
|
||||
|
||||
padding: 1rem;
|
||||
|
||||
box-shadow: -2px 4px 8px 1px #00000020, -1px 1px 1px 0px #00000010;
|
||||
border-radius: 0.25rem;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
label {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
input[type='text'] {
|
||||
border: none;
|
||||
outline: gray;
|
||||
|
||||
width: 100%;
|
||||
|
||||
padding: 0.5rem;
|
||||
|
||||
box-shadow: -2px 4px 4px 0 #00000020;
|
||||
border-radius: 0.25rem;
|
||||
background: #ffffff;
|
||||
|
||||
font-family: 'Lato';
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
|
||||
font-family: 'Lato';
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
color: #555;
|
||||
|
||||
border: 1px solid #c8c8c8;
|
||||
padding: 0.5rem 2rem;
|
||||
|
||||
box-shadow: -2px 4px 16px 0 #00000010, -2px 4px 4px 0 #00000010;
|
||||
border-radius: 0.25rem;
|
||||
|
||||
background: linear-gradient(180deg, #f0f0f0, #dfdfdf 20%, #d8d8d8 80%, #c0c0c0);
|
||||
|
||||
transition: all 100ms ease-in;
|
||||
|
||||
&:hover {
|
||||
border: 1px solid #c4c4c4;
|
||||
box-shadow: -2px 4px 20px 4px #00000010, -2px 4px 6px 2px #00000010;
|
||||
background: linear-gradient(180deg, #f8f8f8, #e4e4e4 20%, #e4e4e4 80%, #c8c8c8);
|
||||
}
|
||||
}
|
||||
|
||||
.link,
|
||||
a,
|
||||
a:visited {
|
||||
cursor: pointer;
|
||||
|
||||
color: #3a9999;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
// Typography
|
||||
|
||||
p {
|
||||
@@ -60,18 +137,6 @@ $heading-scale: 1.25;
|
||||
}
|
||||
}
|
||||
|
||||
$device-s-width: 640px;
|
||||
|
||||
// Not on mobile
|
||||
@media screen and (min-width: $device-s-width) and (pointer: fine) {
|
||||
// ...
|
||||
}
|
||||
|
||||
// On mobile
|
||||
@media screen and (max-width: $device-s-width), (pointer: coarse) {
|
||||
// ...
|
||||
}
|
||||
|
||||
//
|
||||
// Components
|
||||
//
|
||||
@@ -99,34 +164,75 @@ body {
|
||||
align-items: center;
|
||||
|
||||
background: #f8f8f8;
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 1rem;
|
||||
width: 100%;
|
||||
main {
|
||||
padding: 2rem 2rem 6rem;
|
||||
width: 100%;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
gap: 2rem;
|
||||
|
||||
.logo {
|
||||
// font-size: 42px;
|
||||
// font-family: 'EB Garamond';
|
||||
// font-weight: 600;
|
||||
font-size: 38px;
|
||||
font-family: 'Lato';
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.logo {
|
||||
// font-size: 42px;
|
||||
// font-family: 'EB Garamond';
|
||||
// font-weight: 600;
|
||||
font-size: 38px;
|
||||
font-family: 'Lato';
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
main.home {
|
||||
padding-top: 2rem;
|
||||
gap: 2rem;
|
||||
.board {
|
||||
width: 100%;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(60ch, 1fr));
|
||||
gap: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
main.new-solution {
|
||||
padding-top: 2rem;
|
||||
gap: 2rem;
|
||||
//
|
||||
// Components
|
||||
//
|
||||
|
||||
main {
|
||||
.problem {
|
||||
padding: 1rem;
|
||||
// border: 1px solid #ddd;
|
||||
|
||||
box-shadow: -2px 4px 8px 1px #00000020, -1px 1px 1px 0px #00000010;
|
||||
border-radius: 0.5rem;
|
||||
background: #ffffff;
|
||||
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
gap: 0.5rem;
|
||||
|
||||
max-width: 80ch;
|
||||
|
||||
.problem-header {
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
|
||||
.problem-title {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
.problem-content {
|
||||
@extend .text-body;
|
||||
}
|
||||
}
|
||||
|
||||
.solution-editor {
|
||||
display: grid;
|
||||
@@ -154,21 +260,10 @@ main.new-solution {
|
||||
font-family: 'DM Mono', monospace;
|
||||
font-size: 18px;
|
||||
|
||||
border: none;
|
||||
outline: gray;
|
||||
|
||||
width: 100%;
|
||||
|
||||
padding: 1rem;
|
||||
|
||||
box-shadow: -2px 4px 8px 1px #00000020, -1px 1px 1px 0px #00000010;
|
||||
border-radius: 0.25rem;
|
||||
background: #ffffff;
|
||||
|
||||
resize: none;
|
||||
overflow-y: hidden;
|
||||
|
||||
min-height: 10rem;
|
||||
min-height: 8rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -192,52 +287,63 @@ main.new-solution {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.board {
|
||||
width: 100%;
|
||||
.form {
|
||||
min-width: 50ch;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(50ch, 1fr));
|
||||
grid-auto-rows: 3rem;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
//
|
||||
// Components
|
||||
//
|
||||
|
||||
.problem {
|
||||
padding: 1rem;
|
||||
// border: 1px solid #ddd;
|
||||
|
||||
box-shadow: -2px 4px 8px 1px #00000020, -1px 1px 1px 0px #00000010;
|
||||
border-radius: 0.25rem;
|
||||
background: #ffffff;
|
||||
|
||||
grid-row: span var(--size);
|
||||
|
||||
overflow-y: auto;
|
||||
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
gap: 0.5rem;
|
||||
|
||||
.problem-header {
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
grid-template-columns: auto 1fr;
|
||||
|
||||
.problem-title {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
// border: 2px solid #ccc;
|
||||
border-radius: 1rem;
|
||||
|
||||
box-shadow: -2px 4px 16px 4px #00000018, -2px 4px 4px 1px #00000018;
|
||||
|
||||
padding: 1.5rem 2rem 1rem;
|
||||
gap: 1rem;
|
||||
|
||||
align-items: center;
|
||||
|
||||
.fill {
|
||||
grid-column: span 2;
|
||||
justify-self: center;
|
||||
}
|
||||
}
|
||||
|
||||
.problem-content {
|
||||
@extend .text-body;
|
||||
}
|
||||
}
|
||||
|
||||
.math-inline {
|
||||
font-size: 95%;
|
||||
}
|
||||
|
||||
//
|
||||
// Mobile
|
||||
//
|
||||
|
||||
// Not on mobile
|
||||
@media screen and (min-width: $device-s-width) and (pointer: fine) {
|
||||
// ...
|
||||
}
|
||||
|
||||
// On mobile
|
||||
@media screen and (max-width: $device-s-width), (pointer: coarse) {
|
||||
main {
|
||||
.solution-editor {
|
||||
grid-template-columns: auto;
|
||||
grid-template-rows: auto auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $device-m-width), (pointer: coarse) {
|
||||
main {
|
||||
.solution-editor {
|
||||
grid-template-columns: auto;
|
||||
grid-template-rows: auto auto;
|
||||
|
||||
.preview,
|
||||
.editor {
|
||||
justify-self: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user