Migrated to CodeSpace web components
This commit is contained in:
parent
bad933412b
commit
4006cd3941
7 changed files with 35 additions and 193 deletions
|
|
@ -11,11 +11,12 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"@astrojs/check": "^0.5.10",
|
||||
"@codespacecz/web": "^0.0.1",
|
||||
"@iconify-json/mdi": "^1.1.66",
|
||||
"@iconify-json/tabler": "^1.1.110",
|
||||
"astro": "^4.6.3",
|
||||
"astro-icon": "^1.1.0",
|
||||
"astro-i18n": "^2.2.4",
|
||||
"astro-icon": "^1.1.0",
|
||||
"typescript": "^5.4.5"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
---
|
||||
import { Icon } from 'astro-icon/components';
|
||||
import NavLink from './NavLink.astro';
|
||||
import LanguageSwitcher from './LanguageSwitcher.astro';
|
||||
import "../styles/nav.css";
|
||||
import { t, l } from "astro-i18n";
|
||||
|
||||
const nav = [
|
||||
{title: "home", link: l("/")},
|
||||
{title: "services", link: l("/sluzby")},
|
||||
{title: "contact", link: l("/kontakt")}
|
||||
];
|
||||
---
|
||||
|
||||
<input type="checkbox" id="menu-toggle">
|
||||
<nav>
|
||||
<div class="inner">
|
||||
<div class="title">
|
||||
<a href={ l("/") } class="logo">
|
||||
<img src="/assets/logo.webp" />
|
||||
</a>
|
||||
<label for="menu-toggle">
|
||||
<Icon name="tabler:menu-2" class="icon" />
|
||||
</label>
|
||||
</div>
|
||||
<ul>
|
||||
{ nav.map(item =>
|
||||
<li>
|
||||
<NavLink href={item.link}>{ t(`nav.${item.title}`) }</NavLink>
|
||||
</li>
|
||||
) }
|
||||
<li class="right">
|
||||
<a href="https://status.codespace.cz" target="_blank">{ t("nav.status") } <Icon name="tabler:external-link" /></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://wiki.codespace.cz" target="_blank">{ t("nav.wiki") } <Icon name="tabler:external-link" /></a>
|
||||
</li>
|
||||
<li>
|
||||
<LanguageSwitcher />
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
---
|
||||
import type { HTMLAttributes } from 'astro/types';
|
||||
|
||||
type Props = HTMLAttributes<'a'>;
|
||||
|
||||
const { href, class: className, ...props } = Astro.props;
|
||||
|
||||
const { pathname } = Astro.url;
|
||||
const isActive = href === pathname;
|
||||
---
|
||||
|
||||
<a href={href} class:list={[className, { active: isActive }]} {...props}>
|
||||
<slot />
|
||||
</a>
|
||||
|
|
@ -1,20 +1,10 @@
|
|||
---
|
||||
import Nav from '../components/Nav.astro';
|
||||
import { MetaTags, Nav, NavLink } from '@codespacecz/web/components';
|
||||
import { type Meta } from '@codespacecz/web/types';
|
||||
import LanguageSwitcher from '../components/LanguageSwitcher.astro';
|
||||
import Footer from '../components/Footer.astro';
|
||||
import { t } from 'astro-i18n';
|
||||
|
||||
export interface Meta {
|
||||
site_name: string,
|
||||
author: string,
|
||||
title: string,
|
||||
desc: string,
|
||||
title_suffix: string,
|
||||
use_title_suffix: boolean,
|
||||
image: string,
|
||||
image_type: "banner" | "icon",
|
||||
favicon: string,
|
||||
color: string
|
||||
}
|
||||
import { Icon } from 'astro-icon/components';
|
||||
import { l, t } from 'astro-i18n';
|
||||
|
||||
type Styles = "white-nav";
|
||||
|
||||
|
|
@ -36,16 +26,19 @@ const defaultMeta: Meta = {
|
|||
color: "#cc1e58"
|
||||
};
|
||||
|
||||
const nav = [
|
||||
{title: "home", link: l("/")},
|
||||
{title: "services", link: l("/sluzby")},
|
||||
{title: "contact", link: l("/kontakt")}
|
||||
];
|
||||
|
||||
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 '@codespacecz/web/style.css';
|
||||
import '../styles/global.css';
|
||||
import '../styles/fonts.css';
|
||||
---
|
||||
|
|
@ -53,28 +46,27 @@ import '../styles/fonts.css';
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>{title}</title>
|
||||
<meta name="description" content={meta.desc} />
|
||||
<meta name="theme-color" content={meta.color}>
|
||||
<meta name="description" content={meta.desc}>
|
||||
<meta property="og:site_name" content={meta.site_name}>
|
||||
<meta property="og:title" content={meta.title}>
|
||||
<meta property="og:description" content={meta.desc}>
|
||||
<meta property="og:image" content={meta.image}>
|
||||
<meta property="twitter:site_name" content={meta.site_name}>
|
||||
<meta property="twitter:title" content={meta.title}>
|
||||
<meta property="twitter:description" content={meta.desc}>
|
||||
<meta property="twitter:image" content={meta.image}>
|
||||
<meta property="twitter:card" content={card}>
|
||||
<meta name="author" content={meta.author}>
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<link rel="icon" href={meta.favicon} />
|
||||
<MetaTags meta={meta} />
|
||||
<script is:inline defer data-domain="codespace.cz" src="https://plausible.cdsp.cz/js/script.js"></script>
|
||||
</head>
|
||||
<body class:list={classes}>
|
||||
<div class="page">
|
||||
<Nav />
|
||||
<Nav logo={{link: l("/")}}>
|
||||
{ nav.map(item =>
|
||||
<li>
|
||||
<NavLink href={item.link}>{ t(`nav.${item.title}`) }</NavLink>
|
||||
</li>
|
||||
) }
|
||||
<li class="right">
|
||||
<a href="https://status.codespace.cz" target="_blank">{ t("nav.status") } <Icon name="tabler:external-link" /></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://wiki.codespace.cz" target="_blank">{ t("nav.wiki") } <Icon name="tabler:external-link" /></a>
|
||||
</li>
|
||||
<li>
|
||||
<LanguageSwitcher />
|
||||
</li>
|
||||
</Nav>
|
||||
<slot />
|
||||
</div>
|
||||
<Footer />
|
||||
|
|
|
|||
|
|
@ -1,30 +1,11 @@
|
|||
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);}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
:root {
|
||||
--site-padding: 20px;
|
||||
}
|
||||
:root {
|
||||
--brand-color-1: #db2446;
|
||||
--brand-color-2: #c51b6e;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5 {color: var(--title-color); font-weight: 900;}
|
||||
|
||||
a {color: var(--link-color);}
|
||||
a:hover {color: var(--link-hover-color);}
|
||||
|
||||
|
||||
/* Sections */
|
||||
|
||||
:is(header, section, footer) > .inner {margin: 70px auto; padding: 0 var(--site-padding);}
|
||||
|
||||
|
||||
/* Header */
|
||||
|
||||
header > .inner {padding: 0 var(--site-padding);}
|
||||
header {overflow: hidden;}
|
||||
|
||||
header:not(.no-line) + section {border-top: 1px solid var(--border-color);}
|
||||
header.centered {text-align: center;}
|
||||
|
||||
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;}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,49 +0,0 @@
|
|||
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(-1px - var(--nav-height)); padding-top: calc(1px + var(--nav-height));}
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
: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