@import "tachyons";

/* Debugging */
/* @import "tachyons/src/_debug-children"; */
/* @import "tachyons/src/_debug-grid"; */

/* Uncomment out the line below to help debug layout issues */
/* @import "tachyons/src/_debug"; */

@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, .pv1, .pl3, .relative, .baskerville;
  &::before {
    font-family: "Font Awesome 6 Free";
    color: #79c753;
    content: "\f10d";
    font-weight: 900;
    font-size: 2rem;
    position: absolute;
    left: 10px;
    top: -15px;
  }
  p:last-of-type {
    @extend .tc, .ttu, .tracked, .fs-normal, .ma0, .pa0;
  }
}
.heading-anchor {
  color: #ddd !important;
}
// POSTS
.main-content {
  a {
    @extend .link, .ph1, .w3-text-theme;
  }

  a[href^="http"]::after {
    content: "";
    width: 11px;
    height: 11px;
    margin-left: 4px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z'/%3E%3Cpath fill-rule='evenodd' d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
  }

  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, .cv-honor {
  @extend .ml3, .pl4, .pb2, .relative;
  .cv-host,
  .cv-date,
  .cv-location {
    @extend .fw3, .mid-gray, .ma0, .pa0;
  }
  .cv-host::before {
    font-family: "Font Awesome 6 Free";
    content: "\f1ad";
    font-weight: 900;
    margin: 0 0.5rem;
  }
  .cv-location::before {
    font-family: "Font Awesome 6 Free";
    content: "\f041";
    font-weight: 900;
    margin: 0 0.5rem;
  }
  p,
  ul {
    @extend .mv1, .pv1, .f5;
  }
}
.cv-entry {
  @extend .bl, .b--moon-gray;
  .cv-role {
    @extend .ma0, .f3;
  }
  .cv-role::before {
    content: "";
    position: absolute;
    width: 2rem;
    height: 2rem;
    background-color: #79c753;
    border-radius: 50%;
    transform: translateX(-50%);
    left: 0;
  }
  .cv-date,
  .cv-location {
    @extend .dib;
  }
  .cv-date::before {
    font-family: "Font Awesome 6 Free";
    content: "\f133";
    font-weight: 900;
    margin: 0 0.5rem;
  }
}
.cv-honor {
  .cv-role {
    @extend .ma0, .f4;
    margin-left: 3.25rem;
  }
  .cv-date {
    position: absolute;
    left: 0;
    top: 0.05rem;
    font-size: 1.25rem;
  }
  .cv-host,
  .cv-location {
    @extend .dib;
  }
  .cv-date::before {
    font-family: "Font Awesome 6 Free";
    color: #ffb700;
    content: "\f559";
    font-weight: 900;
    margin: 0 0.5rem;
  }
}

// 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;
      }
    }
  }
}