Improved navigation bar
This commit is contained in:
parent
06827ebc49
commit
4a114678eb
6 changed files with 97 additions and 97 deletions
|
|
@ -1,6 +1,7 @@
|
|||
---
|
||||
import { Icon } from 'astro-icon/components';
|
||||
import NavLink from './NavLink.astro';
|
||||
import "../styles/nav.css";
|
||||
|
||||
const nav = [
|
||||
{title: "Úvod", link: "/"},
|
||||
|
|
@ -14,19 +15,12 @@ const nav = [
|
|||
<nav>
|
||||
<div class="inner">
|
||||
<div class="title">
|
||||
<div class="left">
|
||||
<label for="menu-toggle">
|
||||
<Icon name="tabler:menu" class="icon" />
|
||||
</label>
|
||||
</div>
|
||||
<a href="/" class="logo">
|
||||
<img src="/assets/logo.webp" />
|
||||
</a>
|
||||
<div class="right">
|
||||
<a href="//wiki.cdsp.cz">
|
||||
<Icon name="tabler:bookmark" class="icon" />
|
||||
</a>
|
||||
</div>
|
||||
<label for="menu-toggle">
|
||||
<Icon name="tabler:menu-2" class="icon" />
|
||||
</label>
|
||||
</div>
|
||||
<ul>
|
||||
{ nav.map(item =>
|
||||
|
|
@ -35,10 +29,10 @@ const nav = [
|
|||
</li>
|
||||
) }
|
||||
<li class="right">
|
||||
<a href="//status.cdsp.cz" target="_blank">Stav služeb <Icon name="tabler:external-link"></a>
|
||||
<a href="https://status.codespace.cz" target="_blank">Stav služeb <Icon name="tabler:external-link"></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="//wiki.cdsp.cz" target="_blank">Wiki <Icon name="tabler:external-link"></a>
|
||||
<a href="https://wiki.codespace.cz" target="_blank">Wiki <Icon name="tabler:external-link"></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -15,8 +15,11 @@ interface Meta {
|
|||
color: string
|
||||
}
|
||||
|
||||
type Styles = "white-nav";
|
||||
|
||||
interface Props {
|
||||
meta: Partial<Meta>
|
||||
meta: Partial<Meta>,
|
||||
style?: Styles[]
|
||||
}
|
||||
|
||||
const defaultMeta: Meta = {
|
||||
|
|
@ -34,10 +37,14 @@ const defaultMeta: Meta = {
|
|||
|
||||
const props = Astro.props;
|
||||
const meta = { ...defaultMeta, ...props.meta };
|
||||
let classes: string[] = [];
|
||||
|
||||
props.style?.forEach(s => classes.push(`style-${s}`));
|
||||
|
||||
const title = meta.title + (meta.use_title_suffix ? meta.title_suffix : "");
|
||||
const card = meta.image_type == "banner" ? "summary_large_image" : "summary";
|
||||
|
||||
import '../styles/variables.css';
|
||||
import '../styles/global.css';
|
||||
import '../styles/fonts.css';
|
||||
---
|
||||
|
|
@ -64,7 +71,7 @@ import '../styles/fonts.css';
|
|||
<link rel="icon" href={meta.favicon} />
|
||||
<script is:inline defer data-domain="codespace.cz" src="https://plausible.cdsp.cz/js/script.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<body class:list={classes}>
|
||||
<div class="page">
|
||||
<Nav />
|
||||
<slot />
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ const meta = {
|
|||
---
|
||||
|
||||
<Layout meta={meta}>
|
||||
<header class="main">
|
||||
<header class="main under-nav">
|
||||
<div class="inner">
|
||||
<div class="grid">
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -1,31 +1,3 @@
|
|||
:root {
|
||||
|
||||
--bg-color: #18181b;
|
||||
--dark-bg-color: #000000;
|
||||
--alt-bg-color: #232327;
|
||||
|
||||
--border-color: #27272a;
|
||||
|
||||
--brand-color-1: #db2446;
|
||||
--brand-color-2: #c51b6e;
|
||||
|
||||
--nav-link-color: #fff;
|
||||
--inactive-color: #444;
|
||||
|
||||
--title-color: #fff;
|
||||
--text-color: #fffa;
|
||||
--text-hover-color: #fffd;
|
||||
--text-active-color: #fff;
|
||||
|
||||
--link-color: #dd4379;
|
||||
--link-hover-color: #c21f58;
|
||||
|
||||
--site-padding: 40px;
|
||||
--site-width: 1200px;
|
||||
--nav-height: 75px;
|
||||
|
||||
}
|
||||
|
||||
html, body {font-family: Cantarell, sans-serif; background-color: var(--bg-color); color: var(--text-color); margin: 0; line-height: 1.5; font-size: 20px; display: flex; flex-direction: column; justify-content: space-between; min-height: 100vh;}
|
||||
|
||||
:is(nav, header, section, footer) > .inner {max-width: var(--site-width); margin: auto; padding: 0 var(--site-padding);}
|
||||
|
|
@ -42,56 +14,6 @@ a {color: var(--link-color);}
|
|||
a:hover {color: var(--link-hover-color);}
|
||||
|
||||
|
||||
/* Navigation */
|
||||
|
||||
nav {position: sticky; top: 0; left: 0; width: 100%; border-bottom: 1px solid var(--border-color); background-color: var(--bg-color); height: var(--nav-height);}
|
||||
|
||||
nav .inner {display: flex; gap: 30px; align-items: center;}
|
||||
|
||||
nav .title > * {display: none;}
|
||||
nav .title img {height: 30px; padding-bottom: 1px;}
|
||||
nav .title .icon {padding: 20px; margin: -20px; cursor: pointer; font-size: 24px; color: var(--title-color);}
|
||||
nav .title .logo {display: flex;}
|
||||
|
||||
nav .title .right {justify-content: right;}
|
||||
|
||||
nav :is(a, label) {display: flex; align-items: center;}
|
||||
|
||||
nav ul {list-style: none; padding: 0; margin: 0; display: flex; gap: 20px; font-size: 20px; flex: 1;}
|
||||
nav ul a {gap: 8px; color: var(--text-color); text-decoration: none; font-weight: 700; padding: 22px 0;}
|
||||
|
||||
nav a.active {color: var(--nav-link-color); box-shadow: 0 1px 0 0 var(--nav-link-color);}
|
||||
nav a:hover {color: var(--text-hover-color);}
|
||||
|
||||
nav ul li.right {margin-left: auto;}
|
||||
|
||||
#menu-toggle {display: none;}
|
||||
|
||||
@media screen and (max-width: 900px) {
|
||||
|
||||
:root {
|
||||
--nav-height: 65px;
|
||||
}
|
||||
|
||||
nav {overflow: hidden;}
|
||||
#menu-toggle:checked + nav {height: 100%;}
|
||||
|
||||
nav .inner {display: block; flex-direction: column-reverse;}
|
||||
nav .title {display: grid; gap: 15px; grid-template-columns: 1fr max-content 1fr; border-bottom: 1px solid var(--border-color); height: var(--nav-height);}
|
||||
nav .title > *, .nav .title {display: flex; align-items: center;}
|
||||
|
||||
nav ul {flex-direction: column; margin: 25px 0; gap: 0px;}
|
||||
nav ul li {margin: 0 !important;}
|
||||
|
||||
nav ul a {padding: 8px 20px; padding-left: 51px; margin: 0 -20px; font-size: 18px; position: relative; text-decoration: none;}
|
||||
nav ul a.active {font-weight: 900; box-shadow: none;}
|
||||
|
||||
nav ul a::before {content: ""; width: 11px; height: 2px; background-color: var(--inactive-color); position: absolute; left: 23px; top: 50%; border-radius: 5px;}
|
||||
nav ul a.active::before {background-color: var(--brand-color-1);}
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* Sections */
|
||||
|
||||
:is(header, section, footer) > .inner {margin: 70px auto; padding: 0 var(--site-padding);}
|
||||
|
|
@ -100,9 +22,11 @@ nav ul li.right {margin-left: auto;}
|
|||
/* Header */
|
||||
|
||||
header > .inner {padding: 0 var(--site-padding);}
|
||||
header {border-bottom: 1px solid var(--border-color); overflow: hidden;}
|
||||
header {overflow: hidden;}
|
||||
|
||||
header.main {background-image: radial-gradient(max(50vh, 60vw) at -30vw 70vh, var(--brand-color-2), transparent), radial-gradient(max(50vh, 60vw) at 110vw -10vh, var(--brand-color-1), transparent); background-color: var(--dark-bg-color);}
|
||||
header:not(.no-line) + section {border-top: 1px solid var(--border-color);}
|
||||
|
||||
header.main {background-image: radial-gradient(max(50vh, 60vw) at -30vw 70vh, var(--brand-color-2), transparent), radial-gradient(max(50vh, 60vw) at 110vw -10vh, var(--brand-color-1), transparent); background-color: #000;}
|
||||
|
||||
header.main .grid {display: grid; grid-template-columns: 600px 1fr;}
|
||||
|
||||
|
|
@ -135,11 +59,11 @@ footer > .inner {margin: 30px auto;}
|
|||
.service a {display: flex; align-items: center; gap: 7px;}
|
||||
|
||||
@media screen and (max-width: 900px) {
|
||||
.services {grid-template-columns: 1fr 1fr;}
|
||||
.services {grid-template-columns: 1fr 1fr;}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.services {grid-template-columns: 1fr;}
|
||||
.services {grid-template-columns: 1fr;}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
49
src/styles/nav.css
Normal file
49
src/styles/nav.css
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
nav {position: relative; top: 0; left: 0; width: 100%; border-bottom: 1px solid var(--border-color); height: var(--nav-height);}
|
||||
|
||||
.style-white-nav nav img {filter: grayscale(1) brightness(10);}
|
||||
|
||||
nav .inner {display: flex; gap: 30px; align-items: center;}
|
||||
|
||||
nav .title > * {display: none;}
|
||||
nav .title img {height: 30px;}
|
||||
nav .title .icon {padding: 20px; margin: -20px; cursor: pointer; font-size: 24px; color: var(--title-color);}
|
||||
nav .title .logo {display: flex;}
|
||||
|
||||
nav :is(a, label) {display: flex; align-items: center;}
|
||||
|
||||
nav ul {list-style: none; padding: 0; margin: 0; display: flex; gap: 20px; font-size: 20px; flex: 1;}
|
||||
nav ul a {gap: 8px; color: var(--text-color); text-decoration: none; font-weight: 700; padding: 22px 0;}
|
||||
|
||||
nav a.active {color: var(--nav-link-color); box-shadow: 0 1px 0 0 var(--nav-link-color);}
|
||||
nav a:hover {color: var(--text-hover-color);}
|
||||
|
||||
nav ul li.right {margin-left: auto;}
|
||||
|
||||
#menu-toggle {display: none;}
|
||||
|
||||
@media screen and (max-width: 900px) {
|
||||
|
||||
:root {
|
||||
--nav-height: 64px !important;
|
||||
}
|
||||
|
||||
nav {overflow: hidden;}
|
||||
#menu-toggle:checked + nav {height: 100%;}
|
||||
|
||||
nav .inner {display: block; flex-direction: column-reverse;}
|
||||
nav .title {display: grid; gap: 15px; grid-template-columns: 1fr max-content; border-bottom: 1px solid var(--border-color); height: var(--nav-height);}
|
||||
nav .title > *, .nav .title {display: flex; align-items: center;}
|
||||
nav .title img {height: 24px;}
|
||||
|
||||
nav ul {flex-direction: column; margin: 20px 0; gap: 0px;}
|
||||
nav ul li {margin: 0 !important;}
|
||||
|
||||
nav ul a {padding: 6px 20px; padding-left: 51px; margin: 0 -20px; font-size: 18px; position: relative; text-decoration: none;}
|
||||
nav ul a.active {font-weight: 900; box-shadow: none;}
|
||||
|
||||
nav ul a::before {content: ""; width: 11px; height: 2px; background-color: var(--inactive-color); position: absolute; left: 23px; top: 50%; border-radius: 5px;}
|
||||
nav ul a.active::before {background-color: var(--brand-color-1);}
|
||||
|
||||
}
|
||||
|
||||
:not(#menu-toggle:checked) + nav + header.under-nav {margin-top: calc(0px - var(--nav-height)); padding-top: var(--nav-height);}
|
||||
26
src/styles/variables.css
Normal file
26
src/styles/variables.css
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
:root {
|
||||
|
||||
--bg-color: #18181b;
|
||||
--alt-bg-color: #232327;
|
||||
|
||||
--border-color: rgba(255, 255, 255, 0.1);
|
||||
|
||||
--brand-color-1: #db2446;
|
||||
--brand-color-2: #c51b6e;
|
||||
|
||||
--nav-link-color: #fff;
|
||||
--inactive-color: #fff5;
|
||||
|
||||
--title-color: #fff;
|
||||
--text-color: #fffa;
|
||||
--text-hover-color: #fffd;
|
||||
--text-active-color: #fff;
|
||||
|
||||
--link-color: #dd4379;
|
||||
--link-hover-color: #c21f58;
|
||||
|
||||
--site-padding: 40px;
|
||||
--site-width: 1200px;
|
||||
--nav-height: 75px;
|
||||
|
||||
}
|
||||
Loading…
Reference in a new issue