diff --git a/assets/style.css b/assets/style.css index fb42ec9..493d573 100644 --- a/assets/style.css +++ b/assets/style.css @@ -1,23 +1,23 @@ -html, body { - height: 100%; +* { + box-sizing: border-box; } body { font-family: sans-serif; margin: 0; display: grid; grid-template-columns: max(325px, 15%) auto; - background: #ccc; + background: #fafafa; } h1, h2, h3, h4, h5, h6 { font-family: "Open Sans", sans-serif; } -h1 a, -h2 a, -h3 a, -h4 a, -h5 a, -h6 a { +main article h1 a, +main article h2 a, +main article h3 a, +main article h4 a, +main article h5 a, +main article h6 a { color: inherit; text-decoration: none; } @@ -31,21 +31,21 @@ h2 { font-size: 1.6em; } +main { + box-shadow: 0 0 40px black; + z-index: 2; +} + main article { max-width: 1800px; - box-shadow: 0 0 20px #777; - padding: 0 50px; + padding: 0 50px 30px; margin: 0 auto; - background: white; + background: #fafafa; min-height: 100%; overflow: auto; font-size: 1.1em; } -p { - line-height: 1.5em; -} - main article h1, main article h2, main article h3 { @@ -54,9 +54,27 @@ main article h3 { margin-left: -10px; } +main article a { + color: #00a; + text-decoration-style: dashed; + text-decoration-color: transparent; + transition: 0.2s all; +} +main article a:hover { + text-decoration-color: unset; +} + +p { + line-height: 1.5em; +} + header { /* sidebar */ - position: relative; + position: sticky; + top: 0; + background: #333; + z-index: 1; + height: 100vh; } header::after { @@ -73,8 +91,7 @@ header::after { background: linear-gradient(to bottom, #333, #333 10%, 70%, transparent), url("/assets/img/background.jpeg") no-repeat bottom center/cover, #333; - /*background: linear-gradient(to bottom, #333 0%, #333 30%, transparent 80%, transparent 100%), url("/assets/img/background.jpeg") no-repeat bottom center/cover;*/ - filter: saturate(33%); + filter: blur(5px) saturate(75%); content: ""; } @@ -89,10 +106,25 @@ nav a { text-decoration: none; font-size: 1.5em; transition: 0.2s all; + position: relative; +} +nav a::before { + width: 5px; + top: 0; + bottom: 0; + left: -5px; + background: mediumpurple; + content: ""; + display: block; + position: absolute; + transition: 0.2s all; } nav a:hover { background: #00000044; } +nav a:hover::before { + left: 0; +} #logo { object-fit: contain;