@tailwind base;
@tailwind components;
@tailwind utilities;

@import "app/config";
@import 'app/prism';
@import "app/typo";

@font-face {
  font-family: "MainFont";
  src:
    url('../fonts/ubuntu/ubuntu-light.woff2?20211108') format('woff2'),
    url('../fonts/ubuntu/ubuntu-light.woff?20211108') format('woff');
    // url('../fonts/atkinson/WOFF2/Atkinson-Hyperlegible-Regular-102a.woff2?20220911') format('woff2'),
    // url('../fonts/atkinson/WOFF/Atkinson-Hyperlegible-Regular-102.woff?20211108w20220911') format('woff');
}

@font-face {
  font-family: "deblan-icon";
  src: url('../fonts/deblan/deblan-icon.eot?20211108');
  src:
    url('../fonts/deblan/deblan-icon.woff2?20211108') format('woff2'),
    url('../fonts/deblan/deblan-icon.woff?20211108') format('woff'),
    url('../fonts/deblan/deblan-icon.ttf?20211108') format('truetype');

  font-style: normal;
  font-weight: normal;
  text-rendering: optimizeLegibility;
}

@mixin make-pre {
  padding: 10px;
  border: 1px solid $color-code-border;
  overflow: auto;
  background: $color-code-background;
  color: $color-code-text;
  font-size: 13px;
}

@mixin make-pre-code {
  color: $color-code-text;
  display: inline-block;
  max-width: 100%;
}

html, body {
  scroll-behavior: smooth;
}

body {
  // font-size: 1.7em;
}

$dicons: coffee server search project share contact list response twitter diaspora github code rss linkedin mastodon pixelfed gpg matrix murph cube link;

.d-none {
  display: none;
}

.text-right {
    text-align: right;
}

.list--inline {
  li {
    display: inline-block;
  }
}

.deblan-icon {
  font-family: 'deblan-icon';
  vertical-align: middle;

  @each $dicon in $dicons {
    &-#{$dicon}::before {
      content: "#{$dicon}";
    }
  }
}

.deblan-icon-svg svg {
  vertical-align: middle;
  margin-top: -4px;
  margin-right: 3px;
}

.button .deblan-icon {
  margin-right: 5px;
  margin-left: -3px;
}

li, p {
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -o-hyphens: auto;
  hyphens: auto;
}

code mark {
  color: inherit;
  background: $color-code-mark-background;
}

a:focus .logo-svg * {
  fill: $color-grey;
}

pre[class*="language-"] {
  border-radius: 0 !important;
}

.blog {
  min-height: 100vh;
  background: $color-white;
  font-family: "MainFont";
}

// .form .field {
//   input[type=text],
//   input[type=email],
//   input[type=url],
//   textarea {
//     border-radius: 10px;
//   }
//
.captcha_reload {
  width: 50px !important;
  padding-left: 50px;
  height: 50px;
  overflow: hidden;
  display: inline-block;
  margin-bottom: -19px;

  &:active, &:focus {
    background: none;
  }

  &::after {
    content: ' ';
    display: block;
    width: 50px;
    height: 50px;
    margin-left: -50px;
    margin-top: -23px;
    background: url(../images/Refresh_icon.svg);
  }
}
//
//   &-captcha {
//     label {
//       display: block;
//     }
//
//     img {
//       vertical-align: middle;
//       margin-right: 5px;
//       border-radius: 10px;
//       width: auto;
//     }
//
//     input {
//       display: inline-block;
//       width: 100px !important;
//       height: 50px !important;
//       margin-bottom: -1px;
//       margin-left: 5px;
//     }
//
//     .form-error-icon {
//       display: none;
//     }
//
//     .form-error-message {
//       display: block;
//       color: red;
//     }
//   }
// }

// .button, .btn, input[type="submit"], input[type="button"] {
//   border-radius: 10px;
// }

.no-margin {
  margin: 0;
}

.avatar {
  width: 50%;
}

.navigation {
  font-size: 15px;
  margin-top: 15px;

  .deblan-icon {
    margin-right: 13px;
    color: $color-very-light-grey;
    background: darken($color-navigation-item-background, 3%);
    border-radius: 6px;
    padding: 5px;
  }

  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li {
    padding: 0;
  }

  a {
    color: $color-white;
    display: block;
    padding: 12px 15px;

    &:hover, &.active, &:focus {
      background: $color-navigation-item-background-active;

      .deblan-icon {
        background: $color-navigation-item-background-active;
      }
    }
  }
}

