Initial commit
This commit is contained in:
Ruben
commit
f48cdc268b
31 changed files with 628 additions and 0 deletions
3
custom/config.ini
Normal file
3
custom/config.ini
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
[languages]
|
||||
default = "no"
|
||||
available = "no,en"
|
||||
BIN
custom/fonts/pt-serif/pt-serif-bold-italic.woff2
Normal file
BIN
custom/fonts/pt-serif/pt-serif-bold-italic.woff2
Normal file
Binary file not shown.
BIN
custom/fonts/pt-serif/pt-serif-bold.woff2
Normal file
BIN
custom/fonts/pt-serif/pt-serif-bold.woff2
Normal file
Binary file not shown.
BIN
custom/fonts/pt-serif/pt-serif-italic.woff2
Normal file
BIN
custom/fonts/pt-serif/pt-serif-italic.woff2
Normal file
Binary file not shown.
37
custom/fonts/pt-serif/pt-serif.css
Normal file
37
custom/fonts/pt-serif/pt-serif.css
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
/* pt-serif-bold */
|
||||
@font-face {
|
||||
font-family: PT Serif;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-stretch: 100%;
|
||||
src: local("PT Serif Bold"), local("PTSerif-Bold"), url(pt-serif-bold.woff2) format("woff2");
|
||||
font-display: swap;
|
||||
}
|
||||
/* pt-serif-bold-italic */
|
||||
@font-face {
|
||||
font-family: PT Serif;
|
||||
font-style: italic;
|
||||
font-weight: 700;
|
||||
font-stretch: 100%;
|
||||
src: local("PT Serif Bold Italic"), local("PTSerif-BoldItalic"), url(pt-serif-bold-italic.woff2) format("woff2");
|
||||
font-display: swap;
|
||||
}
|
||||
/* pt-serif-italic */
|
||||
@font-face {
|
||||
font-family: PT Serif;
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
font-stretch: 100%;
|
||||
src: local("PT Serif Italic"), local("PTSerif-Italic"), url(pt-serif-italic.woff2) format("woff2");
|
||||
font-display: swap;
|
||||
}
|
||||
/* pt-serif */
|
||||
@font-face {
|
||||
font-family: PT Serif;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-stretch: 100%;
|
||||
src: local("PT Serif"), local("PTSerif-Regular"), url(pt-serif.woff2) format("woff2");
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
BIN
custom/fonts/pt-serif/pt-serif.woff2
Normal file
BIN
custom/fonts/pt-serif/pt-serif.woff2
Normal file
Binary file not shown.
172
custom/styles/base.css
Normal file
172
custom/styles/base.css
Normal file
|
|
@ -0,0 +1,172 @@
|
|||
/* MINIMAL CSS RESET*/
|
||||
* { margin-bottom: 0; }
|
||||
|
||||
/* VARIABLES */
|
||||
:root {
|
||||
--font-body: Roboto, sans-serif;
|
||||
--font-heading: "PT serif", Georgia, "Nimbus Roman", serif;
|
||||
--color-blue: #6391b5;
|
||||
--color-blue: oklch(0.6376 0.0739 242.84);
|
||||
--color-green: #009c80;
|
||||
--color-green: oklch(0.618 0.1176 173.93);
|
||||
--color-green-light: #f2fbf8;
|
||||
--color-green-light: oklch(0.9811 0.01 173.93);
|
||||
--color-grey: #404040;
|
||||
--color-grey: oklch(0.3715 0 0);
|
||||
}
|
||||
|
||||
/* 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 { 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 {
|
||||
font-family: var(--font-heading);
|
||||
font-weight: 400;
|
||||
line-height: 1.3em;
|
||||
margin-top: 1.3em;
|
||||
text-wrap: pretty;
|
||||
}
|
||||
a {
|
||||
color: var(--color-green);
|
||||
text-decoration: none;
|
||||
&:hover { color: var(--color-blue) }
|
||||
}
|
||||
|
||||
.grid-container {
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-areas: "header" "main" "footer";
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
min-height: 100vh;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.contain, :where(main>article) {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(.4rem, 1fr) minmax(0, 42rem) minmax(.3rem, 1fr);
|
||||
> * {
|
||||
grid-column: 2;
|
||||
}
|
||||
}
|
||||
|
||||
.escape {
|
||||
grid-column: 1 / -1 !important;
|
||||
}
|
||||
|
||||
/* HEADER */
|
||||
header {
|
||||
border-bottom: 3px #00000022 solid;
|
||||
grid-area: header;
|
||||
> div {
|
||||
padding-bottom: .2rem;
|
||||
display: flex;
|
||||
.logo {
|
||||
margin-right: .3rem;
|
||||
svg {
|
||||
width: 7rem;
|
||||
height: 100%;
|
||||
#symbol {
|
||||
fill: var(--color-blue);
|
||||
}
|
||||
#tekst {
|
||||
fill: var(--color-green);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
nav {
|
||||
display:flex;
|
||||
align-items: center;
|
||||
justify-content:flex-end;
|
||||
flex: 1;
|
||||
ul {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
flex-wrap: wrap;
|
||||
margin-top: .4rem;
|
||||
padding: 0;
|
||||
justify-content: flex-end;
|
||||
/* align-self: end; */
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
border-radius: 1rem;
|
||||
background-color: var(--color-grey);
|
||||
padding: 0.35rem 1rem;
|
||||
margin-left:0.4rem;
|
||||
margin-top:0.4rem;
|
||||
&:hover, &.active {
|
||||
background-color: var(--color-green);
|
||||
color: white;
|
||||
}
|
||||
&:focus {
|
||||
outline: .1rem var(--color-green) solid;
|
||||
color: var(--color-grey);
|
||||
background-color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* MAIN */
|
||||
main {
|
||||
grid-area: main;
|
||||
background-color: var(--color-green-light);
|
||||
padding-bottom: 2rem;
|
||||
|
||||
article {
|
||||
margin-top: 1.3em;
|
||||
|
||||
.intro {
|
||||
font-size: 1.2rem;
|
||||
line-height: 1.35em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* LIST VIEW */
|
||||
main > article {
|
||||
> article {
|
||||
background-color: white;
|
||||
padding: 0;
|
||||
margin-bottom: 1.5rem;
|
||||
overflow: hidden;
|
||||
|
||||
> :not(img) {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* FOOTER */
|
||||
|
||||
footer {
|
||||
color: var(--color-green-light);
|
||||
a {
|
||||
color: var(--color-green-light);
|
||||
&:hover { color: white; text-decoration: underline }
|
||||
}
|
||||
background-color: var(--color-green);
|
||||
grid-area: footer;
|
||||
> div {
|
||||
margin: 1rem 0;
|
||||
text-align: center;
|
||||
.generated { font-size: .6rem }
|
||||
}
|
||||
}
|
||||
61
custom/templates/base.php
Normal file
61
custom/templates/base.php
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
<?php
|
||||
$startTime = microtime(true);
|
||||
$publicDir = realpath($_SERVER['DOCUMENT_ROOT']);
|
||||
$customCssPath = __DIR__ . '/../styles/base.css';
|
||||
$defaultCssPath = __DIR__ . '/../../default/styles/base.css';
|
||||
$cssPath = file_exists($customCssPath) ? $customCssPath : $defaultCssPath;
|
||||
$cssUrl = file_exists($customCssPath) ? '/app/styles/base.css' : '/app/default-styles/base.css';
|
||||
$cssHash = file_exists($cssPath) ? hash_file('md5', $cssPath) : 'file_not_found';
|
||||
if (isset($GLOBALS['_SERVER']['SCRIPT_FILENAME'])) { $includingFile = $_SERVER['SCRIPT_FILENAME']; }
|
||||
if (!empty($includingFile)) { $pageName = pathinfo($includingFile, PATHINFO_FILENAME); }
|
||||
if (!in_array(basename(dirname($includingFile)), ['latest', 'live', 'frozen']) && basename(dirname($includingFile)) !== '') { $dirName = basename(dirname($includingFile)); }
|
||||
function getActiveClass($href) { return rtrim(parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH), '/') === rtrim($href, '/') ? 'active' : ''; }
|
||||
?>
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="no">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="fediverse:creator" content="@stopplidelsen@oslo.town">
|
||||
<link rel="stylesheet" href="<?= $cssUrl ?>?v=<?= $cssHash ?>">
|
||||
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
|
||||
<link rel="icon" href="/favicon.png" type="image/png">
|
||||
<link href="/app/fonts/pt-serif/pt-serif.css" rel="stylesheet">
|
||||
<title><?= htmlspecialchars($pageTitle ?? 'Stopp lidelsen') ?></title>
|
||||
</head>
|
||||
|
||||
<body class="<?php if (isset($dirName)) echo 'section-' . $dirName . ' '; ?><?php if (isset($pageName)) echo 'page-' . $pageName; ?>">
|
||||
<div class="grid-container">
|
||||
<header class="contain">
|
||||
<div>
|
||||
<div class="logo">
|
||||
<a href="/"><?php include $publicDir . '/logo.svg'; ?></a>
|
||||
</div>
|
||||
<nav>
|
||||
<ul>
|
||||
<a href="/" class="<?php echo getActiveClass('/'); ?>"><li><?= htmlspecialchars($homeLabel ?? 'Forsiden') ?></li></a>
|
||||
<?php if (!empty($navigation)): ?>
|
||||
<?php foreach ($navigation as $item): ?>
|
||||
<a href="<?= htmlspecialchars($item['url']) ?>" class="<?php echo getActiveClass($item['url']); ?>"><li><?= htmlspecialchars($item['title']) ?></li></a>
|
||||
<?php endforeach; ?>
|
||||
<?php endif; ?>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<?php echo $content ?? ''; ?>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<div class="contain">
|
||||
<p><a rel="me" href="https://oslo.town/@stopplidelsen">Følg oss på 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>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
18
custom/templates/list.php
Normal file
18
custom/templates/list.php
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
<article>
|
||||
<?php foreach ($items as $item): ?>
|
||||
<article>
|
||||
<?php if ($item['cover']): ?>
|
||||
<img src="<?= htmlspecialchars($item['cover']) ?>" alt="<?= htmlspecialchars($item['title']) ?>">
|
||||
<?php endif; ?>
|
||||
<h1>
|
||||
<a href="<?= htmlspecialchars($item['url']) ?>">
|
||||
<?= htmlspecialchars($item['title']) ?>
|
||||
</a>
|
||||
</h1>
|
||||
<p><?= htmlspecialchars($item['date']) ?></p>
|
||||
<?php if ($item['summary']): ?>
|
||||
<p><?= htmlspecialchars($item['summary']) ?></p>
|
||||
<?php endif; ?>
|
||||
</article>
|
||||
<?php endforeach; ?>
|
||||
</article>
|
||||
Loading…
Add table
Add a link
Reference in a new issue