Skip to content

Commit 7f25537

Browse files
dongle-the-gadgetdongle-the-gadget
authored
Add new features to website (#862)
* Add site features * Fix broken links * Add nanazip.org on README * README stylistic changes
1 parent 1719f9d commit 7f25537

19 files changed

Lines changed: 535 additions & 69 deletions

File tree

‎Documents/Website/src/assets/images/ArchiveFile.svg‎

Lines changed: 145 additions & 0 deletions
Loading

‎Documents/Website/src/assets/images/ContextMenuDark.png‎

325 KB
Loading

‎Documents/Website/src/assets/images/ContextMenuLight.png‎

300 KB
Loading

‎Documents/Website/src/assets/styles/global.css‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,17 +8,20 @@ body {
88
margin: 0;
99
padding: 0;
1010

11-
height: 100vh;
11+
min-height: 100vh;
12+
display: flex;
13+
flex-direction: column;
1214
}
1315

1416
main {
1517
display: flex;
1618
flex-direction: column;
19+
flex: 1 0 auto;
1720
}
1821

1922
main article {
2023
max-width: 800px;
21-
margin: 40px 16px 0 16px;
24+
margin: 40px 16px 16px 16px;
2225
align-self: center;
2326
}
2427

@@ -30,4 +33,8 @@ html {
3033
html {
3134
color-scheme: dark;
3235
}
36+
}
37+
38+
@view-transition {
39+
navigation: auto;
3340
}

‎Documents/Website/src/assets/styles/icons.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
src: url("/FluentSystemIcons-Regular.woff2") format("woff2"),
44
url("/FluentSystemIcons-Regular.woff") format("woff"),
55
url("/FluentSystemIcons-Regular.ttf") format("truetype");
6+
font-display: swap;
67
}
78

