balean-theme 0.1.1 → 0.1.2

data/_sass/balean/components/_header.scss

@@ -1,394 +0,0 @@
-@use "balean/variables" as vars;
-
-/* Header */
-.header {
-  .header__inner {
-    position: relative;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    flex-wrap: wrap;
-    padding: 32px vars.$base-spacing-unit 0;
-  }
-
-  @media (max-width: vars.$desktop) {
-    .header__inner {
-      padding: vars.$base-spacing-unit vars.$base-spacing-unit 0;
-    }
-  }
-}
-
-/* Logo */
-.logo__link {
-  font-family: vars.$heading-font-family;
-  font-size: 40px;
-  line-height: 1;
-  font-weight: 700;
-  text-decoration: none;
-  transition: vars.$global-transition;
-}
-
-.logo__image,
-.logo__image__dark {
-  max-height: 50px;
-}
-
-.logo__image__dark {
-  display: none;
-}
-
-.dark-mode {
-  .logo__image {
-    display: none;
-  }
-
-  .logo__image__dark {
-    display: inline-block;
-  }
-}
-
-.main-nav {
-  display: flex;
-  flex: 1 0;
-  align-items: center;
-
-  @media (max-width: vars.$desktop) {
-    position: absolute;
-    top: 68px;
-    right: vars.$base-spacing-unit;
-    z-index: -1;
-    display: block;
-    min-width: 160px;
-    padding: 20px 24px;
-    border-radius: 16px;
-    transform: translate3d(0, 10px, 0);
-    opacity: 0;
-    visibility: hidden;
-    background-color: var(--background-color);
-    box-shadow: 0 8px 40px -8px rgba(0, 0, 0, .22);
-    transition: all .2s ease;
-
-    &.is-visible {
-      z-index: 100;
-      opacity: 1;
-      visibility: visible;
-      transform: translate3d(0, 0, 0);
-    }
-
-    .nav__list {
-      flex-direction: column;
-      width: 100%;
-
-      .nav__item {
-        display: block;
-        width: 100%;
-        margin: 0;
-
-        &.dropdown {
-          .dropdown-toggle {
-            display: none;
-          }
-        }
-
-        .dropdown-menu {
-          position: relative;
-          left: 0;
-          padding: 0;
-          opacity: 1;
-          visibility: visible;
-          transform: scale(1);
-          min-width: auto;
-          border: none;
-          box-shadow: none;
-          background-color: inherit;
-
-          .nav__link {
-            display: block;
-            padding: 7px 0;
-          }
-        }
-
-        .nav__link {
-          display: block;
-          padding: 7px 0;
-          text-align: right;
-          transition: color .2s ease;
-        }
-      }
-    }
-  }
-}
-
-.main-nav__box {
-  display: flex;
-  align-items: center;
-  margin-left: auto;
-
-  @media (max-width: vars.$desktop) {
-    display: block;
-  }
-}
-
-.nav__list {
-  display: flex;
-  align-items: center;
-
-  .nav__item {
-    display: inline-block;
-    margin-right: 24px;
-    margin-bottom: 0;
-
-    &:last-child {
-      margin-right: 0;
-    }
-
-    .nav__link {
-      position: relative;
-      padding: 12px 0;
-      font-size: 20px;
-      line-height: 1;
-      text-decoration: underline;
-      text-decoration-thickness: 1px;
-      text-underline-offset: 2px;
-      text-decoration-color: transparent;
-      will-change: transform;
-
-      &:hover {
-        text-decoration-color: var(--link-color);
-      }
-
-      &.active-link {
-        text-decoration-color: var(--link-color);
-      }
-    }
-
-    &.dropdown {
-      position: relative;
-
-      &:hover {
-        .dropdown-menu {
-          opacity: 1;
-          visibility: visible;
-          transform: translate3d(0, 0, 0);
-        }
-      }
-
-      i {
-        font-size: 16px;
-      }
-
-      .dropdown-toggle {
-        text-decoration: none;
-        color: var(--link-color);
-        cursor: pointer;
-      }
-    }
-
-    .dropdown-menu {
-      position: absolute;
-      top: calc(100% + 8px);
-      left: -32px;
-      transform: translate3d(0, 10px, 0);
-      backface-visibility: hidden;
-      z-index: 100;
-      min-width: 150px;
-      display: block;
-      padding: 16px;
-      opacity: 0;
-      visibility: hidden;
-      transition: all .2s ease;
-      border-radius: 16px;
-      box-shadow: 0 8px 40px -8px rgba(0, 0, 0, .22);
-      background-color: var(--background-color);
-
-      .nav__link {
-        position: relative;
-        display: block;
-        padding: 5px 16px;
-        font-size: 20px;
-        line-height: 1;
-        will-change: transform;
-
-        &:last-child {
-          margin-bottom: 0;
-        }
-      }
-    }
-
-  }
-}
-
-.home-page .nav__item .nav__link.active-link {
-  text-decoration-color: transparent;
-
-  &:hover {
-    text-decoration-color: var(--link-color);
-  }
-}
-
-/* Humburger Menu */
-.hamburger {
-  width: 28px;
-  height: 28px;
-  display: none;
-  cursor: pointer;
-
-  @media (max-width: vars.$desktop) {
-    display: flex;
-    align-items: center;
-  }
-}
-
-.hamburger div,
-.hamburger div:after,
-.hamburger div:before {
-  width: 28px;
-  height: 4px;
-  border-radius: 10px;
-  transition: all 0.15s linear;
-  background-color: var(--heading-font-color);
-}
-
-.hamburger div:before,
-.hamburger div:after {
-  content: "";
-  position: absolute;
-}
-
-.hamburger div:before {
-  transform: translateY(-200%);
-}
-
-.hamburger div:after {
-  transform: translateY(200%);
-}
-
-.hamburger.is-open div {
-  background: transparent;
-}
-
-.hamburger.is-open div:before {
-  transform: rotate(45deg);
-}
-
-.hamburger.is-open div:after {
-  transform: rotate(-45deg);
-}
-
-.nav-button {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  margin-left: 24px;
-
-  .search-button {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    min-width: 140px;
-    padding: 6px;
-    font-size: 20px;
-    border-radius: 16px;
-    color: var(--link-color);
-    background: var(--background-alt-color);
-    transition: vars.$global-transition;
-    cursor: pointer;
-
-    &:hover {
-      background: var(--background-alt-color-2)
-    }
-
-    .search-button__icon {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      width: 32px;
-      height: 32px;
-      font-size: 14px;
-      border-radius: 12px;
-      background: var(--primary-color);
-    }
-  }
-
-  @media (max-width: vars.$desktop) {
-    flex-direction: column;
-    align-items: flex-end;
-    margin-top: 12px;
-    margin-left: 0;
-    gap: 8px;
-  }
-}
-
-/* Toggle Theme */
-.toggle-theme {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 6px 16px;
-  border: 1px solid var(--border-color);
-  border-radius: 16px;
-  user-select: none;
-  cursor: pointer;
-
-  .toggle-text {
-    font-size: 20px;
-    color: var(--link-color);
-  }
-
-
-  @media (max-width: vars.$desktop) {
-    padding: 6px 12px;
-  }
-}
-
-.toggle-sun,
-.toggle-moon {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-
-  svg {
-    width: 14px;
-    height: 14px;
-
-    path {
-      fill: var(--link-color);
-    }
-  }
-}
-
-.toggle-sun {
-  display: none;
-}
-
-.dark-mode {
-  .toggle-sun {
-    display: flex;
-  }
-
-  .toggle-moon {
-    display: none;
-  }
-
-  .main-nav {
-    .dropdown-menu {
-      background: var(--background-alt-color);
-    }
-  }
-
-  .search-button__icon {
-    color: var(--dark);
-  }
-
-  @media (max-width: vars.$desktop) {
-    .main-nav {
-      background: var(--background-alt-color);
-    }
-
-    .nav-button {
-      .search-button {
-        border: 1px solid var(--border-color);
-      }
-    }
-  }
-}

