martin
/
stacken-w3-zola
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add site structure 

This adds the basic site structure. It is mostly copied from the old w3,
but the front page has been restructured.

The styling uses the Marx framework as a base.

There is no JavaScript.
This commit is contained in:
Martin Frost 2024-09-23 20:41:18 +02:00
parent af1c1f6042
commit 11c9fa1a63
13 changed files with 463 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

278
static/css/main.css Normal file
View File

@ -0,0 +1,278 @@
:root {
--lg-breakpoint: 1280px;
--lightred: color-mix(in srgb, var(--red), white 85%);
}
html {
height: 100%;
}
body {
height: 100%;
padding: 0px;
margin: 0 auto;
}
@media screen and (min-width: 769px) {
body {
display: grid;
grid-template:
[row1-start] "header header header" 50px [row1-end]
[row2-start] "main main aside" auto [row2-end]
[row3-start] "history activity member" auto [row3-end]
[row4-start] "footer footer footer" 50px [row4-end];
gap: 5px;
}
}
body > header {
grid-column: 1 / span 3;
grid-row: first-line;
grid-area: header;
display: flex;
margin: 0;
}
body > header menu {
display: flex;
list-style: none;
margin: 0;
}
main {
grid-area: main;
}
aside {
grid-area: aside;
}
section.activity {
grid-area: activity;
}
section.history {
grid-area: history;
}
section.member {
grid-area: member;
}
section + section {
margin-top: 5px;
}
body > header {
align-items: center;
}
body > footer {
grid-area: footer;
align-self: end;
margin: 0;
font-size: small;
}
body > header {
background-color: black;
color: white;
padding: 0.5em;
height: 50px;
}
body > header a,
body > header a:visited {
color: white;
height: 44px;
margin-left: 0;
}
body > header a:hover {
color: white;
}
body > header input {
display: none !important;
}
body > header a img {
height: 44px;
}
main,
section {
padding: 0.5em;
}
.menu-button {
position: relative;
width: 20px;
top: -4px;
height: 3px;
background: white;
display: inline-block;
}
.menu-button:before,
.menu-button:after {
position: absolute;
display: block;
content: "";
background: white;
width: 20px;
height: 3px;
}
.menu-button:before {
top: 8px;
}
.menu-button:after {
top: -8px;
}
@media screen and (min-width: 769px) {
header menu {
flex-grow: 1;
padding-left: 0;
}
header menu li {
padding-left: 1em;
}
header menu li:last-child {
text-align: right;
padding: 0;
flex-grow: 1;
}
body {
max-width: 1280px;
}
.menu-button {
visibility: hidden;
}
div.split {
display: flex;
}
div.split > div.column {
width: 50%;
}
div.column:first-child {
padding-right: 0.5em;
}
div.column + div.column {
padding-left: 0.5em;
}
}
@media screen and (max-width: 768px) {
body {
grid-template:
[row1-start] "header" 50px [row1-end]
[row2-start] "main" auto [row2-end]
[row2-start] "aside" auto [row2-end]
[row3-start] "footer" 50px [row3-end];
}
.menu-button {
visibility: visible;
}
header {
justify-content: space-between;
}
body > header menu {
display: none;
padding: 0.2em;
}
body > header menu li {
padding: 0.2em;
}
body > header label[for="menu-control"] {
padding: 0.2em 0.5em;
border-radius: 3px;
}
body > header label[for="menu-control"]:hover {
background-color: grey;
}
header input[name="menu-control"]:checked ~ menu {
background-color: black;
position: absolute;
right: 0;
top: 50px;
display: block;
width: 150px;
}
header input[name="menu-control"]:checked ~ label .menu-button {
background-color: black;
}
header input[name="menu-control"]:checked ~ label:hover .menu-button {
background-color: grey;
}
header input[name="menu-control"]:checked ~ label .menu-button:before {
transform: rotate3d(0, 0, 1, 45deg);
top: 0;
}
header input[name="menu-control"]:checked ~ label .menu-button:after {
transform: rotate3d(0, 0, 1, -45deg);
top: 0;
}
}
section.newsitem {
border: 1px solid var(--lightred);
padding: 0;
border-radius: 5px;
}
section.newsitem > p,
section.newsitem > a {
padding: 0.5em;
}
section.newsitem header {
padding: 0.3em;
margin-bottom: 0;
background-color: var(--lightred);
color: var(--red);
height: 2em;
display: flex;
flex-direction: row;
justify-content: space-between;
}
section.newsitem header a {
color: var(--red);
overflow: hidden;
text-overflow: ellipsis;
}
section.newsitem summary {
padding: 0.3em;
margin-bottom: 0;
}
div.jumbotron {
background-image: url(/images/blades.jpg);
border-radius: 5px;
padding: 3em;
}
div.jumbotron div {
background-color: #ffffffdd;
border-radius: 5px;
padding: 1em;
}

