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 { :root {
--bg: #0d1117; --clr-primary: hsl(216, 28%, 7%);
--bg-accent: #1a1e25; --clr-primary-100: hsla(215, 21%, 11%, 0.9);
--border-radius: 8px; --clr-primary-200: hsla(215, 21%, 11%, 0.5);
--border: 1px solid #30363d; --clr-primary-300: hsl(218, 17%, 12%);
--hover-text-color: #b9bbbd; --clr-primary-400: hsl(212, 12%, 21%);
--hr-color: #30363d; --clr-primary-500: hsl(216, 12%, 25%);
--link-text-color: #58a6ff;
--nav-size: 60px; --clr-secondary: hsl(210, 67%, 96%);
--speed: 500ms; --clr-secondary-hover: hsl(210, 3%, 73%);
--text-color: #f0f6fc; --clr-secondary-link: hsl(212, 100%, 67%);
--code-bg-color: #393f48;
--ff-sans-normal: "Roboto", sans-serif; font-family: roboto, helvetica, arial, sans-serif;
} }
html, html,
body { body {
font-family: var(--ff-sans-normal); color: var(--clr-secondary);
color: var(--text-color); background-color: var(--clr-primary);
background-color: var(--bg);
line-height: 1.5; line-height: 1.5;
min-height: 100vh; min-height: 100vh;
min-width: 300px; min-width: 300px;
display: grid;
grid-template-rows: min-content 1fr;
overflow-x: hidden; overflow-x: hidden;
} }
@ -78,22 +74,22 @@ main {
} }
.primary-navigation { .primary-navigation {
background: #161b22e6; background-color: var(--clr-primary-100);
} }
@supports (backdrop-filter: blur(2rem)) { @supports (backdrop-filter: blur(2rem)) {
.primary-navigation { .primary-navigation {
background: #161b2280; background-color: var(--clr-primary-200);
backdrop-filter: blur(2rem); backdrop-filter: blur(2rem);
} }
} }
.primary-navigation a { .primary-navigation a {
color: var(--text-color); color: var(--clr-secondary);
text-decoration: none; text-decoration: none;
} }
.primary-navigation a:hover { .primary-navigation a:hover {
color: var(--hover-text-color); color: var(--clr-secondary-hover);
} }
.primary-navigation a > [aria-hidden="true"] { .primary-navigation a > [aria-hidden="true"] {
@ -107,7 +103,7 @@ main {
position: fixed; position: fixed;
z-index: 1000; z-index: 1000;
inset: 0 0 0 10%; inset: 0 0 0 20%;
flex-direction: column; flex-direction: column;
padding: min(30vh, 10rem) 2rem; padding: min(30vh, 10rem) 2rem;

7
templates/layout.html
View File

@ -3,6 +3,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="color-scheme" content="dark light">
<link rel="icon" href="{% static 'main/img/icons/logo.svg' %}" /> <link rel="icon" href="{% static 'main/img/icons/logo.svg' %}" />
<title> <title>
{% block title %}{% endblock %} {% block title %}{% endblock %}
@ -17,6 +18,8 @@
<script src="{% static 'main/js/navigation.js' %}" defer></script> <script src="{% static 'main/js/navigation.js' %}" defer></script>
</head> </head>
<body> <body>
<div class="page-container">
<div class="content-wrap">
<header class="primary-header flex"> <header class="primary-header flex">
<div> <div>
<a href="{% url 'home' %}"> <a href="{% url 'home' %}">
@ -36,7 +39,7 @@
<a href="{% url 'home' %}" class="bold">Home</a> <a href="{% url 'home' %}" class="bold">Home</a>
</li> </li>
<li> <li>
<a href="{% url 'instructions' %}" class="bold">Projects</a> <a href="{% url 'projects' %}" class="bold">Projects</a>
</li> </li>
</ul> </ul>
</nav> </nav>
@ -44,5 +47,7 @@
<main> <main>
{% block content %}{% endblock %} {% block content %}{% endblock %}
</main> </main>
</div>
</div>
</body> </body>
</html> </html>