phc/website
6
4
Fork 1
Code Issues 9 Pull Requests Projects 1 Releases Wiki Activity

Feature: Bottone per dark mode, logo svg ed altre modifiche alla nav

Browse Source
This commit is contained in:
aziis98
2021-12-18 17:58:07 +01:00
parent 219a966860
commit 647d192ee7
2 changed files with 98 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/style.css
+42 -18
View File
@@ -24,9 +24,9 @@
--shadow-1: 0 0 16px 0 #00000018;
}
html.dark{
body.dark-mode {
--bg: #282828;
--fg: #579f31;
--fg: #6eac4d;
--bg-dark: hsl(10, 10%, 20%);
--bg-darker: hsl(10, 10%, 17%);
@@ -48,7 +48,7 @@ html.dark{
}
* {
box-sizing: border-box;
box-sizing: border-box;
}
html, body {
@@ -98,7 +98,7 @@ nav {
}
/* Tutti i link dentro la navbar sono speciali e non sembrano link */
nav a {
nav .nav-element {
display: flex;
width: 100%;
height: 100%;
@@ -108,6 +108,8 @@ nav a {
text-decoration: none;
color: inherit;
gap: 0.5rem;
}
nav a:hover {
@@ -116,12 +118,10 @@ nav a:hover {
}
nav .nav-logo {
/* height: 3.5rem; */
display: flex;
align-items: center;
justify-content: center;
padding: 0.5rem;
padding: 0.25rem 0;
background: var(--bg-dark);
border-radius: 4px;
@@ -129,21 +129,49 @@ nav .nav-logo {
box-shadow: var(--shadow-1);
}
nav .nav-logo img {
width: 150px;
}
nav .nav-main {
display: grid;
grid-template-columns: repeat(5, 1fr) 2fr 1fr;
display: flex;
/* grid-template-columns: repeat(5, 1fr) 1fr auto 1fr; */
background: var(--bg-dark);
border-radius: 4px;
border: 1px solid var(--bg-darker-2);
box-shadow: var(--shadow-1);
z-index: -1;
}
nav .nav-main a {
padding: 0.75rem 1rem;
nav .nav-item.filler {
width: 6rem;
}
nav .nav-main .nav-element {
padding: 1rem 1.25rem;
cursor: pointer;
}
nav .nav-main .nav-button {
margin: 0 0.5rem;
/* padding: 0.5rem; */
aspect-ratio: 1;
width: 2rem;
height: 2rem;
/* background: var(--bg-darker-2); */
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--bg-darker-2);
border-radius: 1rem;
cursor: pointer;
}
nav .nav-main .nav-item {
@@ -154,19 +182,14 @@ nav .nav-main .nav-item {
background: var(--bg-dark);
user-select: none;
cursor: pointer;
z-index: 2;
}
nav .nav-main .nav-item:hover {
nav .nav-main .nav-element:hover, nav .nav-main .nav-button:hover {
background: var(--bg-darker);
}
nav .nav-main .nav-item:last-child {
grid-column: 7 / 8;
}
nav .nav-main .nav-item.dropdown {
position: relative;
@@ -330,3 +353,4 @@ a:hover {
color: var(--accent-1);
text-decoration: underline;
}
views/base.html
+56 -33
View File
@@ -10,7 +10,6 @@
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css"
integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.js"
@@ -30,19 +29,33 @@
]
});
});
<!-- [> WIP: Dark Mode <]
- document.documentElement.classList.toggle(
- 'dark',
- localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
- );
- document.addEventListener('DOMContentLoaded', () =>
- document.querySelectorAll('[toggle-dark-mode]').forEach((item) =>
- item.addEventListener('click', () => {
- localStorage.setItem('theme', localStorage.theme == 'dark' ? 'light' : 'dark');
- document.documentElement.classList.toggle('dark');
- })
- )
- ); -->
document.addEventListener('DOMContentLoaded', () => {
const $toggle = document.querySelector('#toggle-dark-mode');
const $toggleIcon = document.querySelector('#toggle-dark-mode i');
// Loads prefered dark from from localStorage or default to media query.
let prefersDarkMode = localStorage.getItem('theme') === 'dark'
|| window.matchMedia('(prefers-color-scheme: dark)').matches;
function storePrefersDarkMode(mode) {
prefersDarkMode = mode;
localStorage.setItem('theme', mode ? 'dark' : 'light');
}
function displayToggle() {
document.body.classList.toggle('dark-mode', prefersDarkMode);
$toggleIcon.classList.toggle('fa-moon', prefersDarkMode);
$toggleIcon.classList.toggle('fa-sun', !prefersDarkMode);
}
$toggle.addEventListener('click', () => {
storePrefersDarkMode(!prefersDarkMode);
displayToggle();
});
displayToggle();
});
</script>
@@ -53,57 +66,67 @@
<nav>
<!-- Site -->
<div class="nav-logo">
<a href="/">
<img src="assets/images/logo-circuit-board@100w.png" alt="phc-logo">
<a class="nav-element" href="/">
<img src="assets/images/logo-circuit-board.svg" alt="phc-logo">
</a>
</div>
<div class="nav-main">
<div class="nav-item">
<a href="/utenti">Utenti</a>
<a class="nav-element" href="/utenti">Utenti</a>
</div>
<div class="nav-item">
<a href="/news">News</a>
<a class="nav-element" href="/news">News</a>
</div>
<div class="nav-item dropdown">
<div class="name">
<a href="/progetti">
Progetti
<a class="nav-element" href="/progetti">
<div class="icon">
<i class="fas fa-chevron-down"></i>
</div>
<div class="label">
Progetti
</div>
</a>
</div>
<div class="nav-items">
<div class="nav-item">
<a href="{{ .Config.GitUrl }}">Gitea</a>
<a class="nav-element" href="{{ .Config.GitUrl }}">Gitea</a>
</div>
<div class="nav-item">
<a href="{{ .Config.ForumUrl }}">Zulip</a>
<a class="nav-element" href="{{ .Config.ForumUrl }}">Zulip</a>
</div>
<div class="nav-item">
<a href="/guide">Guide</a>
<a class="nav-element" href="/guide">Guide</a>
</div>
<div class="nav-item">
<a href="/seminari">Seminari</a>
<a class="nav-element" href="/seminari">Seminari</a>
</div>
</div>
</div>
<div class="nav-item">
<a href="/storia">Storia</a>
<a class="nav-element" href="/storia">Storia</a>
</div>
<div class="nav-item">
<a href="/about">About</a>
<a class="nav-element" href="/about">About</a>
</div>
<div class="nav-item filler"></div>
<!-- User Related -->
<div class="nav-item">
<div id="toggle-dark-mode" class="nav-button">
<i class="fas fa-moon"></i>
</div>
</div>
<!-- User -->
{{if .User}}
<div class="nav-item">
<a href="/profile">@{{ .User }}</a>
<a class="nav-element" href="/profile">@{{ .User }}</a>
</div>
{{else}}
<div class="nav-item">
<a href="/login">Accedi</a>
<a class="nav-element" href="/login">Accedi</a>
</div>
{{end}}
<div class="nav-item toggle-dark-mode">
<a href=""><i class="fa-moon"></i></a>
</div>
</div>
</nav>
@@ -119,4 +142,4 @@
</body>
</html>
{{end}}
{{end}}