jekyll-theme-shikhalev 0.1.0.5

data/_sass/nova/layout.scss

@@ -0,0 +1,645 @@
+body {
+  padding: 0px;
+  margin: 0px;
+}
+
+#grid {
+  padding: 0px;
+  margin: 0px;
+
+  display: grid;
+
+  @media print {
+    display: block;
+  }
+
+  @media screen and (min-width: 1230px) {
+    grid-template-columns: 1fr 400px 500px 10px 300px 1fr;
+    grid-template-areas:
+      "hl header navy   navy   navy     hr"
+      ".  main   main   .      search   ."
+      ".  main   main   .      toc      ."
+      ".  main   main   .      backs    ."
+      ".  main   main   .      donate   ."
+      ".  main   main   .      gads     ."
+      ".  main   main   .      feeds    ."
+      ".  main   main   .      contacts ."
+      ".  main   main   .      extra    ."
+      ".  main   main   .      .        ."
+      "fl footer footer fr     fr       fr";
+  }
+
+  @media screen and (max-width: 1229px) and (min-width: 1150px) {
+    grid-template-columns: 1px 1fr 500px 10px 300px;
+    grid-template-areas:
+      "hl header navy   navy   navy"
+      ".  main   main   .      search"
+      ".  main   main   .      toc"
+      ".  main   main   .      backs"
+      ".  main   main   .      donate"
+      ".  main   main   .      gads"
+      ".  main   main   .      feeds"
+      ".  main   main   .      contacts"
+      ".  main   main   .      extra"
+      ".  main   main   .      ."
+      "fl footer footer fr     fr";
+  }
+
+  @media screen and (max-width: 1149px) and (min-width: 920px) {
+    grid-template-columns: 1fr 300px 300px 300px 1fr;
+    grid-template-areas:
+      "hl header navy   navy     hr"
+      "hl header hb     search   hr"
+      ".  gads   gads   gads     ."
+      ".  main   main   main     ."
+      ".  backs  backs  backs    ."
+      ".  donate feeds  contacts ."
+      ".  extra  extra  extra    ."
+      "fl footer footer footer   fr";
+  }
+
+  @media screen and (max-width: 919px) and (min-width: 750px) {
+    grid-template-columns: 300px 1fr 1fr;
+    grid-template-areas:
+      "header navy   navy"
+      "header hb     search"
+      "gads   gads   gads"
+      "main   main   main"
+      "backs  backs  backs"
+      "donate feeds  contacts"
+      "extra  extra  extra"
+      "footer footer footer";
+  }
+
+  @media screen and (max-width: 749px) and (min-width: 550px) {
+    grid-template-columns: 300px 10px 1fr;
+    grid-template-areas:
+      "header navy   navy"
+      "search search search"
+      "gads   gads   gads"
+      "main   main   main"
+      "backs  backs  backs"
+      "donate .      feeds"
+      "donate .      contacts"
+      "extra  extra  extra"
+      "footer footer footer";
+  }
+
+  @media screen and (max-width: 549px) {
+    grid-template-columns: 300px 1fr;
+    grid-template-areas:
+      "header   navy"
+      "search   search"
+      "gads     gads"
+      "main     main"
+      "backs    backs"
+      "donate   donate"
+      "feeds    feeds"
+      "contacts contacts"
+      "extra    extra"
+      "footer   footer";
+  }
+}
+
+@mixin header-top {
+  border-top: solid 5px $frame-color-dark;
+}
+
+@mixin header-bottom {
+  border-bottom: solid 2px $frame-color-light;
+}
+
+#site-header {
+  grid-area: header;
+  font-size: $header-font-size;
+  font-family: $caption-font-family;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  padding-left: 5px;
+
+  display: flex;
+  align-items: center;
+
+  margin-bottom: 10px;
+
+  @include header-top;
+  @include header-bottom;
+
+  a,
+  a:link,
+  a:visited {
+    color: $frame-color-dark;
+    text-decoration: none;
+  }
+  a:hover,
+  a:focus {
+    text-decoration: underline;
+  }
+
+  .logo {
+    margin: 0px;
+  }
+}
+
+#navy {
+  grid-area: navy;
+  text-align: right;
+
+  @include header-top;
+
+  @media screen and (min-width: 1150px), screen and (max-width: 749px) {
+    @include header-bottom;
+    margin-bottom: 10px;
+  }
+
+  .wrapper {
+    font-family: $caption-font-family;
+
+    #navy-check {
+      display: none;
+    }
+
+    #menu-icon {
+      display: none;
+    }
+
+    .navy-item {
+      &:not(:last-child) {
+        padding-right: 10px;
+      }
+      padding-left: 10px;
+      padding-top: 3px;
+      padding-bottom: 2px;
+    }
+
+    a,
+    a:link,
+    a:visited,
+    a:hover {
+      color: $frame-color-dark;
+      text-decoration: none;
+    }
+
+    a:hover {
+      background-color: $highlight-color;
+    }
+
+    @media screen and (min-width: 640px) {
+      padding-top: 5px;
+
+      .navy-item {
+        display: inline-block;
+      }
+    }
+
+    @media screen and (max-width: 639px) {
+      position: absolute;
+      top: 9px;
+      right: 5px;
+      background-color: $frame-color-light;
+      border: 1px solid $frame-color-dark;
+      box-shadow: $base-shadow $frame-color-light;
+      border-radius: 5px;
+      text-align: right;
+
+      label[for="nav-trigger"] {
+        display: block;
+        float: right;
+        width: 36px;
+        height: 36px;
+        z-index: 2;
+        cursor: pointer;
+      }
+
+      #menu-icon {
+        display: block;
+        float: right;
+        width: 36px;
+        height: 26px;
+        line-height: 0.5;
+        padding-top: 10px;
+        text-align: center;
+        font-size: 26px;
+        color: $frame-color-dark;
+      }
+
+      input ~ #navy-menu {
+        clear: both;
+        display: none;
+      }
+
+      input:checked ~ #navy-menu {
+        display: block;
+        padding-bottom: 5px;
+      }
+
+      .navy-item {
+        display: block;
+        padding: 5px 10px;
+
+        &:not(:last-child) {
+          margin-right: 0;
+        }
+        margin-left: 20px;
+      }
+    }
+  }
+}
+
+@mixin footer-top {
+  border-top: solid 2px $frame-color-light;
+}
+
+@mixin footer-bottom {
+  border-bottom: solid 3px $frame-color-dark;
+}
+
+#site-footer {
+  grid-area: footer;
+
+  padding: 5px;
+
+  font-family: $compact-font-family;
+  font-size: $small-font-size;
+  color: $frame-color-dark;
+
+  a,
+  a:link,
+  a:visited {
+    color: inherit;
+    text-decoration: none;
+  }
+
+  a:hover {
+    text-decoration: underline;
+  }
+}
+
+#search {
+  grid-area: search;
+  margin-bottom: 10px;
+
+  @media screen and (max-width: 1149px) and (min-width: 750px) {
+    @include header-bottom;
+  }
+
+  @media screen and (min-width: 1150px) {
+    border: solid $frame-color-light 1px;
+    box-shadow: $base-shadow $frame-color-light;
+    padding: 5px 5px 0px;
+  }
+
+  @media screen and (max-width: 749px) {
+    padding: 0px 5px;
+  }
+
+  .gsc-control-cse {
+    padding: 0px;
+  }
+
+  .gsc-input {
+    padding-right: 5px;
+    font-family: $base-font-family;
+    color: $frame-color-dark;
+  }
+
+  .gsc-search-button-v2 {
+    padding: 6px 18px;
+    background-color: $frame-color-dark;
+  }
+
+  .gsc-input-box {
+    border-color: $frame-color-light;
+  }
+
+  // TODO: кнопка очистки
+}
+
+aside {
+  color: $frame-color-dark;
+
+  h4 {
+    margin: 0px 0px 10px;
+  }
+  ul {
+    margin: 0px;
+  }
+  a,
+  a:link,
+  a:visited {
+    color: $frame-color-dark;
+    text-decoration: none;
+  }
+  a:hover {
+    text-decoration: underline;
+  }
+  @media print {
+    display: none;
+  }
+}
+
+#toc {
+  grid-area: toc;
+
+  padding: 10px;
+
+  ul {
+    font-family: $compact-font-family;
+    padding-left: 20px;
+
+    li::marker {
+      @extend .fa-li-include-hashtag;
+    }
+  }
+
+  &.toc-stream {
+    ul {
+      li {
+        ul {
+          li {
+            &::marker {
+              @extend .fa-li-include-file-alt;
+            }
+
+            ul {
+              li::marker {
+                @extend .fa-li-include-bookmark;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  &.toc-post, &.toc-page {
+    ul {
+      li::marker {
+        @extend .fa-li-include-bookmark;
+      }
+    }
+  }
+
+  &.toc-calendar {
+    ul {
+      li {
+        &::marker {
+          @extend .fa-li-include-calendar-alt;
+        }
+        ul {
+          columns: 2;
+        }
+      }
+    }
+  }
+
+  @media screen and (max-width: 1149px) {
+    display: none;
+  }
+}
+
+#backs {
+  grid-area: backs;
+  padding: 10px;
+  ul {
+    font-family: $compact-font-family;
+    padding-left: 20px;
+
+    li.back-page::marker {
+      @extend .fa-li-include-file;
+    }
+    li.back-post::marker {
+      @extend .fa-li-include-file-alt;
+    }
+  }
+
+}
+
+#donate {
+  grid-area: donate;
+  place-self: center;
+  margin-bottom: -8px;
+  height: 243px;
+
+  &:target {
+    border-color: $highlight-color;
+    box-shadow: $base-shadow $highlight-color;
+  }
+}
+
+#ga {
+  grid-area: gads;
+  height: 300px;
+  @media screen and (max-width: 1149px) {
+    height: 120px;
+  }
+}
+
+/* ненужно
+.adsbygoogle {
+  display: inline-block;
+  width: 300px;
+  height: 300px;
+
+  @media screen and (max-width: 1149px) {
+    width: 100%;
+    height: 120px;
+  }
+}
+*/
+
+// TODO: сделать посимпатичнее на узких экранах, как feeds, так и contacts
+
+#feeds {
+  grid-area: feeds;
+
+  padding: 10px;
+
+  ul {
+    padding-left: 20px;
+
+    li::marker {
+      @extend .fa-li-include-rss-square;
+      color: $highlight-color;
+    }
+
+    ul {
+      columns: 2;
+
+      @media screen and (max-width: 639px) and (min-width: 550px) {
+        columns: 1;
+      }
+    }
+  }
+}
+
+#contacts {
+  grid-area: contacts;
+  padding: 10px;
+
+  .person {
+    font-family: $caption-font-family;
+    margin-bottom: 5px;
+  }
+
+  ul {
+    padding-left: 25px;
+  }
+
+  p.social {
+    @extend .fab;
+    margin-top: 10px;
+    font-size: $share-font-size;
+
+    a {
+      color: $frame-color-dark;
+      padding: 2px 5px 2px;
+
+      &:hover {
+        color: $frame-color-light;
+        text-shadow: $thin-shadow $frame-color-dark;
+        text-decoration: none;
+      }
+    }
+  }
+}
+
+#feeds,
+#contacts,
+#backs {
+  @media screen and (max-width: 1149px) and (min-width: 750px) {
+    margin-left: 10px;
+  }
+}
+
+#sidebar {
+  grid-area: extra;
+  padding: 10px;
+  font-family: $compact-font-family;
+
+  h4 {
+    margin-bottom: 0px;
+  }
+
+  .comment {
+    border: none;
+    padding: 5px 0px 0px;
+    margin: 10px 0px 0px;
+    border-top: 1px dotted $frame-color-light;
+
+    display: inline-block;
+    break-inside: avoid;
+    page-break-inside: avoid;
+
+    .message {
+      color: $frame-color-semilight;
+      font-size: 90%;
+    }
+  }
+
+  .comments {
+    columns: 1;
+    @media screen and (max-width: 1149px) and (min-width: 750px) {
+      columns: 3;
+    }
+    @media screen and (max-width: 749px) and (min-width: 525px) {
+      columns: 2;
+    }
+  }
+}
+
+#main {
+  grid-area: main;
+
+  box-sizing: border-box;
+  max-width: 100%;
+
+  padding-left: 5px;
+  padding-right: 5px;
+
+  margin-bottom: 10px;
+}
+
+#hl {
+  grid-area: hl;
+}
+
+#hr {
+  grid-area: hr;
+}
+
+#hb {
+  grid-area: hb;
+  @media screen and (max-width: 1149px) and (min-width: 750px) {
+    @include header-bottom;
+    margin-bottom: 10px;
+  }
+  @media screen and (not ( (max-width: 1149px) and (min-width: 750px) ) ) {
+    display: none;
+  }
+}
+
+#hl,
+#hr {
+  @include header-top;
+  @include header-bottom;
+  margin-bottom: 10px;
+}
+
+#fl {
+  grid-area: fl;
+}
+
+#fr {
+  grid-area: fr;
+}
+
+#site-footer,
+#fr,
+#fl {
+  @include footer-top();
+}
+
+#toc,
+#ga,
+#feeds,
+#contacts,
+#sidebar,
+#backs {
+  margin-bottom: 10px;
+}
+
+#toc,
+#feeds,
+#contacts,
+#sidebar,
+#backs {
+  border: solid $frame-color-light 1px;
+  box-shadow: $base-shadow $frame-color-light;
+
+  &:target {
+    border-color: $highlight-color;
+    box-shadow: $base-shadow $highlight-color;
+  }
+}
+
+@media print {
+  #site-header,
+  #site-footer,
+  #hl,
+  #hr,
+  #hb,
+  #fl,
+  #fr,
+  #search,
+  #navy,
+  #toc,
+  #ga,
+  #donate,
+  #feeds,
+  #contacts,
+  #sidebar,
+  #backs {
+    display: none;
+  }
+}

