Add phosphor icons

juliecogley · Oct 28, 2024 · 1b39b17 · 1b39b17
1 parent 2085260
commit 1b39b17
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 22 deletions.
diff --git a/_config.ts b/_config.ts
@@ -16,6 +16,7 @@ import sitemap from "lume/plugins/sitemap.ts";
 import source_maps from "lume/plugins/source_maps.ts";
 import sri from "lume/plugins/sri.ts";
 import terser from "lume/plugins/terser.ts";
+import phosphor from "https://deno.land/x/[email protected]/phosphor.ts";
 
 const site = lume(
   {
@@ -47,6 +48,7 @@ site.use(sitemap({
 site.use(source_maps());
 site.use(sri());
 site.use(terser());
+site.use(phosphor());
 
 site.copy("static/assets", "assets");
 site.copy("static/portfolio", "portfolio");

diff --git a/deno.lock b/deno.lock
diff --git a/src/_includes/templates/footer.vto b/src/_includes/templates/footer.vto
@@ -3,22 +3,13 @@
   <footer style="background-image:url(/assets/footer_bg1sm.gif);" class="tc-l bg-center cover bg-black">
     <div class="w-100 ph3 pv5 bg-black-80">
       <p class="sns-links">[email protected]</p>
-      <a rel="me" class="link white-90 bg-transparent hover-white inline-flex items-center ma2 tc br2 pa2"
-        href="https://www.instagram.com/jo00oc/?hl=ja" title="instagram">
-        <svg class="dib h2 w2" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"
-          fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414">
-          <path
-            d="M8 0C3.58 0 0 3.582 0 8c0 3.535 2.292 6.533 5.47 7.59.4.075.547-.172.547-.385 0-.19-.007-.693-.01-1.36-2.226.483-2.695-1.073-2.695-1.073-.364-.924-.89-1.17-.89-1.17-.725-.496.056-.486.056-.486.803.056 1.225.824 1.225.824.714 1.223 1.873.87 2.33.665.072-.517.278-.87.507-1.07-1.777-.2-3.644-.888-3.644-3.953 0-.873.31-1.587.823-2.147-.083-.202-.358-1.015.077-2.117 0 0 .672-.215 2.2.82.638-.178 1.323-.266 2.003-.27.68.004 1.364.092 2.003.27 1.527-1.035 2.198-.82 2.198-.82.437 1.102.163 1.915.08 2.117.513.56.823 1.274.823 2.147 0 3.073-1.87 3.75-3.653 3.947.287.246.543.735.543 1.48 0 1.07-.01 1.933-.01 2.195 0 .215.144.463.55.385C13.71 14.53 16 11.534 16 8c0-4.418-3.582-8-8-8" />
-        </svg>
+      <a rel="me" class="link white-90 bg-transparent hover-red inline-flex items-center ma2 tc br2 pa2"
+        href="https://www.instagram.com/jo00oc/?hl=ja" title="instagram">{{ "instagram-logo" |> phosphor("duotone") }}
         <span class="f6 ml3 pr2">Instagram</span>
       </a>
-      <a rel="me" class="link white-90 bg-transparent hover-white inline-flex items-center ma2 tc br2 pa2"
-        href="https://github.com/juliecogley" title="GitHub">
-        <svg class="dib h2 w2" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"
-          fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414">
-          <path
-            d="M8 0C3.58 0 0 3.582 0 8c0 3.535 2.292 6.533 5.47 7.59.4.075.547-.172.547-.385 0-.19-.007-.693-.01-1.36-2.226.483-2.695-1.073-2.695-1.073-.364-.924-.89-1.17-.89-1.17-.725-.496.056-.486.056-.486.803.056 1.225.824 1.225.824.714 1.223 1.873.87 2.33.665.072-.517.278-.87.507-1.07-1.777-.2-3.644-.888-3.644-3.953 0-.873.31-1.587.823-2.147-.083-.202-.358-1.015.077-2.117 0 0 .672-.215 2.2.82.638-.178 1.323-.266 2.003-.27.68.004 1.364.092 2.003.27 1.527-1.035 2.198-.82 2.198-.82.437 1.102.163 1.915.08 2.117.513.56.823 1.274.823 2.147 0 3.073-1.87 3.75-3.653 3.947.287.246.543.735.543 1.48 0 1.07-.01 1.933-.01 2.195 0 .215.144.463.55.385C13.71 14.53 16 11.534 16 8c0-4.418-3.582-8-8-8" />
-        </svg>
+      <a rel="me" class="link white-90 bg-transparent hover-red inline-flex items-center ma2 tc br2 pa2"
+        href="https://github.com/juliecogley" 
+        title="GitHub">{{ "github-logo" |> phosphor("duotone") }}
         <span class="f6 ml3 pr2">GitHub</span>
       </a>
     </div>

diff --git a/src/about.vto b/src/about.vto
@@ -21,22 +21,22 @@ priority: 0.9
         </header>
         <br><br><br>
         <div class="fl w-100 w-50-l pa3-m pa4-l mb3 mb5-l">
-          <span class="f4 b mt0 sitefont-700">■長所</span><br>
+          <span class="f4 b mt0 sitefont-700">{{ "check-square-offset" |> phosphor("duotone") }}長所</span><br>
           <span class="f3 b dark-blue ">行動力×継続力</span><br>
           <span class="f6 gray profile-text">やってみよう！と決断したら、恐れずに環境を変えるための努力を継続することができます。</span>
           <br><br><br>
-          <span class="f4 b mt0 sitefont-700">■目指すデザイナー像</span><br>
+          <span class="f4 b mt0 sitefont-700">{{ "check-square-offset" |> phosphor("duotone") }}目指すデザイナー像</span><br>
           <span class="f3 b dark-blue">論理的思考×傾聴力</span><br>
           <span class="f6 gray profile-text">
             現職で培った論理的な思考力と傾聴力を活かして、客観的事実に基づいたクライアント様目線のデザインを制作します。
           </span><br><br><br>
-          <span class="f4 b mt0 sitefont-700">■現在の仕事</span><br>
+          <span class="f4 b mt0 sitefont-700">{{ "check-square-offset" |> phosphor("duotone") }}現在の仕事</span><br>
           <span class="f3 b dark-blue ">地方公務員</span><br>
           <span class="f6 gray profile-text">地方公務員として５年間働いています。
             八丈島、東京都庁、大田区など、様々な職場で幅広い業務を経験してきました。
             現在は防災分野の部署で働き、チラシの作成やHP・Xの更新など、広報関係の業務をしています。
           </span><br><br><br>
-          <span class="f4 b mt0 sitefont-700">■特技</span><br>
+          <span class="f4 b mt0 sitefont-700">{{ "check-square-offset" |> phosphor("duotone") }}特技</span><br>
           <span class="f3 b dark-blue ">絵画</span><br>
           <span class="f6 gray profile-text">
             小さい頃から色鉛筆や油絵を使って絵を描くことが好きでした。
@@ -60,14 +60,20 @@ priority: 0.9
             <ul class="list pl0 ml0 center mw6 ba b--light-silver br2">
               <li class="ph3 pv3 bb b--light-silver">
                 <a class="past-work hover-blue"
-                  href="../introduction/nn-2024/index.html" target="_blank">芸術家・中原菜海様のポートフォリオサイト</a>
+                  href="/showcase/nn-2024/" target="_blank">
+                  {{ "graph" |> phosphor("duotone") }}
+                  芸術家・中原菜海様のポートフォリオサイト</a>
               </li>
               <li class="ph3 pv3 bb b--light-silver">
                 <a class="past-work hover-blue"
-                  href="../portfolio/corolla_lp/index.html" target="_blank">コーポレートサイト</a>
+                  href="/portfolio/corolla_lp/" target="_blank">
+                  {{ "graph" |> phosphor("duotone") }}
+                  コーポレートサイト</a>
               </li>
               <li class="ph3 pv3 bb b--light-silver"><a class="past-work hover-blue"
-                  href="https://github.com/juliecogley/julie_portfolio" target="_blank">本サイトのギットハブ</a></li>
+                  href="https://github.com/juliecogley/julie_portfolio" target="_blank">
+                  {{ "github-logo" |> phosphor("duotone") }}
+                  本サイトのギットハブ</a></li>
             </ul>
             </p>
           </div>

diff --git a/src/showcase/index.vto b/src/showcase/index.vto
@@ -9,7 +9,7 @@ templateEngine: [vto]
 ---
 <!-- ===== START LAYOUT: HOME ===== -->
 
-<h1 class="mw10 pa4">Showcase ページ一覧</h1>
+<h1 class="mw10 pa4">Showcase ページ一覧 {{ "tree" |> phosphor("duotone") }}</h1>
 
 {{# <article class="fl w-100 bg-white"> #}}
 <article class="cf pa4 mw10 center f6 lh-copy">

diff --git a/src/styles.css b/src/styles.css
@@ -2,6 +2,11 @@ html {
   background-color:#333;
 }
 
+svg {
+  width: 1em;
+  height: 1em;
+}
+
 .blue { color: #0074D9; }
 .bg-blue { background-color: #0074D9; }
 /* .sitefont {font-family: 'IBM Plex Mono', monospace;} */