forked from ProjectSegfault/website
commit
54234f010c
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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;
|
||||||
|
Loading…
Reference in New Issue
Block a user