Skip to content
Snippets Groups Projects
Commit 22e53a28 authored by Jake's avatar Jake :speech_balloon:
Browse files

Merge branch 'restructure-html' into 'master' 

HTML Code umstrukturiert, CSS verbessert und Breadcrumb Navigation hinzugefügt

Closes #34, #35, and #42

See merge request GAUMI-fginfo/fg-website!9
parents 03e56d02 b11d6b21
No related branches found
No related tags found
No related merge requests found
Pipeline #313519 passed
Stage: build
Stage: deploy
Hide whitespace changes
Inline Side-by-side
Showing
with 1062 additions and 379 deletions
theme/static/css/Makefile 0 → 100644
+ 3
− 0
View file @ 22e53a28
.PHONY: run
run:
make -C ../../../fgs
theme/static/css/main.css
+ 360
− 291
View file @ 22e53a28
:root {
--main-width: 90ch;
--header-height: 6rem;
--site-width: 90ch;
--site-lr-margin: 1rem;
--site-header-height: 6rem;
--site-breadcrumb-height: 2rem;
--sitemenu-nav-height: 3rem;
--card-size: 20ch;
--card-row-num: 3;
--nav-height: 3rem;
--text-color: #333333;
--bg-color: #FFFFFF;
--body-bg-color: #FFFFFF;
--page-footer-color: #333333;
--page-footer-link-color: #337AB7;
--page-footer-bg-color: #EFEFEF;
--site-footer-color: #FFFFFF;
--site-footer-link-color: #ADD8E6;
--site-footer-bg-color: #3B3B3B;
--text-shawdow-color: rgba(0, 0, 0, 0.004);
--link-color: #337AB7;
--hline-color: #EEEEEE;
--category-contrast-color: #FFFFFF;
--header-menu-bg-color: #F0F0F0;
--header-menu-bg-color: rgb(240, 240, 240, 0.8);
--header-menu-hover-bg-color: #E6E6E6;
}
* {
background: transparent;
border: 0;
font-size: 100%;
margin: 0;
outline: 0;
padding: 0;
vertical-align: baseline;
box-sizing: border-box;
}
body {
/*font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;*/
/*color: #000000;*/
line-height: 1.5;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 1rem;
color: var(--text-color);
background-color: var(--bg-color);
font-size: 100%;
font-family: sans-serif;
background-color: var(--body-bg-color);
max-width: none;
letter-spacing: 0.025em;
text-shadow: 0 0 1em transparent, 1px 1px 1.2px var(--text-shawdow-color);
letter-spacing: 0.025rem;
text-shadow: 0 0 1rem transparent, 1px 1px 1.2px var(--text-shawdow-color);
overflow: visible;
display: grid;
grid-template-columns: 1fr var(--main-width) 1fr;
grid-template-rows: var(--header-height) var(--nav-height) 1fr 5rem;
/*gap: 0px 0px;*/
grid-template-areas:
". header ."
"nav nav nav"
". main ."
"footer footer footer";
justify-items: center;
align-content: space-evenly;
z-index: 0;
}
a {
color: var(--link-color);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a.external::after {
/* content: '↪'; */
content: '🡕';
/*background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20.092'%3E%3Cpath d='m12 0 2.561 2.537-6.975 6.976 2.828 2.828 6.988-6.988L20 7.927 19.998 0H12z'/%3E%3Cpath d='M9 4.092v-2H0v18h18v-9h-2v7H2v-14h7z'/%3E%3C/svg%3E");
background-repeat: no-repeat no-repeat;
background-position: center center;
background-size: cover;*/
}
a.external[href^="mailto:"]::after {
content: '';
}
a.external[href^="mailto:"]::before {
content: '📧';
}
p, blockquote, ul, ol, dl, table, pre {
margin: 0 0 1em 0;
}
ul, ol {
padding-left: 2em;
}
/*
li + li {
margin-top: 0.25em;
z-index: 0;
}
*/
h1 {
padding-bottom: 0.3em;
font-size: 2em;
border-bottom: 0.1em solid var(--hline-color);
}
h2 {
padding-bottom: 0.3em;
font-size: 1.5em;
border-bottom: 0.1em solid var(--hline-color);
}
h1,h2,h3,h4,h5,h6 {
margin-top: 1.5em;
margin-bottom: 1em;
font-weight: 600;
line-height: 1.25;
body > * {
display: grid;
grid-template-columns: [complete-start] minmax(var(--site-lr-margin), 1fr) [content-start] minmax(0px, var(--site-width)) [content-end] minmax(var(--site-lr-margin), 1fr) [complete-end];
/*column-gap: 3rem;
padding-left: 3rem;
padding-right: 3rem;*/
max-width: none;
}
body > header {
grid-area: header;
/* background-color: yellow; */
/* display: flex; */
/*justify-content: center;
align-items: center;*/
width: 100%;
/*position: fixed;
top: 0;
left: 0;*/
body > * > * {
grid-column: content
}
body > header h1 {
/* line-height: calc(var(--header-height) - 1rem); */
display: inline-block;
height: calc( var(--header-height) - 1rem );
/* max-height: 3em; */
min-height: calc( var(--site-header-height) - 1rem );
margin: 0.5rem;
border-bottom: 0 solid transparent;
/*margin-left: auto;
margin-right: auto;*/
margin-left: auto;
margin-right: auto;
padding: 0;
}
body > header h1 a {
display: flex;
line-height: calc( var(--header-height) - 1rem );
line-height: calc( var(--site-header-height) - 1rem );
text-align: center;
}
body > header h1 a span {
display: inline-block;
line-height: calc( var(--header-height) - 1rem );
line-height: calc( var(--site-header-height) - 1rem );
text-align: center;
}
body > header h1 img {
display: inline-block;
height: calc(var(--header-height) - 1rem);
}
body > .nav-container {
grid-area: nav;
/*background-color: yellow;*/
/*! margin: 1em; */
/* display: flex; */
/* justify-content: center;
align-items: center; */
/* height: 6em; */
width: 100%;
height: calc(var(--site-header-height) - 1rem);
}
.nav-container ul {
/*! margin: 1em; */
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
padding: 0;
margin: 0;
#sitemenu-container {
/*background-color: #7ac;*/
}
.nav-container ul li {
/*! margin: 1em; */
/* justify-content: center;
align-items: center; */
display: inline-block;
list-style-type: none;
#sitemenu-container nav {
/*font-size: 0.875rem;*/
border-top: 0.3rem solid var(--hline-color);
}
.nav-container li + li {
margin-top: 0;
#sitemenu-container nav > ul {
width: 100%;
display: flex;
align-items: stretch;
flex-wrap: nowrap;
/*flex-wrap: wrap;*/
flex-direction: row;
}
.nav-container li a {
display: inline-block;
height: var(--nav-height);
line-height: var(--nav-height);
padding-left: 1em;
padding-right: 1em;
border-bottom: 0.2em solid var(--category-color);
#sitemenu-container nav > ul > li {
list-style: none;
display: block;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 50%;
}
#sitemenu-container nav > ul > li > a {
width: 100%;
height: 100%;
display: flex;
text-align: center;
justify-content: center;
align-items: center;
min-height: var(--sitemenu-nav-height);
/*border: 0.1rem solid var(--hline-color);*/
border-bottom: 0.3rem solid var(--category-color);
color: var(--link-color);
padding-left: 0.3rem;
padding-right: 0.3rem;
transition: all 0.2s;
}
.nav-container li a:hover {
#sitemenu-container nav > ul > li > a:hover {
color: var(--category-contrast-color);
background-color: var(--category-color);
/*background-color: #e6e6e6;
border-bottom: 0.2em solid var(--category-color);*/
}
.nav-container .show-header-menu {
#sitemenu-container .show-header-menu {
display: none;
background-color: var(--header-menu-bg-color);
-webkit-user-select: none; /* Safari */
......@@ -208,11 +145,11 @@ body > .nav-container {
left: 0;
z-index: 11;
}
.nav-container .show-header-menu:hover {
#sitemenu-container .show-header-menu:hover {
background-color: var(--header-menu-hover-bg-color);
/*border-bottom: 0.2em solid #536;*/
/*border-bottom: 0.2rem solid #536;*/
}
.nav-container .show-header-menu-bg {
#sitemenu-container .show-header-menu-bg {
position: fixed;
top: 0;
left: 0;
......@@ -228,208 +165,299 @@ body > .nav-container {
z-index: 5;
}
.nav-container input[type=checkbox] {
#sitemenu-container input[type=checkbox] {
display: none;
}
.tag-link {
border-radius: 0.5em;
padding-left: 0.3em;
padding-right: 0.3em;
color: var(--category-contrast-color);
background-color: var(--category-color);
}
@media only screen and (max-width: 79ch) {
@media only screen and (max-width: 94ch) {
body > header h1{
width: 100%;
/*width: 100%;*/
}
body > header h1 a {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.nav-container {
margin-bottom: 0.2em;
font-size: 1.2em;
#sitemenu-container {
margin-bottom: 0.2rem;
font-size: 1.2rem;
}
.nav-container nav {
#sitemenu-container nav {
display: none;
/*border-top: 0.1em solid #333;*/
/*border-top: 0.1rem solid #333;*/
position: fixed;
top: 3.2em;
top: 3.2rem;
left: 0;
z-index: 10;
width: 100%;
}
.nav-container nav ul {
#sitemenu-container nav > ul {
flex-direction: column;
}
.nav-container nav li {
#sitemenu-container nav > li {
width: 100%;
background-color: var(--category-contrast-color);
}
.nav-container .show-header-menu {
#sitemenu-container .show-header-menu {
display: inline-block;
font-style: normal;
padding: 1em;
padding: 1rem;
}
.nav-container a {
#sitemenu-container a {
width: 100%;
/*! margin-top: 0.2em; */
/* padding-bottom: 0.2em;*/
/*! margin-top: 0.2rem; */
/* padding-bottom: 0.2rem;*/
box-sizing: border-box;
display: block;
line-height: 2em;
/* border-top: 0.1em solid #333; */
line-height: 2rem;
/* border-top: 0.1rem solid #333; */
}
.nav-container a:hover {
border-bottom: 0.1em solid #536;
#sitemenu-container a:hover {
border-bottom: 0.1rem solid #536;
}
.nav-container input[type=checkbox]:checked ~ .show-header-menu-bg {
#sitemenu-container input[type=checkbox]:checked ~ .show-header-menu-bg {
display: block;
}
.nav-container input[type=checkbox]:checked ~ nav{
#sitemenu-container input[type=checkbox]:checked ~ nav {
display: block;
}
:root {
--main-width: 70ch;
--header-height: 3rem;
--card-size: 30ch;
--card-row-num: 2;
--nav-height: 3rem;
}
body {
grid-template-columns: 1fr;
grid-template-areas:
"nav"
"header"
"main"
"footer";
--site-header-height: 3rem;
/* --sitemenu-nav-height: 3rem; */
}
}
@media only screen and (max-width: 69ch) {
:root {
--main-width: 60ch;
--header-height: 3rem;
--card-size: 30ch;
--card-row-num: 1;
--nav-height: 3rem;
}
}
@media only screen and (max-width: 59ch) {
:root {
--main-width: 50ch;
--header-height: 3rem;
--card-size: 30ch;
--card-row-num: 1;
--nav-height: 3rem;
}
}
@media only screen and (max-width: 49ch) {
:root {
--main-width: 40ch;
--header-height: 3rem;
--card-size: 35ch;
--card-row-num: 1;
--nav-height: 3rem;
}
}
body > footer {
grid-area: footer;
}
main {
grid-area: main;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
line-height: 1.5;
word-wrap: break-word;
/*padding-top: 2.5em;*/
padding-bottom: 2.5em;
padding-right: 1em;
padding-left: 1em;
margin-right: auto;
margin-left: auto;
width: 100%;
max-width: var(--main-width);
footer.page-footer {
padding-top: 1rem;
padding-bottom: 1rem;
background-color: var(--page-footer-bg-color);
color: var(--page-footer-color);
}
main iframe {
width: 100%;
min-height: var(--main-width);
footer.page-footer a {
color: var(--page-footer-link-color);
}
.cards {
display: grid;
grid-template-columns: repeat(var(--card-row-num), var(--card-size));
/* grid-auto-rows: var(--card-size); */
grid-auto-rows: var(--card-size);
/*justify-content: space-between; */
column-gap: 0.2rem;
row-gap: 0.2rem;
footer#site-footer {
/*margin-top: 50vh;*/
padding-top: 1rem;
padding-bottom: 1rem;
background-color: var(--site-footer-bg-color);
color: var(--site-footer-color);
}
footer#site-footer a {
color: var(--site-footer-link-color);
}
.cards li {
display: inline-block;
list-style-type: none;
/* font-size: 125%; */
nav.breadcrumb {
color: var(--category-contrast-color);
background-color: var(--category-color);
line-height: var(--site-breadcrumb-height);
margin-top: 0.5rem;
}
.cards li a {
nav.breadcrumb ul li {
display: inline-block;
width: calc(100% - 1.3rem );
height: calc(100% - 1.3rem );
padding: 0.5rem;
transition: all 0.2s;
/* padding: 1rem; */
/*width: var(--card-size);
height: var(--card-size);*/
}
nav.breadcrumb ul li::after {
content: ' > ';
white-space: pre-wrap;
}
nav.breadcrumb ul li:last-child::after {
content: '';
display: none;
}
nav.breadcrumb a {
color: var(--category-contrast-color);
background-color: var(--category-color);
/* text-align: center; */
border: 0.2rem solid var(--category-color);
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.cards li a:hover {
background-color: var(--category-contrast-color);
color: var(--category-color);
/*
nav.breadcrumb a::before {
content: '';
border-top: 0.5em solid transparent;
border-bottom: 0.5em solid transparent;
border-left: 0.5em solid #fff;
position: absolute;
left: 0;
top: 0;
}
nav.breadcrumb a::after {
content: '';
border-top: 0.5em solid transparent;
border-bottom: 0.5em solid transparent;
border-left: 0.5em solid #E7E9EB;
position: absolute;
right: -0.5em;
top: 0;
z-index: 1;
}
article > footer {
border-top: 0.1em solid var(--hline-color);
nav.breadcrumb ul li:first-child a::before {
content: '';
display: none;
}
*/
article > footer .languages {
display: inline-flex;
a {
color: var(--link-color);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
article > footer .languages li {
list-style-type: none;
display: inline;
a.external::after {
/* content: '↪'; */
content: '🡕';
/*background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20.092'%3E%3Cpath d='m12 0 2.561 2.537-6.975 6.976 2.828 2.828 6.988-6.988L20 7.927 19.998 0H12z'/%3E%3Cpath d='M9 4.092v-2H0v18h18v-9h-2v7H2v-14h7z'/%3E%3C/svg%3E");
background-repeat: no-repeat no-repeat;
background-position: center center;
background-size: cover;*/
}
a.external[href^="mailto:"]::after {
content: '';
}
a.external[href^="mailto:"]::before {
content: '📧';
}
hr {
height: 0.25rem;
margin: 1rem 0;
background-color: var(--hline-color);
border: 0;
width: 100%;
}
article > footer .languages img {
width: 1em;
height: 0.7em;
object-fit: cover;
border-radius: 0.1em;
sub {
vertical-align: -25%;
}
sup {
vertical-align: 50%;
}
.content .underline {
text-decoration: underline;
}
.content .smallcaps {
font-variant: small-caps;
}
.content iframe {
width: 100%;
min-height: var(--site-width);
}
.content p,
.content blockquote,
.content ul,
.content ol,
.content dl,
.content table,
.content pre {
margin: 0 0 1em 0;
}
.content ul,
.content ol {
padding-left: 2em;
}
.content h1 {
padding-bottom: 0.3em;
font-size: 2em;
border-bottom: 0.1em solid var(--hline-color);
}
.content h2 {
padding-bottom: 0.3em;
font-size: 1.5em;
border-bottom: 0.1em solid var(--hline-color);
}
.content h1,
.content h2,
.content h3,
.content h4,
.content h5,
.content h6 {
margin-top: 1.5em;
margin-bottom: 1em;
font-weight: 600;
line-height: 1.25;
}
.content .codeinline,
.content .codeblock {
white-space: pre-wrap;
overflow-wrap: break-word;
word-break: keep-all;
}
.content .codeinline {
background-color: rgba(0, 0, 0, 0.04);
color: inherit;
padding: 0.5em 0.2em;
}
.content .codeblock {
background-color: #272822;
color: #f8f8f2;
padding: 0.5em 1em;
}
.content blockquote {
border-left: 0.25em solid #ddd;
padding: 0 1em;
color: #777;
}
.content img {
width: 100%;
max-width: 100%;
}
......@@ -443,18 +471,44 @@ article > footer .languages img {
.caps {
font-size:.92em;
ul.cards {
display: flex;
align-items: stretch;
justify-content: space-between;
flex-wrap: wrap;
flex-direction: row;
padding: 0;
}
.amp {
color:#666;
font-size:1.05em;
/*font-family:"Warnock Pro", "Goudy Old Style","Palatino","Book Antiqua",serif;*/
font-family:serif;
font-style:italic;
ul.cards li {
display: inline-block;
list-style: none;
width: var(--card-size);
height: var(--card-size);
/* font-size: 125%; */
overflow-wrap: break-word;
flex-grow: 1;
flex-shrink: 1;
/*flex-basis: 30%;*/
flex-basis: minmax(var(--card-size), 30%);
}
.dquo {
margin-left:-.38em;
ul.cards li a {
display: inline-block;
width: calc(100% - 1.3rem );
height: calc(100% - 1.3rem );
padding: 0.5rem;
transition: all 0.2s;
/* padding: 1rem; */
/*width: var(--card-size);
height: var(--card-size);*/
color: var(--category-contrast-color);
background-color: var(--category-color);
/* text-align: center; */
border: 0.2rem solid var(--category-color);
}
ul.cards li a:hover {
background-color: var(--category-contrast-color);
color: var(--category-color);
}
......@@ -465,16 +519,32 @@ article > footer .languages img {
.info, .success, .warning, .danger, .alert {
padding:1em;
margin-bottom:1.2em;
border:0.1em solid transparent;
border-radius:0.25em;
padding:1rem;
margin-bottom:1.2rem;
border:0.1rem solid transparent;
border-radius:0.25rem;
/*padding:15px;
margin-bottom:20px;
border:1px solid transparent;
border-radius:4px;*/
}
.info a,
.success a,
.warning a,
.danger a,
.alert a{
text-decoration: underline;
}
.info a:hover,
.success a:hover,
.warning a:hover,
.danger a:hover,
.alert a:hover {
background-color: var(--body-bg-color);
}
.info h4 { margin-top:0; color:inherit; }
.success h4 { margin-top:0; color:inherit; }
.warning h4 { margin-top:0; color:inherit; }
......@@ -494,20 +564,20 @@ article > footer .languages img {
.warning > p, .warning > ul { margin-bottom:0; }
.danger > p, .danger > ul { margin-bottom:0; }
.alert > p+p { margin-top:0.33em; }
.info > p+p { margin-top:0.33em; }
.success > p+p { margin-top:0.33em; }
.warning > p+p { margin-top:0.33em; }
.danger > p+p { margin-top:0.33em; }
.alert > p+p { margin-top:0.33rem; }
.info > p+p { margin-top:0.33rem; }
.success > p+p { margin-top:0.33rem; }
.warning > p+p { margin-top:0.33rem; }
.danger > p+p { margin-top:0.33rem; }
.alert-dismissable, .alert-dismissible {
padding-right:2em;
padding-right:2rem;
}
.alert-dismissable .close,.alert-dismissible .close{
position:relative;
top:-0.1em;
right:-1.4em;
top:-0.1rem;
right:-1.4rem;
color:inherit;
}
......@@ -569,4 +639,3 @@ article > footer .languages img {
color:#843534;
}
theme/static/css/old.css 0 → 100644
+ 572
− 0
View file @ 22e53a28
:root {
--main-width: 90ch;
--header-height: 6rem;
--card-size: 20ch;
--card-row-num: 3;
--nav-height: 3rem;
--text-color: #333333;
--bg-color: #FFFFFF;
--text-shawdow-color: rgba(0, 0, 0, 0.004);
--link-color: #337AB7;
--hline-color: #EEEEEE;
--category-contrast-color: #FFFFFF;
--header-menu-bg-color: #F0F0F0;
--header-menu-hover-bg-color: #E6E6E6;
}
* {
background: transparent;
border: 0;
font-size: 100%;
margin: 0;
outline: 0;
padding: 0;
vertical-align: baseline;
}
body {
/*font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;*/
/*color: #000000;*/
color: var(--text-color);
background-color: var(--bg-color);
font-size: 100%;
font-family: sans-serif;
letter-spacing: 0.025em;
text-shadow: 0 0 1em transparent, 1px 1px 1.2px var(--text-shawdow-color);
overflow: visible;
display: grid;
grid-template-columns: 1fr var(--main-width) 1fr;
grid-template-rows: var(--header-height) var(--nav-height) 1fr 5rem;
/*gap: 0px 0px;*/
grid-template-areas:
". header ."
"nav nav nav"
". main ."
"footer footer footer";
justify-items: center;
align-content: space-evenly;
z-index: 0;
}
a {
color: var(--link-color);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a.external::after {
/* content: '↪'; */
content: '🡕';
/*background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20.092'%3E%3Cpath d='m12 0 2.561 2.537-6.975 6.976 2.828 2.828 6.988-6.988L20 7.927 19.998 0H12z'/%3E%3Cpath d='M9 4.092v-2H0v18h18v-9h-2v7H2v-14h7z'/%3E%3C/svg%3E");
background-repeat: no-repeat no-repeat;
background-position: center center;
background-size: cover;*/
}
a.external[href^="mailto:"]::after {
content: '';
}
a.external[href^="mailto:"]::before {
content: '📧';
}
p, blockquote, ul, ol, dl, table, pre {
margin: 0 0 1em 0;
}
ul, ol {
padding-left: 2em;
}
/*
li + li {
margin-top: 0.25em;
}
*/
h1 {
padding-bottom: 0.3em;
font-size: 2em;
border-bottom: 0.1em solid var(--hline-color);
}
h2 {
padding-bottom: 0.3em;
font-size: 1.5em;
border-bottom: 0.1em solid var(--hline-color);
}
h1,h2,h3,h4,h5,h6 {
margin-top: 1.5em;
margin-bottom: 1em;
font-weight: 600;
line-height: 1.25;
}
body > header {
grid-area: header;
/* background-color: yellow; */
/* display: flex; */
/*justify-content: center;
align-items: center;*/
width: 100%;
/*position: fixed;
top: 0;
left: 0;*/
}
body > header h1 {
/* line-height: calc(var(--header-height) - 1rem); */
display: inline-block;
height: calc( var(--header-height) - 1rem );
/* max-height: 3em; */
margin: 0.5rem;
border-bottom: 0 solid transparent;
/*margin-left: auto;
margin-right: auto;*/
padding: 0;
}
body > header h1 a {
display: flex;
line-height: calc( var(--header-height) - 1rem );
text-align: center;
}
body > header h1 a span {
display: inline-block;
line-height: calc( var(--header-height) - 1rem );
text-align: center;
}
body > header h1 img {
display: inline-block;
height: calc(var(--header-height) - 1rem);
}
body > .nav-container {
grid-area: nav;
/*background-color: yellow;*/
/*! margin: 1em; */
/* display: flex; */
/* justify-content: center;
align-items: center; */
/* height: 6em; */
width: 100%;
}
.nav-container ul {
/*! margin: 1em; */
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
padding: 0;
margin: 0;
}
.nav-container ul li {
/*! margin: 1em; */
/* justify-content: center;
align-items: center; */
display: inline-block;
list-style-type: none;
}
.nav-container li + li {
margin-top: 0;
}
.nav-container li a {
display: inline-block;
height: var(--nav-height);
line-height: var(--nav-height);
padding-left: 1em;
padding-right: 1em;
border-bottom: 0.2em solid var(--category-color);
color: var(--link-color);
transition: all 0.2s;
}
.nav-container li a:hover {
color: var(--category-contrast-color);
background-color: var(--category-color);
/*background-color: #e6e6e6;
border-bottom: 0.2em solid var(--category-color);*/
}
.nav-container .show-header-menu {
display: none;
background-color: var(--header-menu-bg-color);
-webkit-user-select: none; /* Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+/Edge */
user-select: none; /* Standard */
cursor: pointer;
position: fixed;
top: 0;
left: 0;
z-index: 11;
}
.nav-container .show-header-menu:hover {
background-color: var(--header-menu-hover-bg-color);
/*border-bottom: 0.2em solid #536;*/
}
.nav-container .show-header-menu-bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
background-color: rgba(120,120, 120, 0.5);
-webkit-user-select: none; /* Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+/Edge */
user-select: none; /* Standard */
cursor: pointer;
z-index: 5;
}
.nav-container input[type=checkbox] {
display: none;
}
.tag-link {
border-radius: 0.5em;
padding-left: 0.3em;
padding-right: 0.3em;
color: var(--category-contrast-color);
background-color: var(--category-color);
}
@media only screen and (max-width: 79ch) {
body > header h1{
width: 100%;
}
body > header h1 a {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.nav-container {
margin-bottom: 0.2em;
font-size: 1.2em;
}
.nav-container nav {
display: none;
/*border-top: 0.1em solid #333;*/
position: fixed;
top: 3.2em;
left: 0;
z-index: 10;
width: 100%;
}
.nav-container nav ul {
flex-direction: column;
}
.nav-container nav li {
width: 100%;
background-color: var(--category-contrast-color);
}
.nav-container .show-header-menu {
display: inline-block;
font-style: normal;
padding: 1em;
}
.nav-container a {
width: 100%;
/*! margin-top: 0.2em; */
/* padding-bottom: 0.2em;*/
box-sizing: border-box;
display: block;
line-height: 2em;
/* border-top: 0.1em solid #333; */
}
.nav-container a:hover {
border-bottom: 0.1em solid #536;
}
.nav-container input[type=checkbox]:checked ~ .show-header-menu-bg {
display: block;
}
.nav-container input[type=checkbox]:checked ~ nav{
display: block;
}
:root {
--main-width: 70ch;
--header-height: 3rem;
--card-size: 30ch;
--card-row-num: 2;
--nav-height: 3rem;
}
body {
grid-template-columns: 1fr;
grid-template-areas:
"nav"
"header"
"main"
"footer";
}
}
@media only screen and (max-width: 69ch) {
:root {
--main-width: 60ch;
--header-height: 3rem;
--card-size: 30ch;
--card-row-num: 1;
--nav-height: 3rem;
}
}
@media only screen and (max-width: 59ch) {
:root {
--main-width: 50ch;
--header-height: 3rem;
--card-size: 30ch;
--card-row-num: 1;
--nav-height: 3rem;
}
}
@media only screen and (max-width: 49ch) {
:root {
--main-width: 40ch;
--header-height: 3rem;
--card-size: 35ch;
--card-row-num: 1;
--nav-height: 3rem;
}
}
body > footer {
grid-area: footer;
}
main {
grid-area: main;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
line-height: 1.5;
word-wrap: break-word;
/*padding-top: 2.5em;*/
padding-bottom: 2.5em;
padding-right: 1em;
padding-left: 1em;
margin-right: auto;
margin-left: auto;
width: 100%;
max-width: var(--main-width);
}
main iframe {
width: 100%;
min-height: var(--main-width);
}
.cards {
display: grid;
grid-template-columns: repeat(var(--card-row-num), var(--card-size));
/* grid-auto-rows: var(--card-size); */
grid-auto-rows: var(--card-size);
/*justify-content: space-between; */
column-gap: 0.2rem;
row-gap: 0.2rem;
}
.cards li {
display: inline-block;
list-style-type: none;
/* font-size: 125%; */
}
.cards li a {
display: inline-block;
width: calc(100% - 1.3rem );
height: calc(100% - 1.3rem );
padding: 0.5rem;
transition: all 0.2s;
/* padding: 1rem; */
/*width: var(--card-size);
height: var(--card-size);*/
color: var(--category-contrast-color);
background-color: var(--category-color);
/* text-align: center; */
border: 0.2rem solid var(--category-color);
}
.cards li a:hover {
background-color: var(--category-contrast-color);
color: var(--category-color);
}
article > footer {
border-top: 0.1em solid var(--hline-color);
}
article > footer .languages {
display: inline-flex;
}
article > footer .languages li {
list-style-type: none;
display: inline;
}
article > footer .languages img {
width: 1em;
height: 0.7em;
object-fit: cover;
border-radius: 0.1em;
}
.caps {
font-size:.92em;
}
.amp {
color:#666;
font-size:1.05em;
/*font-family:"Warnock Pro", "Goudy Old Style","Palatino","Book Antiqua",serif;*/
font-family:serif;
font-style:italic;
}
.dquo {
margin-left:-.38em;
}
.info, .success, .warning, .danger, .alert {
padding:1em;
margin-bottom:1.2em;
border:0.1em solid transparent;
border-radius:0.25em;
/*padding:15px;
margin-bottom:20px;
border:1px solid transparent;
border-radius:4px;*/
}
.info h4 { margin-top:0; color:inherit; }
.success h4 { margin-top:0; color:inherit; }
.warning h4 { margin-top:0; color:inherit; }
.danger h4 { margin-top:0; color:inherit; }
.alert h4 {
margin-top:0;
color:inherit;
}
.alert .alert-link {
font-weight:700;
}
.alert > p, .alert > ul { margin-bottom:0; }
.info > p, .info > ul { margin-bottom:0; }
.success > p, .success > ul { margin-bottom:0; }
.warning > p, .warning > ul { margin-bottom:0; }
.danger > p, .danger > ul { margin-bottom:0; }
.alert > p+p { margin-top:0.33em; }
.info > p+p { margin-top:0.33em; }
.success > p+p { margin-top:0.33em; }
.warning > p+p { margin-top:0.33em; }
.danger > p+p { margin-top:0.33em; }
.alert-dismissable, .alert-dismissible {
padding-right:2em;
}
.alert-dismissable .close,.alert-dismissible .close{
position:relative;
top:-0.1em;
right:-1.4em;
color:inherit;
}
.success {
color:#3c763d;
background-color:#dff0d8;
border-color:#d6e9c6;
}
.success hr {
border-top-color:#c9e2b3;
}
.success .alert-link {
color:#2b542c;
}
.info {
color:#31708f;
background-color:#d9edf7;
border-color:#bce8f1;
}
.info hr {
border-top-color:#a6e1ec;
}
.info .alert-link {
color:#245269;
}
.warning {
color:#8a6d3b;
background-color:#fcf8e3;
border-color:#faebcc;
}
.warning hr {
border-top-color:#f7e1b5;
}
.warning .alert-link {
color:#66512c;
}
.danger {
color:#a94442;
background-color:#f2dede;
border-color:#ebccd1;
}
.danger hr {
border-top-color:#e4b9c0;
}
.danger .alert-link {
color:#843534;
}
theme/templates/base.html
+ 16
− 16
View file @ 22e53a28
......@@ -7,11 +7,11 @@
{%- import 'macros/content_renderer.html' as content_renderer with context -%}
{%- import 'macros/nav.html' as nav with context -%}
<html lang="{%- block html_lang -%}{{ l }}{%- endblock html_lang -%}">
<html lang="{{ l }}" xmlns="http://www.w3.org/1999/xhtml">
<head>
{% block head %}
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<title>{% block title %}{{ t[l].title_prefix }}{{ t[l].sitename }}{{ t[l].title_suffix }}{%endblock%}</title>
<!-- <base target="_blank"> -->
<!-- <meta HTTP-EQUIV="REFRESH" content="500; url=#"> -->
......@@ -24,31 +24,33 @@
<!-- <link rel="icon" type="image/png" sizes="192x192" href="static/img/favicon-192x192.png"/>
<link rel="icon" type="image/png" sizes="32x32" href="static/img/favicon-32x32.png"/>-->
<!-- <link rel="icon" type="image/x-icon" sizes="16x16" href="static/img/favicon.ico"/> -->
{#{%- if FEED_ALL_ATOM %}
<link href="{{ FEED_DOMAIN }}/{% if FEED_ALL_ATOM_URL %}{{ FEED_ALL_ATOM_URL }}{% else %}{{ FEED_ALL_ATOM }}{% endif %}" type="application/atom+xml" rel="alternate" title="{{ t[l].atom.title|e }}" />
{% endif -%}#}
{% block extra_head %}{% endblock extra_head %}
{% endblock head %}
</head>
<body>
<body id="top">
<!--<nav id="controls">
</nav>-->
<header>
{% block header %}
{% block site_header %}
<h1><a href="{{ siteurl }}/{{ l }}/" title="{{ t[l].banner.title|e }}" ><img alt="{{ t[l].banner.alt|e }}" src="{{ siteurl }}/{{ theme.static_dir }}/images/banner-logo.png"><span>{{ t[l].banner.prefix|e }}{{ t[l].sitename|e }}{{ t[l].banner.suffix|e }}</span></a></h1>
{% block extra_header %}{% endblock extra_header %}
{% endblock header %}
{% endblock site_header %}
</header>
<div class="nav-container">
<div id="sitemenu-container">
<label for="show-header-menu" class="show-header-menu">&#9776;</label>
<input type="checkbox" id="show-header-menu" role="button">
<label for="show-header-menu" class="show-header-menu-bg"> </label>
{{ nav.render_menu(config.menuitems, l) }}
</div>
<main>
{% block content %}
{% endblock content %}
{% block breadcrumb %}
{% endblock breadcrumb %}
<main class="content">
{% block main %}
{% endblock main %}
</main>
<footer>
{% block footer %}
{% block page_footer %}
{% endblock page_footer %}
<footer id="site-footer">
{#- TODO besserer footer -#}
<div>
<a href="https://asta.uni-goettingen.de/impressum/datenschutz/">Datenschutz</a>
......@@ -56,8 +58,6 @@
<div>
<div>Fachgruppe Informatik Göttingen, 2022.</div>
<!-- blablabla datenschutz,impressum etc... -->
{% block extra_footer %}{% endblock extra_footer %}
{% endblock footer %}
</footer>
</body>
<!-- The Cake Is A Lie! -->
......
theme/templates/index.html
+ 3
− 0
View file @ 22e53a28
{% extends "page.html" %}
{% block breadcrumb %}
{% endblock breadcrumb %}
{% block page_footer %}
{% endblock %}
theme/templates/macros/link.html
+ 5
− 3
View file @ 22e53a28
{%- import 'macros/content_renderer.html' as content_renderer with context -%}
{%- import 'macros/getters.html' as get with context -%}
{%- import 'macros/renderers.html' as renderm with context -%}
{%- macro render(url, content, lang, attr = None, title = None) -%}
{%- call(parsedurl, anchor, reflang, is_external, reftype, refid, refpage, tagcattitle, tagcatcolor) parse_url(url, lang) -%}
......@@ -16,12 +18,12 @@
<a {{ content_renderer.render_attr(attr, lang, extra_classes=[ns.relation], extra={"href": ns.fullurl, "title": {"value":title, "escape": true}, "target": target}) }}>
{%- if content is string or content is none -%}
{%- if content is string and content|length -%}
{{ content|e }}
{{ renderm.softbreak_span(content) }}
{%- else -%}
{%- if reftype == "tag" -%}
{{ tagcattitle|e }}
{{ renderm.softbreak_span(tagcattitle) }}
{%- elif reftype == "slug" -%}
{{ refpage.title|e }}
{{ renderm.softbreak_span(refpage.title) }}
{%- endif -%}
{%- endif -%}
{%- else -%}
......
theme/templates/macros/nav.html
+ 14
− 0
View file @ 22e53a28
......@@ -22,3 +22,17 @@
TODO: handle custom menu items
{%- endif -%}
{%- endmacro -%}
{%- macro render_breadcrumb_menu(cat, lang, slug = None) -%}
{%- call(cattitle, catcolor, caturl, catpage, catpages) get.tag_by_name(cat, lang) -%}
<nav class="breadcrumb" {% if catcolor -%}style="--category-color: {{ catcolor }}"{%- endif -%}>
<ul>
<li>{{ link.render(['slug',config.theme.homepage_slug]|join(':'), None, lang) }}</li>
<li>{{ link.render(['tag',cat]|join(':'), None, lang) }}</li>
{%- if slug -%}
<li>{{ link.render(['slug',slug]|join(':'), None, lang) }}</li>
{%- endif -%}
</ul>
</nav>
{%- endcall -%}
{%- endmacro -%}
theme/templates/macros/renderers.html
+ 15
− 2
View file @ 22e53a28
......@@ -2,6 +2,19 @@
{%- import 'macros/cards.html' as cards with context -%}
{%- import 'macros/content_renderer.html' as content_renderer with context -%}
{%- macro softbreak_span(content) -%}
{%- set contentsplit = content.split('&shy;')-%}
<span>
{%- for s in contentsplit -%}
{%- if not loop.first -%}
&shy;
{%- endif -%}
{{ s|e }}
{%- endfor -%}
</span>
{%- endmacro -%}
{%- macro section_news(s, lang) -%}
{{ cards.cards_from_pages(pages_modified[lang], max=s.num|d(None)) }}
{%- endmacro -%}
......@@ -30,7 +43,7 @@
{%- call(tagtitle, tagcolor, tagurl, tagpage, tagpages) get.tag_by_name(s.tag, lang) -%}
{%- if s.title is not defined -%}
<header>
<h2 {% if s.id is defined -%}id="{{ s.id }}"{%- endif %}>{{ tagtitle|e }}</h2>
<h2 {% if s.id is defined -%}id="{{ s.id }}"{%- endif %}>{{ softbreak_span(tagtitle) }}</h2>
</header>
{%- endif -%}
{{ cards.cards_from_pages(tagpages, lang, max=s.num|d(None)) }}
......@@ -44,7 +57,7 @@
{%- macro section(s, lang) -%}
{%- if s.title is defined -%}
<header>
<h2 {% if s.id is defined -%}id="{{ s.id }}"{%- endif %}>{{ s.title[lang]|e }}</h2>
<h2 {% if s.id is defined -%}id="{{ s.id }}"{%- endif %}>{{ softbreak_span(s.title[lang]) }}</h2>
</header>
{%- endif -%}
{%- if s.type == "news" -%}
......
theme/templates/page.html
+ 67
− 64
View file @ 22e53a28
{% extends "base.html" %}
{% block html_lang %}{{ page.lang }}{% endblock %}
{% block title %}{{ page.title|striptags }}{% endblock %}
{% block title %}{{ render.softbreak_span(page.title) }}{% endblock %}
{% block extra_head %}
{%- for translation in page.translations -%}
......@@ -14,11 +12,15 @@
{% endif %}
{% endblock %}
{% block content %}
{% block breadcrumb %}
{{ nav.render_breadcrumb_menu(page.category, l, page.slug) }}
{% endblock breadcrumb %}
{% block main %}
<article>
{% block page_header %}
<header>
<h1>{{ page.title }}</h1>
<h1>{{ render.softbreak_span(page.title) }}</h1>
</header>
{% endblock %}
{% block page_content %}
......@@ -30,70 +32,71 @@
{{ render.sections(s, l) }}
{%- endcall -%}
{% endblock %}
{% block page_footer %}
<footer>
<div>
{{ t[l].page.authors_prefix }}
<ul>
{% for author in page.authors %}
<li> {{ author.name|e }} </li>
{% endfor %}
</ul>
{{ t[l].page.authors_suffix }}
</div>
</article>
{% endblock %}
<div>
{{ t[l].page.published_prefix }}
<abbr title="{{ page.date_created.isoformat() }}">
{{ page.date_created.isoformat() }}
</abbr>
{{ t[l].page.published_suffix }}
</div>
{% block page_footer %}
<footer class="page-footer content">
<div>
{{ t[l].page.authors_prefix }}
<ul>
{% for author in page.authors %}
<li> {{ author.name|e }} </li>
{% endfor %}
</ul>
{{ t[l].page.authors_suffix }}
</div>
<div>{{ t[l].page.modified_prefix }}
<abbr title="{{ page.date_modified.isoformat() }}">
{{ page.date_modified.isoformat() }}
</abbr>
{{ t[l].page.modified_suffix }}
</div>
<div>
{{ t[l].page.published_prefix }}
<abbr title="{{ page.date_created.isoformat() }}">
{{ page.date_created.isoformat() }}
</abbr>
{{ t[l].page.published_suffix }}
</div>
<div>
{{ t[l].page.category_prefix }}
{{ link.render_tag(page.category,l) }}
{{ t[l].page.category_suffix }}
</div>
<div>{{ t[l].page.modified_prefix }}
<abbr title="{{ page.date_modified.isoformat() }}">
{{ page.date_modified.isoformat() }}
</abbr>
{{ t[l].page.modified_suffix }}
</div>
<div>
{{ t[l].page.tags_prefix }}
<ul>
{% for tag in page.tags %}
<li>
{{ link.render_tag(tag,l) }}
</li>
{% endfor %}
</ul>
{{ t[l].page.tags_suffix }}
</div>
<div>
{{ t[l].page.category_prefix }}
{{ link.render_tag(page.category,l) }}
{{ t[l].page.category_suffix }}
</div>
<div>
{{ t[l].page.languages_prefix }}
<ul class="languages">
{%- for tlang in t['supported'] -%}
<li>
{{ link.render(['slug',page.slug,tlang]|join(':'),t[tlang]['langname'],l) }}
</li>
{%- endfor -%}
</ul>
{{ t[l].page.languages_suffix }}
</div>
<div>
{{ t[l].page.tags_prefix }}
<ul>
{% for tag in page.tags %}
<li>
{{ link.render_tag(tag,l) }}
</li>
{% endfor %}
</ul>
{{ t[l].page.tags_suffix }}
</div>
<div>
{{ t[l].page.slug_prefix }}
<code>{{ page.slug|e }}</code>
{{ t[l].page.slug_suffix }}
</div>
<div>
{{ t[l].page.languages_prefix }}
<ul class="languages">
{%- for tlang in t['supported'] -%}
<li>
{{ link.render(['slug',page.slug,tlang]|join(':'),t[tlang]['langname'],l) }}
</li>
{%- endfor -%}
</ul>
{{ t[l].page.languages_suffix }}
</div>
</footer>
{% endblock %}
</article>
<div>
{{ t[l].page.slug_prefix }}
<code>{{ page.slug|e }}</code>
{{ t[l].page.slug_suffix }}
</div>
</footer>
{% endblock %}
theme/templates/tag.html
+ 7
− 3
View file @ 22e53a28
{% extends "base.html" %}
{% block title -%}
{%- call(tagtitle, tagcolor, tagurl, tagpage, tagpages) get.tag_by_name(tag, l) -%}
{{ t[l].title_prefix }}{{ t[l].sitename }}{{ t[l].title_suffix }} - {{ tagtitle|e }}
{{ t[l].title_prefix }}{{ t[l].sitename }}{{ t[l].title_suffix }} - {{ render.softbreak_span(tagtitle) }}
{%- endcall -%}
{%- endblock -%}
{% block content %}
{% block breadcrumb %}
{{ nav.render_breadcrumb_menu(tag, l) }}
{% endblock breadcrumb %}
{% block main %}
<section>
{{ render.section({"type": "tag", "tag": tag, "num": None}, l) }}
</section>
{% endblock content %}
{% endblock main %}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment