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
parent
af1c1f6042
commit
11c9fa1a63
|
|
@ -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;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -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>
|
||||
|
|
@ -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 %}
|
||||
|
|
@ -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 %}
|
||||
|
|
@ -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 %}
|
||||
|
|
@ -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 %}
|
||||
|
|
@ -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 %}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
{% extends "base.html" %}
|
||||
|
||||
{% block content %}
|
||||
<main>
|
||||
<h1>{{ page.title }}</h1>
|
||||
{{ page.content | safe }}
|
||||
</main>
|
||||
{% endblock content %}
|
||||
|
|
@ -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>
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
</div>
|
||||
<div class="column">
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
<div class="split">
|
||||
<div class="column">
|
||||
Loading…
Reference in New Issue