nek0.eu/site/css/default.css

482 lines
7.4 KiB
CSS
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

:root {
--background-color: #2e4e4eff;
--text-color: gainsboro;
--link-color: chartreuse;
--link-visited-color: lightskyblue;
--box-color: #161525e5;
--border-radius: 10px;
}
body {
color: var(--text-color);
font-size: 12pt;
font-family: 'Courier Prime';
font-weight: normal;
font-style: normal;
margin: 0;
display: grid;
grid-template-columns: [leftcol] 1fr [maincol] auto [rightcol] 1fr;
grid-template-rows: [headerrow] 1fr [mainrow] auto [rule] 125px [plugrow] 0.6fr [extrasrow] 0.6fr;
grid-template-areas:
"inlinks logo outlinks"
"main main main"
"rule rule rule"
"plugs plugs plugs"
"extras extras extras";
justify-content: stretch;
align-content: stretch;
min-height: 100vh;
background-color: var(--background-color);
box-shadow: inset 0 0 50vw #203037ff;
box-sizing: border-box;
}
body::after {
content: "";
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-image: url(/images/brain.svg);
background-size: contain;
background-repeat: no-repeat;
background-attachment: fixed;
background-origin: padding-box;
background-clip: content-box;
background-position: center;
z-index: -2;
}
a {
text-decoration: none;
}
a:link {
color: var(--link-color);
}
a:visited {
color: var(--link-visited-color);
}
img, video {
padding: 10px;
width: 66%;
max-width: 500px;
}
hr {
color: var(--link-color);
border: 0;
background-color: var(--link-color);
height: 3px;
margin: 20px 10% 20px;
}
header {
padding: 20px;
}
header a {
color: var(--link-color);
font-size: 18pt;
font-weight: bold;
}
header a:visited {
color: var(--link-color);
}
article {
text-align: left;
padding: 0 20px 5px;
margin: 5em auto 0;
overflow: auto;
grid-area: main;
max-width: 80em;
line-height: 1.5;
}
article + hr {
margin-top: 100px;
grid-area: rule;
}
article a:hover, .extras a:hover{
text-decoration: underline;
}
article ul{
list-style: none;
margin: 0;
padding-top: 1em;
padding-bottom: 1em;
}
article li::before {
content: "";
color: var(--text-color);
}
article li {
text-indent: -2ex;
}
article > *, .tags, .info {
background-color: var(--box-color);
}
article > *:first-child {
border-top-left-radius: var(--border-radius);
border-top-right-radius: var(--border-radius);
}
article > *:last-child {
border-bottom-left-radius: var(--border-radius);
border-bottom-right-radius: var(--border-radius);
}
.liberapay {
height: 45px;
display: inline-block;
vertical-align: middle;
}
.inlinks {
grid-area: inlinks;
}
.inlinks ul {
justify-content: flex-end;
}
.logo {
grid-area: logo;
text-align: center;
display: inline-block;
}
.outlinks {
grid-area: outlinks;
}
.outlinks ul {
justify-content: flex-start;
}
.plugs {
grid-area: plugs;
}
.extras {
grid-area: extras;
}
.inlinks, .outlinks, .plugs, .extras {
padding: 20px;
line-height: 100%;
}
.tags {
padding: 0 20px 0;
}
.logo img {
width: 200px;
}
.inlinks, .outlinks, .logo {
background: rgb(32,48,55);
background: linear-gradient(180deg, rgba(32,48,55,1) 33%, rgba(32,48,55,0) 100%);
}
.tags p, .plugs p, article p {
text-align: left;
margin: 0;
}
.inlinks ul, .outlinks ul, .plugs ul, .extras ul {
list-style: none;
margin: 0;
padding: 0;
display: inline-block;
height: 100%;
}
.inlinks li a:link, .outlinks li a:link {
color: var(--link-color);
font-size: 16pt;
font-weight: bold;
margin: 0;
text-decoration: none;
text-transform: uppercase;
}
.inlinks li a:visited, .outlinks li a:visited {
color: var(--link-color);
}
.inlinks ul, .outlinks ul, .plugs, .extras, .plugs ul, .extras ul {
display: flex;
flex-direction: row;
align-items: center;
}
.inlinks li, .outlinks li {
display: inline-block;
margin: 0;
padding: 20px;
}
.plugs li a {
display: inline-block;
}
.plugs img {
width: 40px;
height: 40px;
background-color: var(--text-color);
border-radius: 5px;
}
.plugs, .extras {
padding: 0 40px 0;
margin: 0;
padding : 20px;
color: var(--text-color);
}
.plugs, .extras, .plugs ul, .extras ul {
list-style: none;
justify-content: center;
padding: 0;
}
.plugs li, .extras li {
display: inline-block;
margin: 0 20px 0;
}
.extras a {
display: inline-block;
height: 40px;
line-height: 40px;
padding: 10px;
font-weight: bold;
}
.extras a:link, .extras a:visited {
color: var(--text-color);
font-weight: bold;
}
.plug-container, .extras-container {
display: inline-block;
padding: 20px;
width: 25%;
background-color: var(--box-color);
border-radius: var(--border-radius);
}
pre {
border: dashed 1px #000000;
border-radius: (--border-radius);
background-color: #000000aa;
padding: 10px;
}
pre code {
border: none;
font-size: 14pt;
background: transparent;
background-color: transparent;
}
pre code::before {
content: attr(class);
position: relative;
float: right;
display: block;
color: white;
font-weight: bolder;
text-shadow: 0px 0px 3px black;
}
code {
font-size: 14pt;
background-color: #000000aa;
border: dashed 1px #000000;
border-radius: var(--border-radius);
}
h1 {
font-size: 42pt;
}
h2 {
font-size: 20pt;
}
h1, h2, h3, h4, h5 {
font-family: 'Tippa';
margin: 0;
padding: 20px;
}
.pagination {
display: inline-block;
width: 100%;
padding: 3em 0 3em;
}
.left, .right {
float: left;
padding-left: 25%;
display: inline-block;
fill: currentColor;
}
.left svg, .right svg {
padding-bottom: -3px;
padding-left: 0.8ex;
padding-right: 0.8ex;
}
.info {
font-size: 14pt;
font-style: italic;
padding: 20px 40px 30px;
}
.tags a {
display: inline-block;
padding: 2ex;
}
.feed a {
display: inline-block;
}
.scripture {
/* change font */
font-family: 'Inknut Antiqua';
color: black;
font-size: 12pt;
font-weight: normal;
font-style: normal;
/* box shadow */
box-shadow: 5px 5px 10px var(--box-color);
/* bg-colour */
background-color: blanchedalmond;
/* adjust line height */
line-height: 200%;
/* margin */
margin: 30px;
/* padding */
padding: 50px;
}
.scripture p {
padding-top: 25px;
background-color: transparent;
}
p {
padding: 1em;
}
.with-initial > p:first-child::first-letter {
font-family: 'Maximilian Antiqua Initialen';
color: black;
font-size: 65pt;
font-weight: normal;
font-style: normal;
float: left;
padding-top: 0.1ex;
padding-right: 5px;
}
.postlist {
columns: 2;
}
@media screen and (max-width: 1100px) {
body {
display: block;
padding: 5em;
}
.logo {
width: 100%;
background: rgb(32,48,55);
}
.inlinks {
background: rgb(32,48,55);
}
.logo img {
padding: 0;
float: none;
}
.logo a {
margin: 0 auto 0;
}
.inlinks, .outlinks{
columns: auto;
}
.inlinks ul, .outlinks ul {
justify-content: space-evenly;
}
.postlist {
columns: 1;
}
.plugs, .extras {
padding: 2em 0 2em;
display: block;
}
.plugs > li, .extras > li {
padding: 2em;
box-shadow: inset 0 0 50vw #203037ff;
box-sizing: border-box;
display: list-item;
margin: 10px 0 10px;
}
.plug-container, .extras-container {
display: list-item;
width: initial;
}
nav ul{
text-align: center;
padding-left: 0;
}
nav li{
display: inline-block;
}
article {
margin: 0;
padding: 0;
}
img {
padding: 10px;
}
article img {
float: right;
padding-left: 100%;
width: 230px;
}
}