184 lines
4.0 KiB
Plaintext
184 lines
4.0 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;
|
|
}
|
|
|
|
// 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;
|
|
--base-accent-color: var(--color-accent-blue);
|
|
--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: 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-duration: .3s;
|
|
--base-timing: cubic-bezier(0.645, 0.045, 0.355, 1.000);
|
|
--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-box-shadow: 0 1px 2px 0px rgba(0, 0, 0, .25);
|
|
--hover-box-shadow: 0 2px 10px 1px rgba(0, 0, 0, .5);
|
|
--base-spacing: 1rem;
|
|
--base-spacing-half: 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;
|
|
cursor:pointer
|
|
}
|
|
|
|
// ok actual styles
|
|
|
|
body {
|
|
padding-top: calc(var(--base-spacing)/2);
|
|
}
|
|
|
|
main {
|
|
padding: 0 10% 0 10%;
|
|
}
|
|
|
|
button, [type=submit] {
|
|
padding: var(--base-spacing-half);
|
|
}
|
|
|
|
.landing {
|
|
display: flex;
|
|
|
|
.login {
|
|
flex: 1;
|
|
}
|
|
|
|
.info {
|
|
flex: 1;
|
|
|
|
p {
|
|
margin-bottom: var(--base-spacing);
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
form {
|
|
margin-bottom: var(--base-spacing);
|
|
|
|
label {
|
|
margin-bottom: var(--base-spacing-half);
|
|
}
|
|
|
|
label, input {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
|
|
.header {
|
|
display: flex;
|
|
}
|
|
|
|
.home {
|
|
min-height: 100%;
|
|
width: 100%;
|
|
|
|
display: flex;
|
|
|
|
.bundle {
|
|
flex: 1;
|
|
padding-right: 1em;
|
|
}
|
|
}
|