web/website
8
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Customize colors and images #15

Merged
tahadostifam merged 5 commits from customize_colors_and_images into main 2024-04-04 19:17:14 -04:00
Conversation 1 Commits 5 Files changed 17 +774 -925
17 changed files with 774 additions and 925 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

80
README.md
View file

@ -1,79 +1,3 @@
<div align="center">
<img src="logo-white.png#gh-dark-mode-only" height="40">
<img src="logo.png#gh-light-mode-only" height="40">
# ParchLinux Official Website
<hr />
<p>This source code is distributed under the <a href="LICENSE">AGPL 3.0</a>
license, while Vanilla OS is a product of <a href="//fabricators.ltd" target="_blank">fabricators.ltd</a>.
Please note that all assets on this website are owned by fabricators.ltd and
the Vanilla OS Contributors Team.</p>
</div>
## Development
### CSS Convention
Our framework follows the [BEM (Block, Element, Modifier)](https://en.bem.info/methodology/quick-start/)
convention for CSS classes.
Colors are defined in the `assets/css/colors/default.css` and `assets/css/colors/dark.css`
files, they must be unique and not overlap with each other.
Each new component (block) must be defined in a separate file in the `assets/css/components`
directory and must follow the following structure:
```css
.block {
/* Color Variables */
--block-color: var(--color-primary);
--block-element-color: var(--color-secondary);
}
.block {
/* Block Styles */
background-color: var(--block-color);
}
.block-element {
/* Element Styles */
background-color: var(--block-element-color);
width: 100px;
height: 100px;
}
.block--modifier {
/* Modifier Styles */
width: 200px;
height: 200px;
}
/* Media Queries */
```
### Build and Run
To run the Vanilla OS website locally, you need to have [Vue.js](https://vuejs.org/) and
[Vite](https://vitejs.dev/) installed.
#### Build articles index
```bash
npm run generate-articles
```
#### Run the website locally
This will also build the articles index.
```bash
npm run dev
```
## Production Build
This will also build the articles index.
```bash
npm run build
```
No details for now.

4
package-lock.json generated
View file

@ -1,11 +1,11 @@
{
"name": "vanillaos-website",
"name": "parchlinux-website",
"version": "2.0.0",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "vanillaos-website",
"name": "parchlinux-website",
"version": "2.0.0",
"dependencies": {
"@types/marked": "^5.0.1",

2
package.json
View file

@ -1,5 +1,5 @@
{
"name": "vanillaos-website",
"name": "parchlinux-website",
"version": "2.0.0",
"type": "module",
"private": true,

13
public/assets/css/colors/dark.css
View file

@ -1,5 +1,10 @@
@media (prefers-color-scheme:dark) {
:root {
/* ParchLinux Colors */
--parch-color: linear-gradient(90deg, #3b82f6 0%, #382dbd 100%);
--parch-hover-color: linear-gradient(90deg, #4075c9 0%, #291db4 100%);
--parch-text-color: #f0f3f7;
/* Generic Colors */
--generic-green-1: #26D959;
--generic-gree-2: #20A746;
@ -50,16 +55,16 @@
--text-color: #c8c8c8;
--text-color-deep: #ffffff;
--text-color-dimmed: #8f8f8f;
--text-color-alt: #1e1e1e;
--text-color-alt: #0d0d0d;
--body-bg-color: var(--text-color-alt);
--secondary-bg-color: #2c2c2c;
--secondary-bg-color-alt: #262626;
--secondary-bg-color: #1f1f1f;
--secondary-bg-color-alt: #141414;
--primary-bg-color: #ffffff;
--dark-bg-color: var(--body-bg-color);
--dark-color: var(--text-color);
--light-bg-color: #ffffff;
--light-color: #232220;
--backdrop-bg-color: #1e1e1ed6;
--backdrop-bg-color: #0d0d0d;
--link-color: #ebebeb;
--link-hover-color: #0f6db5;
--link-focus-color: #99a1e2;

4
public/assets/css/colors/default.css
View file

@ -19,7 +19,7 @@
--accent-yellow-bg-color-light: #FFF6E5;
--accent-yellow-bg-color-deep: #ccb892;
--accent-yellow-text-color: #221d15;
--accent-blue-bg-color: #C2CDD8;
--accent-blue-bg-color: #317bf7;
--accent-blue-bg-color-vivid: #3c7bc2;
--accent-blue-bg-color-light: #d3dbe4;
--accent-blue-bg-color-deep: #b2bbc5;
@ -72,4 +72,4 @@
.on-dark {
display: none;
}
}
}

11
public/assets/css/components/btn.css
View file

@ -1,8 +1,10 @@
.btn {
--btn-bg-color: var(--secondary-bg-color);
--btn-color: var(--text-color);
--btn-color: var(--parch-color);
--btn-primary-bg-color: var(--primary-bg-color);
--btn-primary-color: var(--text-color-alt);
--btn-brown-bg-color: var(--accent-brown-bg-color-vivid);
--btn-brown-color: var(--accent-brown-bg-color-light);
--btn-link-hover-color: var(--link-hover-color);
--btn-circle-hover-bg-color: var(--secondary-bg-color-alt);
--btn-secondary-hover-bg-color: var(--primary-bg-color);
@ -21,7 +23,7 @@
text-decoration: none;
font-size: 18px;
cursor: pointer;
/* color: var(--btn-color); */
color: var(--btn-color);
border: 0;
}
@ -30,6 +32,11 @@
background-color: var(--btn-primary-bg-color);
}
.btn.btn--brown {
color: var(--btn-brown-color);
background-color: var(--btn-brown-bg-color);
}
.btn--big {
font-size: 29px;
padding: 23px 38px;

11
public/assets/css/components/card.css
View file

@ -2,15 +2,18 @@
--card-bg-color: var(--body-bg-color);
--card-bg-dark: var(--dark-bg-color);
--card-color-dark: var(--dark-color);
--card-bg-light: var(--light-bg-color);
--card-color-light: var(--light-color);
--card-color: var(--text-color);
--card-type-adv-bg-color: var(--accent-yellow-bg-color);
--card-type-adv-color: var(--accent-blue-text-color);
--card-type-funnyletter-bg-color: var(--accent-blue-bg-color);
--card-type-funnyletter-color: var(--accent-blue-text-color);
--card-type-dev-bg-color: var(--accent-brown-bg-color);
--card-type-dev-color: var(--accent-brown-text-color);
--card-green-bg-color: var(--accent-green-bg-color);
--card-green-color: var(--accent-green-text-color);
--card-blue-bg-color: var(--accent-blue-bg-color);
@ -23,6 +26,7 @@
--card-purple-color: var(--accent-purple-text-color);
--card-red-bg-color: var(--accent-red-bg-color);
--card-red-color: var(--accent-red-text-color);
--card-clickable-hover-bg-color: var(--secondary-bg-color-alt);
--card-clickable-green-hover-bg-color: var(--accent-green-bg-color-deep);
--card-clickable-blue-hover-bg-color: var(--accent-blue-bg-color-deep);
@ -184,6 +188,7 @@
.card.card--clickable {
text-decoration: none;
cursor: pointer;
background-color: var;
}
.card.card--clickable:hover {
@ -200,8 +205,8 @@
}
.card.card--blue {
background-color: var(--card-blue-bg-color);
color: var(--card-blue-color);
background: var(--parch-color);
color: var(--parch-text-color);
}
.card.card--clickable.card--blue:hover {
@ -356,4 +361,4 @@
font-size: 24px;
line-height: 1.35;
}
}
}

10
public/assets/css/components/hero.css
View file

@ -1,5 +1,5 @@
.hero {
--hero-heading-color: var(--accent-yellow-bg-color-vivid);
--hero-heading-color: var(--parch-color);
--hero-heading-sub-color: var(--text-color);
--hero-gn-purple-color: var(--text-color-alt);
--hero-gn-purple-start: #201026;
@ -7,7 +7,11 @@
}
.hero-heading {
color: var(--hero-heading-color);
padding-top: 15px;
background: var(--hero-heading-color);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.hero-wrapper {
@ -237,4 +241,4 @@
display: flex;
align-items: center;
}
}
}

75
public/assets/images/brand/vanillaos-logo-dark.svg Normal file → Executable file
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 3.9 KiB

129
public/assets/images/brand/vanillaos-logo-icon.svg Normal file → Executable file
View file

@ -1,59 +1,74 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 330 307" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-miterlimit:1;">
<g transform="matrix(1,0,0,1,-146.427,-22.3022)">
<g transform="matrix(0.91547,-0.0630144,0.0630144,0.91547,15.0287,30.1216)">
<g transform="matrix(1,0,0,1,0.276988,-1.52894)">
<g transform="matrix(0.999951,-0.00988581,0.00988581,0.999951,32.8135,5.61227)">
<path d="M316.082,219.063C355.126,227.798 376.682,243.856 381.105,249.436C385.528,255.017 400.208,275.896 406.138,302.716C409.319,317.102 411.294,335.187 412.065,356.972C401.67,353.91 390.871,352.166 379.669,351.741C343.505,350.367 311.968,343.822 292.199,316.822C279.02,298.822 268.23,265.397 259.828,216.548C281.488,214.68 300.239,215.518 316.082,219.063Z" style="fill:rgb(251,189,78);fill-rule:nonzero;"/>
<clipPath id="_clip1">
<path d="M316.082,219.063C355.126,227.798 376.682,243.856 381.105,249.436C385.528,255.017 400.208,275.896 406.138,302.716C409.319,317.102 411.294,335.187 412.065,356.972C401.67,353.91 390.871,352.166 379.669,351.741C343.505,350.367 311.968,343.822 292.199,316.822C279.02,298.822 268.23,265.397 259.828,216.548C281.488,214.68 300.239,215.518 316.082,219.063Z" clip-rule="nonzero"/>
</clipPath>
<g clip-path="url(#_clip1)">
<path d="M380,326C331.803,287.134 318.115,266.34 273.5,217.384" style="fill:none;stroke:rgb(253,220,113);stroke-width:15.26px;"/>
</g>
</g>
<g transform="matrix(0.987788,-0.155803,0.155803,0.987788,17.7474,50.9877)">
<path d="M289.816,169.32C316.928,139.898 341.621,129.279 348.667,128.245C355.712,127.211 381.135,124.958 407.32,133.255C421.365,137.705 438.009,145.051 457.252,155.292C449.397,162.757 442.48,171.231 436.503,180.714C417.205,211.33 395.749,235.352 362.479,238.944C340.299,241.339 305.963,233.942 259.472,216.755C268.701,197.07 278.815,181.259 289.816,169.32Z" style="fill:rgb(251,189,78);fill-rule:nonzero;"/>
<clipPath id="_clip2">
<path d="M289.816,169.32C316.928,139.898 341.621,129.279 348.667,128.245C355.712,127.211 381.135,124.958 407.32,133.255C421.365,137.705 438.009,145.051 457.252,155.292C449.397,162.757 442.48,171.231 436.503,180.714C417.205,211.33 395.749,235.352 362.479,238.944C340.299,241.339 305.963,233.942 259.472,216.755C268.701,197.07 278.815,181.259 289.816,169.32Z" clip-rule="nonzero"/>
</clipPath>
<g clip-path="url(#_clip2)">
<path d="M260.776,212.519C311.911,192.51 349.097,177.252 409.888,165" style="fill:none;stroke:rgb(253,220,113);stroke-width:15.26px;"/>
</g>
</g>
<g transform="matrix(0.987788,-0.155803,0.155803,0.987788,18.2027,47.7425)">
<path d="M233.607,167.149C221.715,128.948 224.887,102.256 227.52,95.64C230.153,89.024 240.933,65.889 261.226,47.378C272.111,37.449 286.803,26.72 305.304,15.191C307.832,25.728 311.704,35.958 316.919,45.881C333.758,77.916 343.807,108.517 330.258,139.114C321.225,159.513 297.63,185.53 259.473,217.167C247.054,199.322 238.432,182.65 233.607,167.149Z" style="fill:rgb(251,189,78);fill-rule:nonzero;"/>
<clipPath id="_clip3">
<path d="M233.607,167.149C221.715,128.948 224.887,102.256 227.52,95.64C230.153,89.024 240.933,65.889 261.226,47.378C272.111,37.449 286.803,26.72 305.304,15.191C307.832,25.728 311.704,35.958 316.919,45.881C333.758,77.916 343.807,108.517 330.258,139.114C321.225,159.513 297.63,185.53 259.473,217.167C247.054,199.322 238.432,182.65 233.607,167.149Z" clip-rule="nonzero"/>
</clipPath>
<g clip-path="url(#_clip3)">
<path d="M259.916,215.675C265.752,162.098 273,111.046 291.088,59" style="fill:none;stroke:rgb(253,220,113);stroke-width:15.26px;"/>
</g>
</g>
<g transform="matrix(0.987788,-0.155803,0.155803,0.987788,17.2986,50.1738)">
<path d="M203.582,214.717C164.56,205.883 143.044,189.771 138.636,184.179C134.227,178.588 119.599,157.672 113.737,130.837C110.592,116.443 108.662,98.353 107.947,76.567C118.334,79.655 129.128,81.426 140.329,81.879C176.49,83.344 208.01,89.968 227.711,117.018C240.844,135.051 251.55,168.502 259.829,217.372C238.164,219.186 219.415,218.301 203.582,214.717Z" style="fill:rgb(251,189,78);fill-rule:nonzero;"/>
<clipPath id="_clip4">
<path d="M203.582,214.717C164.56,205.883 143.044,189.771 138.636,184.179C134.227,178.588 119.599,157.672 113.737,130.837C110.592,116.443 108.662,98.353 107.947,76.567C118.334,79.655 129.128,81.426 140.329,81.879C176.49,83.344 208.01,89.968 227.711,117.018C240.844,135.051 251.55,168.502 259.829,217.372C238.164,219.186 219.415,218.301 203.582,214.717Z" clip-rule="nonzero"/>
</clipPath>
<g clip-path="url(#_clip4)">
<path d="M141,110C179.372,149.706 212.972,181.653 259.39,213.002" style="fill:none;stroke:rgb(253,220,113);stroke-width:15.26px;"/>
</g>
</g>
<g transform="matrix(0.973079,-0.230473,0.230473,0.973079,13.8795,74.1566)">
<path d="M229.723,264.525C202.537,293.879 177.817,304.436 170.769,305.452C163.721,306.468 138.292,308.657 112.128,300.295C98.094,295.809 81.469,288.421 62.252,278.132C70.126,270.687 77.064,262.23 83.065,252.762C102.44,222.194 123.956,198.227 157.236,194.718C179.422,192.379 213.739,199.862 260.186,217.167C250.908,236.828 240.754,252.614 229.723,264.525Z" style="fill:rgb(251,189,78);fill-rule:nonzero;"/>
<clipPath id="_clip5">
<path d="M229.723,264.525C202.537,293.879 177.817,304.436 170.769,305.452C163.721,306.468 138.292,308.657 112.128,300.295C98.094,295.809 81.469,288.421 62.252,278.132C70.126,270.687 77.064,262.23 83.065,252.762C102.44,222.194 123.956,198.227 157.236,194.718C179.422,192.379 213.739,199.862 260.186,217.167C250.908,236.828 240.754,252.614 229.723,264.525Z" clip-rule="nonzero"/>
</clipPath>
<g clip-path="url(#_clip5)">
<path d="M105.533,267.72C164.488,254.56 200.133,237.023 252.962,210.081" style="fill:none;stroke:rgb(253,220,113);stroke-width:15.26px;"/>
</g>
</g>
</g>
<g transform="matrix(0.972408,-0.233289,0.233289,0.972408,7.17955,78.1919)">
<path d="M310.717,217.052C308.226,226.349 294.372,222.695 290.762,233.871C287.625,243.585 283.022,251.553 273.726,254.044C264.429,256.535 256.107,248.222 247.23,245.844C238.353,243.465 230,247.309 223.195,240.504C216.389,233.699 218.41,226.864 216.031,217.986C213.652,209.109 206.244,200.853 208.735,191.557C211.226,182.261 221.734,180.742 228.233,174.243C234.731,167.745 237.35,155.473 246.646,152.982C255.943,150.491 262.537,159.116 271.415,161.495C280.292,163.873 291.762,160.723 298.567,167.528C305.373,174.334 300.542,184.775 302.921,193.652C305.3,202.529 313.208,207.756 310.717,217.052Z" style="fill:rgb(253,220,113);fill-rule:nonzero;"/>
<path d="M288.281,233.884C282.128,240.127 271.322,228.583 265.106,233.457C258.753,238.438 255.746,245.972 247.931,243.029C240.808,240.346 247.068,228.133 242.133,222.798C237.197,217.462 221.109,221.903 220.205,212.958C219.265,203.651 233.604,207.892 236.219,198.872C238.834,189.85 224.773,179.91 230.361,174.741C235.948,169.573 246.929,180.465 254.018,178.859C261.107,177.252 266.72,162.326 273.99,164.581C281.26,166.836 274.716,181.789 279.651,187.125C284.587,192.46 301.05,189.222 302.733,196.645C304.415,204.069 283.561,203.183 281.408,210.126C279.255,217.068 293.624,228.463 288.281,233.884Z" style="fill:rgb(254,238,209);fill-rule:nonzero;"/>
</g>
</g>
</g>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="512"
height="512"
viewBox="0 0 512 512"
version="1.1"
id="svg5"
inkscape:export-filename="Parch_Profile_BW1.png"
inkscape:export-xdpi="192"
inkscape:export-ydpi="192"
inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
sodipodi:docname="Parch_Profile_BW1.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview7"
pagecolor="#505050"
bordercolor="#ffffff"
borderopacity="1"
inkscape:showpageshadow="0"
inkscape:pageopacity="0"
inkscape:pagecheckerboard="1"
inkscape:deskcolor="#505050"
inkscape:document-units="px"
showgrid="false"
inkscape:zoom="0.98373095"
inkscape:cx="142.31534"
inkscape:cy="249.05184"
inkscape:window-width="1366"
inkscape:window-height="705"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1"
inkscape:current-layer="layer1" />
<defs
id="defs2">
<linearGradient
inkscape:collect="always"
id="linearGradient962">
<stop
style="stop-color:#090180;stop-opacity:1;"
offset="0"
id="stop958" />
<stop
style="stop-color:#0081c0;stop-opacity:1;"
offset="1"
id="stop960" />
</linearGradient>
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient962"
id="linearGradient964"
x1="203.53801"
y1="319.10983"
x2="282.91855"
y2="239.35014"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(2.1450176,0,0,2.1450176,-293.12452,-293.12452)" />
</defs>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
<path
style="fill:url(#linearGradient964);fill-opacity:1;stroke:none;stroke-width:5.07492;stroke-linecap:round;stroke-dasharray:none;stroke-opacity:1"
d="M 251.27428,489.6492 C 210.96584,478.77726 173.38881,444.52155 143.46809,391.37169 l -6.65397,-11.81985 7.2211,-12.88357 c 10.23231,-18.25614 29.13435,-42.79729 49.51852,-64.29157 9.63386,-10.15852 17.27136,-18.71484 16.9722,-19.01399 -0.29915,-0.29915 -19.39066,11.94949 -42.42562,27.21918 -23.03489,15.26973 -42.62023,27.76313 -43.52294,27.76313 -1.78592,0 -4.63937,-9.51177 -8.45795,-28.194 -1.3433,-6.57199 -2.40903,-27.23432 -2.36826,-45.91624 0.0813,-37.1628 4.02817,-62.01124 14.4647,-91.06027 6.67254,-18.57249 20.7197,-46.86718 23.26758,-46.86718 1.04392,0 15.51965,6.48465 32.16825,14.41032 16.64862,7.92568 31.16749,14.41033 32.26423,14.41033 1.09676,0 -4.8203,-7.45155 -13.14898,-16.55901 -8.32868,-9.10747 -19.64852,-21.61906 -25.15517,-27.80351 l -10.01206,-11.244511 17.21726,-17.67423 c 29.46484,-30.246911 62.60028,-49.309034 102.01792,-58.68877 15.4592,-3.678662 22.37625,-4.159554 46.95089,-3.264166 15.85136,0.577554 33.45254,2.257674 39.11374,3.733625 l 10.29309,2.683495 -16.46894,1.309536 c -21.28328,1.692403 -36.09305,8.574132 -49.92428,23.198626 -12.4007,13.111847 -17.71682,23.01134 -21.06271,39.222194 -3.92556,19.019231 0.31744,41.451491 12.32983,65.185741 2.55115,5.04062 13.93555,23.52363 25.29864,41.07335 11.3631,17.54974 26.15248,42.49186 32.86522,55.427 l 12.20505,23.51842 -4.82655,3.76047 c -2.65463,2.06825 -17.79588,12.72877 -33.64726,23.69003 -15.85134,10.96125 -29.20662,20.22404 -29.67843,20.584 -3.6285,2.76844 5.50122,2.13071 30.94058,-2.1613 48.70514,-8.21725 48.66832,-8.21432 49.96897,-3.97532 7.07303,23.05158 9.36492,68.33612 4.40238,86.98383 -10.99234,41.30556 -44.9516,74.89187 -86.43063,85.48148 -15.00575,3.83101 -43.7617,3.85098 -57.89021,0.0403 z"
id="path9138" />
</g>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.2 KiB

After

Width:  |  Height:  |  Size: 3.9 KiB

3
src/App.vue
View file

@ -4,7 +4,6 @@
<script lang="ts">
import { defineComponent } from "vue";
import { useHead } from 'unhead'
export default defineComponent({
name: "App",
@ -14,4 +13,4 @@ export default defineComponent({
};
},
});
</script>
</script>

11
src/components/Footer.vue
View file

@ -1,5 +1,6 @@
<template>
<footer class="siteFooter siteFooter--has-floatNotice">
<!-- class="siteFooter--has-floatNotice" -->
<footer class="siteFooter ">
<section class="siteFooter-wrapper container">
<article class="siteFooter-header">
<div class="siteFooter-logo">
@ -52,7 +53,7 @@
<li><router-link :to="{ name: 'components-lifecycle' }">Components Lifecycle</router-link></li>
<li><router-link :to="{ name: 'nerd-info' }">Information for Nerds</router-link></li>
<li class="spacer"></li>
<li><b>Get Vanilla OS</b></li>
<li><b>Get Parch OS</b></li>
<li><router-link :to="{ name: 'download' }">Download</router-link></li>
<li><router-link :to="{ name: 'download' }">System Requirements</router-link></li>
<!--<li><router-link :to="{ name: 'download' }">Release Notes</router-link></li>-->
@ -61,9 +62,9 @@
</section>
</footer>
<float-notice v-if="showFloatNotice" />
<!-- <float-notice v-if="showFloatNotice" /> -->
</template>
<script lang="ts">
import { defineComponent } from "vue";
@ -75,4 +76,4 @@ export default defineComponent({
}
}
});
</script>
</script>

4
src/components/NotMailNotChimp.vue
View file

@ -4,7 +4,7 @@
<div class="modal-wrapper card">
<div class="card-header">
<h3>Subscribe to the Newsletter</h3>
<p>Get the latest news and updates from Vanilla OS.</p>
<p>Get the latest news and updates from Parch Linux.</p>
</div>
<form
action="https://vanillaos.us9.list-manage.com/subscribe/post?u=a988825202ae676e78fd240c5&amp;id=ef015d988e&amp;f_id=00c618e1f0"
@ -47,7 +47,7 @@
</div>
</div>
</template>
<script lang="ts">
import { defineComponent } from "vue";

2
src/views/Download.vue
View file

@ -82,7 +82,7 @@
</div>
</div>
</div>
<div class="card card--type-adv card--type-dev">
<div class="card card--blue">
<div class="card-header">
<h4>Vanilla OS</h4>
<h2>Developer Builds</h2>

5
src/views/Help.vue
View file

@ -3,7 +3,7 @@
<card v-for="(item, index) in helpItems" :key="index" :item="item" />
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
@ -69,11 +69,10 @@ export default defineComponent({
icon: 'support',
title: 'Enterprise Support',
description: 'Get enterprise support for Vanilla OS from fabricatorsltd.',
extraClasses: ['card--green']
extraClasses: ['card--blue']
},
],
};
},
});
</script>

