From b4fcbb623d80c7c37c1c679cbd6db081c1f1dbac Mon Sep 17 00:00:00 2001
From: Jake <j.vondoemming@stud.uni-goettingen.de>
Date: Sat, 6 Aug 2022 01:43:57 +0200
Subject: [PATCH] updated styling
---
theme/static/css/main.css | 603 +++++++++++++++++---------------------
1 file changed, 272 insertions(+), 331 deletions(-)
diff --git a/theme/static/css/main.css b/theme/static/css/main.css
index 2b077fb..3099e61 100644
--- a/theme/static/css/main.css
+++ b/theme/static/css/main.css
@@ -1,11 +1,17 @@
:root {
- --main-width: 90ch;
- --header-height: 6rem;
+ --site-width: 90ch;
+ --site-header-height: 6rem;
+ --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;
@@ -17,185 +23,114 @@
* {
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;
+ z-index: 0;
}
-/*
-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 > * {
+ display: grid;
+ grid-template-columns: [complete-start] minmax(1rem, 1fr) [content-start] minmax(0px, var(--site-width)) [content-end] minmax(1rem, 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; */
+ 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;
-}
-.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 {
+ width: 100%;
+ display: flex;
+ align-items: stretch;
+ flex-wrap: nowrap;
+ /*flex-wrap: wrap;*/
+}
+#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 +143,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,203 +163,165 @@ 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) {
- 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);
+footer.page-footer {
+ padding-top: 1rem;
+ padding-bottom: 1rem;
+ background-color: var(--page-footer-bg-color);
+ color: var(--page-footer-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.page-footer a {
+ color: var(--page-footer-link-color);
}
-.cards li {
- display: inline-block;
- list-style-type: none;
- /* font-size: 125%; */
+footer#site-footer {
+ /*margin-top: 50vh;*/
+ padding-top: 1rem;
+ padding-bottom: 1rem;
+ background-color: var(--site-footer-bg-color);
+ color: var(--site-footer-color);
}
-.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);
+footer#site-footer a {
+ color: var(--site-footer-link-color);
}
-article > footer {
- border-top: 0.1em solid var(--hline-color);
-}
-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: '📧';
}
-article > footer .languages img {
- width: 1em;
- height: 0.7em;
- object-fit: cover;
- border-radius: 0.1em;
+
+
+
+
+
+
+
+.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 1rem 0;
+}
+.content ul,
+.content ol {
+ padding-left: 2rem;
+}
+.content h1 {
+ padding-bottom: 0.3rem;
+ font-size: 2rem;
+ border-bottom: 0.1rem solid var(--hline-color);
+}
+.content h2 {
+ padding-bottom: 0.3rem;
+ font-size: 1.5rem;
+ border-bottom: 0.1rem solid var(--hline-color);
+}
+.content h1,
+.content h2,
+.content h3,
+.content h4,
+.content h5,
+.content h6 {
+ margin-top: 1.5rem;
+ margin-bottom: 1rem;
+ 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.5rem 0.2rem;
+}
+.content .codeblock {
+ background-color: #272822;
+ color: #f8f8f2;
+ padding: 0.5rem 1rem;
+}
+.content blockquote {
+ border-left: 0.25em solid #ddd;
+ padding: 0 1rem;
+ color: #777;
+}
@@ -442,19 +339,48 @@ article > footer .languages img {
+.cards {
+ /*display: grid;
+ grid-template-columns: repeat(var(--card-row-num), var(--card-size));
+ grid-auto-rows: var(--card-size);
+ column-gap: 0.2rem;
+ row-gap: 0.2rem;*/
+ display: flex;
+ align-items: stretch;
+ justify-content: space-between;
+ flex-wrap: wrap;
+ flex-direction: row;
+}
-.caps {
- font-size:.92em;
+.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%);
}
-.amp {
- color:#666;
- font-size:1.05em;
- /*font-family:"Warnock Pro", "Goudy Old Style","Palatino","Book Antiqua",serif;*/
- font-family:serif;
- font-style:italic;
+.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);
}
-.dquo {
- margin-left:-.38em;
+.cards li a:hover {
+ background-color: var(--category-contrast-color);
+ color: var(--category-color);
}
@@ -465,16 +391,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 +436,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 +511,3 @@ article > footer .languages img {
color:#843534;
}
-
--
GitLab