This commit is contained in:
Robin Grenzdörfer 2023-09-01 12:09:35 +00:00
parent 769fd1296c
commit 157e667227
13 changed files with 56 additions and 23 deletions

@ -1,3 +1,3 @@
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.268 4.21a.75.75 0 0 0-1.04 1.08l8.275 7.96H3.75a.75.75 0 1 0 0 1.5h18.752l-8.273 7.96a.75.75 0 0 0 1.04 1.08l9.428-9.07a1 1 0 0 0 0-1.44l-9.428-9.07h-.001z" fill="#000"/>
<path d="M15.268 4.21a.75.75 0 0 0-1.04 1.08l8.275 7.96H3.75a.75.75 0 1 0 0 1.5h18.752l-8.273 7.96a.75.75 0 0 0 1.04 1.08l9.428-9.07a1 1 0 0 0 0-1.44l-9.428-9.07h-.001z" />
</svg>

Before

(image error) Size: 291 B

After

(image error) Size: 280 B

@ -1,3 +1,3 @@
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.634 2.105a.375.375 0 0 0-.52.54l4.138 3.98H1.874a.375.375 0 0 0 0 .75h9.376l-4.136 3.98a.375.375 0 0 0 .52.54l4.713-4.535a.5.5 0 0 0 0-.72L7.634 2.105z" fill="#fff"/>
<path d="M7.634 2.105a.375.375 0 0 0-.52.54l4.138 3.98H1.874a.375.375 0 0 0 0 .75h9.376l-4.136 3.98a.375.375 0 0 0 .52.54l4.713-4.535a.5.5 0 0 0 0-.72L7.634 2.105z" />
</svg>

Before

(image error) Size: 286 B

After

(image error) Size: 275 B

@ -167,6 +167,9 @@
html,
body {
font-family: "Libre Franklin", sans-serif;
button {
font-family: "Libre Franklin", sans-serif;
}
@media @mobile {
font-size: @bodyfontsize;
line-height: 1.4;

@ -174,6 +174,7 @@
.page {
font-size: 1.6rem;
color: @font-color-secondary;
font-family: "Libre Caslon Text", serif;
}
}
@media @tablet {

@ -120,7 +120,7 @@
.titles {
padding: 0 5%;
font-weight: normal;
font-weight: 500;
h1 {
font-size: 2rem;
padding: 20px 0px;
@ -132,6 +132,7 @@
h2 {
font-size: 1.2rem !important;
line-height: 1;
font-family: "Libre Franklin", sans-serif;
}
}
.description {
@ -146,10 +147,10 @@
min-width: 0px;
}
}
@media @tablet {
.titles {
font-weight: normal;
font-weight: 500;
h1 {
font-size: 3.4rem;
padding: 20px 20px;
@ -175,7 +176,7 @@
@media @desktop {
.titles {
font-weight: normal;
font-weight: 500;
h1 {
font-size: 5rem;
padding: 20px 0px;

@ -38,7 +38,7 @@
{#if Object.keys(row).length}
{#if row.topTitle}
<h3 class:red="{row.topTitleRed}">{row.topTitle}</h3>
<h3 style="text-transform: uppercase; font-size: 14px;" class:red="{row.topTitleRed}">{row.topTitle}</h3>
{/if}
{#if nestedPath}
<h3
@ -116,7 +116,7 @@
color: #fa00ff !important;
}
h3 {
font-weight: normal;
font-weight: 500;
}
@media @tablet {
h3 {
@ -134,9 +134,11 @@
}
h2 {
font-size: 2.3rem;
font-weight: 500;
}
h1 {
font-size: 4rem;
font-weight: 500;
}
}
@ -145,6 +147,7 @@
display: flex;
align-items: flex-start;
flex-wrap: wrap;
gap: 20px;
&.dominant {
@media (max-width: 1024px) {
flex-direction: row-reverse;
@ -169,7 +172,7 @@
@media @desktop {
min-width: 30% !important;
}
padding: 10px;
flex: 1;
min-width: 0;
}

@ -81,7 +81,7 @@
display: flex;
flex-direction: column;
.inner-container {
max-width: 170px;
max-width: 200px;
&:hover {
max-width: fit-content;
}
@ -93,8 +93,10 @@
.title {
font-size: min(0.9vw, 14px);
padding: 2px 5px;
text-transform: uppercase;
@media @tablet {
padding: 5px 10px;
font-size: min(1vw, 18px);
}
font-weight: bold;
color: @font-color-secondary;

@ -94,7 +94,7 @@
border: none;
height: 36px;
padding: 2px 15px;
font-size: 14px;
font-size: 20px;
font-weight: bold;
cursor: pointer;
}

@ -27,7 +27,7 @@
display: flex;
flex-direction: column;
align-items: center;
width: 157px;
width: 150px;
gap: 20px;
max-width: 45%;
flex-grow: 1;
@ -40,7 +40,7 @@
gap: 10px;
}
@media @desktop {
width: 240px;
width: 230px;
gap: 40px;
}
img {
@ -55,9 +55,11 @@
text-align: center;
font-size: 2.2rem;
font-family: "Libre Caslon Text", serif;
font-style: normal;
}
p {
text-align: center;
font-weight: bold;
}
}

@ -15,8 +15,10 @@
<div class="box" id="box{i}" class:active="{i == active}">
<div class="content">
<div class="icon">
<svg stroke="{i == active ? 'black' : 'white'}" data-src="{apiBaseURL}page/{pageId}/{box.icon?.src}"
></svg>
<svg
stroke="{i == active ? 'black' : 'white'}"
fill="{i == active ? 'black' : 'white'}"
data-src="{apiBaseURL}page/{pageId}/{box.icon?.src}"></svg>
</div>
<div class="text">
{box.text}
@ -31,8 +33,11 @@
.iconCycleSquares {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
font-size: 0.8rem;
transition: all 600ms;
@media @tablet {
gap: 20px;
font-size: 1rem;
@ -44,6 +49,7 @@
align-items: center;
justify-content: center;
color: @font-color-secondary;
&.active {
background-color: @bg-color;
color: @font-color;
@ -54,16 +60,19 @@
display: flex;
flex-direction: column;
align-items: center;
.text {
width: 100%;
display: flex;
justify-content: center;
text-align: center;
font-family: "Libre Caslon Text", serif;
}
}
@media @tablet {
width: 260px;
height: 260px;
width: 270px;
height: 270px;
gap: 30px;
}
}
}

@ -13,12 +13,12 @@
onMount(() => {
for (let i = 0; i < count; i++) {
let angle = angleStep * i * (Math.PI / 180) // Convert to radians
let angle = (angleStep * i - 90) * (Math.PI / 180) // Convert to radians
circles.push({
x: radius * Math.cos(angle),
y: radius * Math.sin(angle),
rotation: angleStep * i - 90, // subtract 90 to point towards the circle
rotation: angleStep * i + 180, // subtract 90 to point towards the circle
})
}
circles = circles
@ -51,9 +51,10 @@
<svg
id="mySvgObject{i}"
stroke="{i == focused ? 'white' : 'black'}"
fill="{i == focused ? 'white' : 'black'}"
data-src="{apiBaseURL}page/{pageId}/{col.iconCycleCircle?.boxes[i]?.icon?.src}"></svg>
</div>
<div class="text">
<div class="text" style="text-align: center;">
{col.iconCycleCircle?.boxes[i]?.text}
</div>
</div>

@ -15,7 +15,7 @@
border: none;
height: 36px;
padding: 2px 15px;
font-size: 14px;
font-size: 20px;
font-weight: bold;
}
.bright {

@ -2,10 +2,11 @@
import { navigate } from "svelte-routing/src/history"
import { openExtendableNr, pages, rerender, scrollToRowNr } from "../../store"
export let col: Column
let focused = -1
</script>
<div class="link-container">
{#each col.pageLinkBlocks as link}
{#each col.pageLinkBlocks as link, i}
{#if isNaN(link.extendableRowNr)}
<button
class="page-ref"
@ -19,6 +20,12 @@
</button>
{:else}
<button
on:mouseenter="{() => {
focused = i
}}"
on:mouseleave="{() => {
focused = -1
}}"
class="row-ref fill"
on:click="{() => {
$rerender = $rerender + 1
@ -30,7 +37,11 @@
<div>
{link.name}
</div>
<img src="/media/arrow-r.svg" alt="arrow" />
<svg
data-src="/media/arrow-r.svg"
stroke="{i == focused ? '#fff' : 'black'}"
fill="{i == focused ? '#fff' : 'black'}"
style="z-index: 9999; position: relative;"></svg>
</button>
{/if}
{/each}