stopplidelsen/innhold
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add FAQ page template and improve button styling

Browse source 
Update frontpage content and styling Add metadata for new FAQ pages
Implement consistent button styling across templates
This commit is contained in:
Ruben 2025-10-15 20:51:38 +02:00
parent f906c5b444
commit 89c4ce89b6
9 changed files with 184 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

40
custom/styles/base.css
View file

@ -18,7 +18,7 @@
/* GLOBAL */
html { font-family: var(--font-body); font-size: clamp(16px, 2.3vw, 20px); scroll-behavior: smooth; }
body { margin: 0; color: var(--color-grey) }
p, ul, ol { line-height: 1.5em; hyphens: auto }
p, ul, ol, aside { line-height: 1.5em; hyphens: auto }
img { max-width: 100%; height: auto; }
h1 { color: var(--color-green); font-size: 2.3rem }
h1, h2, h3, h4, h5, h6 {
@ -119,35 +119,51 @@ main {
.button {
display: inline-block;
text-decoration: none;
border-radius: 1rem;
border-radius: 2rem;
padding: 0.35rem 1rem;
background-color: var(--color-grey);
color: white;
background-color: transparent;
color: var(--color-grey);
outline: 0.08rem var(--color-grey) solid;
&:hover, &.active {
&:hover {
background-color: var(--color-grey);
color: white;
outline: none;
}
&:active, &.active {
background-color: var(--color-green);
color: white;
outline: none;
}
&:focus {
outline: 0.1rem var(--color-green) solid;
color: var(--color-grey);
background-color: white;
background-color: var(--color-green);
color: white;
outline: none;
}
&.inverted {
background-color: white;
color: var(--color-grey);
background-color: transparent;
color: white;
outline: 0.08rem white solid;
&:hover, &.active {
&:hover {
background-color: white;
color: var(--color-green);
outline: none;
}
&:active, &.active {
background-color: var(--color-green-light);
color: var(--color-green);
outline: none;
}
&:focus {
outline: 0.1rem white solid;
color: white;
background-color: var(--color-grey);
outline: none;
}
}

20
custom/templates/list-card-grid.php
View file

@ -26,9 +26,9 @@
<?php endif; ?>
<div class="card-actions">
<?php if (!empty($item['pdf'])): ?>
<a href="<?= htmlspecialchars($item['pdf']) ?>" class="btn-download" download>Last ned PDF</a>
<a href="<?= htmlspecialchars($item['pdf']) ?>" class="button" download>Last ned PDF</a>
<?php endif; ?>
<a href="<?= htmlspecialchars($item['url']) ?>" class="btn-read-more">Les mer</a>
<a href="<?= htmlspecialchars($item['url']) ?>" class="button">Les mer</a>
</div>
</article>
<?php endforeach; ?>
@ -71,22 +71,6 @@ main > section.list-card-grid-wrapper {
a {
margin-top: 1.3rem;
border-radius: 1rem;
background-color: var(--color-grey);
padding: 0.35rem 1rem;
color: white;
text-decoration: none;
&:hover {
background-color: var(--color-green);
color: white;
}
&:focus {
outline: 0.1rem var(--color-green) solid;
color: var(--color-grey);
background-color: white;
}
}
}
}

141
custom/templates/list-faq.php Normal file
View file

@ -0,0 +1,141 @@
<?php if (!empty($pageContent)): ?>
<article class="list-intro">
<?= $pageContent ?>
</article>
<?php endif; ?>
<section class="list-faq-wrapper">
<div class="list-faq">
<?php foreach ($items as $item): ?>
<details class="faq-item">
<summary>
<h2><?= htmlspecialchars($item['title']) ?></h2>
<span class="toggle-icon" aria-hidden="true"></span>
</summary>
<div class="faq-content">
<?php if ($item['summary']): ?>
<p><strong>Kort oppsumert:</strong> <?= htmlspecialchars($item['summary']) ?></p>
<?php endif; ?>
<a href="<?= htmlspecialchars($item['url']) ?>" class="button">Les hele svaret</a>
</div>
</details>
<?php endforeach; ?>
</div>
</section>
<style>
main > section.list-faq-wrapper {
margin-top: 1.3em;
.list-faq {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.faq-item {
background-color: white;
border: 1px solid #e0e0e0;
border-radius: 0.5rem;
overflow: hidden;
transition: border-color 0.2s ease;
&:hover {
border-color: var(--color-green);
}
&[open] {
border-color: var(--color-green);
}
}
summary {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.5rem;
cursor: pointer;
list-style: none;
user-select: none;
&::-webkit-details-marker {
display: none;
}
h2 {
margin: 0;
font-size: 1.3rem;
font-weight: 400;
color: var(--color-grey);
flex: 1;
}
.toggle-icon {
width: 1.5rem;
height: 1.5rem;
flex-shrink: 0;
position: relative;
margin-left: 1rem;
&::before,
&::after {
content: '';
position: absolute;
background-color: var(--color-green);
transition: transform 0.3s ease;
}
&::before {
top: 50%;
left: 0;
right: 0;
height: 2px;
transform: translateY(-50%);
}
&::after {
left: 50%;
top: 0;
bottom: 0;
width: 2px;
transform: translateX(-50%);
}
}
&:hover h2 {
color: var(--color-green);
}
}
.faq-item[open] summary .toggle-icon::after {
transform: translateX(-50%) rotate(90deg);
opacity: 0;
}
.faq-content {
padding: 0 1.5rem 1.5rem 1.5rem;
animation: slideDown 0.3s ease;
p {
margin-top: 0;
color: var(--color-grey);
line-height: 1.6;
}
.button {
margin-top: 1rem;
}
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-0.5rem);
}
to {
opacity: 1;
transform: translateY(0);
}
}
}
</style>

6
custom/templates/list.php
View file

@ -23,6 +23,7 @@
<?php if ($item['summary']): ?>
<p><?= htmlspecialchars($item['summary']) ?></p>
<?php endif; ?>
<a href="<?= htmlspecialchars($item['url']) ?>" class="button">Les mer</a>
</article>
<?php endforeach; ?>
</article>
@ -44,6 +45,11 @@ main > article {
h1 {
margin-top: 1rem;
}
> .button {
margin-left: 1rem;
margin-top: 1rem;
}
}
}
</style>