Add ruby style and markup for name

juliecogley · Oct 29, 2024 · 41f0ed1 · 41f0ed1
1 parent 17a5b4d
commit 41f0ed1
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 8 deletions.
diff --git a/src/about.vto b/src/about.vto
@@ -11,8 +11,7 @@ ldPerson: true
       <article class="cf pa3 mw9 center">
         <header class="fl w-100 w-50-l pa3-m pa4-l mb3 mb5-l">
           <h1 class="lh-title f3 mt0 m-plus-2-700">
-            <span class="f6 gray profile-text">こぐれーじゅり</span><br>
-            <span class="f1 blue">コグレー珠里</span><br>
+            <ruby><ruby><span class="f1 blue">コグレー</span><rt>こぐれー</ruby><rt>Cogley<rb><ruby><span class="f1 blue">珠里</span><rt>じゅり</ruby><rt>Julie</ruby><br><br>
             <div class="aspect-ratio aspect-ratio--3x4 shadow-1 br1">
               <span style="background-image:url(/assets/julie_cogley.jpg);"
                 class="dt cover bg-center aspect-ratio--object grow-large hide-child br1">
@@ -21,7 +20,7 @@ ldPerson: true
           </h1>
         </header>
         <br><br><br>
-        <div class="fl w-100 w-50-l pa3-m pa5-l mb3 mb5-l">
+        <div class="fl w-100 w-50-l pa3-m pa6-l mb3 mb5-l">
           <span class="f4 mt0 m-plus-2-700">{{ "check-square-offset" |> phosphor("duotone") }} 長所</span><br>
           <span class="f3 dark-blue ">行動力×継続力</span><br>
           <span class="f6 gray profile-text">やってみよう！と決断したら、恐れずに環境を変えるための努力を継続することができます。</span>

diff --git a/src/styles.css b/src/styles.css
@@ -16,11 +16,18 @@ img {
   border-radius: 0.3rem;
 }
 
-.blue { color: #0074D9; }
-.bg-blue { background-color: #0074D9; }
-/* .sitefont {font-family: 'IBM Plex Mono', monospace;} */
-
-/* <uniquifier>: Use a unique and descriptive class name */
+ruby { 
+  ruby-position: under; 
+  ruby-align: start;
+  color: silver;
+  /* font-weight: 500; */
+  font-size: 2rem;
+  letter-spacing: .5rem;
+}
+ruby  ruby { ruby-position: over; }
+
+/* .sitefont M PLUS 2 */
+/* -suffix: Use a unique and descriptive class name for each weight */
 /* <weight>: Use a value from 100 to 900 */
 
 .m-plus-2-100 {