Skip to content

Commit be576a9

Browse files
crazywhalecccrazywhalecc
committed
Beautify docs
1 parent fa6fa1c commit be576a9

File tree

7 files changed

+572
-27
lines changed

7 files changed

+572
-27
lines changed

‎docs/.vitepress/components/CliGenerator.vue‎

Lines changed: 166 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -744,10 +744,26 @@ h2 {
744744
}
745745
746746
select {
747-
border-radius: 4px;
747+
border-radius: 8px;
748748
border: 1px solid var(--vp-c-divider);
749-
padding: 0 4px;
749+
padding: 8px 12px;
750750
width: 300px;
751+
background-color: var(--vp-c-bg-soft);
752+
color: var(--vp-c-text-1);
753+
font-size: 14px;
754+
transition: all 0.2s ease;
755+
cursor: pointer;
756+
outline: none;
757+
}
758+
759+
select:hover {
760+
border-color: var(--vp-c-brand-1);
761+
background-color: var(--vp-c-bg);
762+
}
763+
764+
select:focus {
765+
border-color: var(--vp-c-brand-1);
766+
box-shadow: 0 0 0 3px var(--vp-c-brand-soft);
751767
}
752768
753769
.my-btn {
@@ -781,17 +797,160 @@ select {
781797
782798
.textarea {
783799
border: 1px solid var(--vp-c-divider);
784-
border-radius: 4px;
785-
width: calc(100% - 12px);
786-
padding: 4px 8px;
800+
border-radius: 8px;
801+
width: calc(100% - 24px);
802+
padding: 12px;
803+
background-color: var(--vp-c-bg-soft);
804+
color: var(--vp-c-text-1);
805+
font-size: 14px;
806+
font-family: var(--vp-font-family-mono);
807+
line-height: 1.5;
808+
transition: all 0.2s ease;
809+
outline: none;
810+
resize: vertical;
811+
}
812+
813+
.textarea:hover {
814+
border-color: var(--vp-c-brand-1);
815+
background-color: var(--vp-c-bg);
816+
}
817+
818+
.textarea:focus {
819+
border-color: var(--vp-c-brand-1);
820+
box-shadow: 0 0 0 3px var(--vp-c-brand-soft);
787821
}
788822
789823
.input {
790824
display: block;
791825
border: 1px solid var(--vp-c-divider);
792-
border-radius: 4px;
826+
border-radius: 8px;
793827
width: 100%;
794-
padding: 4px 8px;
828+
padding: 10px 12px;
829+
background-color: var(--vp-c-bg-soft);
830+
color: var(--vp-c-text-1);
831+
font-size: 14px;
832+
transition: all 0.2s ease;
833+
outline: none;
834+
box-sizing: border-box;
835+
}
836+
837+
.input:hover {
838+
border-color: var(--vp-c-brand-1);
839+
background-color: var(--vp-c-bg);
840+
}
841+
842+
.input:focus {
843+
border-color: var(--vp-c-brand-1);
844+
box-shadow: 0 0 0 3px var(--vp-c-brand-soft);
845+
}
846+
847+
/* Radio button styles */
848+
input[type="radio"] {
849+
appearance: none;
850+
width: 18px;
851+
height: 18px;
852+
border: 2px solid var(--vp-c-border);
853+
border-radius: 50%;
854+
background-color: var(--vp-c-bg);
855+
cursor: pointer;
856+
position: relative;
857+
vertical-align: middle;
858+
margin-right: 6px;
859+
transition: all 0.2s ease;
860+
}
861+
862+
input[type="radio"]:hover {
863+
border-color: var(--vp-c-brand-1);
864+
background-color: var(--vp-c-bg-soft);
865+
}
866+
867+
input[type="radio"]:checked {
868+
border-color: var(--vp-c-brand-1);
869+
background-color: var(--vp-c-brand-1);
870+
}
871+
872+
input[type="radio"]:checked::after {
873+
content: '';
874+
position: absolute;
875+
top: 50%;
876+
left: 50%;
877+
transform: translate(-50%, -50%);
878+
width: 8px;
879+
height: 8px;
880+
border-radius: 50%;
881+
background-color: var(--vp-c-bg);
882+
}
883+
884+
input[type="radio"]:disabled {
885+
opacity: 0.5;
886+
cursor: not-allowed;
887+
}
888+
889+
/* Checkbox styles */
890+
input[type="checkbox"] {
891+
appearance: none;
892+
width: 18px;
893+
height: 18px;
894+
border: 2px solid var(--vp-c-border);
895+
border-radius: 4px;
896+
background-color: var(--vp-c-bg);
897+
cursor: pointer;
898+
position: relative;
899+
vertical-align: middle;
900+
margin-right: 6px;
901+
transition: all 0.2s ease;
902+
}
903+
904+
input[type="checkbox"]:hover {
905+
border-color: var(--vp-c-brand-1);
906+
background-color: var(--vp-c-bg-soft);
907+
}
908+
909+
input[type="checkbox"]:checked {
910+
border-color: var(--vp-c-brand-1);
911+
background-color: var(--vp-c-brand-1);
912+
}
913+
914+
input[type="checkbox"]:checked::after {
915+
content: '';
916+
position: absolute;
917+
top: 2px;
918+
left: 5px;
919+
width: 4px;
920+
height: 8px;
921+
border: solid var(--vp-c-bg);
922+
border-width: 0 2px 2px 0;
923+
transform: rotate(45deg);
924+
}
925+
926+
input[type="checkbox"]:disabled {
927+
opacity: 0.5;
928+
cursor: not-allowed;
929+
}
930+
931+
/* Label styles */
932+
label {
933+
cursor: pointer;
934+
user-select: none;
935+
color: var(--vp-c-text-1);
936+
font-size: 14px;
937+
line-height: 1.5;
938+
transition: color 0.2s ease;
939+
}
940+
941+
label:hover {
942+
color: var(--vp-c-brand-1);
943+
}
944+
945+
input[type="radio"]:disabled + label,
946+
input[type="checkbox"]:disabled + label {
947+
opacity: 0.5;
948+
cursor: not-allowed;
949+
}
950+
951+
input[type="radio"]:disabled + label:hover,
952+
input[type="checkbox"]:disabled + label:hover {
953+
color: var(--vp-c-text-1);
795954
}
796955
797956
.command-container {

‎docs/.vitepress/config.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import sidebarZh from "./sidebar.zh";
44

55
// https://vitepress.dev/reference/site-config
66
export default {
7-
title: "static-php-cli",
7+
title: "Static PHP",
88
description: "Build single static PHP binary, with PHP project together, with popular extensions included.",
99
locales: {
1010
en: {
@@ -44,6 +44,7 @@ export default {
4444
},
4545
themeConfig: {
4646
// https://vitepress.dev/reference/default-theme-config
47+
logo: '/images/static-php_nobg.png',
4748
nav: [],
4849
socialLinks: [
4950
{icon: 'github', link: 'https://github.com/crazywhalecc/static-php-cli'}

‎docs/.vitepress/theme/style.css‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,3 +4,25 @@
44
max-width: 1000px !important;
55
}
66

7+
/* Custom brand color */
8+
:root {
9+
--vp-c-brand-1: #9d7a47;
10+
--vp-c-brand-2: #b08f59;
11+
--vp-c-brand-3: #c8a16e;
12+
--vp-c-brand-soft: rgba(157, 122, 71, 0.14);
13+
}
14+
15+
.dark {
16+
--vp-c-brand-1: #c8a16e;
17+
--vp-c-brand-2: #b08f59;
18+
--vp-c-brand-3: #9d7a47;
19+
--vp-c-brand-soft: rgba(176, 143, 89, 0.16);
20+
}
21+
22+
.dark .VPImage.logo {
23+
filter: contrast(0.7);
24+
}
25+
26+
.dark .VPImage.image-src {
27+
filter: contrast(0.7);
28+
}

‎docs/en/index.md‎

Lines changed: 129 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,143 @@
33
layout: home
44

55
hero:
6-
name: "static-php-cli"
6+
name: "Static PHP"
77
tagline: "Build standalone PHP binary on Linux, macOS, FreeBSD, Windows, with PHP project together, with popular extensions included."
8+
image:
9+
src: /images/static-php_nobg.png
10+
alt: Static PHP CLI Logo
811
actions:
912
- theme: brand
10-
text: Guide
13+
text: Get Started
1114
link: ./guide/
1215

1316
features:
14-
- title: Static CLI Binary
17+
- icon: 🚀
18+
title: Static CLI Binary
1519
details: You can easily compile a standalone php binary for general use. Including CLI, FPM sapi.
16-
- title: Micro Self-Extracted Executable
20+
- icon: 📦
21+
title: Micro Self-Extracted Executable
1722
details: You can compile a self-extracted executable and build with your php source code.
18-
- title: Dependency Management
23+
- icon: 🔧
24+
title: Dependency Management
1925
details: static-php-cli comes with dependency management and supports installation of different types of PHP extensions.
2026
---
2127

28+
<script setup>
29+
import {VPSponsors} from "vitepress/theme";
30+
import Contributors from '../.vitepress/components/Contributors.vue';
31+
32+
const sponsors = [
33+
{ name: 'Beyond Code', img: '/images/beyondcode-seeklogo.png', url: 'https://beyondco.de/' },
34+
{ name: 'NativePHP', img: '/images/nativephp-logo.svg', url: 'https://nativephp.com/' },
35+
];
36+
</script>
37+
38+
<div class="sponsors-section">
39+
<div class="sponsors-header">
40+
<h2>💝 Special Sponsors</h2>
41+
<p class="sponsors-description">
42+
Thank you to our amazing sponsors for supporting this project!
43+
</p>
44+
</div>
45+
<VPSponsors :data="sponsors"/>
46+
</div>
47+
48+
<style scoped>
49+
.sponsors-section {
50+
margin: 48px auto;
51+
padding: 32px 24px;
52+
max-width: 1152px;
53+
background: linear-gradient(135deg, var(--vp-c-bg-soft) 0%, var(--vp-c-bg) 100%);
54+
border-radius: 16px;
55+
border: 1px solid var(--vp-c-divider);
56+
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
57+
transition: all 0.3s ease;
58+
}
59+
60+
.sponsors-section:hover {
61+
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
62+
transform: translateY(-2px);
63+
}
64+
65+
.sponsors-header {
66+
text-align: center;
67+
margin-bottom: 24px;
68+
}
69+
70+
.sponsors-header h2 {
71+
font-size: 1.5rem;
72+
font-weight: 700;
73+
margin: 0 0 8px 0;
74+
background: linear-gradient(120deg, var(--vp-c-brand-1), var(--vp-c-brand-2));
75+
-webkit-background-clip: text;
76+
-webkit-text-fill-color: transparent;
77+
background-clip: text;
78+
}
79+
80+
.sponsors-description {
81+
font-size: 0.95rem;
82+
color: var(--vp-c-text-2);
83+
margin: 0;
84+
line-height: 1.5;
85+
}
86+
87+
@media (max-width: 768px) {
88+
.sponsors-section {
89+
margin: 32px 16px;
90+
padding: 24px 16px;
91+
}
92+
93+
.sponsors-header h2 {
94+
font-size: 1.25rem;
95+
}
96+
97+
.sponsors-description {
98+
font-size: 0.9rem;
99+
}
100+
}
101+
102+
/* Hero logo styling */
103+
:deep(.VPImage.image-src) {
104+
border-radius: 20px;
105+
background: linear-gradient(135deg, var(--vp-c-bg-soft) 0%, var(--vp-c-default-soft) 100%);
106+
padding: 40px;
107+
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
108+
transition: all 0.3s ease;
109+
}
110+
111+
:deep(.VPImage.image-src:hover) {
112+
transform: translateY(-4px);
113+
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
114+
}
115+
116+
/* Dark mode adjustments for logo */
117+
.dark :deep(.VPImage.image-src) {
118+
background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
119+
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
120+
opacity: 0.9;
121+
}
122+
123+
.dark :deep(.VPImage.image-src:hover) {
124+
opacity: 1;
125+
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7);
126+
}
127+
128+
/* Additional styling for the logo image itself */
129+
:deep(.VPImage.image-src img) {
130+
max-height: 280px;
131+
width: auto;
132+
}
133+
134+
@media (max-width: 768px) {
135+
:deep(.VPImage.image-src) {
136+
padding: 24px;
137+
}
138+
139+
:deep(.VPImage.image-src img) {
140+
max-height: 200px;
141+
}
142+
}
143+
</style>
144+
145+
<Contributors />

0 commit comments

Comments
 (0)