203 lines
3.4 KiB
CSS
203 lines
3.4 KiB
CSS
body {
|
|
border: 0;
|
|
margin: 0;
|
|
padding: 0;
|
|
font-size: 20px;
|
|
}
|
|
|
|
main {
|
|
background: #f3ebe6;
|
|
width: 640px;
|
|
max-width: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
.dialog {
|
|
box-sizing: border-box;
|
|
border: 1px solid #e0e0e0;
|
|
background: white;
|
|
margin: auto;
|
|
padding: 16px 32px;
|
|
}
|
|
|
|
.background-image {
|
|
min-width: 100vw;
|
|
min-height: 100vh;
|
|
|
|
max-width: 100vw;
|
|
max-height: 100vh;
|
|
|
|
background: url("/assets/background.jpg");
|
|
background-position: bottom;
|
|
background-size: cover;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: Quicksand;
|
|
src: url(fonts/Quicksand-Light.ttf);
|
|
font-weight: 100 200;
|
|
}
|
|
@font-face {
|
|
font-family: Quicksand;
|
|
src: url(fonts/Quicksand-Medium.ttf);
|
|
font-weight: 300 300;
|
|
}
|
|
@font-face {
|
|
font-family: Quicksand;
|
|
src: url(fonts/Quicksand-Regular.ttf);
|
|
font-weight: 400 500;
|
|
}
|
|
@font-face {
|
|
font-family: Quicksand;
|
|
src: url(fonts/Quicksand-Bold.ttf);
|
|
font-weight: 800 900;
|
|
}
|
|
@font-face {
|
|
font-family: Quicksand;
|
|
src: url(fonts/Quicksand-SemiBold.ttf);
|
|
font-weight: 600 700;
|
|
}
|
|
|
|
* {
|
|
font-family: Quicksand, Arial, sans-serif;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 2rem;
|
|
}
|
|
h1 a {
|
|
all: unset;
|
|
}
|
|
|
|
|
|
.form-field {
|
|
width: 100%;
|
|
margin-bottom: 16px;
|
|
}
|
|
.form-field label {
|
|
display: block;
|
|
color: #999;
|
|
}
|
|
.form-field input {
|
|
width: 300px;
|
|
border: none;
|
|
border-bottom: 1px solid #bbb;
|
|
|
|
font-size: 20px;
|
|
outline: none;
|
|
}
|
|
|
|
.form-field input:focus {
|
|
color: cadetblue;
|
|
border-bottom: 1px solid cadetblue;
|
|
}
|
|
|
|
.form-field input:not(focus) {
|
|
color: #333;
|
|
}
|
|
|
|
.form-field label {
|
|
display: block;
|
|
color: #999;
|
|
}
|
|
.form-field select {
|
|
all: unset;
|
|
width: 100%;
|
|
border: none;
|
|
border-bottom: 1px solid #bbb;
|
|
|
|
font-size: 20px;
|
|
outline: none;
|
|
}
|
|
|
|
.form-field select:focus {
|
|
color: cadetblue;
|
|
border-bottom: 1px solid cadetblue;
|
|
}
|
|
|
|
.form-field select:not(focus) {
|
|
color: #333;
|
|
}
|
|
|
|
.form-field:focus-within label {
|
|
color: cadetblue;
|
|
}
|
|
|
|
|
|
.button.secondary, button.primary {
|
|
padding: 12px 16px;
|
|
background-color: cadetblue;
|
|
font-family: Quicksand, Arial, sans-serif;
|
|
border: none;
|
|
color: white;
|
|
font-size: 1.2rem;
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.button.secondary, button.primary:hover {
|
|
filter: contrast(140%);
|
|
}
|
|
|
|
.button.secondary, button.secondary {
|
|
padding: 12px 16px;
|
|
background-color: white;
|
|
font-family: Quicksand, Arial, sans-serif;
|
|
border: 1px solid cadetblue;
|
|
color: cadetblue;
|
|
font-size: 1.2rem;
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.button.secondary:hover, button.secondary:hover {
|
|
filter: contrast(140%);
|
|
}
|
|
|
|
/*index.html*/
|
|
|
|
.search-dialog {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
padding-bottom: 40px;
|
|
}
|
|
|
|
@media screen and (min-width: 480px) {
|
|
.search-dialog {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 10vw;
|
|
transform: translateY(-50%);
|
|
width: 380px;
|
|
padding-bottom: 40px;
|
|
}
|
|
}
|
|
|
|
/*results.html*/
|
|
.results-dialog {
|
|
position: relative;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
padding-bottom: 40px;
|
|
}
|
|
|
|
.results-dialog table {
|
|
width: 100%;
|
|
}
|
|
|
|
.results-dialog table th, .results-dialog table td {
|
|
text-align: left;
|
|
}
|
|
|
|
@media screen and (min-width: 480px) {
|
|
.results-dialog {
|
|
position: relative;
|
|
margin: auto;
|
|
width: 600px;
|
|
padding-bottom: 40px;
|
|
}
|
|
}
|
|
|
|
.results td {
|
|
padding: 0.4em 0;
|
|
} |