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

Add language switching and improve table styling

Browse source 
Add h4 styling Improve footnotes styling Add table styling with
alternating row colors Make site multilingual with language switching
Update footer to use translations Improve language handling in
navigation links
This commit is contained in:
Ruben 2025-12-12 21:51:37 +01:00
parent cab5b17506
commit a273a7a7a0
2 changed files with 94 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

41
custom/styles/base.css
View file

@ -28,6 +28,7 @@ h1, h2, h3, h4, h5, h6 {
margin-top: 1.3em;
text-wrap: pretty;
}
h4 { font-weight: 700}
a {
color: var(--color-green);
@ -113,6 +114,10 @@ main {
font-size: 1.2rem;
line-height: 1.35em;
}
.footnotes {
margin-top:1rem;
hr {border: 1px var(--color-grey) dashed}
}
}
.button {
@ -121,6 +126,42 @@ main {
}
}
table {
margin-top: 1.3em;
border-collapse: collapse;
width: 100%;
thead {
tr {
background-color: var(--color-green);
color: white;
th {
padding: 0.6rem;
text-align: left;
font-weight: 600;
}
}
}
tbody {
tr {
&:nth-child(odd) {
background-color: white;
}
&:nth-child(even) {
background-color: oklch(0.96 0.005 173.93);
}
td {
padding: 0.5rem 0.6rem;
border-bottom: 1px solid oklch(0.9 0.01 173.93);
}
}
}
}
/* BUTTONS */
.button {
display: inline-block;

64
custom/templates/base.php
View file

@ -13,7 +13,7 @@ function getActiveClass($href) { return rtrim(parse_url($_SERVER['REQUEST_URI'],
?>
<!DOCTYPE html>
<html lang="no">
<html lang="<?= htmlspecialchars($currentLang ?? 'no') ?>">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -81,16 +81,42 @@ function getActiveClass($href) { return rtrim(parse_url($_SERVER['REQUEST_URI'],
<header class="contain">
<div>
<div class="logo">
<a href="/"><?php include $publicDir . '/logo.svg'; ?></a>
<a href="<?= $langPrefix ?>/"><?php include $publicDir . '/logo.svg'; ?></a>
</div>
<nav>
<ul>
<li><a href="/" class="button <?php echo getActiveClass('/'); ?>"><?= htmlspecialchars($homeLabel ?? 'Forsiden') ?></a></li>
<li><a href="<?= $langPrefix ?>/" class="button <?php echo getActiveClass('/'); ?>"><?= htmlspecialchars($homeLabel ?? 'Forsiden') ?></a></li>
<?php if (!empty($navigation)): ?>
<?php foreach ($navigation as $item): ?>
<li><a href="<?= htmlspecialchars($item['url']) ?>" class="button <?php echo getActiveClass($item['url']); ?>"><?= htmlspecialchars($item['title']) ?></a></li>
<?php endforeach; ?>
<?php endif; ?>
<?php
// Language switcher - show alternate language only
$currentLangCode = $currentLang ?? 'no';
$availableLanguages = $availableLangs ?? ['no', 'en'];
$langUrls = $languageUrls ?? [];
$trans = $translations ?? [];
// Find the alternate language
$alternateLang = null;
foreach ($availableLanguages as $lang) {
if ($lang !== $currentLangCode) {
$alternateLang = $lang;
break;
}
}
if ($alternateLang && isset($langUrls[$alternateLang])) {
// Get language name from translations
$alternateName = $trans["language_name_$alternateLang"] ?? strtoupper($alternateLang);
?>
<li><a href="<?= htmlspecialchars($langUrls[$alternateLang]) ?>"
class="button"
hreflang="<?= htmlspecialchars($alternateLang) ?>">
<?= htmlspecialchars($alternateName) ?>
</a></li>
<?php } ?>
</ul>
</nav>
</div>
@ -102,15 +128,31 @@ function getActiveClass($href) { return rtrim(parse_url($_SERVER['REQUEST_URI'],
<footer>
<div class="contain">
<?php if ($currentLang === 'no'): ?>
<p>Følg oss på <a href="https://www.facebook.com/StoppLidelsen/">Facebook</a>, <a href="https://www.instagram.com/stopplidelsen/">Instagram</a> og <a rel="me" href="https://oslo.town/@stopplidelsen">Mastodon</a></p>
<?php $endTime = microtime(true); $pageLoadTime = round(($endTime - $startTime) * 1000, 2); ?>
<p class="generated">Nettsiden er håndkodet av Ruben Solvang ved hjelp av HTML, CSS og minimale doser PHP. Det tok <?php echo $pageLoadTime; ?>ms å generere siden.</p>
<?php elseif ($currentLang === 'en'): ?>
<p><a rel="me" href="https://oslo.town/@stopplidelsen">Follow us on Mastodon</a></p>
<?php $endTime = microtime(true); $pageLoadTime = round(($endTime - $startTime) * 1000, 2); ?>
<p class="generated">This website was hand-coded by Ruben Solvang using HTML, CSS and minimal doses of PHP. It took <?php echo $pageLoadTime; ?>ms to generate this page.</p>
<?php if (!empty($trans['footer_social'])): ?>
<p><?= $trans['footer_social'] ?></p>
<?php endif; ?>
<?php $endTime = microtime(true); $pageLoadTime = round(($endTime - $startTime) * 1000, 2); ?>
<?php if (!empty($trans['footer_handcoded'])): ?>
<p class="generated"><?= $trans['footer_handcoded'] ?> <?= $pageLoadTime ?><?= $trans['footer_page_time'] ?? 'ms' ?></p>
<?php endif; ?>
<p>
<?php
$langUrls = $languageUrls ?? [];
foreach ($availableLanguages as $index => $lang) {
$url = $langUrls[$lang] ?? '/';
// Get language name: use language_name from that language's translations
if ($lang === $currentLangCode) {
$langName = $trans['language_name'] ?? strtoupper($lang);
} else {
$langName = $trans["language_name_$lang"] ?? strtoupper($lang);
}
if ($index > 0) echo ' | ';
echo '<a href="' . htmlspecialchars($url) . '" hreflang="' . htmlspecialchars($lang) . '">' . htmlspecialchars($langName) . '</a>';
}
?>
</p>
</div>
</footer>
</div>