.small-menu {
  $radius: 8px;

  background: $color-small-menu-background;
  padding: 0 0 5px 0;
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 2000;
  border-top-right-radius: $radius + 5;
  border-top-left-radius: $radius + 5;

  .navigation {
    padding-top: 0;
    margin-bottom: 10px;
    margin-top: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.8s ease-in-out;

    li {
      &:first-child, &:first-child a {
        border-top-right-radius: $radius;
        border-top-left-radius: $radius;
      }
    }
  }

  &.is-open .navigation {
    max-height: 800px;
    transition: max-height 0.8s ease-in-out;
  }

  .logo-svg {
    margin-left: 10px;
    margin-top: 13px;
  }
}

.wide-menu {
  width: 230px;
  background: linear-gradient(to bottom, $color-wide-menu-background-from 0%, $color-wide-menu-background-to 500px);
  padding: 10px 0;
  min-height: calc(100vh - 130px);
}

@keyframes gradientBackground {
  0% {
    background-position: 0 0%;
  }
  50% {
    background-position: 0 75%;
  }
  100% {
    background-position: 0 0%;
  }
}

.header {
  background: linear-gradient(45deg, $color-header-background-from 0%, #0685b3 29%, #1fbaf2 66%, $color-header-background-to 100%);
  background-size: 400% 400%;
  animation: HeaderGradient 15s ease infinite;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-evenly;
  overflow: hidden;
  position: relative;
  text-shadow: 0px 0px 6px #274298;
}

.header-wrapper {
  max-width: $content-max-width;
  padding: 30px 40px;
  margin: auto;
  text-align: center;
  z-index: 1000;
}

.header-shadow {
  width: 100%;
  height: 10px;
  background: rgb(0,0,0);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(255,255,255,0) 100%);
}

@keyframes HeaderGradient {
  0% {
    background-position: 0 50%
  }
  50% {
    background-position: 100% 50%
  }
  100% {
    background-position: 0 50%
  }
}

@keyframes HeaderMorph {
  0% {
    border-radius: 40% 60% 60% 40% / 70% 30% 70% 30%;
  }

  100% {
    border-radius: 40% 60%;
  }
}

.fixed-menu {
  position: fixed;
  width: 230px;
}

.content {
  background: $color-content-background;
  width: calc(100% - 230px);

  > .content-wrapper {
    min-height: calc(100vh - 105px);
  }
}

.header {
  color: $color-header-text;

  p, h1, ul {
    position: relative !important;
    z-index: 1000;
  }

  #particles {
    width: 100%;
    top: 0;
    overflow: hidden;
    position: absolute;
    z-index: 50;
  }

  .h1 {
    font-weight: normal;
    font-size: 40px;
  }

  .h3 {
    font-size: 17px;
    font-weight: normal;
  }

  a {
    color: $color-header-text !important;

    &:focus {
      color: $color-blue !important;
      background: $color-white;
    }
  }
}

.body {
  padding: 25px 40px;
  max-width: $content-max-width;
  width: 100%;

  &.body--posts {
    padding-top: 0;
    padding-bottom: 0;
  }

  margin-left: auto;
  margin-right: auto;

  iframe {
    margin-bottom: 25px;
    border: none;
  }

  img {
    width: auto;
    cursor: zoom-in;
  }

  a > img {
    cursor: pointer;
  }

  a:not(.button), h1, h2, h3, h4, h5, p, ul {
    color: $color-body-text;
  }

  p a, ul a {
    border-bottom: 2px dotted $color-blue2;
  }

  .pager a {
    border-bottom: 0;
  }

  blockquote {
    border-left: 2px solid $color-blockquote-border;
    margin: 10px;
    padding: 5px 20px;

    p {
      margin: 0;
      padding: 0;
    }
  }

  code {
    color: $code-color;
  }

  pre {
    @include make-pre;

    code {
      @include make-pre-code;
    }

    &.with-title {
      margin-top: 0;
      border-top-right-radius: 0;
      border-top-left-radius: 0;
    }

    &[class*="language-"] {
      padding-bottom: 10px;
      padding-top: 10px;
      border: 1px solid #3c3c3c;
    }
  }
}

