Skip to content
This repository was archived by the owner on Jul 6, 2025. It is now read-only.

Commit 432dbcb

Browse files
linbingquanlinbingquan
committed
feat(vue-app): Update index.vue style.
1 parent 9a2af01 commit 432dbcb

File tree

6 files changed

+352
-73
lines changed

6 files changed

+352
-73
lines changed

‎examples/vue-app/assets/external-link.svg

Lines changed: 6 additions & 0 deletions
Loading

‎examples/vue-app/assets/logo.svg

Lines changed: 4 additions & 4 deletions
Loading

‎examples/vue-app/routes/index.vue

Lines changed: 34 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,40 @@
11
<script setup>
2-
import { ref } from "vue"
32
import { Link, Head } from "aleph/vue"
4-
5-
const msg = ref("Hello world!")
63
</script>
74

85
<template>
9-
10-
<Head>
11-
<title>aleph/vue - hello world</title>
12-
</Head>
13-
<h1 v-if="msg">{{ msg }}</h1>
14-
<h1 v-if="!msg" style="color: #ccc;">Please type something</h1>
15-
<input v-model="msg" placeholder="Please type something">
16-
<Link to="/hello">hello page</Link>
17-
<br />
18-
<Link to="/blog">blog page</Link>
6+
<div class="page y-center">
7+
<Head>
8+
<title>Aleph.js</title>
9+
<meta name="description" content="The Fullstack Framework in Deno." />
10+
</Head>
11+
<p class="logo">
12+
<img src="/assets/logo.svg" width="75" height="75" title="Aleph.js" />
13+
</p>
14+
<h1>
15+
The Fullstack Framework in Deno.
16+
</h1>
17+
<p>
18+
<strong>Aleph.js</strong>
19+
gives you the best developer experience for building web applications
20+
<br />
21+
with modern toolings.
22+
</p>
23+
<div class="external-links">
24+
<a href="https://alephjs.org/docs/get-started" target="_blank">
25+
Get Started
26+
</a>
27+
<a href="https://alephjs.org/docs" target="_blank">
28+
Docs
29+
</a>
30+
<a href="https://github.com/alephjs/aleph.js" target="_blank">
31+
Github
32+
</a>
33+
</div>
34+
<nav>
35+
<Link to="/todos">
36+
<button>Todos App Demo</button>
37+
</Link>
38+
</nav>
39+
</div>
1940
</template>
20-
21-
<style scoped>
22-
h1 {
23-
font-size: 24px;
24-
font-weight: 600;
25-
line-height: 1;
26-
color: #42b883;
27-
margin: 0;
28-
}
29-
30-
input {
31-
display: block;
32-
width: 300px;
33-
height: 36px;
34-
line-height: 36px;
35-
padding: 0 12px;
36-
margin: 12px 0;
37-
border: 1px solid transparent;
38-
border-radius: 6px;
39-
background-color: #f3f3f3;
40-
}
41-
42-
input:focus {
43-
border: 1px solid #999;
44-
background-color: white;
45-
}
46-
</style>

‎examples/vue-app/style/app.css

Lines changed: 233 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,235 @@
11
@import url('./reset.css');
22

