0920_0339

src/components/basics.hbs

@@ -6,7 +6,9 @@
   </h1>
   {{> components/hr.hbs size="lg" }}
   <div class="label">
-    <img src="{{ image }}" width="200">
+    <span>
+      <img src="{{ image }}" width="200">
+    </span>
     <h2>{{ label }}</h2>
   </div>
   {{> components/hr.hbs size="lg" }}

src/components/work.hbs

@@ -11,7 +11,7 @@
       {{#each work}}
         <section class="work-item auto-break-before">
           {{#if @first}}
-            <span />
+            <span> </span>
           {{ else }}
             {{> components/hr.hbs }}
           {{/if}}

src/styles/legacy.css

@@ -117,15 +117,15 @@ strong {
 
 #header .image {
   width: 2em;
-  outline: solid 10px var(--xbg);
+  outline: solid 1pc var(--xbg);
   outline-offset: -2px;
   border-radius: 4rem;
   justify-self: end;
   opacity: .8;
 }
 
 #header .label {
-  background-color: var(--xog);
+  background-color: var(--xgg);
   backdrop-filter: blur(var(--blur));
   border-radius: 2em;
   margin: 2em 1em;
@@ -136,11 +136,12 @@ strong {
   justify-items: middle;
   align-items: center;
 
-  & img {
-    border: solid 10px var(--xgg);
+  &>span>img {
+    width: 9pc;
+    height: 9pc;
+    border: solid 1pc var(--xgg);
+    backdrop-filter: contrast(90%);
     border-radius: 2em;
-    height: 140px;
-    width: 140px;
     opacity: .8;
   }
 }
@@ -212,22 +213,22 @@ section#skills {
   display: grid;
   grid-template-columns: 1fr 1fr;
   justify-items: center;
-  gap: 2em;
+  gap: 1em;
 
   .item {
     display: grid;
-    padding: 20px;
+    padding: 1em;
     justify-content: center;
     height: max-content;
-    width: 300px;
+    width: 270px;
     background: var(--xgg);
     backdrop-filter: blur(var(--blur));
     border-radius: var(--brl);
 
     & ul.keywords {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
-      gap: 8px;
+      gap: 4px;
       justify-content: center;
       justify-items: center;
 
@@ -240,7 +241,7 @@ section#skills {
   }
 
   .item:last-child {
-    width: 499px;
+    width: 450px;
     grid-column: 1/3;
 
     & ul.keywords {
@@ -412,6 +413,7 @@ span.url:hover,
 .highlights {
   margin: 1em 0 0 0;
   border-radius: var(--brl);
+  width: max-content;
   backdrop-filter: blur(var(--blur));
 }
 
@@ -692,5 +694,5 @@ ul.keywords {
 
 section#interests ul.keywords li {
   font-size: 12px;
+  padding: 6px 8px;
 }
-

src/styles/main.css

@@ -100,8 +100,7 @@
 
   --xbg: #EEDDFF;
   --xfg: #44BBFF;
-  --xgg: #EECCFF44;
-  --xog: #99AAFF11;
+  --xgg: #DDCCFF33;
 
   --sk0: #220044;
   --sk1: #441155;
@@ -222,11 +221,13 @@ h3,
 h4,
 h5,
 h6,
-header,
+header {
+  font-family: KR-B, monospace;
+}
 ul.keywords li,
 span.url,
 a {
-  font-family: KR-B, monospace;
+  font-family: KR-M, monospace;
 }
 
 blockquote {