Skip to content

Commit

Permalink
website: polish landing page (vikejs#2007)
Browse files Browse the repository at this point in the history
  • Loading branch information
brillout authored Dec 6, 2024
1 parent bc4a2b4 commit 2ae5ebc
Show file tree
Hide file tree
Showing 22 changed files with 553 additions and 457 deletions.
7 changes: 6 additions & 1 deletion biome.json
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,12 @@
"semicolons": "asNeeded",
"lineWidth": 120,
"quoteStyle": "single",
"trailingComma": "none"
"trailingCommas": "none"
}
},
"css": {
"formatter": {
"quoteStyle": "single"
}
},
"linter": {
Expand Down
4 changes: 2 additions & 2 deletions docs/docpress.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ export default {
faviconUrl: vikeIcon,
headings,
headingsDetached,
tagline: 'Next.js/Nuxt alternative. Flexible, reliable, clutter-free, fast, community-driven.',
tagline: 'Like Next.js & Nuxt but with unprecedented flexibility, dependability, and control.',
twitterHandle: '@vike_js',
websiteUrl: 'https://vike.dev',
sponsorGithubAccount: 'vikejs',
Expand All @@ -21,7 +21,7 @@ export default {
bannerUrl: 'https://vike.dev/banner.png',
// i18n: true,
pressKit: true,
navMaxWidth: 1100,
navMaxWidth: 1140,
navLogoSize: 45,
navLogoTextStyle: {
letterSpacing: '0.01em'
Expand Down
2 changes: 1 addition & 1 deletion docs/pages/head-tags/TableStyle.css
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
#head-settings-table ul {
margin: 5px !important
margin: 5px !important;
}
68 changes: 37 additions & 31 deletions docs/pages/index/components/Button/button.css
Original file line number Diff line number Diff line change
Expand Up @@ -8,25 +8,27 @@
}

@media screen and (max-width: 768px) {
.landingpage-button {
padding: 8px 12px;
font-size: 14px;
}
.landingpage-button {
padding: 8px 12px;
font-size: 14px;
}
}

.landingpage-button-fullWidth {
width: 100%;
justify-content: center;
width: 100%;
justify-content: center;
}

/* default */
.landingpage-button-default {
background-color: #000000D0;
color: #fff;
transition: background-color 0.2s;
background-color: #000000d0;
color: #fff;
transition: background-color 0.2s;
}
.landingpage-button-default:hover {
@media (hover: hover) and (pointer: fine) {
.landingpage-button-default:hover {
background-color: #000000;
}
}
.landingpage-button-big {
font-size: 1.08em;
Expand All @@ -37,36 +39,40 @@

/* secondary */
.landingpage-button-secondary {
background-color: #E5E5EB;
color: #000000E0;
transition: background-color 0.2s;
background-color: #e5e5eb;
color: #000000e0;
transition: background-color 0.2s;
}
.landingpage-button-secondary:hover {
background-color: #D8D8DF;
@media (hover: hover) and (pointer: fine) {
.landingpage-button-secondary:hover {
background-color: #d8d8df;
}
}

/* ghost */
.landingpage-button-ghost {
background-color: transparent;
color: #000000A0;
transition: all 0.2s;
background-color: transparent;
color: #000000a0;
transition: all 0.2s;
}
.landingpage-button-ghost:hover {
background-color: #E5E5EB;
@media (hover: hover) and (pointer: fine) {
.landingpage-button-ghost:hover {
background-color: #e5e5eb;
color: #000;
}
}

/* text */
.landingpage-button-text {
height: 36px;
font-size: 14px;
display: flex;
align-items: center;
background-color: transparent;
color: rgba(0,0,0,0.5);
font-weight: 500;
/* color: #1810FF; */
opacity: 0.8;
padding: 0;
gap: 8px;
height: 36px;
font-size: 14px;
display: flex;
align-items: center;
background-color: transparent;
color: rgba(0, 0, 0, 0.5);
font-weight: 500;
/* color: #1810FF; */
opacity: 0.8;
padding: 0;
gap: 8px;
}
112 changes: 57 additions & 55 deletions docs/pages/index/components/Chip/chip.css
Original file line number Diff line number Diff line change
@@ -1,73 +1,75 @@
.landingpage-chip {
grid-column: 4 / span 6;
position: relative;
grid-column: 4 / span 6;
position: relative;
}
.landingpage-chip-right {
grid-column: 2 / span 2;
grid-column: 2 / span 2;
}
.landingpage-chip-left {
grid-column: 10 / span 2;
grid-column: 10 / span 2;
}
.landingpage-chip-feature {
color: #A8AFB9;
font-size: 12px;
text-align: center;
text-transform: uppercase;
margin: 2px;
background-color: #2A3346A0;
width: 100%;
height: calc(100% - 4px);
display: flex;
align-items: center;
justify-content: center;
border-radius: 5px;
transition: all 0.2s;
cursor: pointer;
color: #a8afb9;
font-size: 12px;
text-align: center;
text-transform: uppercase;
margin: 2px;
background-color: #2a3346a0;
width: 100%;
height: calc(100% - 4px);
display: flex;
align-items: center;
justify-content: center;
border-radius: 5px;
transition: all 0.2s;
cursor: pointer;
}
.landingpage-chip-feature:hover {
@media (hover: hover) and (pointer: fine) {
.landingpage-chip-feature:hover {
background-color: #222;
}
}
.landingpage-chip-info {
margin-bottom: 80px;
margin-bottom: 80px;
}

@media screen and (max-width: 1200px) {
.landingpage-chip {
grid-column: 3 / span 8;
}
.landingpage-chip-right {
grid-column: 1 / span 2;
font-size: 14px;
}
.landingpage-chip-left {
grid-column: 11 / span 2;
font-size: 14px;
}
.landingpage-chip-feature {
font-size: 15px;
}
.landingpage-chip {
grid-column: 3 / span 8;
}
.landingpage-chip-right {
grid-column: 1 / span 2;
font-size: 14px;
}
.landingpage-chip-left {
grid-column: 11 / span 2;
font-size: 14px;
}
.landingpage-chip-feature {
font-size: 15px;
}
}

@media screen and (max-width: 768px) {
.landingpage-chip {
margin-top: 0;
margin-bottom: 0;
grid-column: 1 / span 12;
margin-left: -20px;
margin-right: -20px;
}
.landingpage-chip-right {
display: none;
}
.landingpage-chip-left {
display: none;
}
.landingpage-chip-feature {
font-size: 8px;
color: rgba(255,255,255,0.8);
padding: 0 3px;
}
.landingpage-chip-info {
margin-bottom: 32px;
}
.landingpage-chip {
margin-top: 0;
margin-bottom: 0;
grid-column: 1 / span 12;
margin-left: -20px;
margin-right: -20px;
}
.landingpage-chip-right {
display: none;
}
.landingpage-chip-left {
display: none;
}
.landingpage-chip-feature {
font-size: 8px;
color: rgba(255, 255, 255, 0.8);
padding: 0 3px;
}
.landingpage-chip-info {
margin-bottom: 32px;
}
}
4 changes: 2 additions & 2 deletions docs/pages/index/components/OpenSourceSVG.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ const OpenSourceSVG = () => (
<rect width="272.129" height="141.748" fill="#E3E3E9" fillOpacity="0.4" rx="5.349"></rect>
<path
fill="#000"
d="M93.349 11.679h2.136l3.716 9.071h.137l3.715-9.071h2.137v11.67h-1.675v-8.445h-.109l-3.442 8.428h-1.39l-3.442-8.434h-.108v8.451h-1.675zm16.162 0v11.67h-1.761v-11.67zm1.989 1.515v-1.516h9.032v1.516h-3.642V23.35h-1.755V13.194zm16.842-1.516V23.35h-1.704v-11.67zm2.292 11.671v-8.753h1.704v8.753zm.86-10.103q-.444 0-.763-.297a.96.96 0 0 1-.314-.718q0-.42.314-.718a1.07 1.07 0 0 1 .763-.302q.445 0 .758.302a.94.94 0 0 1 .319.718.96.96 0 0 1-.319.718 1.06 1.06 0 0 1-.758.297m9.695 3.487-1.545.274a1.8 1.8 0 0 0-.307-.565 1.5 1.5 0 0 0-.559-.438q-.353-.171-.883-.171-.723 0-1.208.324-.484.32-.484.827 0 .439.324.706.325.268 1.049.44l1.39.318q1.209.28 1.801.86.593.582.593 1.51 0 .787-.456 1.403-.45.609-1.26.957-.803.348-1.863.348-1.47 0-2.399-.627-.929-.633-1.14-1.795l1.647-.25q.154.642.633.974.478.324 1.248.324.837 0 1.339-.347.501-.354.501-.86a.9.9 0 0 0-.307-.69q-.303-.28-.929-.422l-1.482-.325q-1.226-.279-1.812-.889-.582-.61-.581-1.544 0-.775.433-1.356t1.197-.906q.763-.33 1.749-.33 1.418 0 2.234.615.815.609 1.077 1.635m5.816 6.793q-1.293 0-2.228-.553a3.75 3.75 0 0 1-1.436-1.567q-.501-1.014-.501-2.376 0-1.345.501-2.371a3.9 3.9 0 0 1 1.414-1.601q.911-.576 2.131-.576.74 0 1.436.245.695.245 1.248.77.552.524.872 1.361.319.833.319 2.023v.604h-6.958V18.21h5.288q0-.672-.273-1.191a2.07 2.07 0 0 0-.77-.826q-.49-.303-1.151-.302-.717 0-1.253.353a2.37 2.37 0 0 0-.821.912q-.285.559-.285 1.213v.998q0 .877.308 1.493.313.615.872.94.558.32 1.305.32.483 0 .883-.138a1.836 1.836 0 0 0 1.134-1.111l1.613.29q-.194.714-.696 1.249a3.36 3.36 0 0 1-1.248.826q-.745.29-1.704.29m7.35-5.374v5.197h-1.704v-8.753h1.636v1.425h.108q.302-.696.946-1.117.65-.422 1.635-.422.895 0 1.567.376.673.37 1.043 1.106.37.735.371 1.818v5.567h-1.704v-5.362q0-.952-.496-1.488-.495-.54-1.362-.54-.592 0-1.054.256a1.85 1.85 0 0 0-.724.752q-.262.49-.262 1.185m11.574 5.374q-1.271 0-2.188-.576a3.8 3.8 0 0 1-1.402-1.601q-.49-1.02-.49-2.337 0-1.333.501-2.353a3.84 3.84 0 0 1 1.413-1.601q.912-.576 2.149-.576.996 0 1.778.37.78.366 1.259 1.026.485.662.575 1.545h-1.658q-.137-.616-.627-1.06-.484-.445-1.299-.445-.712 0-1.248.376-.53.37-.826 1.06-.297.684-.296 1.619 0 .957.29 1.652.29.696.821 1.077.536.382 1.259.382.485 0 .878-.177.399-.182.666-.518a1.94 1.94 0 0 0 .382-.81h1.658a3.2 3.2 0 0 1-.552 1.516q-.462.667-1.237 1.049-.77.381-1.806.382m9.19 0q-1.293 0-2.228-.553a3.75 3.75 0 0 1-1.436-1.567q-.501-1.014-.502-2.376 0-1.345.502-2.371a3.9 3.9 0 0 1 1.413-1.601q.912-.576 2.131-.576.741 0 1.436.245.696.245 1.248.77.553.524.872 1.361.32.833.319 2.023v.604h-6.958V18.21h5.289a2.5 2.5 0 0 0-.274-1.191 2.07 2.07 0 0 0-.769-.826q-.49-.303-1.151-.302-.718 0-1.254.353a2.4 2.4 0 0 0-.821.912 2.6 2.6 0 0 0-.284 1.213v.998q0 .877.307 1.493.314.615.872.94.558.32 1.305.32.484 0 .883-.138.399-.142.69-.421t.444-.69l1.613.29q-.194.714-.695 1.249a3.4 3.4 0 0 1-1.248.826q-.747.29-1.704.29"
d="M90.349 11.679h2.136l3.716 9.071h.137l3.715-9.071h2.137v11.67h-1.675v-8.445h-.109l-3.442 8.428h-1.39l-3.442-8.434h-.108v8.451h-1.675zm16.162 0v11.67h-1.761v-11.67zm1.989 1.515v-1.516h9.032v1.516h-3.642V23.35h-1.755V13.194zm15.274 10.155v-11.67h1.761v10.154h5.288v1.516zm8.921 0v-8.753h1.704v8.753zm.861-10.103q-.444 0-.764-.297a.96.96 0 0 1-.313-.718q0-.42.313-.718.32-.302.764-.302t.758.302a.94.94 0 0 1 .319.718.96.96 0 0 1-.319.718 1.06 1.06 0 0 1-.758.297m6.822 10.28q-1.27 0-2.188-.576a3.8 3.8 0 0 1-1.402-1.601q-.49-1.02-.49-2.337 0-1.333.502-2.353a3.84 3.84 0 0 1 1.413-1.601q.912-.576 2.148-.576.998 0 1.778.37.78.366 1.26 1.026a3.1 3.1 0 0 1 .575 1.545h-1.658q-.137-.616-.627-1.06-.484-.445-1.299-.445-.712 0-1.248.376-.53.37-.826 1.06-.297.684-.297 1.619 0 .957.291 1.652.29.696.82 1.077.536.382 1.26.382.484 0 .877-.177.4-.182.667-.518.273-.336.382-.81h1.658a3.2 3.2 0 0 1-.553 1.516 3.2 3.2 0 0 1-1.236 1.049q-.77.381-1.807.382m9.191 0q-1.294 0-2.228-.553a3.75 3.75 0 0 1-1.437-1.567q-.501-1.014-.501-2.376 0-1.345.501-2.371a3.9 3.9 0 0 1 1.414-1.601q.912-.576 2.131-.576.74 0 1.436.245.695.245 1.248.77.552.524.872 1.361.32.833.319 2.023v.604h-6.958V18.21h5.288q0-.672-.273-1.191a2.07 2.07 0 0 0-.77-.826q-.49-.303-1.151-.302-.717 0-1.253.353a2.37 2.37 0 0 0-.821.912q-.285.559-.285 1.213v.998q0 .877.308 1.493.313.615.872.94.558.32 1.305.32.484 0 .883-.138.399-.142.69-.421t.444-.69l1.613.29q-.194.714-.696 1.249a3.36 3.36 0 0 1-1.248.826q-.746.29-1.703.29m7.349-5.374v5.197h-1.704v-8.753h1.636v1.425h.108q.302-.696.946-1.117.65-.422 1.636-.422.894 0 1.567.376a2.5 2.5 0 0 1 1.042 1.106q.37.735.371 1.818v5.567h-1.704v-5.362q0-.952-.496-1.488-.495-.54-1.362-.54-.592 0-1.054.256a1.85 1.85 0 0 0-.724.752q-.262.49-.262 1.185m11.574 5.374q-1.271 0-2.188-.576a3.8 3.8 0 0 1-1.402-1.601q-.49-1.02-.49-2.337 0-1.333.501-2.353a3.85 3.85 0 0 1 1.413-1.601q.912-.576 2.149-.576.997 0 1.778.37.78.366 1.259 1.026a3.1 3.1 0 0 1 .576 1.545h-1.659q-.137-.616-.626-1.06-.484-.445-1.3-.445-.712 0-1.248.376-.53.37-.826 1.06-.297.684-.296 1.619 0 .957.29 1.652.291.696.821 1.077.536.382 1.259.382.485 0 .878-.177.399-.182.667-.518a1.95 1.95 0 0 0 .381-.81h1.659a3.2 3.2 0 0 1-.553 1.516q-.462.667-1.237 1.049-.77.381-1.806.382m9.19 0q-1.293 0-2.228-.553a3.75 3.75 0 0 1-1.436-1.567q-.501-1.014-.502-2.376 0-1.345.502-2.371a3.9 3.9 0 0 1 1.413-1.601q.912-.576 2.131-.576.741 0 1.436.245.696.245 1.248.77.554.524.872 1.361.32.833.319 2.023v.604h-6.957V18.21h5.288q0-.672-.274-1.191a2.07 2.07 0 0 0-.769-.826q-.49-.303-1.151-.302-.719 0-1.254.353a2.37 2.37 0 0 0-.82.912q-.285.559-.285 1.213v.998q0 .877.307 1.493.314.615.872.94.56.32 1.305.32.485 0 .883-.138.399-.142.69-.421t.444-.69l1.613.29q-.194.714-.695 1.249a3.4 3.4 0 0 1-1.248.826q-.747.29-1.704.29"
></path>
<rect width="3.523" height="3.523" x="4.016" y="5.349" fill="#B8B8C5" rx="1.761"></rect>
<rect width="3.523" height="3.523" x="264.777" y="5.349" fill="#B8B8C5" rx="1.761"></rect>
Expand Down Expand Up @@ -39,7 +39,7 @@ const OpenSourceSVG = () => (
<rect width="107.648" height="46.384" x="17.383" y="77.49" fill="#5B55FD" fillOpacity="0.08" rx="5.349"></rect>
<path
fill="#5B55FD"
d="M59.125 97.605v1.653h-5.977v-1.653zm-4.339 10.577V96.38q0-.992.434-1.646a2.66 2.66 0 0 1 1.15-.985q.717-.33 1.556-.33.62 0 1.06.103.442.096.655.18l-.482 1.666q-.144-.042-.372-.097a2.1 2.1 0 0 0-.55-.062q-.752 0-1.075.372-.317.372-.317 1.074v11.527zm6.463 0V97.605h1.99v1.68h.11a2.56 2.56 0 0 1 1.019-1.342 2.9 2.9 0 0 1 1.666-.496 9 9 0 0 1 .875.048v1.97a4 4 0 0 0-.441-.076 4 4 0 0 0-.633-.048q-.73 0-1.302.31a2.31 2.31 0 0 0-1.226 2.072v6.459zm11.621.213q-1.564 0-2.692-.668a4.53 4.53 0 0 1-1.736-1.893q-.605-1.225-.605-2.872 0-1.625.605-2.864.614-1.239 1.708-1.935 1.102-.695 2.575-.695.895 0 1.736.296.84.296 1.508.93.668.633 1.053 1.645.386 1.005.386 2.444v.73H69v-1.542h6.39q0-.812-.33-1.439a2.5 2.5 0 0 0-.93-.999q-.592-.365-1.39-.365-.869 0-1.516.427-.64.42-.991 1.102-.345.675-.345 1.467v1.205q0 1.06.372 1.804.38.743 1.054 1.136.674.385 1.577.385.585 0 1.067-.165.482-.172.833-.509t.537-.834l1.949.352a3.54 3.54 0 0 1-.84 1.508q-.6.64-1.508.998-.903.351-2.059.351m11.38 0q-1.563 0-2.692-.668a4.53 4.53 0 0 1-1.735-1.893q-.606-1.225-.606-2.872 0-1.625.606-2.864.613-1.239 1.707-1.935 1.102-.695 2.576-.695.894 0 1.735.296.84.296 1.508.93.668.633 1.053 1.645.386 1.005.386 2.444v.73H80.38v-1.542h6.39q0-.812-.331-1.439a2.5 2.5 0 0 0-.93-.999q-.592-.365-1.39-.365-.868 0-1.515.427-.64.42-.992 1.102a3.2 3.2 0 0 0-.344 1.467v1.205q0 1.06.372 1.804.378.743 1.053 1.136.675.385 1.577.385.585 0 1.067-.165.483-.172.833-.509.351-.337.537-.834l1.95.352a3.54 3.54 0 0 1-.84 1.508q-.6.64-1.509.998-.901.351-2.059.351"
d="M51.756 108.182V94.08h8.745v1.832h-6.617v4.296h5.99v1.825h-5.99v6.149zm11.064 0V97.605h1.99v1.68h.11a2.56 2.56 0 0 1 1.02-1.342 2.9 2.9 0 0 1 1.665-.496 9 9 0 0 1 .875.048v1.97a4 4 0 0 0-.44-.076 4 4 0 0 0-.634-.048q-.73 0-1.302.31a2.31 2.31 0 0 0-1.225 2.072v6.459zm11.621.213q-1.564 0-2.692-.668a4.53 4.53 0 0 1-1.735-1.893q-.606-1.225-.606-2.872 0-1.625.606-2.864.612-1.239 1.707-1.935 1.102-.695 2.575-.695.896 0 1.736.296t1.508.93 1.053 1.645q.386 1.005.386 2.444v.73H70.57v-1.542h6.39q0-.812-.33-1.439a2.5 2.5 0 0 0-.93-.999q-.592-.365-1.39-.365-.869 0-1.516.427a2.87 2.87 0 0 0-.991 1.102q-.344.675-.344 1.467v1.205q0 1.06.372 1.804.378.743 1.053 1.136.674.385 1.577.385.585 0 1.067-.165.482-.172.833-.509t.537-.834l1.949.352a3.54 3.54 0 0 1-.84 1.508q-.6.64-1.508.998-.902.351-2.059.351m11.38 0q-1.563 0-2.692-.668a4.53 4.53 0 0 1-1.735-1.893q-.606-1.225-.606-2.872 0-1.625.606-2.864.613-1.239 1.708-1.935 1.102-.695 2.575-.695.895 0 1.735.296t1.508.93 1.053 1.645q.386 1.005.386 2.444v.73h-8.407v-1.542h6.39q0-.812-.33-1.439a2.5 2.5 0 0 0-.93-.999q-.593-.365-1.391-.365-.868 0-1.515.427-.64.42-.992 1.102-.345.675-.344 1.467v1.205q0 1.06.372 1.804.378.743 1.053 1.136.675.385 1.577.385.585 0 1.067-.165.483-.172.834-.509t.537-.834l1.948.352a3.54 3.54 0 0 1-.84 1.508q-.6.64-1.508.998-.901.351-2.059.351"
></path>
</g>
<g filter="url(#filter1_d_342_3868)">
Expand Down
Loading

0 comments on commit 2ae5ebc

Please sign in to comment.