diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 8c4de22b..01d2fdef 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -64,7 +64,12 @@ {{- end -}} + + {{- if .Site.Params.disableDarkmode -}} + + {{- else -}} + {{- end -}} {{- if .Site.Params.staticman -}} diff --git a/static/css/main-nodark.css b/static/css/main-nodark.css new file mode 100644 index 00000000..6d4320ce --- /dev/null +++ b/static/css/main-nodark.css @@ -0,0 +1,961 @@ +/* --- General --- */ + +body { + font-family: 'Lora', 'Times New Roman', serif; + font-size: 18px; + color: #404040; + position: relative; + background: #FFF; + display: flex; + flex-flow: column; + height: 100vh; +} +/* @media (prefers-color-scheme: dark) { */ + /* body { */ + /* background: black; */ + /* color: white; */ + /* } */ +/* } */ +.container[role=main] { + margin-bottom:50px; + flex: 1 0 auto; +} + +@media only screen and (max-width: 767px) { +.container[role=main] { + margin-left: 0; + margin-right: 0; +} +} + +p { + line-height: 1.5; + margin: 6px 0; +} +p + p { + margin: 24px 0 6px 0; +} +p a { + /* text-decoration: underline */ + color: #008AFF; +} +/* @media (prefers-color-scheme: dark) { */ + /* p a { */ + /* color: #50afff; */ + /* } */ +/* } */ + +h1,h2,h3,h4,h5,h6 { + font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; + font-weight: 800; +} +a { + color: #008AFF; +} +/* @media (prefers-color-scheme: dark) { */ + /* a { */ + /* color: #50afff; */ + /* } */ +/* } */ +a:hover, +a:focus { + color: #0085a1; +} +blockquote { + color: #808080; + font-style: italic; +} +blockquote p:first-child { + margin-top: 0; +} +/* @media (prefers-color-scheme: dark) { */ + /* blockquote { */ + /* border-left: 5px solid #444; */ + /* } */ +/* } */ +hr.small { + max-width: 100px; + margin: 15px auto; + border-width: 4px; + border-color: inherit; + border-radius: 3px; +} + +.main-content { + padding-top: 80px; +} +@media only screen and (min-width: 768px) { + .main-content { + padding-top: 130px; + } +} + +.main-explain-area { + font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; + padding: 15px inherit; +} + +.hideme { + display: none; +} + +div.panel-body a.list-group-item { + font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; + font-weight: 800; + border-radius: 0; + border: none; + font-size: 16px; +} +div.panel-group .panel { + border-radius: 0; +} +div.panel-group .panel+.panel { + margin-top: 0; +} + +div.panel-body a.list-group-item.view-all { + font-weight: 600; +} + +::-moz-selection, ::selection { + color: white; + text-shadow: none; + background: #0085a1; +} +img::selection, img::-moz-selection { + color: white; + background: transparent; +} + + +img { + display: block; + margin: auto; + max-width: 100%; +} +/* @media (prefers-color-scheme: dark) { */ +/* figure:not(.dark) img, img.white { */ + /* background-color: white; */ +/* } */ +/* } */ + +.img-title { + width: 100%; +} + +.disqus-comments { + margin-top: 30px; +} + +@media only screen and (min-width: 768px) { + .disqus-comments { + margin-top: 40px; + } +} + +/* --- Navbar --- */ + +.navbar-custom { + background: #F5F5F5; + border-bottom: 1px solid #EAEAEA; + font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; +} +/* @media (prefers-color-scheme: dark) { */ + /* .navbar-custom { */ + /* background: #505050; */ + /* border-bottom: 1px solid #AAA; */ + /* } */ +/* } */ + +.navbar-custom .nav li a { + text-transform: uppercase; + font-size: 12px; + letter-spacing: 1px; +} + +.navbar-custom .navbar-brand, +.navbar-custom .nav li a { + font-weight: 800; + color: #404040; +} + +/* @media (prefers-color-scheme: dark) { */ + /* .navbar-custom .navbar-brand, */ + /* .navbar-custom .nav li a { */ + /* color: #b0b0b0; */ + /* } */ +/* } */ + +.navbar-custom .navbar-brand:hover, +.navbar-custom .navbar-brand:focus , +.navbar-custom .nav li a:hover, +.navbar-custom .nav li a:focus { + color: #0085a1; +} + +/* .navbar-custom .navbar-brand:hover, */ +/* .navbar-custom .navbar-brand:focus , */ +/* .navbar-custom .nav li a:hover, */ +/* .navbar-custom .nav li a:focus { */ + /* @media (prefers-color-scheme: dark) { */ + /* color: #b0e0ff; */ + /* } */ +/* } */ + +.navbar-custom .navbar-brand-logo { + padding-top: 0; + -webkit-transition: padding .5s ease-in-out; + -moz-transition: padding .5s ease-in-out; + transition: padding .5s ease-in-out; +} +.navbar-custom .navbar-brand-logo img { + height: 50px; + -webkit-transition: height .5s ease-in-out; + -moz-transition: height .5s ease-in-out; + transition: height .5s ease-in-out; +} +.navbar-custom.top-nav-short .navbar-brand-logo { + padding-top: 5px; +} +.navbar-custom.top-nav-short .navbar-brand-logo img { + height: 40px; +} + +@media only screen and (min-width: 768px) { + .navbar-custom { + padding: 20px 0; + -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out; + -moz-transition: background .5s ease-in-out,padding .5s ease-in-out; + transition: background .5s ease-in-out,padding .5s ease-in-out; + } + + .navbar-custom.top-nav-short { + padding: 0; + } +} + +.navbar-custom .avatar-container { + opacity: 1; + visibility: visible; + position: absolute; + -webkit-transition: visibility 0.5s, opacity 0.5s ease-in-out; + -moz-transition: visibility 0.5s, opacity 0.5s ease-in-out; + transition: visibility 0.5s, opacity 0.5s ease-in-out; + left: 50%; + width: 50px; + margin-top: -25px; +} +.navbar-custom .avatar-container .avatar-img-border { + width: 100%; + border-radius: 50%; + margin-left: -50%; + display: inline-block; + box-shadow: 0 0 8px rgba(0, 0, 0, .8); + -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .8); + -moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8); +} +.navbar-custom .avatar-container .avatar-img { + width: 100%; + border-radius: 50%; + display: block; +} + +.navbar-custom.top-nav-short .avatar-container{ + opacity: 0; + visibility: hidden; +} + +.navbar-custom.top-nav-expanded .avatar-container { + display: none; +} + +@media only screen and (min-width: 768px) { + .navbar-custom .avatar-container { + width: 100px; + margin-top: -50px; + } + + .navbar-custom .avatar-container .avatar-img-border { + width: 100%; + box-shadow: 1px 1px 2px rgba(0, 0, 0, .8); + -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, .8); + -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, .8); + } + + .navbar-custom .avatar-container .avatar-img { + width: 100%; + } +} + +/* Multi-level navigation links */ +.navbar-custom .nav .navlinks-container { + position: relative; +} +.navbar-custom .nav .navlinks-parent:after { + content: " \25BC"; +} +.navbar-custom .nav .navlinks-children { + width: 100%; + display: none; + word-break: break-word; +} +.navbar-custom .nav .navlinks-container .navlinks-children a { + display: block; + padding: 10px; + padding-left: 30px; + background: #f5f5f5; + text-decoration: none !important; + border-width: 0 1px 1px 1px; + font-weight: normal; +} +@media only screen and (max-width: 767px) { + .navbar-custom .nav .navlinks-container.show-children { + background: #eee; + } + .navbar-custom .nav .navlinks-container.show-children .navlinks-children { + display: block; + } +} +@media only screen and (min-width: 768px) { + .navbar-custom .nav .navlinks-container { + text-align: center; + } + .navbar-custom .nav .navlinks-container:hover { + background: #eee; + } + .navbar-custom .nav .navlinks-container:hover .navlinks-children { + display: block; + } + .navbar-custom .nav .navlinks-children { + position: absolute; + } + .navbar-custom .nav .navlinks-container .navlinks-children a { + padding-left: 10px; + border: 1px solid #eaeaea; + border-width: 0 1px 1px; + } +} +/* @media (prefers-color-scheme: dark) { */ + /* .navbar-custom .nav .navlinks-container:hover { */ + /* background: #666; */ + /* } */ + /* .navbar-custom .nav .navlinks-container .navlinks-children a { */ + /* border: 1px solid #AAA; */ + /* } */ + /* .navbar-custom .nav .navlinks-container .navlinks-children a { */ + /* background: #444; */ + /* } */ +/* } */ + +/* --- Footer --- */ + +footer { + padding: 30px 0; + background: #F5F5F5; + border-top: 1px #EAEAEA solid; + margin-top: auto; + font-size: 14px; +} + +footer a { + color: #404040; + +} + +footer .list-inline { + margin: 0; + padding: 0; +} +footer .copyright { + font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; + text-align: center; + margin-bottom: 0; +} +footer .theme-by { + text-align: center; + margin: 10px 0 0; +} + +footer div.disclaimer { + padding: 15px 15px 15px 10px; + margin: 20px 20px 20px 5px; + border: 1px solid #eee; + border-left-width: 10px; + border-right-width: 10px; + border-radius: 5px 3px 3px 5px; + background-color: #fdf5d4; + border-left-color: #f1c40f; + border-right-color: #f1c40f; + font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; + text-align: center; +} + +@media only screen and (min-width: 768px) { + footer { + padding: 50px 0; + } + footer .footer-links { + font-size: 18px; + } + footer .copyright { + font-size: 16px; + } +} + +/* @media (prefers-color-scheme: dark) { */ + /* footer { */ + /* background: #444; */ + /* border-top: 1px #AAA solid; */ + /* } */ + /* footer a { */ + /* color: #AAA; */ + /* } */ +/* } */ + +/* --- Post preview --- */ + +.post-preview { + padding: 20px 0; + border-bottom: 1px solid #eee; +} +@media only screen and (min-width: 768px) { + .post-preview { + padding: 35px 0; + } +} + +.post-preview:last-child { + border-bottom: 0; +} + +.post-preview a { + text-decoration: none; + color: #404040; +} +/* @media (prefers-color-scheme: dark) { */ + /* .post-preview a { */ + /* color: #AAA; */ + /* } */ +/* } */ + +.post-preview a:focus, +.post-preview a:hover { + text-decoration: none; + color: #0085a1; +} + +.post-preview .post-title { + font-size: 30px; + margin-top: 0; +} +.post-preview .post-subtitle { + margin: 0; + font-weight: 300; + margin-bottom: 10px; +} +.post-preview .post-meta, +.post-heading .post-meta, +.page-meta { + color: #808080; + font-size: 18px; + font-style: italic; + margin: 0 0 10px; +} +.page-meta { + align-self: center; +} +.post-preview .post-meta a, +.post-heading .post-meta a, +.page-meta a { + color: #404040; + text-decoration: none; +} +.post-preview .post-entry { + font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; +} +.post-entry-container { + display: inline-block; + width: 100%; +} +.post-entry { + width: 100%; + margin-top: 10px; +} +.post-image { + float: right; + height: 192px; + width: 192px; + margin-top: -35px; + filter: grayscale(90%); +} +.post-image:hover { + filter: grayscale(0%); +} +.post-image img { + border-radius: 100px; + height: 192px; + width: 192px; +} +.post-preview .post-read-more { + font-weight: 800; + float: right; +} + +@media only screen and (min-width: 768px) { + .post-preview .post-title { + font-size: 36px; + } +} + +/* --- Tags --- */ + +.blog-tags { + font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; + color: #999; + font-size: 15px; + margin-bottom: 30px; +} + +.blog-tags:before { + content: "Tags: "; +} + +.blog-tags a { + color: #008AFF; + text-decoration: none; + padding: 0px 5px; +} + +.blog-tags a:before { + content: "#"; +} + +.blog-tags a:hover { + border-radius: 2px; + color: #008AFF; + background-color: #CCC; +} + +.post-preview .blog-tags { + margin-top: 5px; + margin-bottom: 0; +} + +@media only screen and (min-width: 768px) { + .post-preview .blog-tags { + margin-top: 10px; + } +} + +@media only screen and (max-width: 500px) { + .post-image, .post-image img { + height: 100px; + width: 100px; + } + + .post-image { + width: 100%; + text-align: center; + margin-top: 0; + float: left; + } +} +/* --- Post and page headers --- */ + +.intro-header { + margin: 80px 0 20px; + position: relative; +} +.intro-header.big-img { + background: no-repeat center center; + -webkit-background-size: cover; + -moz-background-size: cover; + background-size: cover; + -o-background-size: cover; + margin-top: 51px; /* The small navbar is 50px tall + 1px border */ + margin-bottom: 35px; +} +.intro-header.big-img .big-img-transition { + position: absolute; + width: 100%; + height: 100%; + opacity: 0; + background: no-repeat center center; + -webkit-background-size: cover; + -moz-background-size: cover; + background-size: cover; + -o-background-size: cover; + -webkit-transition: opacity 1s linear; + -moz-transition: opacity 1s linear; + transition: opacity 1s linear; +} +.intro-header .page-heading, +.intro-header .tags-heading, +.intro-header .categories-heading { + text-align: center; +} +.intro-header.big-img .page-heading, +.intro-header.big-img .post-heading { + padding: 100px 0; + color: #FFF; + text-shadow: 1px 1px 3px #000; +} +.intro-header .page-heading h1, +.intro-header .tags-heading h1, +.intro-header .categories-heading h1 { + margin-top: 0; + font-size: 50px; +} +.intro-header .post-heading h1 { + margin-top: 0; + font-size: 35px; +} +.intro-header .page-heading .page-subheading, +.intro-header .post-heading .post-subheading { + font-size: 27px; + line-height: 1.1; + display: block; + font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; + font-weight: 300; + margin: 10px 0 0; +} +.intro-header .post-heading .post-subheading { + margin-bottom: 20px; +} +.intro-header.big-img .page-heading .page-subheading, +.intro-header.big-img .post-heading .post-subheading { + font-weight: 400; +} +.intro-header.big-img .page-heading hr { + box-shadow: 1px 1px 3px #000; + -webkit-box-shadow: 1px 1px 3px #000; + -moz-box-shadow: 1px 1px 3px #000; +} +.intro-header.big-img .post-heading .post-meta { + color: #EEE; +} +.intro-header.big-img .img-desc { + background: rgba(30, 30, 30, 0.6); + position: absolute; + padding: 5px 10px; + font-size: 11px; + color: #EEE; + font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; + right: 0; + bottom: 0; + display: none; +} +@media only screen and (min-width: 768px) { + .intro-header { + margin-top: 130px; + } + .intro-header.big-img { + margin-top: 91px; /* Full navbar is small navbar + 20px padding on each side when expanded */ + } + .intro-header.big-img .page-heading, + .intro-header.big-img .post-heading { + padding: 150px 0; + } + .intro-header .page-heading h1, + .intro-header .tags-heading h1, + .intro-header .categories-heading h1 { + font-size: 80px; + } + .intro-header .post-heading h1 { + font-size: 50px; + } + .intro-header.big-img .img-desc { + font-size: 14px; + } +} + +.header-section.has-img .no-img { + margin-top: 0; + background: #FCFCFC; + margin: 0 0 40px; + padding: 20px 0; + box-shadow: 0 0 5px #AAA; +} +/* Many phones are 320 or 360px, so make sure images are a proper aspect ratio in those cases */ +.header-section.has-img .intro-header.no-img { + display: none; +} +@media only screen and (max-width: 365px) { + .header-section.has-img .intro-header.no-img { + display: block; + } + .intro-header.big-img { + width: 100%; + height: 220px; + } + .intro-header.big-img .page-heading, + .intro-header.big-img .post-heading { + display: none; + } + .header-section.has-img .big-img { + margin-bottom: 0; + } +} +@media only screen and (max-width: 325px) { + .intro-header.big-img { + height: 200px; + } +} + +.caption { + text-align: center; + font-size: 14px; + padding: 10px; + font-style: italic; + margin: 0; + display: block; + border-bottom-right-radius: 5px; + border-bottom-left-radius: 5px; +} + +/* --- Pager --- */ + +.pager li a { + font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; + text-transform: uppercase; + font-size: 14px; + font-weight: 800; + letter-spacing: 1px; + padding: 10px 5px; + background: #FFF; + border-radius: 0; + color: #404040; +} +@media only screen and (min-width: 768px) { + .pager li a { + padding: 15px 25px; + } +} +.pager li a:hover, +.pager li a:focus { + color: #FFF; + background: #0085a1; + border: 1px solid #0085a1; +} + +/* @media (prefers-color-scheme: dark) { */ +/* .pager li a { */ + /* background: #444; */ + /* color: white; */ +/* } */ +/* } */ + +.pager { + margin: 10px 0 0; +} + +.pager.blog-pager { + margin-top:10px; +} + +h4.panel-title > span.badge { + float: right; +} + +@media only screen and (min-width: 768px) { + .pager.blog-pager { + margin-top: 40px; + } +} + +/* --- Tables --- */ + +table { + padding: 0; +} +table tr { + border-top: 1px solid #cccccc; + background-color: #ffffff; + margin: 0; + padding: 0; +} +/* @media (prefers-color-scheme: dark) { */ +/* } */ +table tr:nth-child(2n) { + background-color: #f8f8f8; +} +/* @media (prefers-color-scheme: dark) { */ +/* table tr { */ + /* background-color: #181818; */ +/* } */ +table tr:nth-child(2n) { + background-color: #303030 +} +} +table tr th { + font-weight: bold; + border: 1px solid #cccccc; + text-align: left; + margin: 0; + padding: 6px 13px; +} +table tr td { + border: 1px solid #cccccc; + text-align: left; + margin: 0; + padding: 6px 13px; +} +table tr th :first-child, +table tr td :first-child { + margin-top: 0; +} +table tr th :last-child, +table tr td :last-child { + margin-bottom: 0; +} + +/* --- Social media sharing section --- */ + +#social-share-section { + margin-bottom: 30px; +} + +/* --- Google Custom Search Engine Popup --- */ +#modalSearch table tr, #modalSearch table tr td, #modalSearch table tr th { + border:none; +} +.reset-box-sizing, .reset-box-sizing *, .reset-box-sizing *:before, .reset-box-sizing *:after, .gsc-inline-block { + -webkit-box-sizing: content-box; + -moz-box-sizing: content-box; + box-sizing: content-box; +} +input.gsc-input, .gsc-input-box, .gsc-input-box-hover, .gsc-input-box-focus, .gsc-search-button { + box-sizing: content-box; + line-height: normal; +} + +/* IPython split style */ +div.splitbox {width:100%; overflow:auto;} + +div.splitbox div.left { + width:48%; + float:left;} +div.splitbox div.right { + width:48%; + float:right;} + +@media only screen and (max-width: 600px) { +div.splitbox div.left { + width:100%; + float:left;} +div.splitbox div.right { + width:100%; + float:left;} +} + +/* Delayed Disqus */ +.disqus-comments button { + font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; + text-transform: uppercase; + font-size: 14px; + font-weight: 800; + letter-spacing: 1px; + padding: 10px 5px; + background: #FFF; + border-radius: 0; + color: #404040; +} +@media only screen and (min-width: 768px) { + .disqus-comments button { + padding: 15px 25px; + } +} +.disqus-comments button:hover, +.disqus-comments button:focus { + color: #FFF; + background: #0085a1; + border: 1px solid #0085a1; +} + +/* Related posts */ +h4.see-also { + margin-top: 20px; +} + +/* Sharing */ + ul.share { + display: flex; + flex-direction: row; + flex-wrap: wrap; + list-style: none; + margin: 0; + padding: 0; +} + ul.share li { + display: inline-flex; + margin-right: 5px; +} + ul.share li:last-of-type { + margin-right: 0; +} + ul.share li .fab { + display: block; + width: 30px; + height: 30px; + line-height: 30px; + font-size: 16px; + text-align: center; + transition: all 150ms ease-in-out; + color: #fff; +} + ul.share li a { + background-color: #b5c6ce; + display: block; + border-radius: 50%; + text-decoration: none !important; + margin: 0; +} + ul.share li:hover .fab { + transform: scale(1.4) +} + +/* Dark mode */ +/* @media (prefers-color-scheme: dark) { */ + /* code { */ + /* background-color: #222; */ + /* color: #fbb; */ + /* } */ + /* pre code { */ + /* color: #ccc; */ + /* } */ + /* .well { */ + /* background-color: #444; */ + /* } */ + /* .panel { */ + /* background-color: #222; */ + /* } */ + /* .list-group-item { */ + /* background-color: #333; */ + /* } */ + + /* pre.chroma { */ + /* color: white; */ + /* background-color: #444; */ + /* } */ + /* pre.chroma .k { */ + /* color: #44AACC; */ + /* } */ + /* pre.chroma .kt { */ + /* color: #33CCCC; */ + /* } */ + /* pre.chroma .o { */ + /* color: #AAA; */ + /* } */ + /* pre.chroma .nb { */ + /* color: #00fee9; */ + /* } */ + /* pre.chroma .ow { */ + /* color: #CC0; */ + /* } */ +/* } */ + +/* --- Make long KaTeX equations scrollable in the x-axis --- */ +.katex-display>.katex { + overflow-x: auto; + overflow-y: hidden; + }