styles.css

/* © Copyright 2020 Sergei Nazarenko
 * A Stylesheet for nazares.github.io
 */
@import 'Blog/reset.css';
@import 'Blog/emoticons.css';
@import 'Blog/tags.css';
@import 'Blog/pygments-theme.css';
 
/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Lora&family=Roboto:wght@100;400&family=Caveat&family=Open+Sans&display=swap');
:root{
    --main-red-color: HSL(357, 81%, 71%);
    --main-red-hover-color: hsl(356, 70%, 55%);
    --body-white-bgcolor: #fff;
    --body-black-color: #000;
    --header-bgcolor: #2D2D2F;
    --header-color: #fff;
    --header-black-color: #000;
    --main-grey-color: #eee;
    --footer-color: #8a8a8a;
}

.wrapper {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
    text-align: left;
}
 
 .wrapper p {
     /* font-family: Helvetica Neue, Arial; */
     font-weight: 300;
     line-height: 1.5em;
 }
 
 .wrapper p>a {
     color: var(--main-red-color);
     transition: 1s;
 }
 
 .wrapper p>a:hover {
    color: var(--main-red-hover-color);
 }
 
 body {
     background: var(--body-white-bgcolor);
     color: var(--body-black-color);
     font-family: Helvetica, Arial;
     text-align: center;
     height: 100vh;
 }
 
 header {
     background-color: var(--header-bgcolor);
 }
 
 header p,
 header a {
     color: var(--header-color);
 }
 
 header a {
     text-decoration: none;
 }
 
 header .wrapper {
     padding: 10px 0 10px 0;
     text-align: center;
 }
 
 header .logo {
     width: 500px;
     max-width: 80%;
     /*  margin-bottom: 6px; */
     box-shadow: none;
 }
 
 header .site-name {
     font-size: 1.5em;
     color: var(--header-black-color);
     font-weight: bold;
 }
 
 nav {
     margin-top: 20px;
 }
 
 nav li {
     display: inline-block;
     margin: 0 7px;
     line-height: 1.5em;
 }
 
 nav li a.selected {
     text-decoration: underline;
     color: var(--main-red-hover-color);
 }
 
 h1 {
     margin-bottom: 0.5em;
     font-size: 2em;
 }
 
 h2 {
     margin: 20px 0;
 }
 
 h3 {
     margin: 1em;
 }
 
 p {
     /* margin-top: 5px; */
     margin-bottom: 10px;
 }
 
 a {
     color: inherit;
 }
 
 .item-list>li {
     display: block;
     padding: 20px;
     border-radius: 20px;
     background-color: var(--main-grey-color);
     margin-bottom: 20px;
 }
 
 .item-list>li:last-child {
     margin-bottom: 0;
 }
 
 .item-list h1 {
     margin-bottom: 15px;
     font-size: 1.3em;
 }
 
 .item-list p {
     margin-bottom: 0;
 }
 
 .tag-list {
     margin-bottom: 15px;
     display: inline-block;
 }
 
 .quote {
     font-family: 'Caveat', cursive;
     font-size: 16pt;
 }
 
 .orange {
     color: #ffaa10;
 }
 
 .red {
     color: var(--main-red-hover-color);
 }
 
 .blue {
     color: #1672DE;
 }
 
 .lowIgj {
     color: var(--footer-color);
     margin-top: -0.5em;
     transition: 1s;
 }
 
 .lowIgj:hover {
     color: var(--main-red-hover-color);
 }
 
 a[href*="/privacy"]:hover,
 a[href*="/terms"]:hover {
     color: var(--main-red-hover-color);
 }
 
 button.ktwrLZ:hover {
     background-color: var(--main-red-hover-color);
 }
 
 .task-list {
     list-style: none;
 }
 
 .description {
     margin-bottom: 20px;
 }
 
 .tag-list li,
 .tag {
     display: inline-block;
     background-color: var(--body-black-color);
     /*  color: #ddd; */
     padding: 3px 6px;
     border-radius: 5px;
     margin-right: 3px;
     font-weight: 200;
     font-size: 10pt;
     font-family: monospace;
 }
 
 .tag-list a,
 .tag a {
     text-decoration: none;
 }
 
 .item-page .tag-list {
     display: inline-block;
 }
 
 .content {
     margin-bottom: 20px;
 }
 
 .browse-all {
     display: block;
     margin-bottom: 30px;
 }
 
 .all-tags li {
     font-size: 1.4em;
     margin-right: 10px;
     padding: 6px 10px;
 }
 body>.wrapper {
    min-height: calc(100vh - 300px);
 }

 footer {
     position: relative;
     bottom:0;
     background: var(--header-bgcolor);
     color: var(--footer-color);
     font-size: 10pt;
     padding: 1em 0 0.5em 0;
 }
 
 #anycomment-app {
     color: var(--body-black-color);
 }
 
 #anycomment-app footer[class*="sc"] {
    background: transparent;
 }

 #anycomment-app header[class*="sc"] {
     padding:0;
     background: transparent;
 }

 #anycomment-app header[class*="sc"] span{
    color: var(--main-red-color);
 }

 #anycomment-app button[class*="sc"] {
     background-color: var(--main-red-color); 
 }

 /* .ktGuED {
     color: var(--main-grey-color);
 } */

 #anycomment-app footer[class*="sc"] ul span{
    font-size: 10pt;
}
 
 #anycomment-app ul[color] {
     display: none;
 }

 img[alt="githubn"] {
     content: url(/Blog/img/articles/simple-blog-by-swift-and-publish/github_new.png)
 }
 
 img[alt="githubs"] {
     content: url(/Blog/img/articles/simple-blog-by-swift-and-publish/github_setnew.png)
 }
 
 a.link:after {
     display: inline-block;
     text-decoration: none;
     margin-left: 5px;
 }
 
 a.link:hover:after {
     content: "\0020\f0c1";
     font-family: "Font Awesome 5 Free";
     font-size: 14pt;
     /*  text-decoration: none; */
 }
  
 /* Splash */
 
 code {
     /* font-weight:bold; */
     /*  font-size:10pt;*/
     /* color: cyan; */
     display: inline-block;
     border: 1px solid rgba(0, 0, 0, 0.31);
     border-radius: 10px;
     padding: 0 10px;
 }
 
 img:after {
     padding: 1em;
 }
 
 pre {
     margin-bottom: 1em;
     background-color: #F6F8FA;
     padding: 16px 0;
     border-radius: 16px;
 }
 
 pre code {
     border: none;
     font-family: monospace;
     font-weight: normal;
     display: block;
     padding: 0 20px;
     color: #4f4f4f;
     line-height: 1.4em;
     font-size: 0.95em;
     overflow-x: auto;
     white-space: pre;
     -webkit-overflow-scrolling: touch;
 }
 
 .highlight:after {
     background: linear-gradient(to right, rgba(255, 255, 255, 0), white 100%);
 }
 /*
 pre code .keyword {
     color: #e73289;
 }
 
 pre code .type {
     color: #8281ca;
 }
 
 pre code .call {
     color: #348fe5;
 }
 
 pre code .property {
     color: #21ab9d;
 }
 
 pre code .number {
     color: #db6f57;
 }
 
 pre code .string {
     color: #fa641e;
 }
 
 pre code .comment {
     color: #6b8a94;
 }
 
 pre code .dotAccess {
     color: #92b300;
 }
 
 pre code .preprocessing {
     color: #b68a00;
 }
 */
 .fa-beat {
    /* color: red; */
    animation:fa-beat 5s ease infinite;
  }
  @keyframes fa-beat {
    0% {
      transform:scale(1);
    }
    5% {
      transform:scale(1.25);
    }
    20% {
      transform:scale(1);
    }
    30% {
      transform:scale(1);
    }
    35% {
      transform:scale(1.25);
    }
    50% {
      transform:scale(1);
    }
    55% {
      transform:scale(1.25);
    }
    70% {
      transform:scale(1);
    }
  }

 .post-content>.highlight {
     line-height: 1;
     overflow-x: scroll;
     padding: 10px;
 }
 
 .post-content>.highlight pre {
     margin: 0;
     white-space: pre;
 }
 
 .post-content>.highlight .lineno {
     border-right: solid 1px #3C4049;
     padding-left: 10px;
     padding-right: 10px;
     text-align: right;
 }
 
 .post-content>.highlight span {
     display: inline-block;
     padding: 0.3em 0;
 }
 
 .highlighttable .linenos {
     border-right: solid 1px #3C4049;
     padding-left: 10px;
     padding-right: 10px;
     text-align: right;
     width: 3em;
 }
 
 .highlighttable .code .highlight {
     padding-left: 10px;
 }
 
 .highlighttable .code .highlight pre {
     white-space: pre;
 }
 
 hr {
     border: none;
     border-top: 1px dashed #f1f1f1;
 }
 
 table {
     color: #333;
     /* Lighten up font color */
     /*  font-family: Helvetica, Arial, sans-serif; /* Nicer font */
     border-collapse: collapse;
     border-spacing: 0;
     margin-bottom: 1em;
     overflow: hidden;
     border-radius: 10px;
     border: 1px solid #CCC;
     table-layout: fixed;
     width: 100%;
 }
 
 td,
 th {
     border: 1px solid #CCC;
     height: 30px;
 }
 
 
 /* Make cells a bit taller */
 
 th {
     background: #F3F3F3;
     /* Light grey background */
     text-align: center;
     /* Center our text */
     font-weight: bold;
     /* Make sure they're bold */
 }
 
 td {
     background: #FAFAFA;
     /* Lighter grey background */
     padding-left: 0.5em;
 }
 
 table tr td:nth-child(1) {
     color: #C25052;
     font-family: monospace;
     background-color: #efefef;
 }
 
 table tr td:nth-child(2) {
     color: #626262;
     font-weight: 200;
     font-size: 10pt;
     background-color: #fafafa;
 }
 
 img {
     margin: auto;
     display: block;
     max-width: 100%;
     height: auto;
     border-radius: 10px;
     box-shadow: 0px 1px 5px 0px #111;
     margin-bottom: 1em;
 }
 
 img[src*="#thumbnail"] {
     display: inline-block;
     width: 300px;
     border: 15px solid #fff;
     box-shadow: 0 0 5px 1px #888;
     border-radius: 20px;
 }
 
 span.break {
     border-left: 3px solid #ff7070;
     display: block;
     margin-top: 0.5em;
     padding-left: 10px;
 }
 
 .date {
     display: inline-block;
     padding-left: 3px;
     font-size: 10pt;
     color: #999;
     font-weight: 100;
     padding-bottom: 1em;
 }
 
 blockquote {
     /* padding: 5px 20px 1px 20px; */
     background-color: #F6F8FA;
     font-style: italic;
     font-size: 14pt;
     color: #555555;
     padding: 0.5em;
     border-left: 3px solid #C25052;
     position: relative;
     margin-bottom: 1em;
     border-radius: 0 10px 10px 0;
 }
 
 blockquote p {
     margin: 0;
     padding: 0;
     font-family: 'Caveat', cursive;
     color: #db7d7e;
 }
 
 /*
 blockquote::before {
     color: #78C0A8;
     position: absolute;
     left: 10px;
     top: -10px;
 }
 */

 blockquote span {
     display: block;
     color: #C25052;
     font-family: 'Open Sans';
     font-size: 10pt;
     font-style: normal;
     font-weight: bold;
     text-align: right;
     margin-top: 1em;
 }
 
 .highlighted {
     border: 1px solid rgba(0, 0, 0, 0.31);
     border-radius: 10px;
     padding: 1px 5px;
 }
 
 iframe {
     border: none;
     border-radius: 20px;
     display: block;
     /* margin: auto; */
     margin: 1em auto 0 auto;
     box-shadow: 0 0 2px 0 #000;
 }
 
 .socials a {
     font-size: 30pt;
     text-decoration: none;
     letter-spacing: 4pt;
     color: #e5e5e5;
     transition: 3s;
 }
 
 .fa-telegram:hover {
     color: #58AAE8;
 }
 
 .fa-twitter:hover {
     color: #2592D7;
 }
 
 .fa-github:hover {
     color: #000;
 }
 
 .fa-facebook:hover {
     color: #177AE5;
 }
 
 .fa-youtube:hover {
     color: #FC0D1B;
 }
 
 .socials {
     width: 300px;
     padding: 15pt;
     margin: auto;
     text-align: center;
 }
 
 .menu li,
 ul.tag-list {
     padding: 0;
 }
 
 sup.custom,
 sup.deploy {
     position: relative;
     top: -15px;
     left: 20px;
     color: rgb(184, 182, 182);
     font-weight: 100;
 }
 
 .dAvxTh {
     padding-bottom: 0 !important;
 }
 
 header[class*="sc"] {
     border-radius: 16px;
     padding: 1em;
 }
 
 input[type="checkbox"] {
     margin-right: 5px;
     /* pointer-events: none; */
 }
 
 p.note {
     position: relative;
     font-size: 10pt;
     /* background-color: #f0f7fb; */
     background-position: 9px 0px;
     background-repeat: no-repeat;
     /* border: solid 1px #3498db; */
     border-radius: 20px;
     line-height: 18px;
     /* overflow: hidden; */
     padding: 15px 20px;
     margin-bottom: 1em;
 }
 
 .note:before {
    /* display: block; */
    /* padding-bottom: 10px; */
    position: absolute;
    top: -13px;
    border-radius: 10px;
    font-family: "Font Awesome 5 Free";
    color: #fff;
    padding: 3px 10px;
 }
 
 p.warning {
     border: solid 2px #9C1E21;
     /* background-color: #E65853; */
     color: #E65853;
 }
 
 p.tip {
     border: solid 2px #3A8A3B;
     /*background-color: #72b978; */
     color: #72b978;
 }
 
 p.info {
     border: solid 2px #1073AF;
     /* background-color: #668ea8; */
     color: #668ea8;
 }
 
 .warning:before {
     background: HSL(358, 66%, 36%);
     /* border-radius: 5px;
     position: absolute;
     top: -10px;
     color: #ff4e53; */
     /* font-family: "Font Awesome 5 Free", Arial; */
     /* font-weight: bold; */
     content: '\f06a\00a0Warning';
     /* padding: 1px 5px 1px 5px; */
 }
 
 .tip:before {
    background: #3A8A3B;
     /* position: absolute;
     top: -10px; */
     /* color: #3A8A3B; */
     /* font-family: "Font Awesome 5 Free", Arial;
     font-weight: bold; */
     content: '\f0eb\00a0Tip';
     /* padding: 0 5px 0 5px; */
 }
 
 .info:before {
     background: #fff;
     position: absolute;
     top: -10px;
     color: #1073AF;
     font-family: "Font Awesome 5 Free", Arial;
     font-weight: bold;
     content: '\f05a\00a0Info';
     padding: 0 5px 0 5px;
 }
 
 .tagged {
     color: #DE3A43;
 }
 
 a {
     transition: 1s;
 }
 
 a:hover {
     color: #DE3A43;
 }
 
 .tag a {
     color: #fff !important;
 }
 
 .articles:before {
     font-family: "Font Awesome 5 Free";
     content: '\f15c';
 }
 
 .how-to:before {
     font-family: "Font Awesome 5 Free";
     content: '\f02d\0020';
 }
 
 #anycomment-app {
     padding-top: 1em;
     padding-bottom: 0;
 }
 
 .ekttti {
     margin: auto;
 }
 
 .logiML {
     margin-top: 10px !important;
 }
 
 a[data-test-id*="login"]:hover {
     color: #C25052
 }
 
 img[alt="toolbar"] {
     content: url(/Blog/img/articles/simple-blog-by-swift-and-publish/toolbar_l.png);
     margin-top: 0.5em;
     border-radius: 5px;
 }
 
 img[alt="browser"] {
     content: url(/Blog/img/articles/simple-blog-by-swift-and-publish/browser_l.png);
     margin-bottom: 1em;
 }
 
 img[alt="github-new"] {
     content: url(/Blog/img/articles/simple-blog-by-swift-and-publish/github-new_l.png);
 }
 
 img[alt="github-set"] {
     content: url(/Blog/img/articles/simple-blog-by-swift-and-publish/github-set_l.png);
     margin-bottom: 1em;
 }
 
 img[alt="filetree"] {
     content: url(/Blog/img/articles/simple-blog-by-swift-and-publish/filetree_l.png);
 }
 
 img[alt="git-pages"] {
     content: url(/Blog/img/articles/simple-blog-by-swift-and-publish/git-pages_l.png);
     margin-bottom: 1em;
 }
 
 img[alt="xcode"] {
     content: url(/Blog/img/articles/simple-blog-by-swift-and-publish/xcode_l.png);
     margin-bottom: 1em;
 }
 
 img[alt="about-us"] {
     content: url(/Blog/img/articles/simple-blog-by-swift-and-publish/about-us_l.png);
     margin-bottom: 1em;
 }
 
 img[alt="release"] {
     content: url(/Blog/img/articles/simple-blog-by-swift-and-publish/light.png);
     margin-top: 1em;
     margin-bottom: 1em;
 }
 
 .shortcut {
     color: #525252;
     background-color: #e4e4e4;
     box-shadow: 0 1px 2px 0 #666;
     display: inline-block;
 }
 
 .note a {
     display: inline-block;
 }
 kbd {
    display: inline-block;
    width: 25px;
    height: 25px;
    font-size: 10pt;
    font-family: Helvetica;
    font-weight: normal; 
    background-color: #f5f5f5;
    color: #555;
    border: 1px solid #999;
    border-radius: 6px;
/* line-height: 10px; */
    padding: 3px 0px 0px 3px;
    box-shadow: 0 1px 1px 0 #aaa;
 }
 keyboard {
     display: inline-block;
 }
 img[alt="keyboard"] {
    box-shadow: none;
 }
 
 @media (prefers-color-scheme: dark) {
     body {
         background-color: #222;
     }
     body,
     header .site-name {
         color: #bebebe;
     }
     .item-list>li {
         background-color: #333;
     }
     .socials a {
         color: #343434;
     }
     pre {
         background-color: #1a1a1a
     }
     pre code {
         /* color: #DFDFE0; */
         color: #a7a7a7;
     }
     table {
         color: #ddd;
     }
     td,
     th {
         border: 1px solid #222;
         height: 30px;
     }
     /* th {
         background-color: #000;
     }
     td {
         background-color: #1A1A1A;
     } */
     table tr td:nth-child(1) {
         color: #C25052;
         font-family: monospace;
         background-color: #1A1A1A;
     }
     table tr td:nth-child(2) {
         color: #626262;
         font-weight: 200;
         font-size: 10pt;
         background-color: #1f1f1f;
     }
     blockquote {
         background-color: #1A1A1A;
     }
     hr {
         border-top: 1px dashed #343434;
     }
     .iHWybi,
     .vTcAG {
         color: #aaa;
     }
     a[data-test-id*="login"] {
         color: #eee;
     }
     .highlighted {
         border-color: rgba(255, 255, 255, 0.31);
     }
     code {
         border: 1px solid rgba(255, 255, 255, 0.31);
     }
  
     img[alt="github-new"] {
         content: url(/Blog/img/articles/simple-blog-by-swift-and-publish/github-new_d.png)
     }
     img[alt="github-set"] {
         content: url(/Blog/img/articles/simple-blog-by-swift-and-publish/github-set_d.png)
     }
     img[alt="browser"] {
         content: url(/Blog/img/articles/simple-blog-by-swift-and-publish/browser_d.png)
     }
     img[alt="filetree"] {
         content: url(/Blog/img/articles/simple-blog-by-swift-and-publish/filetree_d.png)
     }
     img[alt="toolbar"] {
         content: url(/Blog/img/articles/simple-blog-by-swift-and-publish/toolbar_d.png);
     }
     img[alt="git-pages"] {
         content: url(/Blog/img/articles/simple-blog-by-swift-and-publish/git-pages_d.png);
     }
     img[alt="xcode"] {
         content: url(/Blog/img/articles/simple-blog-by-swift-and-publish/xcode_d.png);
     }
     img[alt="about-us"] {
         content: url(/Blog/img/articles/simple-blog-by-swift-and-publish/about-us_d.png);
     }
     img[alt="release"] {
         content: url(/Blog/img/articles/simple-blog-by-swift-and-publish/dark.png);
     }
 }
 
 @media(max-width: 600px) {
     img[src*="#thumbnail"] {
         width: 600px;
         max-width: 100%;
     }
     iframe {
         max-width: 100%;
         height: 200px;
     }
     .date {
         /* padding-top:-1em; */
         display: block;
         padding-left: 0;
     }
     .hXtGXC {
         display: none !important;
     }

     a[title="AnyComment"] {
         display: none;
     } 

     img {
         border-radius: 5px;
     }
 }