3-
body {
4-
width: 100vw;
5-
height: 100vh;
6-
display: flex;
7-
align-items: center;
8-
justify-content: center;
9-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
10-
}
3+
.page {
4+
display: flex;
5+
align-items: center;
6+
flex-direction: column;
7+
height: 100vh;
8+
}
9+
10+
.page.y-center {
11+
justify-content: center;
12+
}
13+
14+
.page h1 {
15+
margin: 0;
16+
line-height: 1.4;
17+
font-size: 24px;
18+
font-weight: 700;
19+
text-align: center;
20+
color: #000;
21+
}
22+
23+
.page p {
24+
margin: 0;
25+
line-height: 1.2;
26+
text-align: center;
27+
color: #333;
28+
}
29+
30+
.page p strong {
31+
font-weight: 600;
32+
}
33+
34+
.external-links {
35+
display: flex;
36+
align-items: center;
37+
justify-content: center;
38+
gap: 15px;
39+
margin-top: 12px;
40+
}
41+
42+
.external-links a {
43+
display: flex;
44+
align-items: center;
45+
gap: 5px;
46+
color: #666;
47+
text-decoration: none;
48+
transition: color 0.15s ease-in;
49+
}
50+
51+
.external-links a:hover {
52+
color: #000;
53+
}
54+
55+
.external-links a:after {
56+
display: block;
57+
width: 16px;
58+
height: 16px;
59+
background: url(../assets/external-link.svg) no-repeat center;
60+
background-size: contain;
61+
content: "";
62+
}
63+
64+
nav a {
65+
color: #000;
66+
text-decoration: none;
67+
}
68+
69+
nav {
70+
display: flex;
71+
justify-content: center;
72+
align-items: center;
73+
margin-top: 45px;
74+
}
75+
76+
nav button {
77+
display: inline-block;
78+
width: 240px;
79+
height: 50px;
80+
border: 1px solid #ddd;
81+
border-radius: 25px;
82+
color: #454545;
83+
transition: all 0.15s ease-in;
84+
cursor: pointer;
85+
}
86+
87+
nav button:hover {
88+
color: #000;
89+
border-color: #aaa;
90+
}
91+
92+
.todos-app {
93+
width: 90%;
94+
max-width: 500px;
95+
margin: 0 auto;
96+
padding-top: 60px;
97+
height: auto;
98+
}
99+
100+
.todos-app h1 {
101+
box-sizing: border-box;
102+
display: flex;
103+
align-items: center;
104+
justify-content: space-between;
105+
width: 100%;
106+
padding: 10px;
107+
font-size: 48px;
108+
font-weight: 200;
109+
text-align: left;
110+
color: #333;
111+
}
112+
113+
.todos-app h1 em {
114+
font-size: 24px;
115+
font-weight: 100;
116+
color: #ccc;
117+
}
118+
119+
.todos-app ul {
120+
width: 100%;
121+
list-style: none;
122+
margin-bottom: 6px;
123+
}
124+
125+
.todos-app ul li {
126+
display: flex;
127+
align-items: center;
128+
justify-content: space-between;
129+
gap: 10px;
130+
padding: 10px;
131+
border-radius: 6px;
132+
}
133+
134+
.todos-app ul li:hover {
135+
background-color: #f9f9f9;
136+
}
137+
138+
.todos-app ul li input {
139+
position: relative;
140+
appearance: none;
141+
display: inline-flex;
142+
align-items: center;
143+
justify-content: center;
144+
width: 18px;
145+
height: 18px;
146+
border: 1px solid #ddd;
147+
border-radius: 10px;
148+
cursor: pointer;
149+
}
150+
151+
.todos-app ul li input:hover,
152+
.todos-app ul li input:checked {
153+
border: 1px solid #b8dad4;
154+
}
155+
156+
.todos-app ul li input:checked::after {
157+
display: inline-block;
158+
width: 6px;
159+
height: 6px;
160+
border-radius: 3px;
161+
background-color: #5dc2af;
162+
content: " ";
163+
}
164+
165+
.todos-app ul li label {
166+
line-height: 20px;
167+
flex-grow: 1;
168+
font-size: 20px;
169+
font-weight: 300;
170+
color: #333;
171+
transition: color 0.15s ease;
172+
}
173+
174+
.todos-app ul li label.completed {
175+
color: #aaa;
176+
text-decoration: line-through;
177+
}
178+
179+
.todos-app ul li button {
180+
position: relative;
181+
width: 20px;
182+
height: 20px;
183+
overflow: hidden;
184+
color: #ddd;
185+
transition: color 0.15s ease;
186+
cursor: pointer;
187+
}
188+
189+
.todos-app ul li:hover button {
190+
color: #ccc;
191+
}
192+
193+
.todos-app ul li button:hover {
194+
color: #c26c5d;
195+
}
196+
197+
.todos-app ul li button:before,
198+
.todos-app ul li button:after {
199+
content: " ";
200+
position: absolute;
201+
left: 10px;
202+
top: 10px;
203+
width: 16px;
204+
height: 1px;
205+
margin-left: -8px;
206+
background: currentColor;
207+
}
208+
209+
.todos-app ul li button:before {
210+
transform: rotate(45deg);
211+
}
212+
213+
.todos-app ul li button:after {
214+
transform: rotate(-45deg);
215+
}
216+
217+
.todos-app form {
218+
box-sizing: border-box;
219+
width: 100%;
220+
padding: 10px;
221+
}
222+
223+
.todos-app form input {
224+
display: inline;
225+
width: 100%;
226+
font-size: 24px;
227+
font-weight: 300;
228+
color: #333;
229+
}
230+
231+
.todos-app form input::placeholder{
232+
font-style: italic;
233+
font-weight: 300;
234+
color: #aaa;
235+
}

‎examples/vue-app/style/reset.css

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,25 @@
1-
body {
1+
* {
22
margin: 0;
3-
}
3+
padding: 0;
4+
border: none;
5+
outline: none;
6+
font: inherit;
7+
font-size: 100%;
8+
vertical-align: baseline;
9+
background: transparent;
10+
}
11+
12+
body {
13+
font-size: 16px;
14+
font-family:
15+
Inter,
16+
system-ui,
17+
-apple-system, /* Firefox supports this but not yet `system-ui` */
18+
'Segoe UI',
19+
Roboto,
20+
Helvetica,
21+
Arial,
22+
sans-serif,
23+
'Apple Color Emoji',
24+
'Segoe UI Emoji';
25+
}

0 commit comments

Comments
 (0)