46
src/views/Home.vue
View file

@ -7,16 +7,23 @@
src="/assets/images/backgrounds/vos-orchid-laptop-frame-dark.svg" alt="Vanilla OS 2 Orchid" />
<article class="hero-content">
<header class="hero-heading">
<h2>Vanilla OS <span>is your next Operating System.</span></h2>
<h2>Parch Linux <span>is your next Operating System.</span></h2>
</header>
<div class="hero-footer">
<div class="flexList">
<router-link :to="{ name: 'download' }" class="btn btn--primary btn--big">
<span class="mdi material-icons-outlined">file_download</span>
<span>Download Now</span>
</router-link>
<div class="flex flex-row">
<router-link :to="{ name: 'download' }" class="btn btn--primary" style="margin-right: 12px;">
<span class="mdi material-icons-outlined">file_download</span>
<span>Download Now</span>
</router-link>
<a href="https://daramet.com/parchlinux" class="btn">
<span class="mdi material-icons-outlined">coffee</span>
<span>Donate</span>
</a>
</div>
<div class="text text--dimmed">
<small>Vanilla OS works out of the box on a large set of devices,
<small>Parch Linux works out of the box on a large set of devices,
<a href="https://docs.vanillaos.org/handbook/en/installation" target="_blank">
learn how to install it.
</a>
@ -29,7 +36,6 @@
</section>
<nav class="navigationBar" aria-label="go to sections">
<h2 class="text text--dimmed" aria-labelledby=""> Vanilla OS is</h2>
<ul>
<li :class="{ 'active': activeSection === 'work' }">
<button @click="scrollTo('#work')">Work</button>
@ -66,7 +72,8 @@
<p>Vanilla OS is designed to be a reliable and productive operating system for your daily work. </p>
<p>The desktop environment is perfect for your daily tasks, thanks to its clean and intuitive interface.
Everything is setup so that you can start working, and focus on what matters.</p>
<p>Vanilla OS is ready to meet your needs whether you are a developer, designer, or student, thanks to a wide
<p>Vanilla OS is ready to meet your needs whether you are a developer, designer, or student, thanks to a
wide
range of applications.</p>
</div>
</div>
@ -101,7 +108,7 @@
</div>
</section>
<section class="hero hero--inverted hero--big" id="develop">
<section style="padding-bottom: 0px;" class="hero hero--inverted hero--big" id="develop">
<div class="hero-wrapper container">
<img class="hero-image onFocus" data-focus-class="fadeInRight" src="/assets/images/backgrounds/apx-console.svg"
alt="Develop with maximum flexibility." />
@ -114,7 +121,8 @@
<div class="text text--spaced">
<p>No matter what your development needs are, Vanilla OS is the optimal choice because it provides access to
the widest range of tooling options.</p>
<p>Apx is a tool that allows you to generate work environments based on any Linux distribution and seamlessly
<p>Apx is a tool that allows you to generate work environments based on any Linux distribution and
seamlessly
integrates them with the system in a convenient way, enabling you to leverage the full potential of all
distributions directly on Vanilla OS.</p>
<p>Depending on your needs, you can create your own work environments and share them with colleagues and
@ -125,20 +133,7 @@
</div>
</section>
<section class="hero hero--big hero--bg-center hero--extra-margin" id="access">
<article class="hero-wrapper container">
<img class="hero-image onFocus" data-focus-class="fadeInZoom" src="/assets/images/backgrounds/apps-overview.png"
alt="Access the largest set of applications." />
<div class="hero-content">
<header class="hero-heading">
<h2 class="color--access-1">Access</h2>
<b class="color--access-2">the largest set of applications.</b>
</header>
</div>
</article>
</section>
<section class="hero hero--big" id="solid">
<section class="hero hero--big" stlye="padding: 0px;" id="solid">
<div class="hero-wrapper container">
<img class="hero-image onFocus" data-focus-class="fadeInLeft" src="/assets/images/backgrounds/solid-circuit.svg"
alt="Solid as a rock." />
@ -176,7 +171,8 @@
configure your system to your specific needs, while still having a stable environment.</p>
<p>Vib is a tool to create OCI images for Vanilla OS. It allows you to build upon our core image, giving you
the option to add a variety of customization options, packages, and modules.</p>
<p>It is not only limited to our image however, you can utilize an image based on any other Linux distribution
<p>It is not only limited to our image however, you can utilize an image based on any other Linux
distribution
instead, providing more versatility.</p>
<router-link :to="{ name: 'roadmap' }" class="btn btn--link btn--link-2 btn--inline">
<span>Starting from Orchid</span>

1289
yarn.lock
View file

File diff suppressed because it is too large Load diff