Skip to content
Snippets Groups Projects
Verified Commit b4fcbb62 authored by Jake's avatar Jake
Browse files

updated styling

parent 20c5b809
No related branches found
No related tags found
No related merge requests found
Pipeline #313502 passed
Stage: build
Stage: deploy
Hide whitespace changes
Inline Side-by-side
theme/static/css/main.css
+ 272
− 331
View file @ b4fcbb62
: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;
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment