diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..d57dffd --- /dev/null +++ b/.editorconfig @@ -0,0 +1,14 @@ +root = true + +[*] +end_of_line = lf +insert_final_newline = true +trim_trailing_whitespace = true + +[*.css] +indent_style = space +indent_size = 2 + +[*.js] +indent_style = space +indent_size = 2 diff --git a/css/index.css b/css/index.css new file mode 100644 index 0000000..eadd4e9 --- /dev/null +++ b/css/index.css @@ -0,0 +1,68 @@ +#main { + display: flex; + flex-flow: column; + + width: 100%; + + text-align: center; +} + +@media screen and (min-width: 360px) { + #main { + margin: auto; + width: 360px; + } +} + +#about img { + width: 100%; + height: auto; +} + +#search { + display: flex; + flex-direction: column; + align-items: center; +} + +#search > * { + margin: 0.25rem; +} + +.search-inputs { + width: 100%; + height: 2rem; + + display: flex; +} + +.search-inputs > * { + height: 100%; +} + +.search-inputs input[name="query"] { + width: 100%; + box-sizing: border-box; +} + +.search-radio-buttons { + display: flex; + flex-wrap: wrap; +} + +.search-radio-buttons > .category { + display: flex; +} + +.search-radio-buttons > .category:not(:last-child) { + margin-right: 1rem; +} + +.search-radio-buttons > .category > input[type="radio"] { + margin: 0; + margin-right: 0.25rem; +} + +#status { + font-size: smaller; +} diff --git a/css/theme.css b/css/theme.css new file mode 100644 index 0000000..a3ef962 --- /dev/null +++ b/css/theme.css @@ -0,0 +1,43 @@ +:root { + --primary-color: #bc5151; +} + +body { + background: url('https://www.tromsite.com/wp-content/uploads/2018/09/tromsite-bg-pattern-light-5.png'); + background-repeat: repeat; + background-attachment: fixed; + + font-family: sans-serif; +} + +a { + color: var(--primary-color); + text-decoration: none; +} + +a:hover { + text-decoration: underline; +} + +.search-inputs input[name="query"] { + border: 1px solid darkgrey; + border-radius: 0.5rem 0 0 0.5rem; +} + +.search-inputs input[type="submit"] { + background-color: var(--primary-color); + + color: white; + cursor: pointer; + + border: none; + border-radius: 0 0.5rem 0.5rem 0; +} + +.search-radio-buttons input[type="radio"] { + accent-color: var(--primary-color); +} + +#status { + color: gray; +} diff --git a/img/about.png b/img/about.png new file mode 100644 index 0000000..29e5278 Binary files /dev/null and b/img/about.png differ diff --git a/img/favicon.png b/img/favicon.png new file mode 100644 index 0000000..0a8d332 Binary files /dev/null and b/img/favicon.png differ diff --git a/index.html b/index.html index efaf8f0..1c22b1f 100644 --- a/index.html +++ b/index.html @@ -1,110 +1,54 @@ - + TROM Search + + - - + + + -