diff --git a/themes/beautifulhugo/static/css/main.css b/themes/beautifulhugo/static/css/main.css index 7f30a3f..126a156 100644 --- a/themes/beautifulhugo/static/css/main.css +++ b/themes/beautifulhugo/static/css/main.css @@ -1,110 +1,89 @@ /* --- 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; - } + font-family: 'Lora', 'Times New Roman', serif; + font-size: 18px; + color: #404040; + position: relative; + background: #FFF; + display: flex; + flex-flow: column; + height: 100vh; } .container[role=main] { - margin-bottom:50px; - flex: 1 0 auto; + margin-bottom:50px; + flex: 1 0 auto; } @media only screen and (max-width: 767px) { -.container[role=main] { - margin-left: 0; - margin-right: 0; -} + .container[role=main] { + margin-left: 0; + margin-right: 0; + } } p { - line-height: 1.5; - margin: 6px 0; + 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; - } + /* text-decoration: underline */ + color: #008AFF; } h1,h2,h3,h4,h5,h6 { - font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; - font-weight: 800; + font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; + font-weight: 800; } a { - color: #008AFF; -} -@media (prefers-color-scheme: dark) { - a { - color: #50afff; - } + color: #008AFF; } a:hover, a:focus { - color: #0085a1; + color: #0085a1; } blockquote { - color: #808080; - font-style: italic; + color: #808080; + font-style: italic; } blockquote p:first-child { - margin-top: 0; -} -@media (prefers-color-scheme: dark) { - blockquote { - border-left: 5px solid #444; - } + margin-top: 0; } hr.small { - max-width: 100px; - margin: 15px auto; - border-width: 4px; - border-color: inherit; - border-radius: 3px; + max-width: 100px; + margin: 15px auto; + border-width: 4px; + border-color: inherit; + border-radius: 3px; } .main-content { - padding-top: 80px; + padding-top: 80px; } @media only screen and (min-width: 768px) { - .main-content { - padding-top: 130px; - } + .main-content { + padding-top: 130px; + } } .main-explain-area { - font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; - padding: 15px inherit; + font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; + padding: 15px inherit; } .hideme { - display: none; + 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; + 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; @@ -114,629 +93,575 @@ div.panel-group .panel+.panel { } div.panel-body a.list-group-item.view-all { - font-weight: 600; + font-weight: 600; } ::-moz-selection, ::selection { - color: white; - text-shadow: none; - background: #0085a1; + color: white; + text-shadow: none; + background: #0085a1; } img::selection, img::-moz-selection { - color: white; - background: transparent; + 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; -} + display: block; + margin: auto; + max-width: 100%; } .img-title { - width: 100%; + width: 100%; } .disqus-comments { - margin-top: 30px; + margin-top: 30px; } @media only screen and (min-width: 768px) { - .disqus-comments { - margin-top: 40px; - } + .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; - } + background: #F5F5F5; + border-bottom: 1px solid #EAEAEA; + font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; } .navbar-custom .nav li a { - text-transform: uppercase; - font-size: 12px; - letter-spacing: 1px; + 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; - } + font-weight: 800; + color: #404040; } .navbar-custom .navbar-brand:hover, .navbar-custom .navbar-brand:focus , .navbar-custom .nav li a:hover, .navbar-custom .nav li a:focus { - color: #0085a1; + 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; + 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; + 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; + padding-top: 5px; } .navbar-custom.top-nav-short .navbar-brand-logo img { - height: 40px; + 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 { + 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.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; + 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); + 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; + width: 100%; + border-radius: 50%; + display: block; } .navbar-custom.top-nav-short .avatar-container{ - opacity: 0; - visibility: hidden; + opacity: 0; + visibility: hidden; } .navbar-custom.top-nav-expanded .avatar-container { - display: none; + display: none; } @media only screen and (min-width: 768px) { - .navbar-custom .avatar-container { - width: 100px; - margin-top: -50px; - } + .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-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%; - } + .navbar-custom .avatar-container .avatar-img { + width: 100%; + } } /* Multi-level navigation links */ .navbar-custom .nav .navlinks-container { - position: relative; + position: relative; } .navbar-custom .nav .navlinks-parent:after { - content: " \25BC"; + content: " \25BC"; } .navbar-custom .nav .navlinks-children { - width: 100%; - display: none; - word-break: break-word; + 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; + 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; - } + .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; - } + .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; + } } /* --- Footer --- */ footer { - padding: 30px 0; - background: #F5F5F5; - border-top: 1px #EAEAEA solid; - margin-top: auto; - font-size: 14px; + padding: 30px 0; + background: #F5F5F5; + border-top: 1px #EAEAEA solid; + margin-top: auto; + font-size: 14px; } footer a { - color: #404040; + color: #404040; } footer .list-inline { - margin: 0; - padding: 0; + margin: 0; + padding: 0; } footer .copyright { - font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; - text-align: center; - margin-bottom: 0; + 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; + text-align: center; + margin: 10px 0 0; } @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; - } + footer { + padding: 50px 0; + } + footer .footer-links { + font-size: 18px; + } + footer .copyright { + font-size: 16px; + } } /* --- Post preview --- */ .post-preview { - padding: 20px 0; - border-bottom: 1px solid #eee; + padding: 20px 0; + border-bottom: 1px solid #eee; } @media only screen and (min-width: 768px) { - .post-preview { - padding: 35px 0; - } + .post-preview { + padding: 35px 0; + } } .post-preview:last-child { - border-bottom: 0; + border-bottom: 0; } .post-preview a { - text-decoration: none; - color: #404040; + 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; + text-decoration: none; + color: #0085a1; } .post-preview .post-title { - font-size: 30px; - margin-top: 0; + font-size: 30px; + margin-top: 0; } .post-preview .post-subtitle { - margin: 0; - font-weight: 300; - margin-bottom: 10px; + 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; + color: #808080; + font-size: 18px; + font-style: italic; + margin: 0 0 10px; } .page-meta { - align-self: center; + align-self: center; } .post-preview .post-meta a, .post-heading .post-meta a, .page-meta a { - color: #404040; - text-decoration: none; + color: #404040; + text-decoration: none; } .post-preview .post-entry { - font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; + font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; } .post-entry-container { - display: inline-block; - width: 100%; + display: inline-block; + width: 100%; } .post-entry { - width: 100%; - margin-top: 10px; + width: 100%; + margin-top: 10px; } .post-image { - float: right; - height: 192px; - width: 192px; - margin-top: -35px; - filter: grayscale(90%); + float: right; + height: 192px; + width: 192px; + margin-top: -35px; + filter: grayscale(90%); } .post-image:hover { - filter: grayscale(0%); + filter: grayscale(0%); } .post-image img { - border-radius: 100px; - height: 192px; - width: 192px; + border-radius: 100px; + height: 192px; + width: 192px; } .post-preview .post-read-more { - font-weight: 800; - float: right; + font-weight: 800; + float: right; } @media only screen and (min-width: 768px) { - .post-preview .post-title { - font-size: 36px; - } + .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; + font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; + color: #999; + font-size: 15px; + margin-bottom: 30px; } .blog-tags:before { - content: "Tags: "; + content: "Tags: "; } .blog-tags a { - color: #008AFF; - text-decoration: none; - padding: 0px 5px; + color: #008AFF; + text-decoration: none; + padding: 0px 5px; } .blog-tags a:before { - content: "#"; + content: "#"; } .blog-tags a:hover { - border-radius: 2px; - color: #008AFF; - background-color: #CCC; + border-radius: 2px; + color: #008AFF; + background-color: #CCC; } .post-preview .blog-tags { - margin-top: 5px; - margin-bottom: 0; + margin-top: 5px; + margin-bottom: 0; } @media only screen and (min-width: 768px) { - .post-preview .blog-tags { - margin-top: 10px; - } + .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, .post-image img { + height: 100px; + width: 100px; + } - .post-image { - width: 100%; - text-align: center; - margin-top: 0; - float: left; - } + .post-image { + width: 100%; + text-align: center; + margin-top: 0; + float: left; + } } /* --- Post and page headers --- */ .intro-header { - margin: 80px 0 20px; - position: relative; + 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; + 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; + 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; + 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; + 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; + margin-top: 0; + font-size: 50px; } .intro-header .post-heading h1 { - margin-top: 0; - font-size: 35px; + 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; + 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; + margin-bottom: 20px; } .intro-header.big-img .page-heading .page-subheading, .intro-header.big-img .post-heading .post-subheading { - font-weight: 400; + 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; + 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; + 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; + 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; - } + .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; + 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; + 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; - } + .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; - } + .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; + 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; + 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 { + padding: 15px 25px; + } } .pager li a:hover, .pager li a:focus { - color: #FFF; - background: #0085a1; - border: 1px solid #0085a1; + 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; + margin: 10px 0 0; } .pager.blog-pager { - margin-top:10px; + margin-top:10px; } h4.panel-title > span.badge { @@ -744,198 +669,149 @@ h4.panel-title > span.badge { } @media only screen and (min-width: 768px) { - .pager.blog-pager { - margin-top: 40px; - } + .pager.blog-pager { + margin-top: 40px; + } } /* --- Tables --- */ table { - padding: 0; + padding: 0; } table tr { - border-top: 1px solid #cccccc; - background-color: #ffffff; - margin: 0; - padding: 0; -} -@media (prefers-color-scheme: dark) { + border-top: 1px solid #cccccc; + background-color: #ffffff; + margin: 0; + padding: 0; } 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 -} + background-color: #f8f8f8; } table tr th { - font-weight: bold; - border: 1px solid #cccccc; - text-align: left; - margin: 0; - padding: 6px 13px; + 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; + 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; + margin-top: 0; } table tr th :last-child, table tr td :last-child { - margin-bottom: 0; + margin-bottom: 0; } /* --- Social media sharing section --- */ #social-share-section { - margin-bottom: 30px; + margin-bottom: 30px; } /* --- Google Custom Search Engine Popup --- */ #modalSearch table tr, #modalSearch table tr td, #modalSearch table tr th { - border:none; + 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; + -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; + box-sizing: content-box; + line-height: normal; } /* IPython split style */ div.splitbox {width:100%; overflow:auto;} div.splitbox div.left { - width:48%; - float:left;} + width:48%; +float:left;} div.splitbox div.right { - width:48%; - float: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;} + 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; + 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 { + padding: 15px 25px; + } } -.disqus-comments button:hover, +.disqus-comments button:hover, .disqus-comments button:focus { - color: #FFF; - background: #0085a1; - border: 1px solid #0085a1; + color: #FFF; + background: #0085a1; + border: 1px solid #0085a1; } /* Related posts */ h4.see-also { - margin-top: 20px; + margin-top: 20px; } /* Sharing */ - ul.share { - display: flex; - flex-direction: row; - flex-wrap: wrap; - list-style: none; - margin: 0; - padding: 0; +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 { + display: inline-flex; + margin-right: 5px; } - ul.share li:last-of-type { - margin-right: 0; +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 .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 a { + background-color: #b5c6ce; + display: block; + border-radius: 50%; + text-decoration: none !important; + margin: 0; } - ul.share li:hover .fab { - transform: scale(1.4) +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; - } -}