diff options
Diffstat (limited to 'www/css')
-rw-r--r-- | www/css/base.css | 37 | ||||
-rw-r--r-- | www/css/index.css | 18 | ||||
-rw-r--r-- | www/css/navbar.css | 45 |
3 files changed, 54 insertions, 46 deletions
diff --git a/www/css/base.css b/www/css/base.css index fa525e8..49111bc 100644 --- a/www/css/base.css +++ b/www/css/base.css @@ -1,13 +1,14 @@ :root { - --primary-color: #333333; - --secondary-color: #FFFFFF; - --home: #c8c8c8; - --yes: #5cff5c; + /* Colors */ + --primary: #333333; + --text: #ffffff; + --accent: #4682b4; + --link: #87cefa; --no: #ff5c5c; - font-size: 18; - --fast-speed: 0.2s; - --med-speed: 0.4s; - --slow-speed: 1s; + /* Timings */ + --high-speed: 0.3s; + --med-speed: 0.5s; + --low-speed: 1.0s; } code { @@ -16,21 +17,23 @@ code { body { font-family: 'Jost*', sans-serif; - line-height: 1.2; - margin: 0; - padding: 0; - background-color: var(--primary-color); - color: var(--secondary-color); - filter: blur(0px); + font-size: 12px; + margin: 3em; + background-color: var(--primary); + color: var(--text); } .outline-2 { + bottom: 0; + left: 0; filter: blur(4px); - transition: 0.3s; + transition: var(--high-speed); + max-width: 60vw; } .outline-2:hover { filter: blur(0px); - transition: 0.3s; + transition: var(--med-speed); + font-size: 14px; } p { @@ -38,5 +41,5 @@ p { } a { - color: gray; + color: var(--link); } diff --git a/www/css/index.css b/www/css/index.css index e79ccd2..48f4501 100644 --- a/www/css/index.css +++ b/www/css/index.css @@ -1,15 +1,9 @@ -.title { - background: no-repeat center/100% url("./space.jpg"); - position: relative; - bottom: 0; - filter: blur(4px); - transition: 0.3s; +.outline-2 { + min-height: 70vh; + bottom: 30px; } -.title:hover { - line-height: 2; - background: no-repeat center/100% url("./space.jpg"); - position: relative; + +.outline-text-2 { + position: absolute; bottom: 0; - filter: blur(0px); - transition: 0.5s; } diff --git a/www/css/navbar.css b/www/css/navbar.css index 23583b7..892f302 100644 --- a/www/css/navbar.css +++ b/www/css/navbar.css @@ -1,29 +1,40 @@ -/* Add a black background color to the top navigation */ nav { - display: block; - background-color: #333; - position: relative; - z-index: 10; + background-color: var(--accent); + color: var(--text); + position: fixed; + height: 36px; + display: flex; + align-items: center; + top: 12px; + right: 12px; + border-radius: 12px; + /* box-shadow x-offset y-offset blur spread color */ + box-shadow: 8px 8px 40px 2px #111111; + z-index: 1; +} +nav ul { +} +/* Display navbar elements horizontally. */ +nav ul * { + display: inline; + margin: 0.2em; } -/* Style the links inside the navigation bar */ +/* Style the links inside the navigation bar. */ nav a { - float: left; - color: #f2f2f2; - text-align: center; - padding: 14px 16px; - text-decoration: none; - font-size: 17px; + color: var(--text); + font-size: 16px; } -/* Change the color of links on hover */ +/* Change the color of links on hover. */ nav a:hover { - background-color: #ddd; - color: black; + background-color: var(--link); + color: var(--primary); + transition: var(--med-speed); } /* Add a color to the active/current link */ nav a.active { - background-color: #4CAF50; - color: white; + background-color: var(--accent); + color: white; } |