1 files changed, 183 insertions, 0 deletions

diff --git a/src/static/style.css b/src/static/style.css
new file mode 100644
index 0000000..1ea44f5
--- /dev/null
+++ b/src/static/style.css
@@ -0,0 +1,183 @@
+@charset "UTF-8";
+
+:root {
+        /* Set sans-serif & mono fonts */
+        --sans-font: Inter, Lato,Helvetica,"IBM Plex Sans","Roboto","Nimbus Sans L","Noto Sans", "Segoe UI",Arial,Helvetica,"Helvetica Neue",sans-serif;
+        --mono-font: "mononoki Nerd Font","IBM Plex Mono","Roboto Mono","Ubuntu Mono","Fira Code","Overpass Mono", Monaco,"Droid Sans Mono",monospace;
+        --bg: #242933;
+        --accent-bg: rgb(46, 52, 64);
+        --text: #eceff4;
+        --text-light: #d8dee9;
+        --border: #88c0d0;
+        --accent: #81a1c1;
+        --accent-light: #bf616a;
+        --code: #ebcb8b;
+        --alert: #a3be8c;
+        --alert-bg: #8fbcbb;
+        --code-bg: #2e3440;
+}
+
+
+html, body, .container {
+        background: var(--bg);
+        color: var(--text);
+        font-family: var(--sans-font);
+        box-sizing: border-box;
+        height: 100%;
+        width: 100%;
+        font-size: 12pt;
+}
+
+.index-title {
+        display: flex;
+        align-self: center;
+        justify-content: center;
+        width: 100%;
+
+}
+
+.content-noborder {
+        display: flex;
+        align-items: center;
+        align-content: flex-start;
+        flex-flow: row wrap;
+        margin: 2%;
+        height: auto;
+        justify-content: center;
+}
+
+.content {
+        display: flex;
+        align-items: center;
+        align-content: flex-start;
+        flex-flow: row wrap;
+        margin: 2%;
+        border-radius: 15px;
+        height: auto;
+        justify-content: center;
+        border: 3px solid var(--accent);
+}
+
+div.searchbar {
+        display: flex;
+        align-items: left;
+        justify-content: left;
+        margin-left: 5px;
+        width: 100%;
+        margin-top: 1%;
+}
+
+div.current {
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: flex-start;
+        justify-content: center;
+}
+
+div.current-info {
+        display: flex;
+        flex-flow: column nowrap;
+        margin-right: 10%;
+        flex-shrink: 0;
+}
+
+div.current-icon {
+        display: flex;
+        margin-left: 10%;
+        flex-shrink: 0;
+}
+
+img.weather-icon {
+        display: flex;
+        filter: invert(97%) sepia(23%) saturate(6990%) hue-rotate(304deg) brightness(116%) contrast(84%);
+}
+
+img.wind-icon {
+        filter: invert(94%) sepia(11%) saturate(78%) hue-rotate(179deg) brightness(101%) contrast(93%);
+}
+
+div.current-temp {
+        display: inline-block;
+        font-size: 18pt;
+        text-align: left;
+}
+
+div.current-weather {
+        display: inline-block;
+        font-size: 16pt;
+        margin-bottom: 5px;
+        text-align: left;
+}
+
+div.current-wind {
+        display: inline-block;
+        font-size: 14pt;
+        text-align: left;
+}
+
+div.current-sunrise, div.current-sunset {
+        display: inline-block;
+        font-size: 14pt;
+}
+
+div.forecast-header {
+        width: 100%;
+        display: flex;
+        flex-grow: 0;
+        flex-shrink: 1;
+        max-height: 10%;
+}
+h2.forecast-header {
+        margin-left: 5px;
+        margin-right: 5px;
+        border-bottom: 1px solid;
+        width: 100%
+}
+
+div.daily, div.hourly {
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        overflow-x: scroll;
+        overflow-y: hidden;
+        white-space: nowrap;
+        width: 100%;
+        margin-left: 5px;
+        height: auto;
+}
+
+div.hourly-box, div.daily-box {
+        display: flex;
+        flex-flow: row wrap;
+        flex-shrink: 0;
+    align-items: flex-start;
+        overflow-wrap: normal;
+        min-width: 20%;
+        margin: 5px;
+}
+
+div.hourly-icon, div.daily-icon {
+                display: inline-block;
+}
+
+input, select, textarea {
+        margin: 5px;
+        padding: 5px;
+        color: var(--text);
+        border: 1px solid var(--border);
+        border-radius: 6px;
+        border-color: var(--border);
+        background-color: var(--bg);
+        min-height: 25px;
+        line-height: 25px;
+        vertical-align: middle;
+}
+
+input:disabled, select:disabled {
+        color: #aaa;
+        border-color: var(--border);
+}
+
+button {
+        font-family: var(--sans-font);
+}