89
.icon:before {

‎Documents/Website/src/assets/styles/image.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
11
img {
22
max-width: 100%;
33
height: auto;
4+
}
5+
6+
.image-card {
7+
border: 1px solid var(--fds-surface-stroke-default);
8+
border-radius: 8px;
49
}

‎Documents/Website/src/assets/styles/pages/index.css‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
.se-demo-scenario {
2+
display: flex;
3+
flex-direction: row;
4+
align-items: center;
5+
gap: 16px;
6+
}
7+
8+
.card {
9+
border: 1px solid var(--fds-card-stroke-default);
10+
background-color: var(--fds-card-background-default);
11+
border-radius: 8px;
12+
padding: 16px;
13+
}
14+
15+
.se-demo-scenario .card {
16+
flex: 1;
17+
}
18+
19+
.icon-file::before {
20+
content: '\E4D7';
21+
}
22+
23+
.icon-folder::before {
24+
content: '\E643';
25+
}
26+
27+
.icon-arrow::before {
28+
content: '\F1A7';
29+
font-size: 48px;
30+
}
31+
32+
@media (max-width: 768px) {
33+
.se-demo {
34+
gap: 32px;
35+
}
36+
37+
.icon-arrow::before {
38+
font-size: 32px;
39+
content: '\F14C';
40+
}
41+
42+
.se-demo-scenario .card {
43+
flex: unset;
44+
}
45+
46+
.se-demo-scenario {
47+
flex-direction: column;
48+
}
49+
}
50+
51+
.format-list {
52+
display: flex;
53+
flex-direction: row;
54+
gap: 16px;
55+
flex-wrap: wrap;
56+
align-items: center;
57+
justify-content: center;
58+
text-align: center;
59+
}
60+
61+
.format-list .card {
62+
font-size: 18px;
63+
}

‎Documents/Website/src/assets/styles/theme.css‎

Lines changed: 0 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -45,10 +45,6 @@
4545
/* Focus Stroke */
4646
--fds-focus-stroke: 0 0 0 1px var(--fds-focus-stroke-inner),
4747
0 0 0 3px var(--fds-focus-stroke-outer);
48-
49-
/* Acrylic */
50-
--fds-acrylic-noise-asset: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAMAAABrrFhUAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABJQTFRF////zMzMmZmZZmZmMzMzAAAA8496aQAADC1JREFUeNrsXYl2IjkMLPn4/18eq0oGkgABwtFtzbxdAg3dtnWUZFmWUaxaKaW2WmqtrY1Xq7W08VLj/fjW+KEVv1qt+UW/Pl5rsQa+LU0fxxfm70v3d9Wgp/Nqi1v4K3/W+Gb8pKK2+Dh+28a18Xj/rbeH8f24an7VL3gfR/+squvGx3l3/OnNr3Iohx4Wvu3+gjYa6OwS+zh+DI6zFJi16Kd3wr9S+xxyr/qZd6U4cfx9Lfo5++ddFzXU9e5t1qoe6z92hNQZdzS/gwMbA7LRgFN1UJLEbIVfV46S9GjjFz5A9sSbbfEXfCY7YD3GIiaQGLWTHsZHagD8xI45P8cDUCrU4mhhUFsD4RW/z9hZsouNwz9whEZaNe9XLzWIYJ0yRKmB02Z0y+IWf7YV1KCx88/IJ5HH7w4aDnYPhgy6+F+RytgfUtAH1TTK+MumG6XYpaCEkPpYyCGJlDrJRxQxZXxAiKKJWaQriShZEtM5kBK3Gvs+aMZGXKRakyw4tUySIHkycUmPERP8LhOjeHsdLHSuh6qJdMFgqcsUMeMrJd6VpjYN3h9sFKouHrpUhPRJtRsbpdpQCztbEXtcKwZFyYfmEmFNelo4Um/SHy75JqEGb5o3XSe14gapnKkpf07rVBS2TF6wx8QDaQ5lofINyWYWgnBgQuMFXZIqkyROioAnH2gjYJXWxeHm/4y6Y8FxEZf8NJGTNOOzGviYAwf8/85BF7GAcus6y0uUr+ikdQFMM/GtCZ6cN2NIMP2s6ZnBA6c00YuXnJPG4XM83RnrqkKUc4b6i/+2ERtRhWn+RZdchbwMGaKSOA+79ISICf7nTGhUr+YjozIIE12uKX2lBfSTQhxUI86SlENM4GiikQh42UUQRVyIqgSENB5GoRehYQ2im0MLaoBsK5MxlFA+0koHxy49lEHhP3++C6rQtQbxZZiCNwhLZbOLk9YOTb0J1x1sZSWmNDUDUXRnZouwIPgoTZruQNbiMqQQRkEdFzp1wcoE8mHtbIhnpYbSCvjv4P2dWu/dFADFY1xIJ/UlpRbgRI45LQl11uuUvqrvQnn1jzBY4sG6P1hugYYCMlI4TC1vsfAypkgMVvfaBH3eb3HWToyja6fRXLsdCLEf8lDIcH09hL/Lh2FXm9UJczLlTnx1c3a2hviV+CgLS2PuxIF12SN+3w/i7So+2NlqoDCI3tSiEj8oUw/aBNMqlXMsadEMYXL6FIQw9hcuf6V3s+kQOCW6t9WkwjJmYZWMNsDhFTEi/CIhTZ0aVINgnlJvQvZJElmjo3Qa2THtbijhxCsaTT2cJkQAS16CZKhidqN0lE52GKUCtBQnYmVl4reFAzOtZVPHqaE+YAsDKfzl4DUyfBB/dCMI9jYRXYJNTsqhcAWTg1rDgyxyXw/uamfzLkGjGchznYBicmslf8Qd/m30Bk34saSHS5Y10dKO3h8VrZJMRvs9pCqvAaCWQAMpoX36AMF1WOjZkL/2VkMe1bM65WPqpH8hn5dYUOShl4pycLSIZ+7tyzdqE34bHRWQSBRt6l4LuoQ0hg/V5ZGHHreJ3+H7tzbxWi6NHB1jJ/hdqdO/NXQLD14dIbH7ELEeKC7Xp5C5FqAv+ZGKzrnRXt1pbEsjwzMWSouLPtYhvnWaDWpWrRP8IQe/Tlde7Tryk0p1BjlKzAe/z/vwNo8jLIhzRcOhKTmY/vkGVFPNxEEjxtkB2SsYIYm8N5pN1+k6TEPrrjcnFd3CxS+cypeQcIl7Fa/cAlZ/LXL7882L8KRJFaMZjSOm0EjPRPMe0yywIVDfh2N1jE5QTOtnnHLsJXITc3i9JzBNvf6bIw+PiUW7sipB43CFLGKiMus+Zp/w0iOAsFq+q4UpMolIWOcJvHW7gTcIF9111c9LBIbFxV4xg1qSfpc6GZ4aUEocrU7FvscAKy7NkqJfmvv0UPLaTlxwee7hqStUpz6FAzRt0zGqHtRoIVOlznB8uAhhRWgw6LXQ+3S4B0lgEQrkJGeqA2hHIR8/7DtVysDeCe3DcmpmpSmUnErELMhCvOoM79NfrTGJnapwkO0SY5MTUmKmKnPr428RciPd4uFWtuh0YXew/eRYCvbCqVe5xygHnZwMJrBKX8PrgybbXeASbG5Cnr1bEZxbLKgxfdUg7ejJyZMWqRcJJ2PX0YwnzJ3woml2yIxk28XeZL1ocUv42KEDTTihQVJeGOYgisqxjDjqK5ax8cFwXBGY+Lj4HeHR3WoB2yTha+dqWH/173rAC9vwx2rrc77SGN6rbLHPkLkWjgMLFY+P4DrKFPaqEKCCh3NCZgp3KjBxDAyUNhe68WaCby7CiL347K+SEewrn+P5UQHsMrPpiSsEeEvYZcPrp9hElsIHVwmRLCvuh5eNxxaV15lBYhOL9B+kJ3ae4PHn0GXm3AgNY1MrlR/IUEWGJIhrOU5IHQwYtMLqydC/xTexaYR6g4RgW/GZ94cLkHtdyFdy11rsvXvegP1a8OfAKnaU2v8acE6/X+CNu1M2mUiFF6TecU5RbVrQtukcDLx7+rm1KDw+MP/Y1B4L7Htd5+9L2thJOt/L1l2wnEzfGZJEYidQ9Egx6b+S1ISl8l0e8Gfxss04O6EaMqbGnU7HsBFV/BgRkZf38t6xRBWEP8wzkXGbzOlyKBK6Pl9gDSus7vxFUbGMLD+4tI+EeVFf4j5Yd933tjkqVtj49Jf0baREvhMXBbmqBfxc3kWamlkXvMX/+wXSyn6kNiD3qoD72mmjgZrLI2+GYEj7hrJWP7JsiJxhkONyO7ZU1ekTgWQkyYe8CIbYZfWjJ6ZgYP0KAdcXppEnLfo8tGOdwniPQSiyVI+9hGbY6K72tyXjIHM4rM7l8UWk+SHbjGUD/jcG1f+X1Ew9EfAbd+zFPiWRGLnrSjOctwqePyalyLxXwNmNxBV0COLY+H6Gl/uS2NdS5vM1Fcn9IEU3lqyMcGMIBnvI4njlOhmS75yVX7F0iYhfhAxpamhfEA6sthHyXscBa2P8764NsmSEXgoQIeHpWl8Kd6Emr6uLjBXkTlcYkXRF7BBLRLraWd8QDLtL734yuCJJ+eCLKaNY/UjN33LXkDsorsLKyZzfr/4Csm2T+55thlUDHbdqCHKtAvx0v5C6fAZ959yn7NAmbDmd/+W0xE6n8U+bjSJ1YXFOAxdMe7mnkAoSWbyzXMRKFWIfyVTBTg6EepmUYZXtb4/ay//5ASW7CCw9uBv8QeQ9cVjhR+Q+ao2ltHIvj2LBLQB3BZex2GLvA5OpxSpC3Ot7YunJ/g1zYqSD/W9LZBk3iXxJskKajMgLUxUk3S953DW27o7A29wB5AuDfs02QsqjZk/yCrC9mg7vrWmLHdQ+fmkeL9JsDrqwjQ8Jd8x/cfGw5hTn9vA6FtwMeteCDFYulniL3CC1CaArnKZ25HmHFfsvifi3RRy890yX7WWk/0+Xt+T75rBimcx7nAssvR/mhiQjJE4Upypj5cMTbnExkCIN5IqLgpL8sDFY8nN3UZKLAGrysDDWDXbdpsXIcaTaZQFElrNFL0710leQyL1nrGrX2D5k9TVhCSQ+bpTxVqxRCOPxZVlkOlLnnLyiJC8vD0ueJ4YViyLcE23AukWzbzPayFlN+AhdSHrg9MGhRqYawudW7ZH8uEGOcL2iAHc40NjuGVDvgSRsKmHnA64ictWL+Dlpw3oxrvviBsh0tN45S46MS+KnYoscR6pdlmLk3TApmMTuKyL+cTM7avIzNrBQ6v9Dc26kKyT8zUogGrCs5wxg7YO1f5/dYOmV3xu8YmRKjD4X4cHK+4FuWZLGenlf98UW8fFMxQ9vpsBKbu0j9S+w333fz4lhIlVa6Bl4QOa9Ak4EbDOH+33IiJocBVGTV1PDHjc5PFNBsPeDk/9qmJC4pjINEdYPfF8XOlhyVxBpVkAuCAKyHanxPQ0ECbJhryafYMdHBD2FeEhSLOYiYGVOERSE5j56Pbq9K9ftyTEELFQZ7yHNQsq9gidLM8iUC3DOvmH9jXHX18yww51uT7VGyJYS810NkHTL8CEAjBWLI93jTCctoncM+SBdFdVv4VbU7DKw9LHSNyxlIMec73IGLFLavpPFT1jy2RBWKpX/yJo0UuTCXYnoIFda5E8TjzX8uceX8LB+4dzrzPsnwABuGHwbUzm+xwAAAABJRU5ErkJggg==");
51-
--fds-acrylic-blur-factor: blur(60px);
5248
}
5349

