Leahnaya/sendou.ink
1
0
Fork 0
mirror of https://github.com/Sendouc/sendou.ink.git synced 2026-05-06 13:19:31 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

Adjust the temporary logo to something releasable

Browse Source
This commit is contained in:
Kalle 2026-03-04 22:21:22 +02:00
parent 53490cd25f
commit 402bbbc672
2 changed files with 31 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
app/components/layout/index.module.css
View File

@ -27,18 +27,29 @@
}
.siteLogo {
display: grid;
place-items: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background-color: var(--color-accent);
border-radius: var(--radius-field);
font-size: var(--font-lg);
font-weight: var(--weight-bold);
color: var(--color-text);
text-decoration: none;
flex-shrink: 0;
transition: background-color 0.2s;
line-height: 1;
gap: 1px;
}
.siteLogoS {
font-size: var(--font-sm);
}
.siteLogoInk {
font-size: 10px;
}
.siteLogo:hover {
@ -131,16 +142,19 @@
@media screen and (max-width: 599px) {
.mobileLogo {
display: grid;
place-items: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background-color: var(--color-accent);
border-radius: var(--radius-field);
font-size: var(--font-lg);
font-weight: var(--weight-bold);
color: var(--color-text);
text-decoration: none;
flex-shrink: 0;
line-height: 1;
gap: 1px;
}
}

13
app/components/layout/index.tsx
View File

@ -347,7 +347,7 @@ function SiteTitle() {
<div className={styles.siteTitle}>
<Flipped flipId="site-logo">
<Link to="/" className={styles.siteLogo}>
S
<SiteLogoContent />
</Link>
</Flipped>
@ -370,10 +370,19 @@ function SiteTitle() {
);
}
function SiteLogoContent() {
return (
<>
<span className={styles.siteLogoS}>S</span>
<span className={styles.siteLogoInk}>ink</span>
</>
);
}
function MobileLogo() {
return (
<Link to="/" className={styles.mobileLogo}>
S
<SiteLogoContent />
</Link>
);
}