380 lines
8.3 KiB
Plaintext
380 lines
8.3 KiB
Plaintext
// Digital Ocean reset
|
|
html {
|
|
box-sizing: border-box;
|
|
font-size: 16px;
|
|
}
|
|
|
|
*, *:before, *:after {
|
|
box-sizing: inherit;
|
|
}
|
|
|
|
body, h1, h2, h3, 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(--base-background-color);
|
|
box-sizing:border-box
|
|
}
|
|
|
|
// @charset "UTF-8";
|
|
:root {
|
|
--breakpoint-medium: 35em;
|
|
--breakpoint-large: 56em;
|
|
|
|
--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-green: #537a34;
|
|
|
|
--base-accent-color: var(--color-accent-blue);
|
|
--fg-color: var(--color-off-white);
|
|
--hover-link-color: var(--color-off-white);
|
|
--base-background-color: var(--color-dark-blue);
|
|
--secondary-background-color: var(--color-mid-blue);
|
|
--tertiary-background-color: var(--color-light-blue);
|
|
|
|
--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;
|
|
|
|
--min-font-size: var(--base-font-size);
|
|
--max-font-size: var(--large-font-size);
|
|
|
|
--base-border-color: var(--secondary-font-color);
|
|
--base-border: 1px solid var(--base-border-color);
|
|
--hover-border: 1px solid var(--base-font-color);
|
|
--focus-border: 1px solid var(--base-font-color);
|
|
--base-border-radius: .2rem;
|
|
--base-focus: 2px solid var(--base-accent-color);
|
|
--base-outline-offset: 0.25em;
|
|
|
|
--base-spacing: 1rem;
|
|
--base-spacing-half: calc(var(--base-spacing)/2);
|
|
--base-spacing-double: calc(var(--base-spacing)*2);
|
|
|
|
--utility-bar-header-height: calc(var(--base-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);
|
|
text-transform: uppercase;
|
|
|
|
&:hover {
|
|
background: var(--tertiary-background-color);
|
|
border-color: transparent;
|
|
}
|
|
}
|
|
|
|
// ok actual styles
|
|
|
|
body {
|
|
padding-top: calc(var(--base-spacing)/2);
|
|
}
|
|
|
|
main {
|
|
padding: 0 5% 0 5%;
|
|
}
|
|
|
|
button, [type=submit] {
|
|
padding: var(--base-spacing-half);
|
|
background: var(--secondary-background-color);
|
|
|
|
}
|
|
|
|
.landing {
|
|
display: grid;
|
|
grid-template-columns: 1fr 0.5fr 2fr;
|
|
|
|
.login {
|
|
button {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.info {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
|
|
section {
|
|
margin-bottom: var(--base-spacing);
|
|
}
|
|
|
|
.contact {
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.alt-text, .alt {
|
|
font-family: var(--secondary-font-family);
|
|
// font-size: var(--small-font-size);
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
article {
|
|
background-color: var(--secondary-background-color);
|
|
}
|
|
|
|
|
|
.search {
|
|
display: grid;
|
|
grid-template-columns: 1fr 0.5fr 2fr;
|
|
|
|
article {
|
|
display: grid;
|
|
padding: var(--base-spacing);
|
|
margin-bottom: var(--base-spacing);
|
|
grid-template-columns: 1fr 4fr 1fr;
|
|
}
|
|
|
|
button {
|
|
margin-right: var(--base-spacing);
|
|
background: var(--tertiary-background-color);
|
|
border-color: var(--secondary-background-color);
|
|
|
|
&.added {
|
|
background: var(--color-green);
|
|
cursor: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
.list {
|
|
display: grid;
|
|
grid-template-columns:
|
|
1fr 1fr 1fr 1fr;
|
|
|
|
article {
|
|
display: grid;
|
|
grid-template-areas:
|
|
"title img"
|
|
"remove remove";
|
|
|
|
button {
|
|
grid-area: remove
|
|
}
|
|
|
|
padding: var(--base-spacing);
|
|
margin: var(--base-spacing-half);
|
|
}
|
|
}
|
|
|
|
form {
|
|
margin-bottom: var(--base-spacing);
|
|
|
|
label, input {
|
|
display: block;
|
|
}
|
|
|
|
input, button {
|
|
width: 100%;
|
|
}
|
|
|
|
input {
|
|
padding: var(--base-spacing-half);
|
|
margin-bottom: var(--base-spacing);
|
|
}
|
|
|
|
label {
|
|
font-family: var(--secondary-font-family);
|
|
font-size: var(--small-font-size);
|
|
text-transform: uppercase;
|
|
margin-bottom: var(--base-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(--base-spacing);
|
|
}
|
|
}
|
|
|
|
|
|
header {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr min-content;
|
|
padding-bottom: var(--base-spacing);
|
|
|
|
a {
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
|
|
.bundles {
|
|
flex-flow: row;
|
|
|
|
.bundle {
|
|
margin-bottom: var(--base-spacing-double);
|
|
|
|
section {
|
|
margin-bottom: var(--base-spacing);
|
|
}
|
|
|
|
.items {
|
|
// grid-column: 1 / -1;
|
|
display: grid;
|
|
grid-template-columns: repeat(5, 1fr);
|
|
|
|
div {
|
|
margin-right: var(--base-spacing);
|
|
margin-bottom: var(--base-spacing);
|
|
|
|
display: grid;
|
|
// grid-template-rows: 1fr 1fr 1fr;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.offers {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
|
|
.offer {
|
|
display: grid;
|
|
grid-template-areas:
|
|
"details img"
|
|
"btn neg";
|
|
|
|
padding: var(--base-spacing);
|
|
margin: var(--base-spacing-half);
|
|
background: var(--secondary-background-color);
|
|
|
|
section {
|
|
grid-area: details;
|
|
}
|
|
|
|
img {
|
|
grid-area: img;
|
|
justify-self: end;
|
|
margin-left: var(--base-spacing-half);
|
|
}
|
|
|
|
button {
|
|
grid-area: btn;
|
|
|
|
&.accepted {
|
|
background: var(--color-accent-blue);
|
|
cursor: auto;
|
|
}
|
|
|
|
&.neg {
|
|
margin-left: var(--base-spacing-half);
|
|
grid-area: neg;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.number {
|
|
font-family: var(--secondary-font-family);
|
|
text-transform: uppercase;
|
|
}
|