kristoferssolo/kristofersxyz
1
0
Fork 0
mirror of https://github.com/kristoferssolo/kristofersxyz.git synced 2025-10-21 18:30:34 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix nav bar

Browse Source
This commit is contained in:
Kristofers Solo 2023-01-18 14:28:25 +02:00
parent cad16a254d
commit 40d32d140c
2 changed files with 50 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
static/main/css/layout.css
View File

@ -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;

57
templates/layout.html
View File

@ -3,6 +3,7 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="color-scheme" content="dark light">
<link rel="icon" href="{% static 'main/img/icons/logo.svg' %}" />
<title>
{% 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>