OCram85/beautifulSA-jekyll
1
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity

Refactor code block styles (#516)

Browse Source 
* Refactor code block styles

Code block bg adopts to custom user bg color instead of using
hardcoded color, preserving original design as much as possible.

* Revert to linear-gradient(), exchange strip order

repeating-linear-gradient() doesn't generate necessary stripping near
code block borders
This commit is contained in:
Abel Cheung 2019-07-08 23:17:55 +08:00 committed by Dean Attali
parent 2f4147c008
commit 375e16d085
2 changed files with 29 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
css/main.css
View File

@ -668,37 +668,43 @@ pre {
font-size: 16px; font-size: 16px;
line-height: 1.5em; line-height: 1.5em;
} }
pre code { .highlight pre {
white-space: pre;
}
pre.highlight, .highlight > pre, td.code pre {
background-color: #FAFAFA;
background-image: linear-gradient(#F9F9F9 50%, #FDFDFD 50%);
background-repeat: repeat;
background-size: 3em 3em;
background-position: 0px 10px;
border-left: 7px solid #444;
}
code table, code table td, code table th, code table tbody, code table tr,
td.gutter pre {
padding: 0;
border: none; border: none;
background-color: #fff; background: none;
margin: 0;
} }
.highlight > pre { .highlight > pre {
background-image: linear-gradient(
rgba(0,0,0,0.06), rgba(0,0,0,0.06) 1.5em, rgba(0,0,0,0.03) 1.5em, rgba(0,0,0,0.03) 3em);
background-size: auto 3em;
background-position-y: 10px;
border: 1px solid rgba(0,0,0,0.1);
border-left: 7px solid #444;
}
.highlight > pre:not([class~="highlight"]) { /* code block with line number */
padding: 0; padding: 0;
} }
.highlight > pre.highlight { .highlight table, .highlight tr, .highlight td { /* to be removed after fixing table styles */
padding: 9.5px; border: none;
background: none;
padding: 0;
margin: 0;
} }
td.code pre { .highlight pre.lineno {
border-width: 0 0 0 2px; color: rgba(0,0,0,0.3);
border-style: solid;
border-color: #444;
border-radius: 0; border-radius: 0;
border-right: 2px solid #444;
} }
td.gutter {
padding-top: 3px; /* Make line numbers unselectable: excludes line numbers from copy-paste user ops */
.lineno {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.lineno::selection, .lineno::-moz-selection {
background: none;
} }
/* --- Social media sharing section --- */ /* --- Social media sharing section --- */

5
css/pygment_highlights.css
View File

@ -59,8 +59,3 @@
.highlight .vg { color: #008080 } /* Name.Variable.Global */ .highlight .vg { color: #008080 } /* Name.Variable.Global */
.highlight .vi { color: #008080 } /* Name.Variable.Instance */ .highlight .vi { color: #008080 } /* Name.Variable.Instance */
.highlight .il { color: #009999 } /* Literal.Number.Integer.Long */ .highlight .il { color: #009999 } /* Literal.Number.Integer.Long */
/* Make line numbers unselectable: excludes line numbers from copy-paste user ops */
.highlight .lineno {color:rgba(0,0,0,0.3);padding: 0 10px;-webkit-user-select: none;-moz-user-select: none; -o-user-select: none;}
.lineno::-moz-selection {background-color: transparent;} /* Mozilla specific */
.lineno::selection {background-color: transparent;} /* Other major browsers */