shinuwa/sokko-g
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve onboarding layout and add sidebar mascot
All checks were successful
Deploy Sokko G / deploy (push) Successful in 7s
Details

Browse source
This commit is contained in:
Shinuwa 2026-08-12 23:53:50 +02:00
parent 2f1526b86b
commit 48dcc8182c
12 changed files with 119 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

57
website/src/styles/_home.scss
View file

@ -212,9 +212,10 @@ span {
.home-onboarding-layout {
display: grid;
grid-template-columns: minmax(280px, 0.85fr) minmax(360px, 1.15fr);
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: stretch;
gap: var(--space-5);
column-gap: clamp(var(--space-12), 5vw, 5rem);
row-gap: var(--space-6);
}
.home-onboarding-steps {
@ -230,9 +231,22 @@ span {
font-size: var(--font-size-lg);
}
.home-onboarding-preview {
display: grid;
align-content: start;
gap: var(--space-4);
min-width: 0;
}
.home-onboarding-preview h3 {
margin: 0;
color: var(--color-text-primary);
font-size: var(--font-size-lg);
}
.home-onboarding-steps ol {
display: grid;
gap: 0;
gap: var(--space-6);
margin: 0;
padding: 0;
list-style: none;
@ -240,22 +254,37 @@ span {
.home-onboarding-steps li {
display: flex;
position: relative;
min-width: 0;
gap: var(--space-3);
padding: var(--space-3) 0;
border-top: 1px solid rgba(150, 165, 205, 0.1);
padding: 0;
}
.home-onboarding-steps li:first-child {
padding-top: 0;
border-top: 0;
}
.home-onboarding-steps li:last-child {
padding-bottom: 0;
}
.home-onboarding-steps li::before {
content: "";
position: absolute;
top: 32px;
bottom: calc(-1 * var(--space-6) + 4px);
left: 13px;
width: 1px;
background: rgba(246, 196, 83, 0.18);
}
.home-onboarding-steps li:last-child::before {
display: none;
}
.home-onboarding-steps li > span {
position: relative;
z-index: 1;
display: grid;
width: 28px;
min-width: 28px;
@ -302,7 +331,7 @@ span {
.home-onboarding-slider figure {
position: relative;
display: grid;
min-height: 340px;
min-height: 320px;
margin: 0;
}
@ -310,7 +339,7 @@ span {
display: block;
width: 100%;
height: 100%;
min-height: 340px;
min-height: 320px;
object-fit: cover;
}
@ -320,12 +349,12 @@ span {
bottom: 0;
left: 0;
display: grid;
min-height: 4.8em;
min-height: 4.1em;
align-content: center;
gap: 2px;
padding: var(--space-3) var(--space-4);
background: rgba(0, 0, 0, 0.56);
backdrop-filter: blur(8px);
gap: 1px;
padding: 10px var(--space-4);
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(6px);
}
.home-onboarding-slider figcaption strong,
@ -346,7 +375,7 @@ span {
.home-onboarding-dots {
position: absolute;
right: var(--space-3);
bottom: calc(4.8em + var(--space-3));
bottom: calc(4.1em + var(--space-3));
display: flex;
gap: 7px;
}

7
website/src/styles/_responsive.scss
View file

@ -22,6 +22,7 @@
.brand span:last-child,
.nav-item strong,
.sidebar-about-link strong,
.sidebar-mascot,
.sidebar-note {
display: none;
}
@ -42,6 +43,12 @@
}
}
@media (max-height: 760px) and (min-width: 1025px) {
.sidebar-mascot {
display: none;
}
}
@media (max-width: 760px) {
.app-shell {
display: block;

23
website/src/styles/_shell.scss
View file

@ -18,7 +18,7 @@
flex-direction: column;
gap: var(--space-4);
padding: var(--space-5);
border-right: 1px solid var(--color-border);
border-right: 2px solid var(--color-border);
background: rgba(11, 14, 27, 0.82);
backdrop-filter: blur(10px);
box-shadow: var(--shadow-md);
@ -145,6 +145,27 @@
color: var(--color-text-primary);
}
.sidebar-mascot {
position: absolute;
top: 47%;
right: 0;
z-index: 0;
display: block;
pointer-events: none;
transform: translateY(-50%);
}
.sidebar-mascot img {
display: block;
width: 134px;
object-fit: contain;
opacity: 0.86;
filter:
saturate(1.04)
brightness(1.02)
drop-shadow(0 24px 34px rgba(0, 0, 0, 0.32));
}
.sidebar-secondary-links {
display: grid;
gap: 4px;