5450
/* Reduced Motion Support */
@@ -167,29 +163,12 @@
167163
--fds-layer-background-default: hsla(0, 0%, 100%, 50%);
168164
--fds-layer-background-alt: hsl(0, 0%, 100%);
169165

170-
/* Layer on Acrylic */
171-
--fds-layer-on-acrylic-background-default: hsla(0, 0%, 100%, 25%);
172-
--fds-layer-on-accent-acrylic-background-default: var(
173-
--fds-layer-on-acrylic-background-default
174-
);
175-
176166
/* Solid Background */
177167
--fds-solid-background-base: hsl(0, 0%, 95%);
178168
--fds-solid-background-secondary: hsl(0, 0%, 93%);
179169
--fds-solid-background-tertiary: hsl(0, 0%, 98%);
180170
--fds-solid-background-quarternary: hsl(0, 0%, 100%);
181171

182-
/* Mica Background */
183-
/* --fds-mica-background-base: linear-gradient(0deg, hsla(0, 0%, 95%, 0.5), hsla(0, 0%, 95%, 0.5)), hsl(0, 0%, 95%); */
184-
185-
/* Acrylic Background */
186-
--fds-acrylic-background-default: transparent, rgba(252, 252, 252, 85%);
187-
--fds-acrylic-background-base: transparent, rgba(243, 243, 243, 90%);
188-
189-
/* Accent Acrylic Background */
190-
/* --fds-accent-acrylic-background-base: url("NoiseAsset_256.png"), linear-gradient(0deg, rgba(153, 235, 255, 80%), rgba(153, 235, 255, 80%)), rgba(153, 235, 255, 90%); */
191-
/* --fds-accent-acrylic-background-default: url("NoiseAsset_256.png"), linear-gradient(0deg, rgba(153, 235, 255, 80%), rgba(153, 235, 255, 80%)), rgba(153, 235, 255, 90%); */
192-
193172
/* System */
194173
--fds-system-attention: hsl(209, 100%, 36%);
195174
--fds-system-success: hsl(120, 78%, 27%);
@@ -335,37 +314,12 @@
335314
--fds-layer-background-default: hsla(0, 0%, 23%, 30%);
336315
--fds-layer-background-alt: hsla(0, 0%, 100%, 5.38%);
337316