.content hr, .content .hr {
  border: 0;
  border-bottom: 1px dashed $color-hr-border;
  background: $color-hr-background;
  max-width: 300px;
  margin: 20px auto;
}

.reviews {
  padding: 0 40px;
  max-width: $content-max-width;
  margin-left: auto;
  margin-right: auto;

  hr:first-child {
    margin-bottom: 30px;
  }

  blockquote {
    border-left: 2px solid $color-blockquote-border;
    margin: 10px;
    padding: 5px 20px;

    p {
      margin: 0;
      padding: 0;
    }
  }
}

.review-body {
  code {
    color: $code-color;
  }

  pre {
    @include make-pre;

    code {
      @include make-pre-code;
    }
  }

  img {
    width: auto;
  }

  *:first-child {
    margin-top: 0;
  }
}

@for $i from 1 through 6 {
  .review.offset-#{$i} {
    margin-left: 5% * $i - 1%;
    width: 100% - ($i * 5%);
  }
}

.review {
  width: 100%;

  .review-avatar, .review-avatar img {
    width: 60px;
    max-width: 60px;
  }

  &.review--post {
    padding-top: 15px;
    padding-left: 15px;
    padding-right: 15px;
    margin-bottom: 15px;
    border-radius: 10px;
    border: 1px solid $color-hr-border;

    .review-content p {
        margin-top: 0;
    }

    > ul {
      padding-bottom: 0;
    }
  }

  .review-content {
    display: inline-block;
    width: calc(100% - 75px);
  }

  ul {
    margin: 0;
    padding: 0 0 25px 0;
  }

  a svg {
    display: inline-block;
    height: 21px;
    width: 15px;
    vertical-align: middle;
    margin-right: 3px;
  }

  .review-header {
    border-bottom: 1px solid $color-very-light-grey;
    padding-bottom: 5px;
    margin-bottom: 5px;
    color: $color-dark-grey;

    .review-anchor-link {
      color: $color-dark-grey;
    }
  }

  .review-body {
    color: $color-dark-grey;
    margin-bottom: 10px;

    ul {
      margin: 0 !important;
      padding: 0 0 10px 10px !important;
    }

    li {
      list-style: disc;
      margin: 0 0 0 15px;
      padding: 0;
    }
  }
}

.code-title {
  background: $color-code-title-background;
  padding: 10px 15px;
  color: $color-code-title-text;
}

.code-window {
  height: 30px;
  background: $color-code-title-background url('../images/window.svg') no-repeat center right;
  padding-left: 15px;
  font-family: Monospace;
  color: #ccc;
  line-height: 30px;
}

.body-content {
  line-height: 30px;

  ul {
    list-style: initial;
  }
}

.quick {
  $image-size: 250px;

  .ejs-link--anchor--with-image .ejs-link-content {
    width: calc(100% - $image-size - 5px);
  }

  .ejs-link--image {
    width: $image-size;
    height: $image-size;
  }

  &-image {
    img {
      width: 100%;
      height: 450px;
      background-position: center center;
      background: #f2f2f2 url('../images/quick-post-load.png') no-repeat center center;
      border: 2px solid $color-very-light-grey;
      border-bottom: 0;
      cursor: pointer;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
    }
  }

  &-video {
    .video-ratio {
      border: 2px solid $color-very-light-grey;
      border-bottom: 0;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;

      iframe {
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
      }
    }
  }

  &-more {
    margin-bottom: 15px;
  }

  &-body {
    padding: 10px 10px 0 10px;
    border: 2px solid $color-very-light-grey;
    margin-top: -7px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    word-break: break-all;
  }
}

.video-ratio {
  position: relative;
  width: 100%;
  height: 0;

  iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
  }
}

.error_list {
  color: $color-red !important;
  padding: 4px 0 !important;
}

.content-footer {
  font-size: 14px;
  background: darken($color-dark-grey, 10%);
  text-align: center;
  border-top: 1px dotted $color-very-dark-grey;
  color: $color-white;
  padding-top: 20px;
  padding-bottom: 20px;

  a {
    font-weight: bold;
    color: $color-white;
  }

  ul {
    margin: 0;
    padding: 0 0 10px 0;
  }

  li {
    padding: 0;
    margin: 0;

    &::after {
      content: '-';
      margin: 0 5px;
    }

    &:last-child::after {
      display: none;
    }
  }

  p {
    margin-bottom: 0;
    margin-top: 10px;
    padding: 0;
  }
}

