From 40d32d140c55acc52ebdb415e201fb4c935c2fd4 Mon Sep 17 00:00:00 2001 From: Kristofers Solo Date: Wed, 18 Jan 2023 14:28:25 +0200 Subject: [PATCH] Fix nav bar --- static/main/css/layout.css | 42 +++++++++++++--------------- templates/layout.html | 57 +++++++++++++++++++++----------------- 2 files changed, 50 insertions(+), 49 deletions(-) diff --git a/static/main/css/layout.css b/static/main/css/layout.css index 0981bf0..0dc728f 100644 --- a/static/main/css/layout.css +++ b/static/main/css/layout.css @@ -1,30 +1,26 @@ :root { - --bg: #0d1117; - --bg-accent: #1a1e25; - --border-radius: 8px; - --border: 1px solid #30363d; - --hover-text-color: #b9bbbd; - --hr-color: #30363d; - --link-text-color: #58a6ff; - --nav-size: 60px; - --speed: 500ms; - --text-color: #f0f6fc; - --code-bg-color: #393f48; - --ff-sans-normal: "Roboto", sans-serif; + --clr-primary: hsl(216, 28%, 7%); + --clr-primary-100: hsla(215, 21%, 11%, 0.9); + --clr-primary-200: hsla(215, 21%, 11%, 0.5); + --clr-primary-300: hsl(218, 17%, 12%); + --clr-primary-400: hsl(212, 12%, 21%); + --clr-primary-500: hsl(216, 12%, 25%); + + --clr-secondary: hsl(210, 67%, 96%); + --clr-secondary-hover: hsl(210, 3%, 73%); + --clr-secondary-link: hsl(212, 100%, 67%); + + font-family: roboto, helvetica, arial, sans-serif; } html, body { - font-family: var(--ff-sans-normal); - color: var(--text-color); - background-color: var(--bg); + color: var(--clr-secondary); + background-color: var(--clr-primary); line-height: 1.5; min-height: 100vh; min-width: 300px; - display: grid; - grid-template-rows: min-content 1fr; - overflow-x: hidden; } @@ -78,22 +74,22 @@ main { } .primary-navigation { - background: #161b22e6; + background-color: var(--clr-primary-100); } @supports (backdrop-filter: blur(2rem)) { .primary-navigation { - background: #161b2280; + background-color: var(--clr-primary-200); backdrop-filter: blur(2rem); } } .primary-navigation a { - color: var(--text-color); + color: var(--clr-secondary); text-decoration: none; } .primary-navigation a:hover { - color: var(--hover-text-color); + color: var(--clr-secondary-hover); } .primary-navigation a > [aria-hidden="true"] { @@ -107,7 +103,7 @@ main { position: fixed; z-index: 1000; - inset: 0 0 0 10%; + inset: 0 0 0 20%; flex-direction: column; padding: min(30vh, 10rem) 2rem; diff --git a/templates/layout.html b/templates/layout.html index bdc4e52..fd846eb 100644 --- a/templates/layout.html +++ b/templates/layout.html @@ -3,6 +3,7 @@ + {% block title %}{% endblock %} @@ -17,32 +18,36 @@ <script src="{% static 'main/js/navigation.js' %}" defer></script> </head> <body> - <header class="primary-header flex"> - <div> - <a href="{% url 'home' %}"> - <img src="{% static 'main/img/icons/logo.svg' %}" alt="logo" class="logo"> - </a> + <div class="page-container"> + <div class="content-wrap"> + <header class="primary-header flex"> + <div> + <a href="{% url 'home' %}"> + <img src="{% static 'main/img/icons/logo.svg' %}" alt="logo" class="logo"> + </a> + </div> + <button class="mobile-nav-toggle" + aria-controls="primary-navigation" + aria-expanded="false"> + <span class="sr-only">Menu</span> + </button> + <nav> + <ul id="primary-navigation" + class="primary-navigation flex" + data-visible="false"> + <li> + <a href="{% url 'home' %}" class="bold">Home</a> + </li> + <li> + <a href="{% url 'projects' %}" class="bold">Projects</a> + </li> + </ul> + </nav> + </header> + <main> + {% block content %}{% endblock %} + </main> </div> - <button class="mobile-nav-toggle" - aria-controls="primary-navigation" - aria-expanded="false"> - <span class="sr-only">Menu</span> - </button> - <nav> - <ul id="primary-navigation" - class="primary-navigation flex" - data-visible="false"> - <li> - <a href="{% url 'home' %}" class="bold">Home</a> - </li> - <li> - <a href="{% url 'instructions' %}" class="bold">Projects</a> - </li> - </ul> - </nav> - </header> - <main> - {% block content %}{% endblock %} - </main> + </div> </body> </html>