data/_sass/balean/components/_sections.scss

@@ -1,84 +0,0 @@
-@use "balean/variables" as vars;
-
-/* Sections */
-.section {
-  margin-top: 80px;
-
-  .section__info {
-    margin-bottom: 60px;
-    text-align: center;
-  }
-
-  .section__title {
-    margin-bottom: 12px;
-    font-size: 64px;
-  }
-
-  .section__description {
-    margin-bottom: 0;
-    font-size: 40px;
-    line-height: 1.3;
-    color: var(--text-color);
-  }
-
-  .section__navigation {
-    margin-top: 28px;
-    text-align: center;
-  }
-
-  @media (max-width: vars.$wide) {
-    .section__title {
-      font-size: 48px;
-    }
-
-    .section__description {
-      font-size: 36px;
-    }
-  }
-
-  @media (max-width: vars.$desktop) {
-    margin-top: 60px;
-
-    .section__info {
-      margin-bottom: 40px;
-    }
-
-    .section__title {
-      font-size: 40px;
-    }
-
-    .section__description {
-      font-size: 28px;
-    }
-
-    .section__navigation {
-      margin-top: 8px;
-    }
-  }
-
-  @media (max-width: vars.$tablet) {
-    .section__description {
-      font-size: 22px;
-    }
-  }
-
-  @media (max-width: vars.$mobile) {
-    margin-top: 40px;
-
-    .section__info {
-      margin-bottom: 32px;
-    }
-
-    .section__title {
-      font-size: 28px;
-    }
-
-    .section__description {
-      font-size: inherit;
-    }
-
-    .section__navigation {
-      margin-top: 0;
-    }
-  }
-}

