Refine homepage and article layout

quartz.config.ts

@@ -68,7 +68,7 @@ const config: QuartzConfig = {
         keepBackground: false,
       }),
       Plugin.ObsidianFlavoredMarkdown({ enableInHtmlEmbed: false }),
-      Plugin.GitHubFlavoredMarkdown({ linkHeadings: false }),
+      Plugin.GitHubFlavoredMarkdown({ linkHeadings: true }),
       Plugin.TableOfContents(),
       Plugin.CrawlLinks({ markdownLinkResolution: "shortest" }),
       Plugin.Description(),

quartz.layout.ts

@@ -7,8 +7,7 @@ export const sharedPageComponents: SharedLayout = {
   header: [],
   afterBody: [],
   footer: Component.Footer({
-    links: {
+    links: {},
-    },
   }),
 }
 
@@ -39,36 +38,23 @@ export const defaultContentPageLayout: PageLayout = {
     }),
     Component.Darkmode(),
     Component.ConditionalRender({
-      component: Component.DesktopOnly(Component.LinksList({
+      component: Component.DesktopOnly(
-        links: {
+        Component.RecentNotes({
-          "E-Mail": "mailto:riceset@icloud.com",
+          title: "Latest Articles",
-          GitHub: "https://github.com/riceset",
+          limit: 8,
-          LinkedIn: "https://www.linkedin.com/in/riceset/",
+          showTags: false,
-        },
+        }),
-      })),
+      ),
-      condition: (props) => props.fileData.slug !== "index",
-    }),
-    Component.ConditionalRender({
-      component: Component.Explorer(),
       condition: (props) => props.fileData.slug !== "index",
     }),
   ],
   right: [
     Component.ConditionalRender({
-      component: Component.DesktopOnly(Component.RecentNotes({ title: "Latest", limit: 8 })),
+      component: Component.DesktopOnly(Component.TableOfContents()),
       condition: (props) => props.fileData.slug !== "index",
     }),
     Component.ConditionalRender({
-      component: Component.MobileOnly(Component.RecentNotes({ title: "Latest", limit: 1 })),
+      component: Component.MobileOnly(Component.TableOfContents()),
-      condition: (props) => props.fileData.slug !== "index",
-    }),
-    Component.ConditionalRender({
-      component: Component.MobileOnly(Component.LinksList({
-        links: {
-          GitHub: "https://github.com/riceset",
-          LinkedIn: "https://www.linkedin.com/in/riceset/",
-        },
-      })),
       condition: (props) => props.fileData.slug !== "index",
     }),
   ],
@@ -82,29 +68,20 @@ export const defaultListPageLayout: PageLayout = {
     Component.MobileOnly(Component.Spacer()),
     //Component.Search(),
     Component.Darkmode(),
-    Component.DesktopOnly(Component.LinksList({
-        links: {
-            "E-Mail": "mailto:riceset@icloud.com",
-            GitHub: "https://github.com/riceset",
-            LinkedIn: "https://www.linkedin.com/in/riceset/",
-        }
-    })),
     Component.Explorer(),
   ],
   right: [
-    Component.DesktopOnly(Component.RecentNotes({
+    Component.DesktopOnly(
+      Component.RecentNotes({
         title: "Latest",
-        limit: 8
+        limit: 8,
-    })),
+      }),
-    Component.MobileOnly(Component.RecentNotes({
+    ),
+    Component.MobileOnly(
+      Component.RecentNotes({
         title: "Latest",
-        limit: 1
+        limit: 1,
-    })),
+      }),
-    Component.MobileOnly(Component.LinksList({
+    ),
-        links: {
-            GitHub: "https://github.com/riceset",
-            LinkedIn: "https://www.linkedin.com/in/riceset/",
-        }
-    }))
   ],
 }

quartz/components/Footer.tsx

@@ -1,18 +1,21 @@
 import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
 import style from "./styles/footer.scss"
