updated styles
All checks were successful
continuous-integration/drone/push Build is passing

* favour specific libre monospaced fonts
* display larger background around inline code
* edited padding in code block style
* added border radius property (rounded corners) to several divs
* added word break and padding rules
This commit is contained in:
surtur 2020-03-27 01:55:47 +01:00
parent 5debb11ddf
commit ff60d50870
Signed by: wanderer
GPG Key ID: 19CE1EC1D9E0486D
2 changed files with 15 additions and 13 deletions

@ -11,13 +11,13 @@ pre[class*="language-"] {
color: #f8f8f2; color: #f8f8f2;
background: none; background: none;
text-shadow: 0 1px rgba(0, 0, 0, 0.3); text-shadow: 0 1px rgba(0, 0, 0, 0.3);
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-family: 'Ubuntu Mono', 'Fira Code Retina', 'Fira Mono', 'Source Code Pro', Consolas, Monaco, 'Andale Mono', monospace;
font-size: 1em; font-size: 1em;
text-align: left; text-align: left;
white-space: pre; white-space: pre;
word-spacing: normal; word-spacing: normal;
word-break: normal; word-break: normal;
word-wrap: normal; word-wrap: break-word;
line-height: 1.5; line-height: 1.5;
background: #151718; background: #151718;
@ -33,8 +33,7 @@ pre[class*="language-"] {
/* Code blocks */ /* Code blocks */
pre[class*="language-"] { pre[class*="language-"] {
padding: .0em; padding: .7em 1.1em;
padding-right: 70px;
margin: .5em 0; margin: .5em 0;
overflow: auto; overflow: auto;
border-radius: .3em; border-radius: .3em;
@ -48,7 +47,7 @@ pre[class*="language-"] {
/* Inline code */ /* Inline code */
:not(pre) > code[class*="language-"] { :not(pre) > code[class*="language-"] {
padding: .1em; padding: .2em;
border-radius: .3em; border-radius: .3em;
white-space: normal; white-space: normal;
} }

@ -131,12 +131,14 @@ footer {
} }
.divcodeblock { .divcodeblock {
display: flex; display: block;
flex-direction: column; position: relative;
align-content: center; z-index: auto;
/* flex-direction: column; */
/* align-content: center; */
text-align: center; text-align: center;
margin: 1em 3em; margin: 1em 3em;
padding: 15px 0; padding: 0 0 35px 0;
} }
pre { pre {
@ -144,7 +146,6 @@ pre {
overflow: auto; overflow: auto;
position: relative; position: relative;
max-height: 30em; max-height: 30em;
min-height: 2em;
padding: .7em 1.1em; padding: .7em 1.1em;
font-size: .9em; font-size: .9em;
line-height: 1.5; line-height: 1.5;
@ -164,6 +165,7 @@ pre {
#radialgradient { #radialgradient {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
border-radius: 7px;
margin: 0 0em; margin: 0 0em;
min-height: 13em; min-height: 13em;
align-items: center; align-items: center;
@ -187,12 +189,12 @@ pre {
#lineargradient { #lineargradient {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
border-radius: 7px;
margin: 0 0em; margin: 0 0em;
min-height: 13em; min-height: 13em;
align-items: center; align-items: center;
align-content: center; align-content: center;
text-align: center; text-align: center;
height: 250px;
background-image: linear-gradient( background-image: linear-gradient(
133deg, 133deg,
#deadbeef 0%, #deadbeef 0%,
@ -232,6 +234,7 @@ pre {
#divshadowz { #divshadowz {
border: 2px solid whitesmoke; border: 2px solid whitesmoke;
border-radius: 7px;
-webkit-box-shadow: 1px 24px 57px 34px rgba(82,10,114,0.79), -webkit-box-shadow: 1px 24px 57px 34px rgba(82,10,114,0.79),
14px 10px 67px 34px rgba(58,180,214,0.79), 14px 10px 67px 34px rgba(58,180,214,0.79),
14px 14px 107px 34px rgba(82,10,114,0.79); 14px 14px 107px 34px rgba(82,10,114,0.79);
@ -243,7 +246,7 @@ pre {
14px 14px 107px 34px rgba(82,10,114,0.79); 14px 14px 107px 34px rgba(82,10,114,0.79);
padding: 15px; padding: 15px;
min-height: 50px; min-height: 50px;
margin: 5em 3em; margin: 5em 3em 7em;
align-content: center; align-content: center;
text-align: center; text-align: center;
} }
@ -282,4 +285,4 @@ pre {
-webkit-transform: skew(20deg, 10deg); -webkit-transform: skew(20deg, 10deg);
-ms-transform: skew(20deg, 10deg); -ms-transform: skew(20deg, 10deg);
transform: skew(20deg, 20deg); transform: skew(20deg, 20deg);
} }