data/_sass/balean/tools/_animate.scss

@@ -1,13 +0,0 @@
-/* Animate */
-.animate {
-  animation: animateElement 1s ease;
-
-  @keyframes animateElement {
-    0% {
-      transform:  translate(0px, 40px);
-    }
-    100% {
-      transform:  translate(0px, 0px);
-    }
-  }
-}

data/_sass/balean/tools/_grid.scss

@@ -1,131 +0,0 @@
-@use "balean/variables" as vars;
-
-.container {
-  max-width: vars.$container-base-width;
-  padding-left: calc(#{vars.$container-offset} * 2);
-  padding-right: calc(#{vars.$container-offset} * 2);
-}
-
-.container-big {
-  max-width: 100%;
-  padding-left: calc(#{vars.$container-offset} * 2);
-  padding-right: calc(#{vars.$container-offset} * 2);
-}
-
-.container,
-.container-big {
-  margin: 0 auto;
-  @media (max-width: vars.$mobile) {
-    max-width: 480px;
-    padding-left: calc(#{vars.$container-offset} + 4px);
-    padding-right: calc(#{vars.$container-offset} + 4px);
-  }
-}
-
-.row {
-  display: flex;
-  flex-wrap: wrap;
-  flex: 0 1 auto;
-  flex-direction: row;
-  box-sizing: border-box;
-  margin-left: (vars.$base-spacing-unit * -1);
-  margin-right: (vars.$base-spacing-unit * -1);
-}
-
-.col {
-  padding-left: vars.$base-spacing-unit;
-  padding-right: vars.$base-spacing-unit;
-}
-
-[class^="col-"] {
-  flex: auto;
-}
-
-@for $i from 0 through vars.$columns {
-  .col-#{$i} {
-    width: calc( #{$i} / #{vars.$columns} * 100% );
-  }
-}
-
-@for $i from 0 through vars.$columns {
-  .push-#{$i} {
-    margin-left: calc( #{$i} / #{vars.$columns} * 100% );
-  }
-}
-
-@for $i from 0 through vars.$columns {
-  .pull-#{$i} {
-    margin-right: calc( #{$i} / #{vars.$columns} * 100% );
-  }
-}
-
-@each $key, $val in vars.$mq {
-
-  // DESKTOP
-  @media(max-width: vars.$desktop) {
-
-    @for $i from 0 through vars.$columns {
-      .col-d-#{$i} {
-        width: calc( #{$i} / #{vars.$columns} * 100% );
-      }
-    }
-
-    @for $i from 0 through vars.$columns {
-      .push-d-#{$i} {
-        margin-left: calc( #{$i} / #{vars.$columns} * 100% );
-      }
-    }
-
-    @for $i from 0 through vars.$columns {
-      .pull-d-#{$i} {
-        margin-right: calc( #{$i} / #{vars.$columns} * 100% );
-      }
-    }
-  }
-
-
-  // TABLET
-  @media(max-width: vars.$tablet) {
-
-    @for $i from 0 through vars.$columns {
-      .col-t-#{$i} {
-        width: calc( #{$i} / #{vars.$columns} * 100% );
-      }
-    }
-
-    @for $i from 0 through vars.$columns {
-      .push-t-#{$i} {
-        margin-left: calc( #{$i} / #{vars.$columns} * 100% );
-      }
-    }
-
-    @for $i from 0 through vars.$columns {
-      .pull-t-#{$i} {
-        margin-right: calc( #{$i} / #{vars.$columns} * 100% );
-      }
-    }
-  }
-
-  // MOBILE
-  @media(max-width: vars.$mobile) {
-
-    @for $i from 0 through vars.$columns {
-      .col-m-#{$i} {
-        width: calc( #{$i} / #{vars.$columns} * 100% );
-      }
-    }
-
-    @for $i from 0 through vars.$columns {
-      .push-m-#{$i} {
-        margin-left: calc( #{$i} / #{vars.$columns} * 100% );
-      }
-    }
-
-    @for $i from 0 through vars.$columns {
-      .pull-m-#{$i} {
-        margin-right: calc( #{$i} / #{vars.$columns} * 100% );
-      }
-    }
-  }
-
-}

data/_sass/balean/tools/_index.scss

@@ -1,7 +0,0 @@
-@forward "normalize";
-@forward "reset";
-@forward "shared";
-@forward "syntax-highlighting";
-@forward "grid";
-@forward "animate";
-@forward "splide";