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> <style>
div { div {
display: flex; display: flex;
flex-direction: column;
gap: 2rem; gap: 2rem;
flex-flow: row wrap; flex-direction: row;
flex-wrap: wrap;
} }
</style> </style>

View File

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

View File

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