data/_sass/nova/pages/calendar.scss

@@ -0,0 +1,74 @@
+.layout-calendar {
+  $shift: 66px;
+
+  h2 {
+    padding: 10px 0px;
+    border-top: 1px dotted $frame-color-light;
+  }
+
+  .calendar-year {
+    display: flex;
+    gap: 10px;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+  }
+
+  .post-title {
+    font-family: $caption-font-family;
+  }
+
+  .box {
+    flex: 1 300px;
+
+    break-inside: avoid;
+    page-break-inside: avoid;
+
+    margin: 0px 0px 20px;
+
+    h3 {
+      margin: 0px 0px 10px;
+      break-inside: avoid;
+      page-break-inside: avoid;
+      break-after: avoid;
+      page-break-after: avoid;
+    }
+
+    p {
+      text-align: left;
+      hyphens: manual;
+      margin: 0px 0px 0px $shift;
+      break-inside: avoid;
+      page-break-inside: avoid;
+
+      &.meta {
+        margin-bottom: 10px;
+      }
+
+      &.link-title {
+        text-indent: -$shift;
+      }
+    }
+  }
+
+  .meta {
+    font-family: $compact-font-family;
+    font-size: $notes-font-size;
+    color: $frame-color-dark;
+    text-align: left;
+    hyphens: manual;
+
+    a,
+    a:link,
+    a:visited {
+      color: $frame-color-dark;
+      text-decoration: none;
+    }
+
+    a:link:hover {
+      text-decoration: underline;
+    }
+    a {
+      padding: 1px 10px 1px 0px;
+    }
+  }
+}