diff --git a/static/styles.css b/static/styles.css index bc06055..1b4a656 100644 --- a/static/styles.css +++ b/static/styles.css @@ -15,7 +15,7 @@ /* Base styles */ body, html { - font-family: 'Segoe UI', Arial, sans-serif; + font-family: 'Poppins', 'Montserrat', 'Segoe UI', Arial, sans-serif; margin: 0; padding: 0; overflow: hidden; @@ -48,7 +48,7 @@ h1::after { #map { width: 100%; height: 100vh; - position: relative; + position: static !important; } main { @@ -64,6 +64,20 @@ main { width: 100vw; z-index: 5; } +nav li [role=button], +nav li [type=button], +nav li button { + background-color: rgba(255, 136, 0, 0.8); + color: white; + border: none; + padding: 0.5rem 1rem; + border-radius: 4px; + cursor: pointer; + transition: all 0.3s ease; +} +li a { + background-color: rgba(255, 136, 0, 0.8); +} footer { position: fixed; @@ -80,6 +94,16 @@ footer { z-index: 15; } +table#mapistas thead tr th { + background-color: rgba(202,216,3,0.7); + color: black; +} + +table#mapistas tbody tr td { + background-color: rgba(202,216,3,0.7); + color: black; +} + article { position: fixed; top: 12%; /* Space for nav */ @@ -110,7 +134,7 @@ nav { left: 0; right: 0; padding-left: 10vw; - padding-right:10vw; + /* padding-right:10vw; */ background-color: rgba(189, 216, 3, 0.24); /* padding: var(--spacing-sm); */ z-index: 1000; @@ -133,6 +157,20 @@ nav ul li { list-style: none; } +.desktop-menu li a { + display: flex; + justify-content: space-between; + align-items: center; +} + +.desktop-menu li a:hover { + background-color: rgb(74, 133, 34); + animation: pulse 1.5s infinite ease-in-out; + box-shadow: 0 0 -10px rgba(172, 255, 47, 0.7); + transition: all 0.2s ease; + transform: scale(1.02); +} + /* Buttons */ button { transition: all 0.3s ease; @@ -284,12 +322,14 @@ section#pinner-modal::-webkit-scrollbar-thumb { /* Notifications */ .flashes { - position: relative; + position: absolute; display: flex; + width: max-content; z-index: 1001; border-radius: 20px; background-color: rgba(189, 216, 3, 0.6); - top: 8%; + top: 12vh; + left: 10vw; padding: var(--spacing-md); border: 2px solid rgba(0, 0, 0, 0.1); box-shadow: 0 4px 15px var(--shadow-color); @@ -308,7 +348,6 @@ section#pinner-modal::-webkit-scrollbar-thumb { 90% { opacity: 1; transform: translateY(0); } } -@keyframes pulse { @keyframes pulse { 0% { box-shadow: 0 0 10px rgba(172, 255, 47, 0.7); } 50% { box-shadow: 0 0 15px rgba(172, 255, 47, 0.9); } diff --git a/templates/index.html b/templates/index.html index 3745052..c8a46ed 100644 --- a/templates/index.html +++ b/templates/index.html @@ -1,7 +1,7 @@ {% extends 'base.html' %} {% block content %} -
+