このサイトで使っているカラーとアイコン

• このサイト（yamnor.me）で使っている色定義とアイコンを Hugo の shortcode 機能を使って自動でまとめています
• アイコンは、 Lucide で提供されているものからピックアップしています

colors

• _____ #D32F2F / red
• _____ #78002e / darkpink
• _____ #ad1457 / pink
• _____ #e35183 / lightpink
• _____ #7B1FA2 / purple
• _____ #512DA8 / deeppurble
• _____ #303F9F / indigo
• _____ #004c8c / darkblue
• _____ #0277bd / blue
• _____ #58a5f0 / skyblue
• _____ #3E95BA / lightblue
• _____ #0097A7 / cyan
• _____ #00796B / teal
• _____ #388E3C / green
• _____ #689F38 / lightgreen
• _____ #AFB42B / lime
• _____ #FBC02D / yellow
• _____ #FFA000 / amber
• _____ #F57C00 / orange
• _____ #E64A19 / deeporange
• _____ #5D4037 / brown
• _____ #f9f9fa / lightgrey
• _____ #bdbdbd / grey
• _____ #757575 / darkgrey
• _____ #455A64 / bluegrey
• _____ #4f5b62 / lightblack
• _____ #263238 / black
• _____ #000a12 / darkblack
• _____ #E3D6E7 / pastel-pink
• _____ #5BB9B4 / pastel-green
• _____ #B7D1E8 / pastel-blue
• _____ #C1E2DD / pastel-lightgreen
• _____ #f1f3f8 / pastel-grey
• _____ #ffffff / white
• _____ #f7f7f7 / black00
• _____ #eceff1 / black01
• _____ #cfd8dc / black02
• _____ #b0bec5 / black03
• _____ #90a8ae / black04
• _____ #78909c / black05
• _____ #607d8b / black06
• _____ #546e7a / black07
• _____ #455a64 / black08
• _____ #37474f / black09
• _____ var(--black) / text-color
• _____ rgba(255,241,34,0.3) / highlight-color
• _____ var(--primary-color) / em-color
• _____ var(--lightblack) / strong-color
• _____ var(--pink) / link-color
• _____ var(--lightgrey) / hover-color
• _____ var(--white) / background-color
• _____ var(--lightblue) / primary-color
• _____ var(--black02) / border-color
• _____ var(--black02) / navicon-color
• _____ var(--grey) / shadow-color
• _____ var(--black00) / block-color
• _____ rgba(62, 149, 186, 0.1) / block-color-blue
• _____ rgba(0, 121, 107, 0.1) / block-color-green
• _____ rgba(255, 160, 0, 0.1) / block-color-orange
• _____ rgba(227, 81, 131, 0.1) / block-color-pink

{{ with resources.Get "/css/color.css" | minify | fingerprint }}
<ul>
  {{ range .Content | findRE "--(.*):(#.*);" }}
    {{ range split . ";" }}
      {{ if ne . "" }}
        {{ with split . ":" }}
          {{ $name := trim (index . 0) "--" }}
          {{ $color := index . 1 | safeCSS }}
          <li>
            <span style="color:transparent;background-color:{{ $color }};">_____</span>
            <code>{{ $color }}</code>  / <code>{{ $name }}</code>
          </li>
        {{ end}}
      {{ end }}
    {{ end }}
  {{ end }}
</ul>
{{ end }}

icons

• chevron-first
• chevron-left
• chevron-right
• chevron-last
• user-circle-2
• layout-grid
• search
• mail
• twitter
• facebook
• link
• hash
• clipboard
• check
• calendar
• tag
• tags
• star
• thumbs-up
• heart
• smile
• info
• lock
• presentation
• square-pen
• eye
• pointer
• arrow-down
• chevrons-down
• chevrons-up
• circle-chevron-right
• circle-chevron-left
• message-square-text
• qr-code
• bookmark

{{ with resources.Get "/img/icon.svg" | minify | fingerprint }}
<ul>
  {{ range .Content | findRE "<symbol(.*)</symbol>" }}
    {{ range split . "</symbol>" }}
      {{ if ne . "" }}
        {{ with split . " " }}
          {{ $name := replace (trim (index . 1) "id=") "\"" "" }}
          <li>
            <svg class="lucide" style="width:20px;height:20px;"><use href="{{ $.Site.Params.icon }}#{{ $name }}"></svg>
            <code>{{ $name }}</code>
          </li>
        {{ end }}
      {{ end }}
    {{ end }}
  {{ end }}
</ul>
{{ end }}