-import { version } from "../../package.json"
-import { i18n } from "../i18n"
 
 interface Options {
   links: Record<string, string>
 }
 
 export default ((opts?: Options) => {
-  const Footer: QuartzComponent = ({ displayClass, cfg }: QuartzComponentProps) => {
+  const Footer: QuartzComponent = ({ displayClass, fileData }: QuartzComponentProps) => {
     const year = new Date().getFullYear()
     const links = opts?.links ?? []
+    const isHomePage = fileData.slug === "index"
+    const footerClass = [displayClass, isHomePage ? "home-footer" : undefined]
+      .filter(Boolean)
+      .join(" ")
+
     return (
-      <footer class={`${displayClass ?? ""}`}>
+      <footer class={footerClass}>
         <p>
           © {year} riceset
         </p>

quartz/components/HomeProfile.tsx

@@ -120,7 +120,9 @@ const HomeProfile: QuartzComponent = () => {
           {experience.map((item) => (
             <div class="home-exp-item">
               <div class="home-exp-row">
-                <img class="home-org-logo" src={item.logo} alt={item.company} />
+                <span class="home-org-logo-badge">
+                  <img class="home-org-logo" src={item.logo} alt={item.company} />
+                </span>
                 <div class="home-exp-header">
                   <div class="home-exp-text">
                     <span class="home-exp-role">{item.role}</span>
@@ -151,7 +153,9 @@ const HomeProfile: QuartzComponent = () => {
         <div class="home-edu-list">
           {education.map((item) => (
             <div class="home-edu-item">
-              <img class="home-org-logo" src={item.logo} alt={item.institution} />
+              <span class="home-org-logo-badge">
+                <img class="home-org-logo" src={item.logo} alt={item.institution} />
+              </span>
               <div class="home-edu-text">
                 <span class="home-edu-institution">{item.institution}</span>
                 <span class="home-edu-degree">{item.degree}</span>

quartz/components/LinksList.tsx

@@ -1,36 +1,98 @@
 import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
-import style from "./styles/footer.scss"
+import { classNames } from "../util/lang"
+import style from "./styles/linksList.scss"
 
 interface Options {
   links: Record<string, string>
 }
 
+const MailIcon = () => (
+  <svg
+    class="links-list-icon"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <rect x="2" y="4" width="20" height="16" rx="2" />
+    <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" />
+  </svg>
+)
+
+const GitHubIcon = () => (
+  <svg class="links-list-icon" viewBox="0 0 24 24" fill="currentColor">
+    <path d="M12 0C5.37 0 0 5.37 0 12c0 5.3 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61-.546-1.385-1.335-1.755-1.335-1.755-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 21.795 24 17.295 24 12c0-6.63-5.37-12-12-12" />
+  </svg>
+)
+
+const LinkedInIcon = () => (
+  <svg class="links-list-icon" viewBox="0 0 24 24" fill="currentColor">
+    <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />
+  </svg>
+)
+
+const LinkIcon = () => (
+  <svg
+    class="links-list-icon"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
+    <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
+  </svg>
+)
+
+const getLinkIcon = (text: string, link: string) => {
+  const normalizedText = text.toLowerCase()
+  const normalizedLink = link.toLowerCase()
+
+  if (normalizedLink.startsWith("mailto:") || normalizedText.includes("mail")) {
+    return MailIcon
+  }
+
+  if (normalizedText.includes("github") || normalizedLink.includes("github.com")) {
+    return GitHubIcon
+  }
+
+  if (normalizedText.includes("linkedin") || normalizedLink.includes("linkedin.com")) {
+    return LinkedInIcon
+  }
+
+  return LinkIcon
+}
+
 export default ((opts?: Options) => {
   const LinksList: QuartzComponent = ({ displayClass }: QuartzComponentProps) => {
-    const links = opts?.links ?? []
+    const links = opts?.links ?? {}
     return (
-      <>
+      <div class={classNames(displayClass, "links-list")}>
-        <style>
+        <h3>Social</h3>
-          {`
+        <div class="links-list-grid">
-            @media (max-width: 800px) {
+          {Object.entries(links).map(([text, link]) => {
-              .contact-header {
+            const Icon = getLinkIcon(text, link)
-                text-align: center;
+            const isExternal = link.startsWith("http://") || link.startsWith("https://")
-              }
+
-              .contact-list {
+            return (
-                text-align: center;
+              <a
-              }
+                class="links-list-link"
-            }
+                href={link}
-          `}
+                aria-label={text}
-        </style>
+                target={isExternal ? "_blank" : undefined}
-        <div class={`${displayClass ?? ""}`}>
+                rel={isExternal ? "noopener noreferrer" : undefined}
-          <h3 class="contact-header" style={{ margin: "0.5rem 0 0 0", fontSize: "1rem" }}>Social</h3>
+              >
-          <ul class="contact-list" style={{ listStyleType: "none", padding: 0, margin: "1rem 0 0 0" }}>
+                <Icon />
-            {Object.entries(links).map(([text, link]) => (
+                <span>{text}</span>
-              <li><a href={link}>{text}</a></li>
+              </a>
-            ))}
+            )
-          </ul>
+          })}
         </div>
-      </>
+      </div>
     )
   }
 

quartz/components/styles/footer.scss

@@ -4,6 +4,11 @@ footer {
   margin-top: 2rem;
   opacity: 0.7;
 
+  &.home-footer {
+    padding-top: 2rem;
+    border-top: 1px solid var(--lightgray);
+  }
+
   & ul {
     list-style: none;
     margin: 0;

quartz/components/styles/homeProfile.scss

@@ -49,14 +49,26 @@
 
 // ── Org logo ───────────────────────────────────────────────────────────────
 
-.home-org-logo {
+.home-org-logo-badge {
   width: 2.5rem;
   height: 2.5rem;
+  box-sizing: border-box;
   border-radius: 50%;
-  object-fit: cover;
+  padding: 0.35rem;
-  background-color: var(--lightgray);
+  overflow: hidden;
+  background-color: #fff;
   border: 1px solid var(--lightgray);
   flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.home-org-logo {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  object-position: center;
   display: block;
 }
 
@@ -79,6 +91,10 @@
   flex-direction: row;
   align-items: center;
   gap: 0.75rem;
+
+  @media all and ($mobile) {
+    align-items: flex-start;
+  }
 }
 
 .home-exp-header {

quartz/components/styles/linksList.scss

@@ -0,0 +1,56 @@
+@use "../../styles/variables.scss" as *;
+
+.links-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.9rem;
+
+  & > h3 {
+    margin: 0.5rem 0 0;
+    font-size: 1rem;
+  }
+}
+
+.links-list-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.6rem;
+}
+
+.links-list-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  font-size: 0.85rem;
+  color: var(--secondary);
+  text-decoration: none;
+  border: 1px solid var(--lightgray);
+  border-radius: 999px;
+  padding: 0.35rem 0.75rem;
+  background-color: transparent !important;
+  transition:
+    border-color 0.15s ease,
+    color 0.15s ease;
+
+  &:hover {
+    border-color: var(--secondary);
+    color: var(--secondary);
+  }
+}
+
+.links-list-icon {
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+}
+
+@media all and ($mobile) {
+  .links-list.mobile-only {
+    align-items: center;
+    text-align: center;
+  }
+
+  .links-list.mobile-only .links-list-grid {
+    justify-content: center;
+  }
+}

quartz/static/logos/42.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1"
+	 id="Calque_1" sodipodi:docname="42_logo.svg" inkscape:version="0.48.2 r9819" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 -200 960 960"
+	 enable-background="new 0 -200 960 960" xml:space="preserve">
+<polygon id="polygon5" points="32,412.6 362.1,412.6 362.1,578 526.8,578 526.8,279.1 197.3,279.1 526.8,-51.1 362.1,-51.1 
+	32,279.1 "/>
+<polygon id="polygon7" points="597.9,114.2 762.7,-51.1 597.9,-51.1 "/>
+<polygon id="polygon9" points="762.7,114.2 597.9,279.1 597.9,443.9 762.7,443.9 762.7,279.1 928,114.2 928,-51.1 762.7,-51.1 "/>
+<polygon id="polygon11" points="928,279.1 762.7,443.9 928,443.9 "/>
+</svg>

quartz/static/logos/google.svg

@@ -0,0 +1,104 @@
+<svg version="1.1" viewBox="0 0 268.1522 273.8827" overflow="hidden" xml:space="preserve" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="a">
+      <stop offset="0" stop-color="#0fbc5c"/>
+      <stop offset="1" stop-color="#0cba65"/>
+    </linearGradient>
+    <linearGradient id="g">
+      <stop offset=".2312727" stop-color="#0fbc5f"/>
+      <stop offset=".3115468" stop-color="#0fbc5f"/>
+      <stop offset=".3660131" stop-color="#0fbc5e"/>
+      <stop offset=".4575163" stop-color="#0fbc5d"/>
+      <stop offset=".540305" stop-color="#12bc58"/>
+      <stop offset=".6993464" stop-color="#28bf3c"/>
+      <stop offset=".7712418" stop-color="#38c02b"/>
+      <stop offset=".8605665" stop-color="#52c218"/>
+      <stop offset=".9150327" stop-color="#67c30f"/>
+      <stop offset="1" stop-color="#86c504"/>
+    </linearGradient>
+    <linearGradient id="h">
+      <stop offset=".1416122" stop-color="#1abd4d"/>
+      <stop offset=".2475151" stop-color="#6ec30d"/>
+      <stop offset=".3115468" stop-color="#8ac502"/>
+      <stop offset=".3660131" stop-color="#a2c600"/>
+      <stop offset=".4456735" stop-color="#c8c903"/>
+      <stop offset=".540305" stop-color="#ebcb03"/>
+      <stop offset=".6156363" stop-color="#f7cd07"/>
+      <stop offset=".6993454" stop-color="#fdcd04"/>
+      <stop offset=".7712418" stop-color="#fdce05"/>
+      <stop offset=".8605661" stop-color="#ffce0a"/>
+    </linearGradient>
+    <linearGradient id="f">
+      <stop offset=".3159041" stop-color="#ff4c3c"/>
+      <stop offset=".6038179" stop-color="#ff692c"/>
+      <stop offset=".7268366" stop-color="#ff7825"/>
+      <stop offset=".884534" stop-color="#ff8d1b"/>
+      <stop offset="1" stop-color="#ff9f13"/>
+    </linearGradient>
+    <linearGradient id="b">
+      <stop offset=".2312727" stop-color="#ff4541"/>
+      <stop offset=".3115468" stop-color="#ff4540"/>
+      <stop offset=".4575163" stop-color="#ff4640"/>
+      <stop offset=".540305" stop-color="#ff473f"/>
+      <stop offset=".6993464" stop-color="#ff5138"/>
+      <stop offset=".7712418" stop-color="#ff5b33"/>
+      <stop offset=".8605665" stop-color="#ff6c29"/>
+      <stop offset="1" stop-color="#ff8c18"/>
+    </linearGradient>
+    <linearGradient id="d">
+      <stop offset=".4084578" stop-color="#fb4e5a"/>
+      <stop offset="1" stop-color="#ff4540"/>
+    </linearGradient>
+    <linearGradient id="c">
+      <stop offset=".1315461" stop-color="#0cba65"/>
+      <stop offset=".2097843" stop-color="#0bb86d"/>
+      <stop offset=".2972969" stop-color="#09b479"/>
+      <stop offset=".3962575" stop-color="#08ad93"/>
+      <stop offset=".4771242" stop-color="#0aa6a9"/>
+      <stop offset=".5684245" stop-color="#0d9cc6"/>
+      <stop offset=".667385" stop-color="#1893dd"/>
+      <stop offset=".7687273" stop-color="#258bf1"/>
+      <stop offset=".8585063" stop-color="#3086ff"/>
+    </linearGradient>
+    <linearGradient id="e">
+      <stop offset=".3660131" stop-color="#ff4e3a"/>
+      <stop offset=".4575163" stop-color="#ff8a1b"/>
+      <stop offset=".540305" stop-color="#ffa312"/>
+      <stop offset=".6156363" stop-color="#ffb60c"/>
+      <stop offset=".7712418" stop-color="#ffcd0a"/>
+      <stop offset=".8605665" stop-color="#fecf0a"/>
+      <stop offset=".9150327" stop-color="#fecf08"/>
+      <stop offset="1" stop-color="#fdcd01"/>
+    </linearGradient>
+    <linearGradient xlink:href="#a" id="s" x1="219.6997" y1="329.5351" x2="254.4673" y2="329.5351" gradientUnits="userSpaceOnUse"/>
+    <radialGradient xlink:href="#b" id="m" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-1.936885,1.043001,1.455731,2.555422,290.5254,-400.6338)" cx="109.6267" cy="135.8619" fx="109.6267" fy="135.8619" r="71.46001"/>
+    <radialGradient xlink:href="#c" id="n" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-3.512595,-4.45809,-1.692547,1.260616,870.8006,191.554)" cx="45.25866" cy="279.2738" fx="45.25866" fy="279.2738" r="71.46001"/>
+    <radialGradient xlink:href="#d" id="l" cx="304.0166" cy="118.0089" fx="304.0166" fy="118.0089" r="47.85445" gradientTransform="matrix(2.064353,-4.926832e-6,-2.901531e-6,2.592041,-297.6788,-151.7469)" gradientUnits="userSpaceOnUse"/>
+    <radialGradient xlink:href="#e" id="o" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-0.2485783,2.083138,2.962486,0.3341668,-255.1463,-331.1636)" cx="181.001" cy="177.2013" fx="181.001" fy="177.2013" r="71.46001"/>
+    <radialGradient xlink:href="#f" id="p" cx="207.6733" cy="108.0972" fx="207.6733" fy="108.0972" r="41.1025" gradientTransform="matrix(-1.249206,1.343263,-3.896837,-3.425693,880.5011,194.9051)" gradientUnits="userSpaceOnUse"/>
+    <radialGradient xlink:href="#g" id="r" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-1.936885,-1.043001,1.455731,-2.555422,290.5254,838.6834)" cx="109.6267" cy="135.8619" fx="109.6267" fy="135.8619" r="71.46001"/>
+    <radialGradient xlink:href="#h" id="j" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-0.081402,-1.93722,2.926737,-0.1162508,-215.1345,632.8606)" cx="154.8697" cy="145.9691" fx="154.8697" fy="145.9691" r="71.46001"/>
+    <filter id="q" x="-.04842873" y="-.0582241" width="1.096857" height="1.116448" color-interpolation-filters="sRGB">
+      <feGaussianBlur stdDeviation="1.700914"/>
+    </filter>
+    <filter id="k" x="-.01670084" y="-.01009856" width="1.033402" height="1.020197" color-interpolation-filters="sRGB">
+      <feGaussianBlur stdDeviation=".2419367"/>
+    </filter>
+    <clipPath clipPathUnits="userSpaceOnUse" id="i">
+      <path d="M371.3784 193.2406H237.0825v53.4375h77.167c-1.2405 7.5627-4.0259 15.0024-8.1049 21.7862-4.6734 7.7723-10.4511 13.6895-16.373 18.1957-17.7389 13.4983-38.42 16.2584-52.7828 16.2584-36.2824 0-67.2833-23.2865-79.2844-54.9287-.4843-1.1482-.8059-2.3344-1.1975-3.5068-2.652-8.0533-4.101-16.5825-4.101-25.4474 0-9.226 1.5691-18.0575 4.4301-26.3985 11.2851-32.8967 42.9849-57.4674 80.1789-57.4674 7.4811 0 14.6854.8843 21.5173 2.6481 15.6135 4.0309 26.6578 11.9698 33.4252 18.2494l40.834-39.7111c-24.839-22.616-57.2194-36.3201-95.8444-36.3201-30.8782-.00066-59.3863 9.55308-82.7477 25.6992-18.9454 13.0941-34.4833 30.6254-44.9695 50.9861-9.75366 18.8785-15.09441 39.7994-15.09441 62.2934 0 22.495 5.34891 43.6334 15.10261 62.3374v.126c10.3023 19.8567 25.3678 36.9537 43.6783 49.9878 15.9962 11.3866 44.6789 26.5516 84.0307 26.5516 22.6301 0 42.6867-4.0517 60.3748-11.6447 12.76-5.4775 24.0655-12.6217 34.3012-21.8036 13.5247-12.1323 24.1168-27.1388 31.3465-44.4041 7.2297-17.2654 11.097-36.7895 11.097-57.957 0-9.858-.9971-19.8694-2.6881-28.9684Z" fill="#000"/>
+    </clipPath>
+  </defs>
+  <g transform="matrix(0.957922,0,0,0.985255,-90.17436,-78.85577)">
+    <g clip-path="url(#i)">
+      <path d="M92.07563 219.9585c.14844 22.14 6.5014 44.983 16.11767 63.4234v.1269c6.9482 13.3919 16.4444 23.9704 27.2604 34.4518l65.326-23.67c-12.3593-6.2344-14.2452-10.0546-23.1048-17.0253-9.0537-9.0658-15.8015-19.4735-20.0038-31.677h-.1693l.1693-.1269c-2.7646-8.0587-3.0373-16.6129-3.1393-25.5029Z" fill="url(#j)" filter="url(#k)"/>
+      <path d="M237.0835 79.02491c-6.4568 22.52569-3.988 44.42139 0 57.16129 7.4561.0055 14.6388.8881 21.4494 2.6464 15.6135 4.0309 26.6566 11.97 33.424 18.2496l41.8794-40.7256c-24.8094-22.58904-54.6663-37.2961-96.7528-37.33169Z" fill="url(#l)" filter="url(#k)"/>
+      <path d="M236.9434 78.84678c-31.6709-.00068-60.9107 9.79833-84.8718 26.35902-8.8968 6.149-17.0612 13.2521-24.3311 21.1509-1.9045 17.7429 14.2569 39.5507 46.2615 39.3702 15.5284-17.9373 38.4946-29.5427 64.0561-29.5427.0233 0 .046.0019.0693.002l-1.0439-57.33536c-.0472-.00003-.0929-.00406-.1401-.00406Z" fill="url(#m)" filter="url(#k)"/>
+      <path d="m341.4751 226.3788-28.2685 19.2848c-1.2405 7.5627-4.0278 15.0023-8.1068 21.7861-4.6734 7.7723-10.4506 13.6898-16.3725 18.196-17.7022 13.4704-38.3286 16.2439-52.6877 16.2553-14.8415 25.1018-17.4435 37.6749 1.0439 57.9342 22.8762-.0167 43.157-4.1174 61.0458-11.7965 12.9312-5.551 24.3879-12.7913 34.7609-22.0964 13.7061-12.295 24.4421-27.5034 31.7688-45.0003 7.3267-17.497 11.2446-37.2822 11.2446-58.7336Z" fill="url(#n)" filter="url(#k)"/>
+      <path d="M234.9956 191.2104v57.4981h136.0062c1.1962-7.8745 5.1523-18.0644 5.1523-26.5001 0-9.858-.9963-21.899-2.6873-30.998Z" fill="#3086ff" filter="url(#k)"/>
+      <path d="M128.3894 124.3268c-8.393 9.1191-15.5632 19.326-21.2483 30.3646-9.75351 18.8785-15.09402 41.8295-15.09402 64.3235 0 .317.02642.6271.02855.9436 4.31953 8.2244 59.66647 6.6495 62.45617 0-.0035-.3103-.0387-.6128-.0387-.9238 0-9.226 1.5696-16.0262 4.4306-24.3672 3.5294-10.2885 9.0557-19.7628 16.1223-27.9257 1.6019-2.0309 5.8748-6.3969 7.1214-9.0157.4749-.9975-.8621-1.5574-.9369-1.9085-.0836-.3927-1.8762-.0769-2.2778-.3694-1.2751-.9288-3.8001-1.4138-5.3334-1.8449-3.2772-.9215-8.7085-2.9536-11.7252-5.0601-9.5357-6.6586-24.417-14.6122-33.5047-24.2164Z" fill="url(#o)" filter="url(#k)"/>
+      <path d="M162.0989 155.8569c22.1123 13.3013 28.4714-6.7139 43.173-12.9771L179.698 90.21568c-9.4075 3.92642-18.2957 8.80465-26.5426 14.50442-12.316 8.5122-23.192 18.8995-32.1763 30.7204Z" fill="url(#p)" filter="url(#q)"/>
+      <path d="M171.0987 290.222c-29.6829 10.6413-34.3299 11.023-37.0622 29.2903 5.2213 5.0597 10.8312 9.74 16.7926 13.9835 15.9962 11.3867 46.766 26.5517 86.1178 26.5517.0462 0 .0904-.004.1366-.004v-59.1574c-.0298.0001-.064.002-.0938.002-14.7359 0-26.5113-3.8435-38.5848-10.5273-2.9768-1.6479-8.3775 2.7772-11.1229.799-3.7865-2.7284-12.8991 2.3508-16.1833-.9378Z" fill="url(#r)" filter="url(#k)"/>
+      <path d="M219.6997 299.0227v59.9959c5.506.6402 11.2361 1.0289 17.2472 1.0289 6.0259 0 11.8556-.3073 17.5204-.8723v-59.7481c-6.3482 1.0777-12.3272 1.461-17.4776 1.461-5.9318 0-11.7005-.6858-17.29-1.8654Z" opacity=".5" fill="url(#s)" filter="url(#k)"/>
+    </g>
+  </g>
+</svg>

quartz/static/logos/mixi.svg

@@ -0,0 +1 @@
+<svg width="66" height="32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M65.356 0h-5.498a.644.644 0 0 0-.644.644v18.693a.644.644 0 0 0 .644.644h5.498a.644.644 0 0 0 .644-.644V.644A.644.644 0 0 0 65.356 0zM32.025 0h-5.499a.644.644 0 0 0-.644.644v18.693a.644.644 0 0 0 .644.644h5.499a.644.644 0 0 0 .643-.644V.644A.644.644 0 0 0 32.025 0zm23.74 0h-5.753a1.287 1.287 0 0 0-1.042.531l-3.024 4.173L42.92.53A1.287 1.287 0 0 0 41.878 0h-5.764a.637.637 0 0 0-.336.096.63.63 0 0 0-.31.599c.01.118.052.231.121.327l6.508 8.969-6.508 8.969a.641.641 0 0 0 .52 1.02h5.753a1.289 1.289 0 0 0 1.043-.53l3.025-4.173 3.025 4.173a1.287 1.287 0 0 0 1.041.53h5.76a.644.644 0 0 0 .52-1.02l-6.497-8.97 6.508-8.969a.64.64 0 0 0-.048-.815.645.645 0 0 0-.473-.207zM14.216.498l-3.6 4.64L7.01.497A1.293 1.293 0 0 0 5.99 0H.645A.645.645 0 0 0 0 .644v18.693a.645.645 0 0 0 .645.644h5.337a.645.645 0 0 0 .643-.644V9.753l3.49 4.312a.64.64 0 0 0 .777.175.64.64 0 0 0 .223-.175l3.49-4.312v9.584a.646.646 0 0 0 .644.644h5.5a.646.646 0 0 0 .645-.644V.644A.646.646 0 0 0 20.749 0h-5.513a1.294 1.294 0 0 0-1.02.498z" fill="#000"/><path d="M30.688 30.46v-5.498a.644.644 0 0 0-.644-.644H11.351a.644.644 0 0 0-.644.643v5.5a.644.644 0 0 0 .644.643h18.693a.644.644 0 0 0 .644-.644z" fill="#E5004D"/><path d="M55.127 30.46v-5.498a.644.644 0 0 0-.643-.644H35.79a.644.644 0 0 0-.643.643v5.5a.644.644 0 0 0 .643.643h18.694a.644.644 0 0 0 .643-.644z" fill="#F5A000"/></svg>