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

Commit b90ef10

Browse files
ijeije
committed
Updat vue-app example
1 parent 6e681a1 commit b90ef10

File tree

7 files changed

+330
-278
lines changed

7 files changed

+330
-278
lines changed

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

Lines changed: 5 additions & 4 deletions
Loading

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

Lines changed: 5 additions & 0 deletions
Loading

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

Lines changed: 93 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,14 @@ import { Link, Head } from "aleph/vue"
33
</script>
44

55
<template>
6-
<div class="page y-center">
6+
<div class="screen index">
77
<Head>
88
<title>Aleph.js</title>
99
<meta name="description" content="The Fullstack Framework in Deno." />
1010
</Head>
1111
<p class="logo">
12-
<img src="/assets/logo.svg" width="75" height="75" title="Aleph.js" />
12+
<img src="/assets/logo.svg" width="70" height="70" title="Aleph.js" />
13+
<img src="/assets/vue.svg" width="70" height="70" title="Vue.js" />
1314
</p>
1415
<h1>
1516
The Fullstack Framework in Deno.
@@ -18,7 +19,7 @@ import { Link, Head } from "aleph/vue"
1819
<strong>Aleph.js</strong>
1920
gives you the best developer experience for building web applications
2021
<br />
21-
with modern toolings.
22+
with modern toolings. <label>Vue.js experimental version</label>.
2223
</p>
2324
<div class="external-links">
2425
<a href="https://alephjs.org/docs/get-started" target="_blank">
@@ -38,3 +39,92 @@ import { Link, Head } from "aleph/vue"
3839
</nav>
3940
</div>
4041
</template>
42+
43+
<style>
44+
.index h1 {
45+
margin: 0;
46+
line-height: 1.4;
47+
font-size: 28px;
48+
font-weight: 700;
49+
text-align: center;
50+
color: #000;
51+
}
52+
53+
.index p {
54+
margin: 0;
55+
line-height: 1.2;
56+
font-size: 18px;
57+
text-align: center;
58+
color: #333;
59+
}
60+
61+
.index p strong {
62+
font-weight: 600;
63+
}
64+
65+
.index p label {
66+
display: inline-block;
67+
font-weight: 600;
68+
border-bottom: 4px #42b883 solid;
69+
}
70+
71+
.index .external-links {
72+
display: flex;
73+
align-items: center;
74+
justify-content: center;
75+
gap: 15px;
76+
margin-top: 12px;
77+
}
78+
79+
.index .external-links a {
80+
display: flex;
81+
align-items: center;
82+
gap: 5px;
83+
color: #666;
84+
text-decoration: none;
85+
transition: color 0.15s ease-in;
86+
}
87+
88+
.index .external-links a:hover {
89+
color: #000;
90+
}
91+
92+
.index .external-links a:after {
93+
display: block;
94+
width: 16px;
95+
height: 16px;
96+
background: url(../assets/external-link.svg) no-repeat center;
97+
background-size: contain;
98+
content: "";
99+
}
100+
101+
.index nav a {
102+
color: #000;
103+
text-decoration: none;
104+
}
105+
106+
.index nav {
107+
display: flex;
108+
justify-content: center;
109+
align-items: center;
110+
margin-top: 45px;
111+
}
112+
113+
.index nav a {
114+
display: inline-flex;
115+
align-items: center;
116+
justify-content: center;
117+
width: 240px;
118+
height: 50px;
119+
border: 1px solid #ddd;
120+
border-radius: 25px;
121+
color: #454545;
122+
transition: border-color 0.15s ease-in;
123+
cursor: pointer;
124+
}
125+
126+
.index nav a:hover {
127+
color: #000;
128+
border-color: #aaa;
129+
}
130+
</style>

0 commit comments

Comments
 (0)