.links {
  margin: 0;
  padding: 15px 0 0 0;
  text-align: center;

  .link:first-child a, .link:first-child {
    border-bottom-left-radius: 7px;
    border-top-left-radius: 7px;
  }

  .link:last-child a, .link:last-child {
    border-bottom-right-radius: 7px;
    border-top-right-radius: 7px;
  }
}

.link {
  margin: 0 1px;
  display: inline-block;

  a {
    display: block;
    font-size: 17px;
    padding-top: 1px;
    padding-right: 0px;
    height: 25px;
    width: 25px;
    overflow: hidden;
    color: $color-white;
    text-decoration: none;

    span {
      display: none;
    }
  }
}

.links a:focus, .wide-menu a:focus .fixed {
  border: 1px solid $color-white;
}

$links: (
  twitter: #20b8ff,
  rss: #fd9f13,
  linkedin: #006699,
  diaspora: #90b92e,
  github: #8cc345,
  code: #51d066,
  mastodon: #2984d2,
  pixelfed: #e72151,
  matrix: #1a588a,
  gpg: #42a73b,
  murph: #19b4db
);

@each $site, $bg in $links {
  .link-#{$site} {
    background-color: $bg;

    &:hover a, &:focus a, a:focus, a:hover {
      color: $color-very-light-grey;
    }
  }
}

.preview-button {
  cursor: pointer;
  margin-left: 3px;
}

.content-footer, .body, .review, form {
  a:focus {
    background: $color-blue;
    color: $color-white;
  }
}

.button {
  &:focus {
    background: $color-very-dark-grey;
  }

  &.alt {
    color: #444;
  }
}

// .button, .btn, input[type="submit"], input[type="button"] {
//   background: $color-blue;
// }
//
// .button:hover, .btn:hover, input:hover[type="submit"], input:hover[type="button"] {
//   background: $color-blue2;
// }
//
// .button:focus, .btn:focus, input:focus[type="submit"], input:focus[type="button"] {
//   background: $color-blue2;
// }
//
// .pager {
//   padding: 20px 20px 0 20px;
//   text-align: center;
//
//   .pager-page {
//     padding: 0 2px 2px 2px;
//
//     &.active {
//       .button {
//         color: #000;
//         font-weight: bold;
//       }
//     }
//   }
//
//   .button {
//     padding: 8px;
//   }
// }

.pager {
  text-align: center;

  .btn-md {
    padding-left: 0;
    padding-right: 0;

    a {
      display: block;
      padding-left: 1rem;
      padding-right: 1rem;
      line-height: 3rem;
    }
  }
}

.card figure {
  a {
    display: block;
    width: 100%;
  }

  img {
    height: 200px;
    width: 100%;
  }
}

@keyframes bounceIn {
  0%{
    opacity: 0;
  }
  50%{
    opacity: 0.9;
  }
  80%{
    opacity: 1;
  }
  100%{
    opacity: 1;
  }
}

@keyframes knmc {
  0%{
    left: -256px;;
  }
  100%{
    left: 150vw;
  }
}

.knmc {
  animation-name: knmc;
  animation-duration: 15s;
  animation-iteration-count: 1;
}

.logo-svg {
  animation-name: bounceIn;
  animation-duration: 1s;
}

.logo-svg {
  animation-name: bounceIn;
  animation-duration: 1s;
}

.modal-open {
  overflow: hidden;

  .modal {
    overflow-x: hidden;
    overflow-y: auto;
  }
}

.modal-mesh {
  iframe {
    margin: 0;
    padding: 0;
    height: 80vh;
    width: 100%;
  }
}

// .card {
//   border: 1px solid $color-hr-border;
//   border-radius: 10px;
//   margin: 20px;
//
//   &-preview {
//     img {
//       border-top-left-radius: 10px;
//       border-top-right-radius: 10px;
//       width: 100%;
//     }
//   }
//
//   &-title {
//     font-size: 20px;
//     padding: 10px;
//     color: $color-body-text;
//   }
//
//   &-description {
//     padding-left: 10px;
//     padding-right: 10px;
//   }
//
//   &-file {
//     ul {
//       margin-top: 0;
//     }
//
//     li {
//       padding-left: 0;
//     }
//   }
//
//   .button {
//     margin-top: 4px;
//   }
// }
//
//
// .cards {
//   padding: 0 20px 20px 20px;
//
//   &--posts {
//     padding-left: 0;
//     padding-right: 0;
//
//     .card-preview {
//       img {
//         max-height: 200px;
//         width: 100%;
//       }
//     }
//
//     .row > .col-4:nth-child(1) .card {
//       margin-left: 0;
//     }
//
//     .row > .col-4:nth-child(3) .card {
//       margin-right: 0;
//     }
//   }
// }

