Update layout

src/static/css/main.css

@@ -1,4 +1,5 @@
 @import "../fonts/inter/inter.css";
+@import "../fonts/remix/remixicon.css";
 
 *, *::before, *::after {
 	box-sizing: border-box;
@@ -17,9 +18,10 @@
 
 	--link: #0066ffde;
 
-	--colw: 20rem;
+	--colw: 18rem;
+	--colgap: 2rem;
 	--gap: 1rem;
-	--maxw: 90rem;
+	--maxw: 60rem;
 	--lh: 1.3rem;
 
 	--bl-lh: 2rem;
@@ -37,13 +39,13 @@ body {
 	font-feature-settings: "ss01", "ss02", "ss03", "cv05", "cv08";
 	max-width: var(--maxw);
 	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(var(--colw), 1fr));
-	grid-gap: var(--gap);
+	grid-template-columns: var(--colw) 1fr;
+	grid-gap: var(--colgap);
 }
-body > div {
+/* body > div {
 	column-width: var(--colw);
 	column-gap: var(--gap);
-}
+} */
 body > div.info {grid-column: 1}
 body > div.cv {grid-column: 2 / -1}
 @media (max-width: 40rem) {
@@ -111,30 +113,36 @@ li {padding-left: calc(var(--gap) / 2)}
 .block {
 	display: grid;
 	grid-template-columns: repeat(3, 1fr);
+	grid-template-columns: 1fr;
 	grid-gap: .2rem;
 	grid-auto-rows: auto;
 }
 .img-block > img {
 	width: 100%;
-	aspect-ratio: 1;
+	height: 6rem;
 	object-fit: cover;
 }
 .link-block > a {
 	background: var(--bg-01);
 	color: inherit;
 	padding: var(--gap);
-	aspect-ratio: 1;
+	height: 6rem;
 	display: grid;
 	grid-template-columns: 1fr;
 	grid-template-rows: 1fr auto;
 }
 .link-block > a:hover {
 	background: var(--bg-02);
+	text-decoration: none;
 }
-.link-block > a > img {
-	width: 2rem;
+.link-block > a:hover > span.desc {
+	text-decoration: underline;
 }
-.link-block > a > span {
+.link-block > a > span.i {
+	font-size: 2rem;
+	text-align: right;
+}
+.link-block > a > span.desc {
 	grid-row: 2;
 	overflow: hidden;
 	text-overflow: ellipsis;

src/static/fonts/remix/remixicon.css

@@ -0,0 +1,42 @@
+
+/*
+* https://remixicon.com
+* https://github.com/Remix-Design/RemixIcon
+* Copyright RemixIcon.com
+* Released under the Apache License Version 2.0
+*/
+
+@font-face {
+    font-family: "remixicon";
+    url("remixicon.woff2?t=1678097420828") format("woff2"),
+    font-display: swap;
+}
+
+[class^="ri-"], [class*="ri-"] {
+    font-family: 'remixicon' !important;
+    font-style: normal;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+.ri-lg { font-size: 1.3333em; line-height: 0.75em; vertical-align: -.0667em; }
+.ri-xl { font-size: 1.5em; line-height: 0.6666em; vertical-align: -.075em; }
+.ri-xxs { font-size: .5em; }
+.ri-xs { font-size: .75em; }
+.ri-sm { font-size: .875em }
+.ri-1x { font-size: 1em; }
+.ri-2x { font-size: 2em; }
+.ri-3x { font-size: 3em; }
+.ri-4x { font-size: 4em; }
+.ri-5x { font-size: 5em; }
+.ri-6x { font-size: 6em; }
+.ri-7x { font-size: 7em; }
+.ri-8x { font-size: 8em; }
+.ri-9x { font-size: 9em; }
+.ri-10x { font-size: 10em; }
+.ri-fw { text-align: center; width: 1.25em; }
+
+.ri-mastodon-fill:before { content: "\ef23"; }
+.ri-git-repository-fill:before { content: "\edc6"; }
+.ri-mail-send-fill:before { content: "\eefb"; }
+.ri-map-2-fill:before { content: "\ef05"; }

src/static/img/.gitignore

@@ -1 +0,0 @@
-*.jpg

src/static/img/convert.ps1

@@ -0,0 +1,7 @@
+magick .\pic1.jpg -geometry 608x96^ -gravity center -crop "608x96+0+0" pic1.webp
+magick .\pic2.jpg -geometry 608x96^ -gravity center -crop "608x96+0+0" pic2.webp
+magick .\pic3.jpg -geometry 608x96^ -gravity center -crop "608x96+0+0" pic3.webp
+
+magick .\pic1.jpg -geometry 1216x192^ -gravity center -crop "1216x192+0+0" pic1x2.webp
+magick .\pic2.jpg -geometry 1216x192^ -gravity center -crop "1216x192+0+0" pic2x2.webp
+magick .\pic3.jpg -geometry 1216x192^ -gravity center -crop "1216x192+0+0" pic3x2.webp