tweaks and fixes

This commit is contained in:
Akis 2022-08-27 19:37:37 +03:00
parent d0e0e4f7f5
commit 4520565f61
Signed by untrusted user: akis
GPG Key ID: 267BF5C6677944ED
3 changed files with 35 additions and 34 deletions

View File

@ -5,8 +5,8 @@
<style>
div {
display: flex;
flex-direction: column;
gap: 2rem;
flex-flow: row wrap;
flex-direction: row;
flex-wrap: wrap;
}
</style>

View File

@ -71,7 +71,7 @@
</div>
<noscript>
<div class="flex justify-center text-center text-red">
<div class="no-js">
<Note content="Announcements do not work without JavaScript enabled." />
</div>
<style>
@ -147,4 +147,8 @@
align-items: center;
gap: 8px;
}
.no-js {
@apply flex justify-center text-center text-red;
}
</style>

View File

@ -20,42 +20,39 @@
<h1>Our services</h1>
<CardOuter>
<div class="container">
<div class="wrapper">
{#each groups as group}
<div class="container-inner">
<h2>{group.category}</h2>
<div class="items">
{#each group.values as item}
<CardInner
title={item.name}
description={item.description}
icon={item.icon}
>
<LinksOuter>
<Link url={item.website} class="web">
<div class="projectWebsite">
<div class="i-fa6-solid:globe" />
<span>Instance link</span>
</div>
</Link>
<Link url={item.projectWebsite} class="link">
<div class="projectWebsite">
<div class="i-fa6-solid:circle-info" />
<span>Project website</span>
</div>
</Link>
</LinksOuter>
</CardInner>
{/each}
</div>
<h2>{group.category}</h2>
<div class="items">
{#each group.values as item}
<CardInner
title={item.name}
description={item.description}
icon={item.icon}
>
<LinksOuter>
<Link url={item.website} class="web">
<div class="withText">
<div class="i-fa6-solid:globe" />
<span>Instance link</span>
</div>
</Link>
<Link url={item.projectWebsite} class="link">
<div class="withText">
<div class="i-fa6-solid:circle-info" />
<span>Project website</span>
</div>
</Link>
</LinksOuter>
</CardInner>
{/each}
</div>
{/each}
</div>
</CardOuter>
<style>
.container-inner,
.container {
.wrapper {
display: flex;
flex-direction: column;
}
@ -63,11 +60,11 @@
.items {
display: flex;
flex-direction: row;
flex-flow: row wrap;
flex-wrap: wrap;
gap: 2rem;
}
.projectWebsite {
.withText {
display: flex;
align-items: center;
gap: 4px;