diff --git a/src/template.html b/src/template.html index 9cc9cb9..42d0274 100644 --- a/src/template.html +++ b/src/template.html @@ -8,9 +8,8 @@ %sapper.base% - - + diff --git a/static/css/global.css b/static/css/global.css index 4d4855f..400b2d9 100755 --- a/static/css/global.css +++ b/static/css/global.css @@ -1,14 +1,67 @@ + +/* Default theme */ +:root { + --background-color: #2d2d2d; + --headings-color: #ffffff; + --font-color: #ffffff; + --line-color: #ffffff; + --link-color: #CC99FF; +} + +/* Dark theme */ +html[data-theme='dark'] { + --background-color: #2d2d2d; + --headings-color: #ffffff; + --font-color: #ffffff; + --line-color: #eeeeee; + --link-color: #CC99FF; +} + +hr { + background-color: var(--line-color); +} + +li a:hover { + border-bottom: 3px solid var(--line-color); + text-decoration: none; +} + body { + background-color: var(--background-color); + color: var(--font-color); font-family: 'Open Sans', sans-serif; font-display: swap; font-size: 1rem; line-height: 1.8; } +h1, h2, h3, h4, h5 { + color: var(--headings-color); + font-weight: bold; +} + +hr { + background-color: var(--line-color); +} + +li a:hover { + border-bottom: 3px solid var(--line-color); + text-decoration: none; +} + +a { + color: var(--link-color); +} + +a:hover { + color: var(--font-color); +} + .overlay { - display: flex; background-size: cover; background-position: center; + border-bottom: 2px solid var(--line-color); + display: flex; min-height: 200px; text-align: center; align-items: center; @@ -28,7 +81,7 @@ nav { justify-content: space-between; } -/* flexbox navbar test*/ +/* flexbox navbar test */ nav ul { display: flex; padding: 0; @@ -38,7 +91,7 @@ nav ul { nav ul li { font-size: 1rem; text-align: center; - padding: 5px; + padding: 5px 15px; } nav li { @@ -47,13 +100,15 @@ nav li { /* Change color on hover */ nav li a { - margin-left: 20px; - margin-right: 20px; text-decoration: none; } main { - margin-top: 30px; + margin-top: 20px; +} + +footer { + margin-bottom: 20px; } /* Content types */ @@ -62,7 +117,7 @@ section { padding: 5px 20px; } -/*Simple css to style it like a toggle switch*/ +/* Simple css to style it like a toggle switch */ .theme-switch-wrapper { display: flex; align-items: center; diff --git a/static/css/themes.css b/static/css/themes.css deleted file mode 100755 index 46a1c8f..0000000 --- a/static/css/themes.css +++ /dev/null @@ -1,48 +0,0 @@ -/* Default theme */ -:root { - --background-color: #2d2d2d; - --headings-color: #ffffff; - --font-color: #ffffff; - --line-color: #ffffff; - --link-color: #CC99FF; -} - -/* Dark theme */ -html[data-theme='dark'] { - --background-color: #2d2d2d; - --headings-color: #ffffff; - --font-color: #ffffff; - --line-color: #eeeeee; - --link-color: #CC99FF; -} - -body { - background-color: var(--background-color); - color: var(--font-color); -} - -h1, h2, h3, h4, h5 { - color: var(--headings-color); - font-weight: bold; -} - -hr { - background-color: var(--line-color); -} - -.overlay { - border-bottom: 2px solid var(--line-color); -} - -li a:hover { - border-bottom: 3px solid var(--line-color); - text-decoration: none; -} - -a { - color: var(--link-color); -} - -a:hover { - color: var(--font-color); -}