@import "tachyons";
@import "syntax";

html {
  scroll-behavior: smooth;
}

.header ul {
  clear: both;
  max-height: 0;
  transition: max-height 0.2s ease-out;
}

/* menu icon */

.header .menu-icon .navicon {
  display: block;
  height: 2px;
  position: relative;
  transition: background 0.2s ease-out;
  width: 18px;
}

.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
  background: #ebdbb2;
  content: "";
  display: block;
  height: 100%;
  position: absolute;
  transition: all 0.2s ease-out;
  width: 100%;
}

.header .menu-icon .navicon:before {
  top: 6px;
}

.header .menu-icon .navicon:after {
  top: -6px;
}

/* menu btn */
.header .menu-btn:checked ~ .menu-icon {
  .navicon {
    background: transparent;
  }
  .navicon:before {
    transform: rotate(-45deg);
  }
  .navicon:after {
    transform: rotate(45deg);
  }
}

.header .menu-btn:checked ~ .menu-icon:not(.steps) {
  .navicon:before,
  .navicon:after {
    top: 0;
  }
}

.header .menu-btn:checked ~ ul {
  max-height: 240px;
}

@media screen and (min-width: 30em) {
  .header ul {
    clear: none;
    float: right;
    max-height: none;
  }
}

.w3-theme-l5 {
  color: #000;
  background-color: #f7fcf5;
}
.w3-theme-l4 {
  color: #000;
  background-color: #e4f4dc;
}
.w3-theme-l3 {
  color: #000;
  background-color: #c9e9ba;
}
.w3-theme-l2 {
  color: #000;
  background-color: #aedd97;
}
.w3-theme-l1 {
  color: #000;
  background-color: #94d274;
}
.w3-theme-d1 {
  color: #fff;
  background-color: #69bf3e;
}
.w3-theme-d2 {
  color: #fff;
  background-color: #5da937;
}
.w3-theme-d3 {
  color: #fff;
  background-color: #519430;
}
.w3-theme-d4 {
  color: #fff;
  background-color: #467f29;
}
.w3-theme-d5 {
  color: #fff;
  background-color: #3a6a22;
}

.w3-theme-light {
  color: #000;
  background-color: #f7fcf5;
}
.w3-theme-dark {
  color: #fff;
  background-color: #3a6a22;
}
.w3-theme-action {
  color: #fff;
  background-color: #3a6a22;
}

.w3-theme {
  color: #fff;
  background-color: #79c753;
}
.w3-text-theme {
  color: #79c753;
}
.w3-theme-border {
  border-color: #79c753;
}
.w3-hover-theme:hover {
  color: #fff;
  background-color: #79c753;
}
// Extra sizes
.mw-20 {
  max-width: 20rem;
}
@media screen and (min-width: 30em) {
  .mw-20-ns {
    max-width: 20rem;
  }
}
// HERO
#hero {
  text-shadow: 2px 2px 3px black;
}
blockquote {
  @extend .bl, .bw2, .w3-theme-border, .pl3;
  p:last-of-type {
    @extend .tc, .ttu, .tracked, .fs-normal, .ma0, .pa0;
  }
}

// POSTS
.main-content {
  a {
    @extend .link, .ph1, .w3-text-theme;
  }

  p code {
    @extend .ph1, .blue, .fw5;
  }

  div.highlight pre.chroma {
    @extend .br2, .overflow-x-scroll;
  }

  dl {
    @extend .ph4, .mh5-ns, .mh3, .pb2;
  }
  dt {
    @extend .b;
  }
}
footer {
  a {
    @extend .link, .near-white, .underline;
  }
}
// CV ENTRY
.cv-entry {
  @extend .ml3, .pl4, .pb2, .relative, .bl, .b--moon-gray;
  h2 {
    @extend .ma0, .f3;
  }
  h2::before {
    content: "";
    position: absolute;
    width: 2rem;
    height: 2rem;
    background-color: #79c753;
    border-radius: 50%;
    transform: translateX(-50%);
    left: 0;
  }
  p {
    @extend .ma0, .pb3;
  }
  p:first-of-type {
    @extend .mid-gray, .fw3;
    i {
      @extend .mh2;
    }
  }
}

// Title font
@font-face {
  font-family: "BerkshireSwash-Regular";
  src:
    url("/css/fonts/BerkshireSwash-Regular.ttf.woff") format("woff"),
    url("/css/fonts/BerkshireSwash-Regular.ttf.svg#BerkshireSwash-Regular")
      format("svg"),
    url("/css/fonts/BerkshireSwash-Regular.ttf.eot"),
    url("/css/fonts/BerkshireSwash-Regular.ttf.eot?#iefix")
      format("embedded-opentype");
  font-weight: normal;
  font-style: normal;
}

.berkshire-swash {
  font-family: "BerkshireSwash-Regular";
}

// TABLES
table {
  @extend .w-100, .mw8, .center, .pv2;
  tr {
    @extend .stripe-dark;
  }
  th {
    @extend .w3-theme-l4;
  }
  th,
  td {
    @extend .ph3, .pv2;
  }
}
// gallery
// https://lubna.dev/articles/create-css-only-image-gallery/
* {
  box-sizing: border-box;
}

$max-img-width: 72rem;
$max-img-height: 48rem;

.gallery {
  display: flex;
  margin: 10px auto;
  max-width: $max-img-width;
  position: relative;
  padding-top: $max-img-height/$max-img-width * 100%;

  @media screen and (min-width: $max-img-width) {
    padding-top: $max-img-height;
  }

  &__img {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
  }

  &__thumb {
    padding-top: 6px;
    margin: 6px;
    display: block;
  }

  &__selector {
    position: absolute;
    opacity: 0;
    visibility: hidden;

    &:checked {
      + .gallery__img {
        opacity: 1;
      }
      ~ .gallery__thumb > img {
        box-shadow: 0 0 0 3px #0be2f6;
      }
    }
  }
}