Skip to content

Commit 7219131

Browse files
edenizkedenizk
authored
Update chisel index page (#497) (#499)
* Update chisel index page * Fix font family * Update index page (#499) * Add styling for code elements * Fix Chisel pages list
1 parent 0e0fabe commit 7219131

File tree

1 file changed

+183
-8
lines changed

1 file changed

+183
-8
lines changed

‎packages/generator-chisel/lib/commands/create/creators/fe/template-index/index.chisel-tpl.html

Lines changed: 183 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,168 @@
44
<meta charset="utf-8" />
55
<title>Project Index - <%= app.name %></title>
66
<meta name="viewport" content="width=device-width, initial-scale=1">
7-
<link href="https://fonts.googleapis.com/css?family=Lora:400,700" rel="stylesheet">
7+
<link
8+
rel="stylesheet"
9+
href="https://fonts.googleapis.com/css?family=Quicksand:400,500,600,700"
10+
>
811
<!-- prettier-ignore -->
912
<style>
10-
html{font-size:1em;line-height:1.5}@media (min-width:768px){html{font-size:1.25em}}@media (min-width:1024px){html{font-size:1.5em}}body{background:#f2e9da;background-image:repeating-linear-gradient(180deg,transparent,transparent 40px,#eae3d7 0,#eae3d7 41px),repeating-linear-gradient(90deg,transparent,transparent 40px,#eae3d7 0,#eae3d7 41px);color:#1b3729;font-family:Crimson Text,serif;padding:1em}a,a:link{color:#b08b31}a:hover{color:#ecbb42}p{margin:0 0 1em}.c-wrapper{margin:0 auto;max-width:860px}.c-section{margin-top:2em}.c-section__note{margin-top:1em}.c-section__note:not(:last-child){display:none}.c-page-title{margin:0}.c-page-subtitle{border-bottom:7px solid #1b3729;display:inline-block;margin:0;padding-bottom:.25em}.c-intro,.c-page-subtitle{font-size:1.25rem;font-weight:600}.c-intro{margin:0 1em 1em 0;line-height:1.5}.c-heading{border-bottom:5px solid #ecbb42;display:inline-block;font-weight:600;margin:0 0 .5em}.c-list{list-style:none;margin:0;padding:0}.c-list li{margin-bottom:.5em;padding-left:1em;position:relative}.c-list li:before{background:#ecbb42;content:"";display:block;height:.5em;left:0;position:absolute;top:.5em;width:.5em}.c-page{text-decoration:none;position:relative;display:block;border-bottom:1px dashed #ccc;padding-bottom:.5em}.c-page__link{text-decoration:underline}.c-page__name{color:#1b3729;margin-left:.5em;position:absolute;top:0;right:0}.c-page:hover .c-page__name{color:#999}
13+
html {
14+
font-size: 1em;
15+
line-height: 1.5;
16+
}
17+
18+
@media (min-width:768px) {
19+
html {
20+
font-size: 1.25em
21+
}
22+
}
23+
24+
@media (min-width:1024px) {
25+
html {
26+
font-size: 1.5em
27+
}
28+
}
29+
30+
body {
31+
background: #fff;
32+
color: #2a1468;
33+
font-family: Quicksand, sans-serif;
34+
padding: 1em
35+
}
36+
37+
a,
38+
a:link {
39+
color: #2a1468;
40+
text-decoration: underline;
41+
}
42+
43+
a:hover {
44+
color: #ff6d54;
45+
}
46+
47+
p {
48+
margin: 0 0 1em
49+
}
50+
51+
.c-wrapper {
52+
margin: 0 auto;
53+
max-width: 860px
54+
}
55+
56+
.c-section {
57+
margin-top: 0.5em;
58+
}
59+
60+
.c-section__content {
61+
font-size: 0.75em;
62+
}
63+
64+
.c-section__text a {
65+
font-weight: 500;
66+
}
67+
68+
.c-section__intro {
69+
font-size: 1em;
70+
font-weight: 600;
71+
}
72+
73+
.c-section:last-child {
74+
margin-top: 2em;
75+
}
76+
77+
.c-section__note {
78+
margin-top: 1em
79+
}
80+
81+
.c-section__note:not(:last-child) {
82+
display: none
83+
}
84+
85+
.c-page-title {
86+
margin: 0;
87+
font-size: 1.5em;
88+
}
89+
90+
.c-page-subtitle {
91+
margin: 1.5em 0 0;
92+
font-size: 1em;
93+
}
94+
95+
.c-page-subtitle,
96+
.c-heading {
97+
border-bottom: 3px solid #ff6d54;
98+
display: inline-block;
99+
font-weight: 600;
100+
}
101+
102+
.c-intro {
103+
font-size: 1em;
104+
font-weight: 600;
105+
margin: 0 1em 1.9em 0;
106+
line-height: 1.5;
107+
}
108+
109+
.c-heading {
110+
margin: 0 0 .5em;
111+
font-size: 1.35em;
112+
}
113+
114+
.c-list {
115+
list-style: none;
116+
margin: 0;
117+
padding: 0
118+
}
119+
120+
.c-list li {
121+
margin-bottom: .5em;
122+
padding-left: 1em;
123+
position: relative
124+
}
125+
126+
.c-list li:before {
127+
background: #ff6d54;
128+
content: "";
129+
display: block;
130+
height: .5em;
131+
left: 0;
132+
position: absolute;
133+
top: .5em;
134+
width: .5em
135+
}
136+
137+
.c-page {
138+
text-decoration: none;
139+
position: relative;
140+
display: block;
141+
border-bottom: 1px dashed #ccc;
142+
padding-bottom: .5em
143+
}
144+
145+
.c-page__link {
146+
font-weight: 600;
147+
}
148+
149+
.c-page__name {
150+
color: #2a1468;
151+
margin-left: .5em;
152+
position: absolute;
153+
top: 0;
154+
right: 0
155+
}
156+
157+
.c-page:hover .c-page__name {
158+
color: #ff6d54
159+
}
160+
161+
.c-section__code {
162+
padding: 0.9rem 0.8rem;
163+
overflow: auto;
164+
display: block;
165+
background: #2d2b57;
166+
color: #e3dfff;
167+
border-radius: 10px;
168+
}
11169
</style>
12170
<script type="text/x-chisel-pages-template">
13171
<ul class="c-list">
@@ -30,12 +188,18 @@ <h2 class="c-page-subtitle">Project index</h2>
30188

31189
<div class="c-section c-section--first">
32190
<div class="c-section__content">
33-
<p class="c-intro">This project is powered by <a href="https://www.getchisel.co/">Chisel</a>, a development framework for creating easy to maintain and fast front-end templates.</p>
191+
<p class="c-intro">
192+
This project is powered by
193+
<a href="https://www.getchisel.co/">Chisel</a>, a development
194+
framework for creating easy to maintain and fast front-end
195+
templates.
196+
</p>
34197
<h2 class="c-heading">Pages</h2>
35198
<div class="c-section__note">
36199
To add more pages run:
37-
<pre><code>npm run add-page 'My Awesome Page'</code></pre> or
38-
<pre><code>yarn add-page 'My Awesome Page'</code></pre>
200+
<pre><code class="c-section__code">npm run add-page 'My Awesome Page'</code></pre>
201+
or
202+
<pre><code class="c-section__code">yarn add-page 'My Awesome Page'</code></pre>
39203
</div>
40204
<!-- CHISEL-PAGES-LIST -->
41205
</div>
@@ -45,9 +209,20 @@ <h2 class="c-heading">Pages</h2>
45209
<section class="c-section">
46210
<div class="c-section__content">
47211
<h2 class="c-heading">Documentation</h2>
48-
<p><strong>Chisel supports modern web development workflows and helps developers to create a code base which is easy to maintain.</strong></p>
49-
<p>For detailed information how Chisel works, please check out <a href="https://www.getchisel.co/">www.getchisel.co</a>.</p>
50-
<p>If you are just looking for your deliverable files, they are located inside the <code>dist</code> folder. No files found outside of that folder should usually be uploaded to your server (e.g. this file).</p>
212+
<p>
213+
<strong class="c-section__intro">Chisel supports modern web development workflows and helps
214+
developers to create a code base which is easy to
215+
maintain.</strong>
216+
</p>
217+
<p class="c-section__text">
218+
For detailed information how Chisel works, please check out
219+
<a href="https://www.getchisel.co/">www.getchisel.co</a>.
220+
</p>
221+
<p class="c-section__text">
222+
If you are just looking for your deliverable files, they are located
223+
inside the <code>dist</code> folder. No files found outside of that
224+
folder should usually be uploaded to your server (e.g. this file).
225+
</p>
51226
</div>
52227
</section>
53228
<!-- /c-section -->

0 commit comments

Comments
 (0)