562 lines
11 KiB
Plaintext
562 lines
11 KiB
Plaintext
// Digital Ocean reset
|
|
html {
|
|
box-sizing: border-box;
|
|
font-size: 16px;
|
|
}
|
|
|
|
*, *:before, *:after {
|
|
box-sizing: inherit;
|
|
}
|
|
|
|
body, h4, h5, h6, p, ol, ul {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-weight: normal;
|
|
}
|
|
|
|
ol, ul {
|
|
list-style: none;
|
|
}
|
|
|
|
img {
|
|
// max-width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
/* latin */
|
|
@font-face {
|
|
font-family: 'Raleway';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
src: url(https://fonts.gstatic.com/s/raleway/v28/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCIPrE.woff2) format('woff2');
|
|
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Source Code Pro';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
src: url(https://fonts.gstatic.com/s/sourcecodepro/v21/HI_diYsKILxRpg3hIP6sJ7fM7PqPMcMnZFqUwX28DMyQtMlrTA.woff2) format('woff2');
|
|
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Noto Sans Mono';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-stretch: normal;
|
|
src: url(https://fonts.gstatic.com/s/notosansmono/v20/BngrUXNETWXI6LwhGYvaxZikqZqK6fBq6kPvUce2oAZcdthSBUsYck4-_FNJ093dVQ.woff2) format('woff2');
|
|
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
|
}
|
|
|
|
// stuff from UX laws
|
|
html {
|
|
color:var(--base-font-color);
|
|
font-size:clamp(var(--min-font-size),calc(50% + 1vw),var(--max-font-size));
|
|
font-family:var(--base-font-family);
|
|
line-height:var(--base-line-height);
|
|
-webkit-text-size-adjust:100%;
|
|
background:var(--background-0);
|
|
box-sizing:border-box
|
|
}
|
|
|
|
// @charset "UTF-8";
|
|
:root {
|
|
--breakpoint-medium: 35em;
|
|
--breakpoint-large: 56em;
|
|
|
|
--small-font-size: 0.75em;
|
|
--base-font-size: 1em;
|
|
--smedium-font-size: 1.333em;
|
|
--medium-font-size: 1.777em;
|
|
--large-font-size: 2.369em;
|
|
--xlarge-font-size: 3.157em;
|
|
--base-font-family: 'Raleway', Arial, Sans-Serif;
|
|
--secondary-font-family: 'Noto Sans Mono', monospace;
|
|
--base-font-color: var(--color-off-white);
|
|
--secondary-font-color: var(--color-mid-grey);
|
|
|
|
--base-line-height: 1.4;
|
|
--header-line-height: 1.2;
|
|
|
|
--base-border-color: var(--secondary-font-color);
|
|
--base-border: 2px solid var(--base-border-color);
|
|
--hover-border: 2px solid var(--base-font-color);
|
|
--focus-border: 2px solid var(--base-font-color);
|
|
--base-border-radius: .2rem;
|
|
--base-focus: 2px solid var(--base-accent-color);
|
|
--base-outline-offset: 0.25em;
|
|
|
|
--min-font-size: var(--base-font-size);
|
|
--max-font-size: var(--large-font-size);
|
|
|
|
--color-dark-blue: #101014;
|
|
--color-mid-blue: #16171d;
|
|
--color-light-blue: #1f2128;
|
|
--color-mid-grey: #9BA0B3;
|
|
--color-off-white: #F4F1D0;
|
|
--color-accent-blue: #5E9ED6;
|
|
|
|
--color-blue-gray: #506485;
|
|
|
|
--color-blue: #475977;
|
|
--color-green: #476d4a;
|
|
|
|
--color-accepted: var(--color-blue);
|
|
--color-confirmed: var(--color-green);
|
|
|
|
--base-accent-color: var(--color-accent-blue);
|
|
--fg-color: var(--color-off-white);
|
|
--hover-link-color: var(--color-off-white);
|
|
|
|
--background-0: var(--color-dark-blue);
|
|
--background-1: var(--color-mid-blue);
|
|
--background-2: var(--color-light-blue);
|
|
|
|
--spacing: 1rem;
|
|
--spacing-half: calc(var(--spacing)/2);
|
|
--spacing-double: calc(var(--spacing)*2);
|
|
|
|
--utility-bar-header-height: calc(var(--spacing) * 1.5);
|
|
}
|
|
|
|
button, input, optgroup, select, textarea {
|
|
margin:0;
|
|
border:var(--base-border);
|
|
border-radius:var(--base-border-radius);
|
|
background:0 0;
|
|
font-family:inherit;
|
|
font-size:100%;
|
|
color:inherit;
|
|
line-height:var(--base-line-height);
|
|
}
|
|
|
|
input:hover, textarea:hover {
|
|
color:var(--base-font-color);
|
|
border:var(--hover-border)
|
|
}
|
|
|
|
input:focus, textarea:focus {
|
|
border:var(--focus-border);
|
|
outline:0
|
|
}
|
|
|
|
button, input {
|
|
overflow:visible;
|
|
}
|
|
|
|
button, select {
|
|
text-transform: none;
|
|
}
|
|
|
|
button, [type=button], [type=reset], [type=submit] {
|
|
-webkit-appearance:button;
|
|
border-color: transparent;
|
|
cursor:pointer;
|
|
|
|
font-family: var(--secondary-font-family);
|
|
font-size: var(--small-font-size);
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
|
|
&:hover {
|
|
background: var(--background-2);
|
|
border-color: transparent;
|
|
}
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
margin-top:0;
|
|
line-height:var(--header-line-height);
|
|
}
|
|
|
|
h1 {
|
|
margin-bottom:var(--spacing);
|
|
font-size:var(--large-font-size)
|
|
}
|
|
|
|
h2 {
|
|
margin-bottom:var(--spacing);
|
|
font-size:var(--medium-font-size);
|
|
}
|
|
|
|
h3 {
|
|
margin-bottom:calc(var(--spacing)/2);
|
|
font-size:var(--smedium-font-size)
|
|
}
|
|
|
|
h4 {
|
|
margin-bottom:calc(var(--spacing)/3);
|
|
font-size:var(--base-font-size)
|
|
}
|
|
|
|
p {
|
|
margin:0 0 var(--spacing)
|
|
}
|
|
|
|
// ok actual styles
|
|
|
|
body {
|
|
padding-top: calc(var(--spacing)/2);
|
|
}
|
|
|
|
main {
|
|
padding: 0 var(--spacing-double) 0 var(--spacing-double);
|
|
}
|
|
|
|
button, [type=submit] {
|
|
padding: var(--spacing-half);
|
|
background: var(--background-1);
|
|
|
|
}
|
|
|
|
.landing {
|
|
display: grid;
|
|
|
|
grid-template-columns: 1fr 2fr;
|
|
grid-gap: calc(var(--spacing-double) * 2);
|
|
grid-template-areas:
|
|
"login swirl"
|
|
"login words";
|
|
|
|
.login {
|
|
grid-area: login;
|
|
button {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.swirl {
|
|
grid-area: swirl;
|
|
height: 15rem;
|
|
}
|
|
|
|
.words {
|
|
grid-area: words;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.info {
|
|
display: grid;
|
|
|
|
grid-template-areas:
|
|
"words swirl"
|
|
"words contact";
|
|
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-template-rows: min-content 1fr;
|
|
|
|
section {
|
|
margin-bottom: var(--spacing);
|
|
}
|
|
|
|
.contact {
|
|
grid-area: contact;
|
|
text-align: center;
|
|
}
|
|
|
|
.words {
|
|
grid-area: words;
|
|
}
|
|
|
|
.swirl {
|
|
grid-area: swirl;
|
|
height: 15rem;
|
|
}
|
|
}
|
|
|
|
.alt-text, .alt {
|
|
font-family: var(--secondary-font-family);
|
|
// font-size: var(--small-font-size);
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
article {
|
|
background-color: var(--background-1);
|
|
|
|
button {
|
|
border-color: var(--background-2);
|
|
}
|
|
}
|
|
|
|
.search {
|
|
display: grid;
|
|
grid-template-columns: 1fr 2fr;
|
|
|
|
.results {
|
|
display: grid;
|
|
padding-left: var(--spacing);
|
|
grid-gap: var(--spacing);
|
|
|
|
article {
|
|
display: grid;
|
|
padding: var(--spacing);
|
|
grid-template-columns: 1fr 4fr min-content;
|
|
}
|
|
}
|
|
|
|
button {
|
|
margin-right: var(--spacing);
|
|
background: var(--background-2);
|
|
border-color: var(--background-1);
|
|
|
|
&.added {
|
|
background: var(--color-green);
|
|
cursor: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
.list {
|
|
display: grid;
|
|
grid-template-columns:
|
|
1fr 1fr 1fr;
|
|
|
|
grid-gap: var(--spacing);
|
|
|
|
article {
|
|
display: grid;
|
|
|
|
// grid-template-rows:
|
|
// 1fr min-content min-content;
|
|
|
|
grid-template-areas:
|
|
"title img"
|
|
"details details"
|
|
"remove remove";
|
|
|
|
button {
|
|
margin-top: var(--spacing-half);
|
|
grid-area: remove
|
|
}
|
|
|
|
.details {
|
|
grid-area: details;
|
|
}
|
|
|
|
padding: var(--spacing);
|
|
|
|
img {
|
|
justify-self: end;
|
|
}
|
|
}
|
|
}
|
|
|
|
form {
|
|
margin-bottom: var(--spacing);
|
|
|
|
label, input {
|
|
display: block;
|
|
}
|
|
|
|
input, button {
|
|
width: 100%;
|
|
}
|
|
|
|
input {
|
|
padding: var(--spacing-half);
|
|
margin-bottom: var(--spacing);
|
|
}
|
|
|
|
label {
|
|
font-family: var(--secondary-font-family);
|
|
font-size: var(--small-font-size);
|
|
text-transform: uppercase;
|
|
margin-bottom: var(--spacing-half);
|
|
}
|
|
|
|
}
|
|
|
|
a {
|
|
color: var(--secondary-font-color);
|
|
font-family: var(--secondary-font-family);
|
|
text-transform: uppercase;
|
|
|
|
&:hover {
|
|
color: var(--fg-color);
|
|
}
|
|
}
|
|
|
|
nav {
|
|
a {
|
|
font-size: var(--small-font-size);
|
|
margin-right: var(--spacing);
|
|
}
|
|
}
|
|
|
|
|
|
header {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr min-content;
|
|
padding-bottom: var(--spacing);
|
|
|
|
a {
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
|
|
.bundles {
|
|
flex-flow: row;
|
|
|
|
.bundle {
|
|
margin-bottom: var(--spacing-double);
|
|
|
|
section {
|
|
margin-bottom: var(--spacing);
|
|
}
|
|
|
|
.items {
|
|
display: grid;
|
|
grid-template-columns: repeat(5, 1fr);
|
|
|
|
div {
|
|
margin-right: var(--spacing);
|
|
margin-bottom: var(--spacing);
|
|
|
|
display: grid;
|
|
|
|
&.bold {
|
|
font-weight: bold;
|
|
background: var(--background-2);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.offers {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-gap: var(--spacing);
|
|
|
|
.offer {
|
|
display: grid;
|
|
grid-template-columns: 1fr min-content;
|
|
grid-template-rows: min-content min-content;
|
|
grid-template-areas:
|
|
"details img"
|
|
"lines lines";
|
|
|
|
padding: var(--spacing);
|
|
background: var(--background-1);
|
|
|
|
.details {
|
|
font-size: var(--small-font-size);
|
|
}
|
|
|
|
.status {
|
|
margin-top: var(--spacing-half);
|
|
}
|
|
|
|
section {
|
|
grid-area: details;
|
|
}
|
|
|
|
img {
|
|
grid-area: img;
|
|
justify-self: end;
|
|
margin-left: var(--spacing-half);
|
|
}
|
|
|
|
.lines {
|
|
grid-area: lines;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
column-gap: var(--spacing-half);
|
|
|
|
button {
|
|
margin-top: var(--spacing-half);
|
|
border-color: var(--background-2);
|
|
|
|
&.accepted {
|
|
background: var(--color-accepted);
|
|
}
|
|
|
|
&.confirmed {
|
|
cursor: auto;
|
|
background: var(--color-confirmed);
|
|
}
|
|
|
|
&.neg {
|
|
margin-left: var(--spacing-half);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.number {
|
|
font-family: var(--secondary-font-family);
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.swirl {
|
|
background-image: url("./../assets/swirl.fix.svg");
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
|
|
margin-bottom: var(--spacing);
|
|
}
|
|
|
|
@media (max-width:900px) {
|
|
.landing {
|
|
grid-template-columns: 1fr;
|
|
grid-template-areas:
|
|
"swirl"
|
|
"login"
|
|
"words";
|
|
}
|
|
|
|
.list {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.search {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.offers {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.info {
|
|
grid-template-columns: 1fr;
|
|
// is necessary for some reason
|
|
grid-template-areas:
|
|
"swirl"
|
|
"contact"
|
|
"words";
|
|
}
|
|
|
|
main {
|
|
padding: 0 var(--spacing) 0 var(--spacing);
|
|
}
|
|
}
|
|
|
|
@media (max-width:1200px) {
|
|
img {
|
|
width: 5rem;
|
|
}
|
|
}
|
|
|
|
|
|
// ------------
|
|
// toasts
|
|
|
|
.iziToast {
|
|
border-radius: 0;
|
|
border-color: var(--base-border-color);
|
|
|
|
.iziToast-body {
|
|
font-family: var(--base-font-family);
|
|
font-size: var(--base-font-size);
|
|
}
|
|
|
|
.iziToast-title {
|
|
font-family: var(--secondary-font-family);
|
|
text-transform: uppercase;
|
|
}
|
|
}
|