338-
/* Layer on Acrylic */
339-
--fds-layer-on-acrylic-background-default: hsla(0, 0%, 100%, 3.59%);
340-
--fds-layer-on-accent-background-default: var(--fds-layer-on-acrylic-background-default);
341-
342317
/* Solid Background */
343318
--fds-solid-background-base: hsl(0, 0%, 13%);
344319
--fds-solid-background-secondary: hsl(0, 0%, 11%);
345320
--fds-solid-background-tertiary: hsl(0, 0%, 16%);
346321
--fds-solid-background-quarternary: hsl(0, 0%, 17%);
347322

348-
/* Mica Background */
349-
/* --fds-mica-background-base: linear-gradient(0deg, rgb(32, 32, 32, 0.8), rgb(32, 32, 32, 0.8)), #202020; */
350-
351-
/* Acrylic Background */
352-
--fds-acrylic-background-default: linear-gradient(
353-
0deg,
354-
rgb(44, 44, 44, 15%),
355-
rgb(44, 44, 44, 15%)
356-
),
357-
rgba(44, 44, 44, 96%);
358-
--fds-acrylic-background-base: linear-gradient(
359-
0deg,
360-
rgb(32, 32, 32, 50%),
361-
rgb(32, 32, 32, 50%)
362-
),
363-
rgba(32, 32, 32, 96%);
364-
365-
/* Accent Acrylic Background */
366-
/* --fds-accent-acrylic-background-default: url("NoiseAsset_256.png"), linear-gradient(0deg, rgb(0, 120, 212, 80%), rgb(0, 120, 212, 80%)), rgb(0, 120, 212, 80%); */
367-
/* --fds-accent-acrylic-background-base: url("NoiseAsset_256.png"), linear-gradient(0deg, rgba(0, 63, 255, 80%), rgba(0, 63, 255, 80%)), rgb(0, 63, 255, 80%); */
368-
369323
/* System */
370324
--fds-system-attention: hsl(199, 100%, 69%);
371325
--fds-system-success: hsl(113, 51%, 58%);

‎Documents/Website/src/components/Footer/Footer.astro‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
---
2+
import './Footer.css';
3+
---
4+
5+
<footer>
6+
<p>NanaZip, with ❤️ by <a href="https://m2team.org">M2-Team</a> and contributors.</p>
7+
<p>
8+
Note: NanaZip.org is the only official website for NanaZip.
9+
Any other websites claiming to be NanaZip are fake.
10+
We are not responsible for content on those websites.
11+
</p>
12+
</footer>

‎Documents/Website/src/components/Footer/Footer.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
footer {
2+
background-color: var(--fds-card-stroke-default-solid);
3+
border-top: 1px solid var(--fds-surface-stroke-flyout);
4+
padding: 8px 32px;
5+
margin-top: 16px;
6+
}

0 commit comments

Comments
 (0)