1
static/css/marx.css Normal file
View File

File diff suppressed because one or more lines are too long

38
templates/base.html Normal file
View File

@ -0,0 +1,38 @@
{% import "macros.html" as macros %}
<!doctype html>
<html lang="sv">
<head>
<meta charset="utf-8" />
<title>Stacken</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="/css/marx.css" />
<link rel="stylesheet" href="/css/main.css" />
</head>
<body>
<header>
<a href="/"><img src="/images/stacken-logo.png" /></a>
<input type="checkbox" id="menu-control" name="menu-control" />
<label for="menu-control">
<div class="menu-button"></div>
</label>
<menu>
<li><a href="/">Hem</a></li>
<li><a href="/club">Om Stacken</a></li>
<li><a href="/forum">Forum</a></li>
<li><a href="/projects">Projekt & Tjänster</a></li>
<li><a href="/news">Nyheter & Kalender</a></li>
<li><a href="/member/">Bli medlem</a></li>
<li><a href="/en/">English</a></li>
</menu>
</header>
{% block content %} {% endblock %}
<footer>
<p>
Datorföreningen Stacken - <a href="/club/integritetspolicy">Integritetspolicy</a> - This page is also available in <a href="/en/">English</a>
</p>
</footer>
</body>
</html>

54
templates/index.html Normal file
View File

@ -0,0 +1,54 @@
{% extends "base.html" %}
{% block content %}
<main>
<h1>Datorföreningen Stacken</h1>
<p>
Most pages are translated to English, <a href="/en/">click here for the English version</a>
</p>
<div class="jumbotron">
<div>
<h2>Aktuellt på Stacken</h2>
<p>Torsdag 22 augusti deltog Stacken på Kårens dag</p>
<p>
Vi brukar träffas i vår föreningslokal på torsdagkvällar, en del av oss brukar äta först och dyka upp i lokalen frammåt 19:30.
Vi finns också online, se sidan om <a href="/forum">forum</a>.
Ibland har vi videomöten på <a href="https://meet.stacken.kth.se/Stacken">meet.stacken.kth.se/Stacken</a>.
</p>
</div>
</div>
<h2>För studenter</h2>
<p>Stacken är en datorförening för studenter och anställda vid KTH. Föreningens syfte är att främja intresset för och vidga kunskaper inom datorområdet.</p>
</main>
<aside>
<section>
<h1>Nyheter</h1>
{{ macros::latest_news() }}
<a href="/news">Läs mer nyheter</a>
</section>
</aside>
<section class="member">
<h1>Bli medlem</h1>
<p>
Att bli medlem i Stacken kan vara ett bra sätt att få kontakt med andra som delar intressen. Alternativt lära sig nya saker och få hjälp. Stacken är även en bra resurs för att komma i kontakt med näringslivet då vi har goda kontakter med livet utanför KTH.
</p>
<a href="/member/">Läs mer / Bli medlem</a>
</section>
<section class="activity">
<h1>Aktiviteter</h1>
<p>Vi erbjuder gemensamma projekt att arbeta på, tjänster för medlemmar, föreningar eller sektioner att använda, föreläsningar och andra kul aktiviteter. <a href="/projects/">Läs mer</a></p>
</section>
<section class="history">
<h1>40 år av Stacken</h1>
<p>Stacken har varit på och runt KTH i mer än 40 år och varit med om födelsen av både den moderna datorn och internet som vi känner det i dag. <a href="/club/history">Läs mer</a></p>
</section>
{% endblock content %}

