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

move to indexedb and add about page
All checks were successful
Deploy Sokko G / deploy (push) Successful in 7s
Details

Browse source
This commit is contained in:
Shinuwa 2026-07-24 12:09:45 +02:00
parent a8809afdfd
commit 772b9951de
12 changed files with 855 additions and 249 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -186,47 +186,28 @@ span {
filter: drop-shadow(0 22px 36px rgba(0, 0, 0, 0.34));
}
.origin-section {
.nebula-panel {
position: relative;
overflow: hidden;
border: 1px solid transparent;
border-radius: var(--radius-lg);
background: rgba(16, 20, 38, 0.42);
box-shadow: var(--shadow-sm);
@include mixins.gold-panel-frame;
}
.nebula-panel > * {
position: relative;
z-index: 1;
}
.origin-section {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.65fr);
gap: var(--space-6);
margin-top: var(--space-6);
padding: var(--space-6);
border: 1px solid transparent;
border-radius: var(--radius-lg);
background: rgba(16, 20, 38, 0.42);
box-shadow: var(--shadow-sm);
}
.origin-section::before {
content: "";
position: absolute;
inset: -1px;
padding: 1px;
border-radius: inherit;
background: rgba(165, 180, 252, 0.14);
@include mixins.border-mask;
pointer-events: none;
}
.origin-section::after {
content: "";
position: absolute;
inset: -1px;
padding: 1px;
border-radius: inherit;
background:
radial-gradient(circle at calc(100% - var(--radius-lg)) calc(100% - var(--radius-lg)), rgba(246, 196, 83, 0.9) 0 18px, transparent 27px),
linear-gradient(90deg, transparent 0 30%, rgba(246, 196, 83, 0.12) 42%, rgba(246, 196, 83, 0.72) 72%, rgba(246, 196, 83, 0.9) 100%),
linear-gradient(180deg, transparent 0 30%, rgba(246, 196, 83, 0.12) 42%, rgba(246, 196, 83, 0.72) 72%, rgba(246, 196, 83, 0.9) 100%);
@include mixins.border-mask;
pointer-events: none;
}
.origin-section > * {
position: relative;
z-index: 1;
}
.origin-copy {
@ -280,6 +261,181 @@ span {
text-align: right;
}
.about-page {
display: grid;
gap: var(--space-6);
}
.about-story-section {
display: grid;
grid-template-columns: minmax(210px, 260px) minmax(0, 1fr);
gap: var(--space-6);
align-items: start;
padding: var(--space-6);
}
.about-section-heading {
position: sticky;
top: var(--space-5);
}
.about-section-heading h2 {
margin-bottom: 0;
}
.about-story-list {
display: grid;
gap: 0;
}
.about-story-item {
display: grid;
grid-template-columns: 42px minmax(0, 1fr);
gap: var(--space-4);
padding: var(--space-4) 0;
border-bottom: 1px solid rgba(165, 180, 252, 0.1);
}
.about-story-item:first-child {
padding-top: 0;
}
.about-story-item:last-child {
border-bottom: 0;
}
.about-story-item > span {
color: var(--color-accent-gold);
font-size: var(--font-size-xs);
font-weight: 900;
letter-spacing: 0.08em;
line-height: 1.8;
}
.about-story-item h3 {
margin: 0 0 6px;
color: var(--color-text-primary);
font-size: var(--font-size-lg);
}
.about-story-item > div > p {
max-width: 78ch;
margin: 0;
color: var(--color-text-secondary);
line-height: 1.62;
}
.about-tools-section {
display: grid;
gap: var(--space-4);
padding: var(--space-6);
}
.about-tools-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 var(--space-6);
}
.about-tool-item {
display: grid;
grid-template-columns: 38px minmax(0, 1fr);
gap: 12px;
align-items: start;
padding: 14px 0;
border-bottom: 1px solid rgba(165, 180, 252, 0.1);
}
.about-tool-item:nth-last-child(-n + 2) {
border-bottom: 0;
}
.about-tool-item .module-icon {
width: 34px;
height: 34px;
flex: 0 0 34px;
border-radius: var(--radius-md);
}
.about-tool-item .module-icon-svg {
width: 18px;
height: 18px;
}
.about-tool-item h3 {
margin: 0 0 4px;
color: var(--color-text-primary);
font-size: var(--font-size-base);
}
.about-tool-item p {
margin: 0;
font-size: var(--font-size-sm);
line-height: 1.5;
}
.about-storage-reminders {
display: grid;
gap: 12px;
margin-top: var(--space-4);
padding-left: 44px;
}
.about-storage-reminders .eyebrow {
margin: 0;
color: var(--color-accent-gold);
}
.about-reminders-list {
display: grid;
gap: 0;
margin: 0;
padding: 2px 0 2px var(--space-5);
list-style: none;
border-left: 1px solid rgba(246, 196, 83, 0.22);
}
.about-reminder-item {
display: grid;
grid-template-columns: 38px minmax(0, 1fr);
gap: 12px;
align-items: start;
padding: 12px 0;
border-bottom: 1px solid rgba(165, 180, 252, 0.1);
}
.about-reminder-item:first-child {
padding-top: 0;
}
.about-reminder-item:last-child {
padding-bottom: 0;
border-bottom: 0;
}
.about-reminder-item .module-icon {
width: 34px;
height: 34px;
flex: 0 0 34px;
border: 1px solid rgba(246, 196, 83, 0.26);
border-radius: var(--radius-md);
background: rgba(246, 196, 83, 0.1);
}
.about-reminder-item h4 {
margin: 0 0 6px;
color: var(--color-text-primary);
font-size: var(--font-size-base);
}
.about-reminder-item p {
max-width: none;
margin: 0;
color: var(--color-text-secondary);
font-size: var(--font-size-sm);
line-height: 1.48;
}
.home-stats {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));