diff --git a/assets/css/base.css b/assets/css/base.css index 3604810..8321345 100644 --- a/assets/css/base.css +++ b/assets/css/base.css @@ -59,6 +59,54 @@ object-fit: cover; } + +.header { + display: flex; + flex-direction: row; + height: 40px; + /* width: 100%; */ + background-color: var(--clr-primary-a0); + border-radius: 8px; + filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.2)); + margin: 8px; +} + +.name { + color: var(--clr-light-a0); + font-size: 18px; + margin: auto 0 auto 8px; + font-family: Lexend, serif; +} + +.nav-buttons { + display: flex; + flex-direction: row; + justify-content: flex-end; + align-items: center; + width: 100%; + height: 100%; + margin: 0 8px 0 auto; +} + +.nav-button { + padding: 4px 8px 4px 8px; + border-radius: 8px; + filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.2)); + background-color: transparent; + color: white; + border: none; + font-size: 18px; + font-family: Lexend, serif; +} + +.nav-button:hover { + text-decoration-line: underline; + text-decoration-style: wavy; + background-color: var(--clr-primary-a50); + color: purple; + text-decoration-color: purple; +} + body { background-color: #32004f; margin: 0; diff --git a/assets/css/index.css b/assets/css/index.css index e2a0906..0e42fdf 100644 --- a/assets/css/index.css +++ b/assets/css/index.css @@ -1,21 +1,3 @@ -.header { - display: flex; - flex-direction: row; - height: 40px; - /* width: 100%; */ - background-color: var(--clr-primary-a0); - border-radius: 8px; - filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.2)); - margin: 8px; -} - -.name { - color: var(--clr-light-a0); - font-size: 18px; - margin: auto 0 auto 8px; - font-family: Lexend, serif; -} - .intro { display: flex; flex-direction: column; @@ -23,41 +5,6 @@ max-width: 75vw; } -.nav-buttons { - display: flex; - flex-direction: row; - justify-content: flex-end; - align-items: center; - width: 100%; - height: 100%; - margin: 0 8px 0 auto; -} - -.nav-button { - padding: 4px 8px 4px 8px; - border-radius: 8px; - filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.2)); - background-color: transparent; - color: white; - border: none; - font-size: 18px; - font-family: Lexend, serif; -} - -.nav-button:hover { - text-decoration-line: underline; - text-decoration-style: wavy; - background-color: var(--clr-primary-a50); - color: purple; - text-decoration-color: purple; -} - -.note { - color: gray; - font-size: 18px; - text-align: center; -} - h1 { font-size: 68px; font-family: 'Indie Flower', cursive;