edit styles

weru

27.56.2020 07b4b25fe8b637925d2cfd42336cfef9ff2a9f6e

edit styles

 assets/sass/_syntax.sass

@@ -1,53 +1,106 @@
@keyframes pulse
  0%
    opacity: 1
  75%
    opacity: 0.1
  100%
    opacity: 1

code 
  min-width: 100%
  max-width: 100%
  font-size: 15px
  font-weight: 400
  overflow-y: hidden
  display: block
  font-family: 'Monaco', monospace
  word-break: break-all
  &.noClass
    color: orange
pre
  display: grid
  padding: 1rem
    --inlineColor: darkgoldenrod
    color: var(--inlineColor)
    display: inline
    line-break: anywhere
.windows .highlight
  overflow-x: hidden
  &:hover
  overflow-x: auto

.highlight 
  display: grid
  margin: 1.25rem 0
  box-shadow: 0 0 2.5rem rgba(0,0,0,0.12)
  border-radius: 4px
  overflow: hidden
  table
    margin: 0
    border-collapse: collapse
    background-color: var(--overlay)
  width: 100%
  border-radius: 0 0.2rem 0.2rem 0
  overflow-x: auto
  position: relative
  &_wrap
    display: grid
    background: var(--code-bg) !important
    border-radius: 0.5rem
    position: relative
    padding: 0 1rem
    margin: 1.5rem auto 1rem auto
    & + &
      margin-top: 2.25rem
    &:hover > div
      opacity: 1
    .lang
      position: absolute
      top: 0
      right: 0
      text-align: right
      width: 7.5rem
      padding: 0.5rem 1rem
      font-style: italic
      text-transform: uppercase
      font-size: 67%
      opacity: 0.5
      color: var(--light)
    &:hover .lang
      opacity: 0.1
  & & 
    margin: 0
  pre
    color: var(--light) !important
    border-radius: 4px
    font-family: 'Monaco', monospace
    padding-top: 1.5rem
    padding-bottom: 2rem

  table
    display: grid
    max-width: 100%
    margin-bottom: 0
    background: transparent
  td, th
    padding: 0

.lntd
    width: 100%
    border: none
  &:first-child
    width: 2.75rem
    background-color: var(--theme)
    color: var(--light)
    pre
      padding: 0
    code
      display: flex
      flex-flow: column
      align-items: center
  &:last-child
      &, pre
        width: 2.5rem !important
    padding-left: 0
        padding-right: 0
        color: rgba(255,255,255,0.5)
        user-select: none

      pre
        width: 100%
        display: flex
        align-items: center
        flex-direction: column

.err
  color: #a61717
  background-color: #e3d2d2

.hl
  display: block
  width: 100%
  background-color: #ffffcc

.ln
  margin-right: 0.4rem
  padding: 0 0.4em 0 0.4rem
  color: #666
  background-color: rgba(255,255,255,0.25)
.ln, .lnt
  margin-right: 0.75rem
  padding: 0
  transition: opacity 0.3s var(--ease)
  &, span
    color: hsla(0,0%,100%,0.5)
    user-select: none

.k, .kc, .kd, .kn, .kp, .kr, .kt, .nt
  color: #6ab825
@@ -62,7 +115,7 @@
.nc, .nf, .nn
  color: #447fcf

.s, .sa, .sb, .sc, .dl, .sd, .s2, .se, .sh, .si, .sx, .sr, .s1, .s
.s, .sa, .sb, .sc, .dl, .sd, .s2, .se, .sh, .si, .sx, .sr, .s1, .ss
  color: #ed9d13

.m, .mb, .mf, .mh, .mi, .il, .mo
@@ -109,6 +162,72 @@

.gt
  color: #d22323

.w
  color: #666

.hljs
  &-string
    color: #6ab825
  &-attr
    color: #ed9d13
  .p &-attr
    color: var(--light)

.pre
  &_wrap
    white-space: pre-wrap
    white-space: -moz-pre-wrap
    white-space: -pre-wrap
    white-space: -o-pre-wrap
    word-wrap: break-word

  &_nolines.ln
    display: none

// crayon-like widget styles
.panel
  &_box
    display: inline-flex
    // grid-template-columns: repeat(3, 1fr)
    // max-width: 10rem
    perspective: 300px
    grid-gap: 0.5rem
    transition: opacity 0.3s var(--easing)
    background: var(--code-bg)
    padding: 0.5rem 1.5rem
    border-radius: 2rem
    align-items: center
    position: absolute
    right: 0rem
    top: -2.1rem
    opacity: 0
  &_icon
    display: inline-flex
    align-items: center
    justify-content: center
    cursor: pointer
    // transition: opacity 0.3s var(--easing)
    padding: 0.1rem
    transform-origin: 50% 50%
    // opacity: 0.7
    &.active
      animation: pulse 0.1s linear
    svg
      fill: var(--light)
      width: 1.5rem
      height: 1.5rem
  &_hide
    // hide icon if not needed
    display: none
  &_from
    position: absolute
    color: var(--theme)
    bottom: 0
    font-size: 1.5rem
    font-weight: 500
    padding: 0.5rem 0
    cursor: pointer
    letter-spacing: 0.1px
    z-index: 19
  &_expanded &_from
    display: none

 assets/sass/_utils.sass

@@ -38,13 +38,13 @@
    grid-template-columns: 3fr 1fr

  .grid-2
    grid-template-columns: 1fr 1fr
    grid-template-columns: repeat(2, 1fr)

  .grid-3
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr))
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr))

  .grid-4
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr))
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr))

.active
  color: var(--theme)

 assets/sass/_variables.sass

@@ -6,6 +6,7 @@
  --bubble: rgb(36,36,38)
  --accent: var(--haze)
  --bg: var(--light)
  --code-bg: var(--dark)
  --overlay: var(--light)
  --text: #111
  --font: 'Metropolis', sans-serif
@@ -21,6 +22,7 @@
    --accent: var(--bubble)
    --overlay: var(--bubble)
    --border-color: transparent
    --code-bg: var(--accent)
    *
      box-shadow: none !important

@@ -38,3 +40,7 @@
%narrow
  max-width: 750px
  margin: 0 auto

blockquote
  + .highlight_wrap
    margin-top: 2.25rem