Better services & small updates
This commit is contained in:
parent
b760cfae65
commit
6e660ab246
9 changed files with 87 additions and 111 deletions
|
|
@ -1,9 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
|
||||
<path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
|
||||
<style>
|
||||
path { fill: #000; }
|
||||
@media (prefers-color-scheme: dark) {
|
||||
path { fill: #FFF; }
|
||||
}
|
||||
</style>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 749 B |
|
|
@ -1 +0,0 @@
|
|||
<svg viewBox="0 0 12.79 11.41" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="a"><stop style="stop-color:#db2446;stop-opacity:1" offset="0"/><stop style="stop-color:#c51b6e;stop-opacity:1" offset="1"/></linearGradient><linearGradient xlink:href="#a" id="b" gradientUnits="userSpaceOnUse" x1="16.32" y1="51.01" x2="28.46" y2="60.75" gradientTransform="translate(-16.3 -49.93)"/></defs><text xml:space="preserve" style="font-size:12.347px;line-height:0;font-family:Cantarell;-inkscape-font-specification:Cantarell;opacity:1;fill:#000;fill-opacity:0;stroke-width:.264578;-inkscape-stroke:none" x="-.31" y="9.72" transform="scale(.99998 1.00002)"><tspan style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;line-height:0;font-family:Inconsolata;-inkscape-font-specification:'Inconsolata Heavy';fill:#000;fill-opacity:0;stroke-width:.264578" x="-.31" y="9.72">{</tspan></text><text xml:space="preserve" style="font-style:normal;font-variant:normal;font-weight:700;font-stretch:normal;font-size:16.3865px;line-height:0;font-family:Inconsolata;-inkscape-font-specification:'Inconsolata Bold';writing-mode:tb-rl;fill:#000;fill-opacity:0;stroke-width:.273109;-inkscape-stroke:none" x="5.07" y="10.67" transform="scale(.99998 1.00002)"><tspan style="writing-mode:lr-tb;fill:#000;fill-opacity:0;stroke-width:.273109" x="5.07" y="10.67">$</tspan></text><path style="font-weight:900;font-size:12.3472px;line-height:0;font-family:Inconsolata;-inkscape-font-specification:'Inconsolata Heavy';fill:url(#b);stroke-width:.264583" d="M8.89 0v.97c-.5.06-.95.2-1.36.42-.42.21-.75.48-1 .82a1.9 1.9 0 0 0-.38 1.17c0 .43.1.82.31 1.16.21.34.52.64.92.9.4.25.9.49 1.46.7v2.97a3.65 3.65 0 0 1-1.25-.44 2.38 2.38 0 0 1-.5-.4.43.43 0 0 1-.14-.26c0-.1-.07-.17-.18-.21l-.85 1.4a4.21 4.21 0 0 0 1.89 1.1c.36.1.72.17 1.08.2v.9h1.15v-.91a3.46 3.46 0 0 0 1.44-.53 2.9 2.9 0 0 0 1.3-2.27c0-.47-.08-.87-.27-1.18a2.38 2.38 0 0 0-.88-.86c-.4-.25-.91-.49-1.55-.72V2.36c.12.02.25.05.37.1l.34.11c.1.05.2.1.3.17.1.06.18.14.26.23.05.03.09.1.11.2.02.1.1.15.21.16l.86-1.09c-.2-.25-.44-.46-.7-.63a3.89 3.89 0 0 0-.86-.43c-.3-.12-.62-.2-.93-.23v-.4c0-.1.01-.2.04-.27a.5.5 0 0 0 .05-.17l-.01-.06c0-.02-.02-.04-.05-.05zM3.84.85c-.52 0-.98.09-1.37.26-.39.16-.7.41-.91.74a2.2 2.2 0 0 0-.33 1.22l.03 1.16c0 .23-.03.41-.09.53a.45.45 0 0 1-.24.26 1 1 0 0 1-.42.08H0v1.34h.52a1 1 0 0 1 .38.07c.1.03.2.11.25.24.06.13.08.34.08.6L1.2 8.4c0 .6.12 1.06.37 1.39.25.34.6.57 1.04.7.44.13.95.2 1.53.2h.69V9.35h-.87c-.26 0-.48-.04-.65-.1a.73.73 0 0 1-.37-.31 1.2 1.2 0 0 1-.11-.55l.02-.86a2.33 2.33 0 0 0-.42-1.35A1.6 1.6 0 0 0 2 5.76c.18-.11.34-.25.47-.42a2.06 2.06 0 0 0 .4-1.25l-.02-1.14c0-.24.06-.42.19-.54.13-.14.33-.2.59-.2h1.21V.85Zm5 1.5v2.14a3.5 3.5 0 0 1-.6-.33c-.17-.13-.3-.27-.4-.4a.92.92 0 0 1-.13-.47c0-.17.05-.32.15-.46a1 1 0 0 1 .4-.3c.18-.1.37-.15.58-.19zm1.24 4.16c.24.08.45.19.63.3.18.13.32.26.4.42a1.15 1.15 0 0 1 .01 1.11 1.74 1.74 0 0 1-1.03.74z"/></svg>
|
||||
|
Before Width: | Height: | Size: 2.9 KiB |
|
|
@ -1,61 +0,0 @@
|
|||
---
|
||||
interface Props {
|
||||
title: string;
|
||||
body: string;
|
||||
href: string;
|
||||
}
|
||||
|
||||
const { href, title, body } = Astro.props;
|
||||
---
|
||||
|
||||
<li class="link-card">
|
||||
<a href={href}>
|
||||
<h2>
|
||||
{title}
|
||||
<span>→</span>
|
||||
</h2>
|
||||
<p>
|
||||
{body}
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<style>
|
||||
.link-card {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
padding: 1px;
|
||||
background-color: #23262d;
|
||||
background-image: none;
|
||||
background-size: 400%;
|
||||
border-radius: 7px;
|
||||
background-position: 100%;
|
||||
transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
.link-card > a {
|
||||
width: 100%;
|
||||
text-decoration: none;
|
||||
line-height: 1.4;
|
||||
padding: calc(1.5rem - 1px);
|
||||
border-radius: 8px;
|
||||
color: white;
|
||||
background-color: #23262d;
|
||||
opacity: 0.8;
|
||||
}
|
||||
h2 {
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
}
|
||||
p {
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.link-card:is(:hover, :focus-within) {
|
||||
background-position: 0;
|
||||
background-image: var(--accent-gradient);
|
||||
}
|
||||
.link-card:is(:hover, :focus-within) h2 {
|
||||
color: rgb(var(--accent-light));
|
||||
}
|
||||
</style>
|
||||
31
src/components/Service.astro
Normal file
31
src/components/Service.astro
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
---
|
||||
import { Icon } from 'astro-icon/components';
|
||||
|
||||
type Props = Service;
|
||||
|
||||
interface Service {
|
||||
icon: string;
|
||||
name: string;
|
||||
desc: string;
|
||||
url?: string;
|
||||
invite?: boolean;
|
||||
}
|
||||
|
||||
const service = Astro.props;
|
||||
---
|
||||
|
||||
<div class="service">
|
||||
<div class="title">
|
||||
<Icon name={ service.icon } />
|
||||
<h3>{ service.name }</h3>
|
||||
</div>
|
||||
<p>{ service.desc }</p>
|
||||
<div class="bottom">
|
||||
{ service.url &&
|
||||
<a href={ "https://" + service.url } target="_blank"><Icon name="tabler:link" /> { service.url }</a>
|
||||
}
|
||||
{ service.invite &&
|
||||
<div class="label">na pozvání</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -28,8 +28,10 @@ import '../styles/fonts.css';
|
|||
<script defer data-domain="codespace.cz" src="https://plausible.cdsp.cz/js/script.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<Nav />
|
||||
<slot />
|
||||
<div class="page">
|
||||
<Nav />
|
||||
<slot />
|
||||
</div>
|
||||
<Footer />
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
import Service from '../components/Service.astro';
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
import { Icon } from 'astro-icon/components';
|
||||
import { services } from '../scripts/services';
|
||||
import { public_services, invite_services } from '../scripts/services';
|
||||
|
||||
const meta = {
|
||||
title: "CodeSpace.cz - Spojuje nás touha po svobodě a nezávislosti v digitální době",
|
||||
|
|
@ -25,17 +25,8 @@ const meta = {
|
|||
<h2>Služby</h2>
|
||||
<p>Přehled veřejných služeb, které provozujeme.</p>
|
||||
<div class="services">
|
||||
{ services.map(service =>
|
||||
<div class="service">
|
||||
<div class="title">
|
||||
<Icon name={ service.icon } />
|
||||
<h3>{ service.name }</h3>
|
||||
</div>
|
||||
<p>{ service.desc }</p>
|
||||
{ service.url &&
|
||||
<a href={ "https://" + service.url } target="_blank"><Icon name="tabler:link" /> { service.url }</a>
|
||||
}
|
||||
</div>
|
||||
{ [...public_services, ...invite_services].map(service =>
|
||||
<Service {...service} />
|
||||
) }
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
import { Icon } from 'astro-icon/components';
|
||||
import { services } from '../scripts/services';
|
||||
import { invite_services, public_services } from '../scripts/services';
|
||||
import Service from '../components/Service.astro';
|
||||
|
||||
const meta = {
|
||||
title: "Služby - CodeSpace.cz",
|
||||
|
|
@ -13,25 +13,30 @@ const meta = {
|
|||
<header>
|
||||
<div class="inner">
|
||||
<h1>Služby</h1>
|
||||
<p>Přehled veřejných služeb, které provozujeme.</p>
|
||||
<p>Přehled všech služeb, které na své infrastruktuře provozujeme.</p>
|
||||
</div>
|
||||
</header>
|
||||
<section>
|
||||
<div class="inner">
|
||||
<h2>Veřejné služby</h2>
|
||||
<p>Přehled všech provozovaných veřejných služeb.</p>
|
||||
<div class="services">
|
||||
{ services.map(service =>
|
||||
<div class="service">
|
||||
<div class="title">
|
||||
<Icon name={ service.icon } />
|
||||
<h3>{ service.name }</h3>
|
||||
</div>
|
||||
<p>{ service.desc }</p>
|
||||
{ service.url &&
|
||||
<a href={ "https://" + service.url } target="_blank"><Icon name="tabler:link" /> { service.url }</a>
|
||||
}
|
||||
</div>
|
||||
{ public_services.map(service =>
|
||||
<Service {...service} />
|
||||
) }
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<div class="inner">
|
||||
<h2>Služby pro členy</h2>
|
||||
<p>Provozujeme také další služby, které jsou určeny především naším členům.</p>
|
||||
<div class="services">
|
||||
{ invite_services.map(service =>
|
||||
<Service {...service} />
|
||||
) }
|
||||
</div>
|
||||
<p>Dokážeme vám individuálně poskytnout i široké spektrum <a href="//wiki.cdsp.cz/services" target="_blank">dalších služeb</a>.</p>
|
||||
</div>
|
||||
</section>
|
||||
</Layout>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,13 @@
|
|||
export const services = [
|
||||
export const public_services = [
|
||||
{name: "Piped", icon: "tabler:brand-youtube", desc: "Alternativní frontend pro YouTube, který vás nesleduje a je bez reklam.", url: "yt.cdsp.cz"},
|
||||
{name: "Piped Music", icon: "tabler:headphones", desc: "Náš open-source klient pro poslech hudby, který vaše data s nikým nesdílí.", url: "pm.cdsp.cz"},
|
||||
{name: "Send", icon: "tabler:cloud-upload", desc: "Posílejte až 10 GB souborů bezpečně a soukromě s end-to-end šifrováním.", url: "send.cdsp.cz"},
|
||||
{name: "Forgejo", icon: "tabler:brand-git", desc: "Jednoduchá a nenáročná nadstavba Gitu, na které vyvíjíme své projekty.", url: "git.cdsp.cz"},
|
||||
{name: "Nextcloud", icon: "tabler:brand-nextcloud", desc: "Úložiště souborů s možností synchronizace a spoustou užitečných aplikací."},
|
||||
{name: "Vaultwarden", icon: "tabler:square-key", desc: "Správce hesel s užitečnými funkcemi kompatibilní s Bitwardenem."}
|
||||
{name: "Send", icon: "tabler:cloud-upload", desc: "Posílejte až 10 GB souborů bezpečně a soukromě s end-to-end šifrováním.", url: "send.cdsp.cz"}
|
||||
];
|
||||
|
||||
export const invite_services = [
|
||||
{name: "Forgejo", icon: "tabler:brand-git", desc: "Jednoduchá a nenáročná nadstavba Gitu, na které vyvíjíme své projekty.", url: "git.cdsp.cz", invite: true},
|
||||
{name: "Vaultwarden", icon: "tabler:key", desc: "Správce hesel s užitečnými funkcemi kompatibilní s Bitwardenem.", url: "vault.cdsp.cz", invite: true},
|
||||
{name: "Plausible", icon: "tabler:chart-pie", desc: "Statistiky návštěvnosti webových stránek respektující soukromí návštěvníků.", url: "plausible.cdsp.cz", invite: true},
|
||||
{name: "Nextcloud", icon: "tabler:brand-nextcloud", desc: "Úložiště souborů s možností synchronizace a spoustou užitečných aplikací.", invite: true},
|
||||
{name: "Webhosting", icon: "tabler:world", desc: "Nabízíme webhostingové služby na naší vlastní platformě.", url: "oohost.cz", invite: true}
|
||||
];
|
||||
|
|
@ -48,7 +48,7 @@ nav {position: sticky; top: 0; left: 0; width: 100%; border-bottom: 1px solid va
|
|||
nav .inner {display: flex; gap: 30px; align-items: center;}
|
||||
|
||||
nav .title {display: flex; gap: 15px; align-items: center;}
|
||||
nav .title label {display: none; padding: 20px; margin: -20px; cursor: pointer; font-size: 24px;}
|
||||
nav .title label {display: none; padding: 20px; margin: -20px; cursor: pointer; font-size: 24px; color: var(--title-color);}
|
||||
nav .title img {height: 30px; padding-bottom: 1px;}
|
||||
|
||||
nav ul {list-style: none; padding: 0; margin: 0; display: flex; gap: 20px; font-size: 20px; flex: 1;}
|
||||
|
|
@ -82,11 +82,17 @@ nav ul li.right {margin-left: auto;}
|
|||
}
|
||||
|
||||
|
||||
/* Sections */
|
||||
|
||||
:is(header, section, footer) > .inner {margin: 70px auto; padding: 0 var(--site-padding);}
|
||||
|
||||
|
||||
/* Header */
|
||||
|
||||
header > .inner {padding: 70px var(--site-padding);}
|
||||
header > .inner {padding: 0 var(--site-padding);}
|
||||
header {border-bottom: 1px solid var(--border-color); overflow: hidden;}
|
||||
|
||||
header.main {background-image: radial-gradient(max(50vh, 60vw) at -10vw 100vh, var(--brand-color-2), transparent), radial-gradient(max(50vh, 60vw) at 110vw 0, var(--brand-color-1), transparent); border-bottom: 1px solid var(--border-color); background-color: var(--dark-bg-color);}
|
||||
header.main {background-image: radial-gradient(max(50vh, 60vw) at -10vw 100vh, var(--brand-color-2), transparent), radial-gradient(max(50vh, 60vw) at 110vw 0, var(--brand-color-1), transparent); background-color: var(--dark-bg-color);}
|
||||
|
||||
header.main .grid {display: grid; grid-template-columns: 600px 1fr;}
|
||||
|
||||
|
|
@ -95,13 +101,15 @@ header.main h1 span:nth-child(1) {color: var(--brand-color-1);}
|
|||
header.main h1 span:nth-child(2) {color: var(--brand-color-2);}
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
header.main > .inner {margin: 40px auto;}
|
||||
header.main .grid {grid-template-columns: 1fr;}
|
||||
}
|
||||
|
||||
|
||||
/* Sections */
|
||||
/* Footer */
|
||||
|
||||
:is(section, footer) > .inner {padding: 0 var(--site-padding); margin: 50px auto;}
|
||||
footer {border-top: 1px solid var(--border-color);}
|
||||
footer > .inner {margin: 30px auto;}
|
||||
|
||||
|
||||
/* Services */
|
||||
|
|
@ -111,6 +119,7 @@ header.main h1 span:nth-child(2) {color: var(--brand-color-2);}
|
|||
.service .title {display: flex; align-items: center; gap: 15px;}
|
||||
.service .title svg {font-size: 24px; color: var(--title-color);}
|
||||
.service :is(h3, p) {margin: 10px 0;}
|
||||
.service .bottom {display: flex; flex-wrap: wrap; gap: 10px; margin: 15px 0;}
|
||||
|
||||
.service a {display: flex; align-items: center; gap: 7px;}
|
||||
|
||||
|
|
@ -120,4 +129,8 @@ header.main h1 span:nth-child(2) {color: var(--brand-color-2);}
|
|||
|
||||
@media screen and (max-width: 600px) {
|
||||
.services {grid-template-columns: 1fr;}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.label {padding: 2px 10px; background-color: var(--alt-bg-color); border-radius: 50px;}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue