generated from cms/tibi-docs
parent
769fd1296c
commit
157e667227
frontend
@ -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}
|
||||
|
Loading…
x
Reference in New Issue
Block a user