.ejs-link {
  margin: 10px auto;

  &--anchor {
    display: block;
    padding: 30px;
  }

  &-content {
    display: inline-block;
    vertical-align: top;
    word-break: break-all;

    &--title {
      font-weight: bold;
    }

    &--description {
      font-size: 15px;
    }

    &--link {
      padding-top: 10px;
      font-size: 14px;
      line-height: 20px;

      .deblan-icon {
        margin-right: 10px;
      }
    }
  }

  $image-size: 85px;

  &--anchor--with-image &-content {
    width: calc(100% - $image-size - 5px);
    padding-right: 25px;
  }

  &--image {
    display: inline-block;
    width: $image-size;
    height: $image-size;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .quick-more {
    margin-top: -20px;
    margin-left: 30px;
  }
}

.menu-opener {
  background-color: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  padding: 0;
  width: 50px;
  float: right;

  .line {
    fill: none;
    stroke: $color-white;
    stroke-width: 6;
    transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1), stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  .line1 {
    stroke-dasharray: 60 207;
    stroke-width: 6;
  }

  .line2 {
    stroke-dasharray: 60 60;
    stroke-width: 6;
  }

  .line3 {
    stroke-dasharray: 60 207;
    stroke-width: 6;
  }

  &.is-open .line1 {
    stroke-dasharray: 90 207;
    stroke-dashoffset: -134;
    stroke-width: 6;
  }

  &.is-open .line2 {
    stroke-dasharray: 1 60;
    stroke-dashoffset: -30;
    stroke-width: 6;
  }

  &.is-open .line3 {
    stroke-dasharray: 90 207;
    stroke-dashoffset: -134;
    stroke-width: 6;
  }
}

@media screen and (max-width: 1280px) {
  .card-wrapper {
    width: 100%;
  }

  .cards--posts .card {
    margin-left: 0;
    margin-right: 0;
  }
}

@media screen and (max-width: 980px) {
  .quick-image img {
    height: 200px;
  }

  .ejs-link {
    &-content {
      display: block;
      width: 100% !important;
      padding-right: 0;
    }

    &--image {
      display: block;
      margin: 30px auto 0 auto;
      width: 120px;
      height: 120px;
    }
  }
}

@media screen and (max-width: 719px) {
  .content-footer {
    margin-bottom: 40px;
  }
}

@media screen and (max-width: 550px) {
  .body {
    padding: 10px 10px 20px 10px;
  }

  .reviews {
    padding: 10px 10px 20px 10px;
  }

  .cards {
    padding: 0;
  }
}

@media screen and (max-width: 719px) {
  .content {
    width: 100%;
  }

  .review {
    .review-avatar {
      display: none;
    }

    .review-content {
      width: 100%;
      margin: 0;
    }
  }
}

@media screen and (max-width: 380px) {
  .navigation {
    a {
      padding: 7px 10px;
    }
  }

  .small-menu {
    img {
      width: 20px;
      margin-top: 11px;
      padding: 0;
    }
  }
}

.bg-box {
  background: #fbfcff;
}

@media (prefers-color-scheme: dark) {
  .bg-box {
    background: #343c53;
  }

  .body, .review-body {
    a:not(.button), h1, h2, h3, h4, h5, p, ul {
      color: #fff;
    }

    p a, ul a {
      border-bottom: 2px dotted $color-blue2;
    }

    blockquote {
      border-left: 2px solid $color-blockquote-border;
    }

    code {
      color: $code-color;
    }
  }

  .content {
    background: #242b3d;
  }

  .content hr, .content .hr {
    background: none;
    border-color: darken($color-wide-menu-background-to, 10%) !important;
  }

  .header-shadow {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(255,255,255,0) 100%);
  }
}

@media all and (max-height: 600px) {
  .wide-menu {
    .navigation {
      max-height: calc(100vh - 215px);
      padding-top: 10px;
      overflow: auto;
    }
  }
}