Mobile UI improvements & small changes

src/components/Nav.astro

@@ -14,12 +14,19 @@ const nav = [
 <nav>
 	<div class="inner">
 		<div class="title">
-			<label for="menu-toggle">
-				<Icon name="tabler:menu" />
-			</label>
-			<a href="/">
+			<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>
 		</div>
 		<ul>
 			{ nav.map(item =>

src/pages/index.astro

@@ -16,6 +16,10 @@ const meta = {
 				<div>
 					<h1>Spojuje nás touha po <span>svobodě</span> a <span>nezávislosti</span> v digitální době.</h1>
 					<p>Provozujeme si vlastní síť a servery, abychom nemuseli spoléhat na ostatní. Poskytujeme různé služby, které respektují naše soukromí.</p>
+					{ false && <div class="btn-row">
+						<button class="btn btn-primary btn-large">Přihláška</button>
+						<button class="btn btn-large">O nás</button>
+					</div>}
 				</div>
 			</div>
 		</div>
@@ -23,12 +27,13 @@ const meta = {
 	<section>
 		<div class="inner">
 			<h2>Služby</h2>
-			<p>Přehled veřejných služeb, které provozujeme.</p>
+			<p>Přehled hlavních služeb, které provozujeme.</p>
 			<div class="services">
-				{ [...public_services, ...invite_services].map(service => 
+				{ [...public_services, ...invite_services].slice(0, 6).map(service => 
 					<Service {...service} />
 				) }
 			</div>
+			<button class="btn">Zobrazit vše</button>
 		</div>
 	</section>
 </Layout>

src/styles/global.css

@@ -22,10 +22,11 @@
 
 	--site-padding: 40px;
 	--site-width: 1200px;
+	--nav-height: 75px;
 
 }
 
-body {font-family: Cantarell, sans-serif; background-color: var(--bg-color); color: var(--text-color); margin: 0; line-height: 1.5; font-size: 20px;}
+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);}
 
@@ -43,16 +44,21 @@ 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);}
+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: flex; gap: 15px; align-items: center;}
-nav .title label {display: none; padding: 20px; margin: -20px; cursor: pointer; font-size: 24px; color: var(--title-color);}
+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 a {display: flex; align-items: center; gap: 8px; color: var(--text-color); text-decoration: none; font-weight: 700; padding: 22px 0;}
+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);}
@@ -63,12 +69,16 @@ nav ul li.right {margin-left: auto;}
 
 @media screen and (max-width: 900px) {
 
-	nav {height: 75px; overflow: hidden;}
+	:root {
+		--nav-height: 65px;
+	}
+
+	nav {overflow: hidden;}
 	#menu-toggle:checked + nav {height: 100%;}
 
 	nav .inner {display: block; flex-direction: column-reverse;}
-	nav .title {border-bottom: 1px solid var(--border-color);}
-	nav .title label {display: flex;}
+	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;}
@@ -92,7 +102,7 @@ nav ul li.right {margin-left: auto;}
 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); background-color: var(--dark-bg-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: var(--dark-bg-color);}
 
 header.main .grid {display: grid; grid-template-columns: 600px 1fr;}
 
@@ -100,9 +110,10 @@ header.main h1 {font-weight: 900; font-size: 40px;}
 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;}
+@media screen and (max-width: 650px) {
+	header.main > .inner {margin: 50px auto; text-wrap: balance; text-align: center;}
 	header.main .grid {grid-template-columns: 1fr;}
+	header.main h1 {font-size: 30px;}
 }
 
 
@@ -133,4 +144,3 @@ footer > .inner {margin: 30px auto;}
 
 
 .label {padding: 2px 10px; background-color: var(--alt-bg-color); border-radius: 50px;}
-