From f37b7ce47b558e26e09c5c9bef11b8ea821064e8 Mon Sep 17 00:00:00 2001 From: "Adam T. Carpenter" Date: Sun, 27 Mar 2022 13:34:47 -0400 Subject: feat: navbar, footer, color vars, svg includes, desktop css --- close-menu.svg | 3 + desktop.css | 9 +++ index.css | 69 ++++++++++++++++++++++- index.php | 174 +++++++++++++++++++++++++++++---------------------------- menu.svg | 3 + 5 files changed, 172 insertions(+), 86 deletions(-) create mode 100644 close-menu.svg create mode 100644 menu.svg diff --git a/close-menu.svg b/close-menu.svg new file mode 100644 index 0000000..5ecf9df --- /dev/null +++ b/close-menu.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/desktop.css b/desktop.css index e61e778..2ee28b0 100644 --- a/desktop.css +++ b/desktop.css @@ -2,13 +2,22 @@ a.closeMenu { display: none; } + a.openMenu { display: none; } + nav { display: block; } + #menu:target a.closeMenu { display: none; } + + html, + body { + padding-right: 15%; + padding-left: 15%; + } } diff --git a/index.css b/index.css index 37bdccb..bc9bee5 100644 --- a/index.css +++ b/index.css @@ -1,10 +1,41 @@ -html { +:root { + --cultured: #efefefff; + --light-cyan: #cae4dbff; + --maximum-blue-green: #4ec5c1ff; + --minion-yellow: #f9e45bff; + --powder-blue: #caebf2ff; + --teal-blue: #2b6777ff; + --bar-background: var(--powder-blue); + --text-color: var(--teal-blue); + --link-color: var(--maximum-blue-green); + --background: var(--cultured); + --secondary-family: Lato, sans-serif; +} + +html body { font-family: "Vollkorn", serif; + font-size: 1.25em; + color: var(--text-color); + background-color: var(--background); + margin: 0; + padding: 0; +} + +a { + color: var(--link-color); +} + +nav a { + color: var(--text-color); + font-size: 0.75em; + text-decoration: none; + padding-right: 1em; } a.closeMenu { float: right; display: none; + text-align: right; } #menu:target nav { @@ -17,6 +48,8 @@ a.closeMenu { a.openMenu { float: right; + padding: 1em; + padding-right: 2em; } #menu:target a.closeMenu { @@ -24,6 +57,38 @@ a.openMenu { } nav { - background-color: red; + text-align: center; + background-color: var(--bar-background); display: none; + margin: 0; + padding: 1em; +} + +svg path { + fill: var(--text-color); +} + +main { + padding: 1em; +} + +footer { + font-size: 0.75em; + text-align: center; + background-color: var(--bar-background); + margin: 0; + padding: 1em; +} + +h1 { + padding-top: 0.25em; + text-align: center; + font-size: 3em; +} + +h2, +footer, +nav a { + font-family: var(--secondary-family); + text-transform: uppercase; } diff --git a/index.php b/index.php index a8a852b..ca5facd 100644 --- a/index.php +++ b/index.php @@ -1,88 +1,94 @@ - - The University Edge - - - - - - - - - - - - - - - - - - - -
- - - - - - -
-

- Nostrum eum pariatur pariatur qui libero dolores modi incidunt. - Tempora asperiores nostrum asperiores non nihil. Dolores adipisci quia - sed aut excepturi. Nobis harum perspiciatis molestiae atque. -

- -

- Reprehenderit quaerat maiores voluptas non reiciendis. Porro dicta - necessitatibus voluptatibus alias qui at quaerat. Non explicabo neque - impedit. Non velit amet accusantium aut itaque necessitatibus. Eveniet - sunt consequatur officia. -

- -

- Recusandae deserunt ullam corrupti et. Quam est et voluptatum - consequatur. Voluptates quia suscipit in voluptates. -

- -

- Quia porro aliquam illum eius possimus reprehenderit hic. Sed - similique qui et. Eos aut illum veniam. Voluptas dolores minima et - dolor reiciendis. -

-
-
- - - - + + + + + + + \ No newline at end of file diff --git a/menu.svg b/menu.svg new file mode 100644 index 0000000..99e9165 --- /dev/null +++ b/menu.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file -- cgit v1.2.3