main.css 11.50 KiB
:root {
--site-width: 90ch;
--site-lr-margin: 1rem;
--site-header-height: 6rem;
--site-breadcrumb-height: 2rem;
--sitemenu-nav-height: 3rem;
--card-size: 20ch;
--text-color: #333333;
--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: rgb(240, 240, 240, 0.8);
--header-menu-hover-bg-color: #E6E6E6;
}
* {
background: transparent;
border: 0;
margin: 0;
outline: 0;
padding: 0;
vertical-align: baseline;
box-sizing: border-box;
}
body {
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(--body-bg-color);
max-width: none;
letter-spacing: 0.025rem;
text-shadow: 0 0 1rem transparent, 1px 1px 1.2px var(--text-shawdow-color);
overflow: visible;
z-index: 0;
}
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 > * > * {
grid-column: content
}
body > header h1 {
display: inline-block;
min-height: calc( var(--site-header-height) - 1rem );
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(--site-header-height) - 1rem );
text-align: center;
}
body > header h1 a span {
display: inline-block;
line-height: calc( var(--site-header-height) - 1rem );
text-align: center;
}
body > header h1 img {
display: inline-block;
height: calc(var(--site-header-height) - 1rem);
}
#sitemenu-container {
/*background-color: #7ac;*/
}
#sitemenu-container nav {
/*font-size: 0.875rem;*/
border-top: 0.3rem solid var(--hline-color);
}
#sitemenu-container nav > ul {
width: 100%;
display: flex;
align-items: stretch;
flex-wrap: nowrap;
/*flex-wrap: wrap;*/
flex-direction: row;
}
#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;
}
#sitemenu-container nav > ul > li > a:hover {
color: var(--category-contrast-color);
background-color: var(--category-color);
}
#sitemenu-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;
}
#sitemenu-container .show-header-menu:hover {
background-color: var(--header-menu-hover-bg-color);
/*border-bottom: 0.2rem solid #536;*/
}
#sitemenu-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;
}
#sitemenu-container input[type=checkbox] {
display: none;
}
@media only screen and (max-width: 94ch) {
body > header h1{
/*width: 100%;*/
}
body > header h1 a {
justify-content: center;
flex-wrap: wrap;
}
#sitemenu-container {
margin-bottom: 0.2rem;
font-size: 1.2rem;
}
#sitemenu-container nav {
display: none;
border-top: 0;
position: fixed;
top: 3.2rem;
left: 0;
z-index: 10;
width: 100%;
}
#sitemenu-container nav > ul {
flex-direction: column;
}
#sitemenu-container nav > ul > li {
width: 100%;
background-color: var(--category-contrast-color);
}
#sitemenu-container .show-header-menu {
display: inline-block;
font-style: normal;
padding: 1rem;
}
#sitemenu-container a {
width: 100%;
/*! margin-top: 0.2rem; */
/* padding-bottom: 0.2rem;*/
box-sizing: border-box;
display: block; line-height: 2rem;
/* border-top: 0.1rem solid #333; */
}
/*#sitemenu-container a:hover {
border-bottom: 0.1rem solid #536;
}*/
#sitemenu-container input[type=checkbox]:checked ~ .show-header-menu-bg {
display: block;
}
#sitemenu-container input[type=checkbox]:checked ~ nav {
display: block;
}
:root {
--site-header-height: 3rem;
/* --sitemenu-nav-height: 3rem; */
}
}
footer.page-footer {
padding-top: 1rem;
padding-bottom: 1rem;
background-color: var(--page-footer-bg-color);
color: var(--page-footer-color);
}
footer.page-footer a {
color: var(--page-footer-link-color);
}
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);
}
nav.breadcrumb {
color: var(--category-contrast-color);
background-color: var(--category-color);
line-height: var(--site-breadcrumb-height);
margin-top: 0.5rem;
}
nav.breadcrumb ul li {
display: inline-block;
}
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);
padding-left: 0.5rem;
padding-right: 0.5rem;
}
/*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;
}
nav.breadcrumb ul li:first-child a::before {
content: '';
display: none;
}
*/
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: '📧';
}
a.tag-link,
footer.page-footer a.tag-link {
border-radius: 0.5rem;
padding-left: 0.3rem;
padding-right: 0.3rem;
color: var(--category-contrast-color);
background-color: var(--category-color);
}
hr {
height: 0.25rem;
margin: 1rem 0;
background-color: var(--hline-color);
border: 0;
width: 100%;
}
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%;
}
ul.cards {
display: flex;
align-items: stretch;
justify-content: space-between;
flex-wrap: wrap;
flex-direction: row;
padding: 0;
}
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%);
}
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);
}
.info, .success, .warning, .danger, .alert {
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; }
.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.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:2rem;
}
.alert-dismissable .close,.alert-dismissible .close{
position:relative;
top:-0.1rem;
right:-1.4rem;
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;
}