Mobile UI improvements & small changes
This commit is contained in:
parent
6e660ab246
commit
332a30c917
3 changed files with 40 additions and 18 deletions
|
@ -14,12 +14,19 @@ const nav = [
|
|||
<nav>
|
||||
<div class="inner">
|
||||
<div class="title">
|
||||
<div class="left">
|
||||
<label for="menu-toggle">
|
||||
<Icon name="tabler:menu" />
|
||||
<Icon name="tabler:menu" class="icon" />
|
||||
</label>
|
||||
<a href="/">
|
||||
</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 =>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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;}
|
||||
|
||||
|
|
Loading…
Reference in a new issue