437 lines
No EOL
6.8 KiB
CSS
437 lines
No EOL
6.8 KiB
CSS
/* @font-face {
|
|
font-family: "FiraCode";
|
|
src: url("/fonts/FiraCode-VF.woff") format('woff');
|
|
} */
|
|
|
|
|
|
:root {
|
|
--bg: #141414;
|
|
--fg: rgb(232, 228, 228);
|
|
--links: #5da0f2;
|
|
--muted_text: rgb(179, 182, 186);
|
|
--h1: rgb(167, 83, 23);
|
|
--h2: rgb(185, 97, 35);
|
|
--h3: rgb(196, 110, 49);
|
|
--h4: rgb(216, 126, 61);
|
|
--h5: rgb(235, 139, 70);
|
|
--h6: rgb(244, 156, 93);
|
|
--strong: #FD6A02;
|
|
--hover-link: yellow;
|
|
--code-background: #282c34;
|
|
--code-fg: #ebf1f5;
|
|
}
|
|
|
|
@media (prefers-color-scheme: light) {
|
|
:root {
|
|
--bg: #fafafa;
|
|
--fg: #2f343f;
|
|
--links: #4084d6;
|
|
--muted_text: rgb(93, 93, 99);
|
|
--h1: rgb(167, 83, 23);
|
|
--h2: rgb(185, 97, 35);
|
|
--h3: rgb(196, 110, 49);
|
|
--h4: rgb(216, 126, 61);
|
|
--h5: rgb(235, 139, 70);
|
|
--h6: rgb(244, 156, 93);
|
|
--strong: #FD6A02;
|
|
--hover-link: rgb(217, 144, 8);
|
|
--code-background: #282c34;
|
|
--code-fg: #ebf1f5;
|
|
}
|
|
}
|
|
|
|
|
|
body {
|
|
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif */
|
|
/* font-family: 'FiraCode', sans-serif; */
|
|
background: var(--bg);
|
|
/* color: rgb(143, 185, 58) ; */
|
|
color: var(--fg);
|
|
}
|
|
|
|
main {
|
|
max-width: 800px;
|
|
margin: auto;
|
|
}
|
|
|
|
img {
|
|
max-width: 100%;
|
|
}
|
|
|
|
header h1 {
|
|
text-align: center;
|
|
}
|
|
|
|
footer {
|
|
text-align: center;
|
|
clear: both;
|
|
}
|
|
|
|
/* For TAGLIST.HTML */
|
|
.taglist {
|
|
text-align: center;
|
|
clear: both;
|
|
}
|
|
|
|
/* For NEXTPREV.HTML */
|
|
#nextprev {
|
|
/* The container for both the previous and next articles. */
|
|
margin-top: 15px;
|
|
}
|
|
|
|
#prevart {
|
|
float: left;
|
|
text-align: left;
|
|
}
|
|
|
|
#nextart {
|
|
float: right;
|
|
text-align: right;
|
|
}
|
|
|
|
#nextart,
|
|
#prevart {
|
|
max-width: 33%;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
color: var(--links);
|
|
}
|
|
|
|
/* Globally */
|
|
|
|
/* Each state */
|
|
|
|
a:visited {
|
|
text-decoration: none;
|
|
color: var(--links);
|
|
}
|
|
|
|
a:hover {
|
|
text-decoration: none;
|
|
color: var(--links);
|
|
}
|
|
|
|
/* a:focus {
|
|
text-decoration: none;
|
|
color: yellow;
|
|
} */
|
|
|
|
a:hover,
|
|
a:active {
|
|
text-decoration: none;
|
|
color: var(--hover-link);
|
|
}
|
|
|
|
strong {
|
|
color: var(--strong);
|
|
}
|
|
|
|
h1 {
|
|
color: var(--h1);
|
|
}
|
|
|
|
h2 {
|
|
color: var(--h2);
|
|
}
|
|
|
|
h3 {
|
|
color: var(--h3);
|
|
}
|
|
|
|
h4 {
|
|
color: var(--h4);
|
|
}
|
|
|
|
h5 {
|
|
color: var(--h5);
|
|
}
|
|
|
|
h6 {
|
|
color: var(--h6);
|
|
}
|
|
|
|
pre {
|
|
background: #282c34;
|
|
color: white;
|
|
border: 1px solid var(--strong);
|
|
border-radius: 15px;
|
|
padding: 1em;
|
|
white-space: pre-wrap;
|
|
overflow-wrap: break-word;
|
|
max-width: 800px;
|
|
margin: auto;
|
|
font-family: 'FiraCode';
|
|
}
|
|
|
|
.spanForHeader{
|
|
color: rgba(0, 255, 255, 0);
|
|
}
|
|
|
|
.spanForHeader:hover{
|
|
color: var(--links);
|
|
}
|
|
|
|
|
|
.tenRecentPosts li{
|
|
padding-top: 10px;
|
|
}
|
|
|
|
.white_span{
|
|
color: var(--fg);
|
|
}
|
|
|
|
|
|
.white_link a{
|
|
color: var(--fg);
|
|
}
|
|
|
|
.muted_text{
|
|
color: var(--muted_text);
|
|
}
|
|
|
|
article p {
|
|
line-height: 1.4em;
|
|
}
|
|
|
|
ul {
|
|
line-height: 1.3em;
|
|
}
|
|
|
|
.footnotes {
|
|
line-height: 0px;
|
|
}
|
|
|
|
ol {
|
|
line-height: 1.5em;
|
|
}
|
|
|
|
/* ol li {
|
|
margin-top: 1em;
|
|
} */
|
|
|
|
ol li::marker{
|
|
color: var(--strong);
|
|
}
|
|
|
|
ul li::marker{
|
|
color: var(--strong)
|
|
}
|
|
|
|
h1:hover .anchor,
|
|
h2:hover .anchor,
|
|
h3:hover .anchor,
|
|
h4:hover .anchor,
|
|
h5:hover .anchor,
|
|
h6:hover .anchor {
|
|
display: inline-flex;
|
|
color: var(--links);
|
|
margin-inline-start: 8px;
|
|
font-weight: 500;
|
|
user-select: none;
|
|
}
|
|
|
|
.post-content a{
|
|
box-shadow: 0 1px 0;
|
|
box-decoration-break: clone;
|
|
-webkit-box-decoration-break: clone;
|
|
}
|
|
|
|
.category-links{
|
|
font-size: 1.3em;
|
|
}
|
|
|
|
.index-links a, .tenRecentPosts a, .footnote-ref{
|
|
text-decoration: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.post-content blockquote {
|
|
margin: 20px 0;
|
|
padding: 0 14px;
|
|
border-inline-start: 3px solid var(--fg);
|
|
}
|
|
ul li{
|
|
padding-top: 0.1em;
|
|
}
|
|
.rssSvg{
|
|
padding-top: 0.5em;
|
|
}
|
|
p code, li code {
|
|
background: var(--code-background);
|
|
color: var(--code-fg);
|
|
padding: 0.1rem 0.2rem;
|
|
}
|
|
|
|
.indexImage {
|
|
margin: auto;
|
|
display: inline-block;
|
|
max-width: 25%;
|
|
width: 35%;
|
|
min-width: 275px;
|
|
}
|
|
|
|
.indexImage img {
|
|
max-width: 70%;
|
|
}
|
|
|
|
|
|
.indexImage figcaption {
|
|
padding-top: 0.5em;
|
|
font-size: 1.05em;
|
|
}
|
|
|
|
|
|
#tagcloud {
|
|
clear: both ;
|
|
padding: 0;
|
|
border-radius: 10px ;
|
|
text-align: center ;
|
|
margin: 0 auto ;
|
|
border: solid 1px ;
|
|
border-style: dashed ;
|
|
list-style: none ;
|
|
}
|
|
|
|
#tagcloud li {
|
|
display: inline-block ;
|
|
}
|
|
|
|
#tagcloud a {
|
|
display: block ;
|
|
width: auto ;
|
|
border-radius: 10px ;
|
|
padding: .25em ;
|
|
margin: 2px ;
|
|
}
|
|
|
|
#tagcloud a:hover {
|
|
box-shadow: 2px 2px 2px 2px black ;
|
|
}
|
|
|
|
|
|
/* figcaption {
|
|
text-align: center ;
|
|
display: block ;
|
|
font-style: italic ;
|
|
}
|
|
*/
|
|
|
|
.removeLineHeight p {
|
|
line-height: 0.5em;
|
|
}
|
|
|
|
.breadcrumbs {
|
|
font-size: smaller;
|
|
}
|
|
|
|
article {
|
|
padding: 0 0.5em;
|
|
}
|
|
|
|
.footnotes ol li::marker{
|
|
color: var(--fg);
|
|
}
|
|
|
|
.footnotes ul li::marker{
|
|
color: var(--fg)
|
|
}
|
|
|
|
.highlight-title{
|
|
background: #282c34;
|
|
color: white;
|
|
/* border: 1px solid var(--strong); */
|
|
border-radius: 20px;
|
|
padding: .55em;
|
|
white-space: pre-wrap;
|
|
overflow-wrap: break-word;
|
|
max-width: 800px;
|
|
margin: auto;
|
|
font-family: 'FiraCode';
|
|
font-weight: 600;
|
|
}
|
|
|
|
|
|
|
|
#tag_blog:before {content: "📜";}
|
|
#tag_updates:before {content: "🆕";}
|
|
#tag_library:before {content: "📚";}
|
|
#tag_hackbook:before {content: "📖";}
|
|
#tag_ted\ kaczynski:before {content: "💣";}
|
|
#tag_ted-kaczynski:before {content: "💣";}
|
|
#tag_Blog:before {content: "📜";}
|
|
#tag_Updates:before {content: "🆕";}
|
|
#tag_Library:before {content: "📚";}
|
|
#tag_Hackbook:before {content: "📖";}
|
|
#tag_Ted\ Kaczynski:before {content: "💣";}
|
|
#tag_Ted-Kaczynski:before {content: "💣";}
|
|
#tag_BLOG:before {content: "📜";}
|
|
#tag_UPDATES:before {content: "🆕";}
|
|
#tag_Library:before {content: "📚";}
|
|
#tag_HACKBOOK:before {content: "📖";}
|
|
#tag_TED\ KACZYNSKI:before {content: "💣";}
|
|
#tag_TED-KACZYNSKI:before {content: "💣";}
|
|
#tag_personal:before {content: "😎";}
|
|
#tag_Personal:before {content: "😎";}
|
|
|
|
/* https://learn.netlify.app/en/shortcodes/notice/ */
|
|
div.notices {
|
|
margin: 2rem 0;
|
|
position: relative;
|
|
}
|
|
div.notices p {
|
|
padding: 15px;
|
|
display: block;
|
|
font-size: 1rem;
|
|
margin-top: 0rem;
|
|
margin-bottom: 0rem;
|
|
color: #666;
|
|
border-radius: 15px;
|
|
}
|
|
div.notices p:first-child:before {
|
|
position: absolute;
|
|
top: 2px;
|
|
color: #fff;
|
|
/* font-family: "Font Awesome 5 Free"; */
|
|
font-weight: 900;
|
|
content: "!";
|
|
left: 10px;
|
|
}
|
|
div.notices p:first-child:after {
|
|
position: absolute;
|
|
top: 2px;
|
|
color: #fff;
|
|
left: 2rem;
|
|
}
|
|
div.notices.info p {
|
|
border-top: 30px solid #F0B37E;
|
|
background: #FFF2DB;
|
|
}
|
|
div.notices.info p:first-child:after {
|
|
content: 'Info';
|
|
}
|
|
div.notices.warning p {
|
|
border-top: 30px solid rgba(217, 83, 79, 0.8);
|
|
background: #FAE2E2;
|
|
}
|
|
div.notices.warning p:first-child:after {
|
|
content: 'Warning';
|
|
}
|
|
div.notices.warning p:first-child:before {
|
|
content: "!!!";
|
|
}
|
|
div.notices.note p {
|
|
border-top: 30px solid #6AB0DE;
|
|
background: #E7F2FA;
|
|
}
|
|
div.notices.note p:first-child:after {
|
|
content: 'Note';
|
|
}
|
|
div.notices.tip p {
|
|
border-top: 30px solid rgba(92, 184, 92, 0.8);
|
|
background: #E6F9E6;
|
|
}
|
|
div.notices.tip p:first-child:after {
|
|
content: 'Tip';
|
|
} |