pukuri

set

まるみと余白を大きくとった、柔らかいシルエットのレイアウトです。

特徴

  • 大胆なまるみと余白のあるデザイン
  • 動きのあるアイテム

サンプルページ

実装要素

お借りしたもの

アイコン

Material Symbols and Icons - Google Fonts
Material Symbols are our newest icons consolidating over 2,500 glyphs in a single font file with a wide range of design variants.

カラーセット

カラーセットの使い方

style.css内の:rootカスタムプロパティによる色設定を行っています。
:rootを書き換えるとカラーセットが反映されます。

  • #a08fd5
  • #ccc3e8
  • #f3f1f1
  • #f8f6f6
  • #c7b928
  • #f5e866
  • #edc7c7
:root {
    --white: #fff;
    --text-color: #494340;
    --text-point-color: #ccc3e8;
    --menu-color: #f5e866;
    --bg-color1: var(--theme-color1-light);
    --bg-color2: var(--theme-color1-more-light);
    --theme-color1-more-light: #f8f6f6;
    --theme-color1-light: #f3f1f1;
    --theme-color1-default: #a08fd5;
    --theme-color2-default: #c7b928;
    --theme-color3-default: #edc7c7;
}

更新履歴

  • 2021.11.22
    公開・配布開始
タイトルとURLをコピーしました