20
templates/macros.html Normal file
View File

@ -0,0 +1,20 @@
{% macro newsitem(item) %}
<section class="newsitem">
<header>
<a href="{{ item.permalink | safe}}">{{ item.title }}</a>
<time> {{ item.date | date }} </time>
</header>
<summary>
{{ item.summary | safe }}
</summary>
<a href="{{ item.permalink }}">Läs mer...</a>
</section>
{% endmacro newsitem %}
{% macro latest_news() %}
{% set news = get_section(path="news/_index.md") %}
{% for page in news.pages | sort(attribute="date") | slice(start=-5) | reverse %}
{{ macros::newsitem(item=page) }}
{% endfor %}
{% endmacro latest_news %}

9
templates/news-post.html Normal file
View File

@ -0,0 +1,9 @@
{% extends "base.html" %}
{% block content %}
<main>
<h1>{{page.title}}</h1>
<p><strong>{{page.date}}</strong></p>
{{page.content | safe}}
</main>
{% endblock content %}

19
templates/news-root.html Normal file
View File

@ -0,0 +1,19 @@
{% extends "base.html" %}
{% block content %}
<main>
<h1>{{ section.title }}</h1>
{{ macros::latest_news() }}
</main>
<aside>
<h1>År</h1>
<ul>
{% for subsection in section.subsections | reverse %}
{% set item = get_section(path=subsection) %}
<li>
<a href="{{item.permalink}}">{{ item.title }} </a>
</li>
{% endfor %}
</ul>
</aside>
{% endblock content %}

11
templates/news.html Normal file
View File

@ -0,0 +1,11 @@
{% import "macros.html" as macros %}
{% extends "base.html" %}
{% block content %}
<main>
<h1>{{ section.title }}</h1>
{% for page in section.pages %}
{{ macros::newsitem(item=page) }}
{% endfor %}
</main>
{% endblock content %}

8
templates/page.html Normal file
View File

@ -0,0 +1,8 @@
{% extends "base.html" %}
{% block content %}
<main>
<h1>{{ page.title }}</h1>
{{ page.content | safe }}
</main>
{% endblock content %}

19
templates/shortcodes/memberform_sv.html Normal file
View File

@ -0,0 +1,19 @@
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>memberform_sv.html</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml;charset=utf-8"/>
<link rel="stylesheet" type="text/css" media="all" href="https://cdn.jsdelivr.net/npm/github-markdown-css/github-markdown.min.css" />
<link rel="stylesheet" type="text/css" media="all" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/styles/github.min.css" /><meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'><style> body { box-sizing: border-box; max-width: 740px; width: 100%; margin: 40px auto; padding: 0 10px; } </style><script id='MathJax-script' async src='https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js'></script><script src='https://cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/highlight.min.js'></script><script>document.addEventListener('DOMContentLoaded', () => { document.body.classList.add('markdown-body'); document.querySelectorAll('pre[lang] > code').forEach((code) => { code.classList.add(code.parentElement.lang); }); document.querySelectorAll('pre > code').forEach((code) => { hljs.highlightBlock(code); }); });</script>
</head>
<body>
</body>
</html>

2
templates/shortcodes/splitend.md Normal file
View File

@ -0,0 +1,2 @@
</div>
</div>

2
templates/shortcodes/splitmiddle.md Normal file
View File

@ -0,0 +1,2 @@
</div>
<div class="column">

2
templates/shortcodes/splitstart.md Normal file
View File

@ -0,0 +1,2 @@
<div class="split">
<div class="column">