refactor variable

weru

24.38.2023 9412f10b0de552fe15dc98faf7e56ecd67f45c52

refactor variable

Signed-off-by: weru <fromweru@gmail.com>

 assets/sass/_blog.sass

@@ -166,7 +166,7 @@
    grid-template-columns: 1fr 1.33rem
    &::after
      content: ""
      background-image: url($next-icon-path)
      background-image: var(--next-icon-path)
      background-repeat: repeat no-repeat
      background-size: 0.8rem
      background-position: center right

 assets/sass/_components.sass

@@ -197,7 +197,7 @@
    text-align: center
    justify-content: center
    &::before, &::after
      background-image: var(--nextIcon)
      background-image: var(--next-icon)
      height: 0.8rem
      width: 0.8rem
      background-size: 100%
@@ -270,7 +270,7 @@
      transform-origin: 50% 50%
      transition: transform 0.5s cubic-bezier(.19,1,.22,1)
      will-change: transform
      background-image: var(--sunIcon)
      background-image: var(--sun-icon)
      background-size: 60%
      background-repeat: no-repeat
      background-position: center
@@ -316,7 +316,7 @@
    transform-origin: 50% 50%
    border-radius: 50%
    background-color: var(--theme)
    background-image: var(--infoIcon)
    background-image: var(--info-icon)
    background-size: 12%
    background-position: 50% 50%
    background-repeat: no-repeat

 assets/sass/_variables.sass

@@ -1,8 +1,3 @@
$font-path: "../fonts/"
$prev-icon-path: "../images/icons/previous.svg"
$next-icon-path: "../images/icons/double-arrow.svg"
$never-icon-path: "../images/sitting.svg"

html
  --color-mode: "light"
  --light: #fff
@@ -20,6 +15,8 @@
  --theme: rgb(52,199,89)
  --ease: ease
  --search-border-color: transparent
  --next-icon-path: url(../images/icons/double-arrow.svg)
  --never-icon-path: url(../images/sitting.svg)

  @mixin darkmode
    --color-mode: "dark"
@@ -39,7 +36,7 @@
    .color
      &_choice
        &::after
          background-image: var(--moonIcon)
          background-image: var(--moon-icon)

  &.dark:not([data-mode="light"])
    @media (prefers-color-scheme: dark)

 assets/sass/main.sass

@@ -1,9 +1,9 @@
{{ $iconsPath := partialCached "functions/getIconPath" . }}
html
  --infoIcon: url('{{ absURL $iconsPath  }}info.svg')
  --sunIcon: url('{{ absURL $iconsPath  }}sun.svg')
  --moonIcon: url('{{ absURL $iconsPath  }}moon.svg')
  --nextIcon: url('{{ absURL $iconsPath  }}next.svg')
  --info-icon: url('{{ absURL $iconsPath  }}info.svg')
  --sun-icon: url('{{ absURL $iconsPath  }}sun.svg')
  --moon-icon: url('{{ absURL $iconsPath  }}moon.svg')
  --next-icon: url('{{ absURL $iconsPath  }}next.svg')
@import "variables"
@import "base"
@import "nav"