Skip to content

Commit 1eebe1c

Browse files
kangastakangasta
authored
Update styles, prepare for transfering (#8)
1 parent ab7a9a1 commit 1eebe1c

File tree

6 files changed

+142
-90
lines changed

6 files changed

+142
-90
lines changed

‎.ci/build-container-and-validate-txt-response.sh‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,11 @@ done
99

1010
grep -q "^Hostname: hello-test$" out.txt
1111
grep -q "^🐮 Moo! I'm a cow.$" out.txt
12-
grep -q "^kangasta / animals at not-a-co$" out.txt
12+
grep -q "^cicd-tutorials / animals at not-a-co$" out.txt
1313

1414
docker rm -f ${container_id}
1515

1616
EMOJI=🦁 HELLO=Moo NAME=horse bash -xe ./.ci/build-index-files.sh
1717

1818
grep -q "^🦁 Moo! I'm a horse.$" out/index.txt
19-
grep -q "^kangasta / animals $" out/index.txt
19+
grep -q "^cicd-tutorials / animals $" out/index.txt

‎.github/workflows/release.yaml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,8 +45,8 @@ jobs:
4545
--build-arg "NAME=${{ matrix.args.name }}"
4646
4747
for tag in ${{ matrix.args.name }}-${{ github.ref_name }} ${{ matrix.args.name }}; do
48-
docker tag animals ghcr.io/kangasta/animals:$tag
49-
docker push ghcr.io/kangasta/animals:$tag
48+
docker tag animals ghcr.io/$GITHUB_REPOSITORY:$tag
49+
docker push ghcr.io/$GITHUB_REPOSITORY:$tag
5050
done
5151
- name: Build archive
5252
run: bash -xe ./.ci/build-index-files.sh

‎Dockerfile‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
FROM alpine:latest as build
1+
FROM alpine:latest AS build
22

33
# Should be set to "at $COMMIT_SHA"
44
ARG VERSION_NOTE=""

‎README.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
# Animals
22

3-
[![Release](https://github.com/kangasta/animals/actions/workflows/release.yaml/badge.svg)](https://github.com/kangasta/animals/actions/workflows/release.yaml)
3+
[![Release](https://github.com/cicd-tutorials/animals/actions/workflows/release.yaml/badge.svg)](https://github.com/cicd-tutorials/animals/actions/workflows/release.yaml)
44

5-
Simple containers for testing and demonstrating (rolling) updates. Based on [UpCloudLtd / hello-container](https://github.com/UpCloudLtd/hello-container.git).
5+
Simple containers for testing and demonstrating (rolling) updates. Based on [UpCloudLtd / hello-container](https://github.com/UpCloudLtd/hello-container.git). Uses the same [Material for MkDocs](https://squidfunk.github.io/mkdocs-material/) styling as [cicd-tutorials.net](https://cicd-tutorials.net/).
66

77
## Usage
88

99
To create a deployment and expose it from your Kubernetes cluster, run:
1010

1111
```sh
12-
kubectl create deployment --image=ghcr.io/kangasta/animals:cow moo
12+
kubectl create deployment --image=ghcr.io/cicd-tutorials/animals:cow moo
1313
kubectl expose deployment moo --port=80 --target-port=80 --type=LoadBalancer
1414
kubectl get svc -w
1515
```

‎index.html‎

Lines changed: 133 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -7,130 +7,164 @@
77
/>
88
<meta charset="UTF-8" />
99
<style>
10+
/* Theme from Material for MkDocs */
11+
1012
@font-face {
11-
font-family: SourceSans3;
13+
font-family: "Source Sans 3";
1214
src: url("SourceSans3.ttf");
1315
}
1416

1517
:root {
16-
--blue: #88f;
17-
--black: #222226;
18-
--white: #ebe9e5;
18+
--header-bg: rgb(84, 109, 120);
19+
20+
--footer-bg: rgb(17, 19, 23);
21+
--footer-hi: rgba(255, 255, 255, 0.7);
22+
--footer-fg: rgba(255, 255, 255, 0.45);
23+
24+
--main-bg: rgb(30, 33, 41);
25+
--main-header: rgba(226, 228, 233, 0.56);
26+
--main-fg: rgba(226, 228, 233, 0.82);
27+
28+
--white: rgb(255, 255, 255);
29+
30+
font-size: 20px;
31+
}
32+
33+
@media screen and (min-width: 2000) {
34+
:root {
35+
font-size: 24px;
36+
}
37+
}
38+
39+
@media screen and (min-width: 1600) {
40+
:root {
41+
font-size: 22px;
42+
}
1943
}
2044

2145
body {
22-
background: var(--black);
23-
color: var(--white);
46+
background: var(--main-bg);
47+
color: var(--main-fg);
2448
display: flex;
2549
flex-direction: column;
26-
font-family: "Source Sans Pro", sans-serif;
50+
font-family: "Source Sans 3", sans-serif;
2751
margin: 0;
2852
min-height: 100vh;
29-
padding: 0 2em;
3053
}
3154

3255
header {
56+
background: var(--header-bg);
57+
box-shadow: 0 0 0.2rem #0000001a, 0 0.2rem 0.4rem #0003;
58+
color: var(--white);
59+
font-weight: 700;
3360
text-transform: uppercase;
34-
padding: 25px 20px;
61+
}
62+
63+
header svg {
64+
height: 1.2rem;
65+
width: auto;
66+
padding: 8px;
67+
margin: 4px;
68+
}
69+
70+
header .title {
71+
font-size: 0.9rem;
72+
line-height: 2.4rem;
73+
margin-left: 1rem;
74+
}
75+
76+
header .header {
77+
align-items: center;
78+
display: flex;
3579
}
3680

3781
main {
3882
flex: 1;
39-
padding: 20px;
83+
font-size: 0.8em;
4084
}
4185

4286
.content {
87+
box-sizing: border-box;
4388
margin: auto;
44-
max-width: 640px;
89+
max-width: 800px;
4590
}
4691

47-
.header {
48-
align-items: center;
49-
display: flex;
50-
gap: 1em;
92+
.content.padding {
93+
padding: 0 12px;
5194
}
5295

5396
h1 {
54-
font-size: 1.5em;
97+
color: var(--main-header);
98+
font-size: 2em;
5599
font-weight: 300;
56-
margin: 0;
100+
letter-spacing: -0.01em;
101+
line-height: 1.3;
102+
margin: 3rem 0 1.5rem;
103+
104+
display: flex;
105+
align-items: center;
106+
}
107+
108+
.emoji {
109+
color: var(--white);
110+
font-size: 1.5em;
111+
line-height: 1em;
112+
margin-right: 1rem;
113+
width: auto;
114+
}
115+
116+
p {
117+
font-size: 0.8rem;
118+
line-height: 1.6;
57119
}
58120

59121
table {
60-
background: var(--white);
122+
border: 0.05rem solid rgba(240, 241, 244, 0.12);
61123
border-collapse: collapse;
62-
border-radius: 2.75px;
63-
border-style: hidden;
64-
color: var(--black);
65-
margin: 1em 0;
124+
font-size: 0.64rem;
125+
margin: 1.5rem 0;
66126
width: 100%;
67127
}
68128

69129
tr {
70-
border: solid 1px var(--black);
130+
border: 0.05rem solid rgba(240, 241, 244, 0.12);
71131
}
72132

73133
th,
74134
td {
75-
padding: 15px 30px;
135+
padding: 1em 1.25em;
76136
text-align: left;
77137
}
78138

79139
th {
80140
font-weight: 700;
141+
width: 37.5%;
81142
}
82143

83144
footer {
84-
font-size: 1rem;
85-
margin-top: 4em;
86-
padding: 1em;
87-
text-align: center;
88-
}
89-
90-
.highlight {
91-
align-items: center;
92-
flex-wrap: wrap;
93-
font-size: 2em;
94-
display: flex;
95-
justify-content: center;
96-
margin: 2em 0;
97-
row-gap: 1em;
145+
background: var(--footer-bg);
146+
color: var(--footer-fg);
147+
font-size: 0.64rem;
148+
line-height: 1.6;
149+
padding: 0.6rem;
98150
}
99151

100-
.emoji {
101-
font-size: 2.75em;
102-
line-height: 1em;
103-
margin: 0 1rem;
104-
width: auto;
105-
}
106-
107-
.intro-container {
108-
align-items: flex-start;
109-
display: flex;
110-
flex-direction: column;
111-
justify-content: center;
152+
footer .version {
153+
color: var(--footer-hi);
112154
}
113155

114-
.intro-row {
115-
background: var(--white);
116-
border-radius: 2.75px;
117-
color: var(--black);
118-
line-height: 1.25em;
119-
margin: 0.125em;
120-
padding: 0 0.25em;
121-
}
122-
123-
a {
124-
color: var(--blue);
156+
footer a {
157+
color: var(--footer-hi);
125158
text-decoration: none;
126159
}
127160

128-
a:visited {
129-
color: var(--blue);
161+
footer a:visited {
162+
color: var(--footer-hi);
130163
}
131164

132-
a:hover,
133-
a:focus {
165+
footer a:hover,
166+
footer a:focus {
167+
color: var(--white);
134168
outline: none;
135169
text-decoration: underline;
136170
}
@@ -143,46 +177,64 @@
143177
width="32"
144178
height="32"
145179
viewBox="0 0 16 16"
146-
fill="none"
147180
xmlns="http://www.w3.org/2000/svg"
148181
>
149182
<path
150-
d="M 3 2 A 1 1 0 0 0 3 4 A 1 1 0 0 0 3 2 M 3 4 L 3 10 A 3 3 0 0 0 6 13 L 10 13 M 8 11 L 10 13 L 8 15 M 13 12 A 1 1 0 0 0 13 14 A 1 1 0 0 0 13 12 M 13 12 L 13 6 A 3 3 0 0 0 10 3 L 6 3 M 8 1 L 6 3 L 8 5"
183+
d="M 2.5 1 A 1 1 0 0 0 2.5 4 A 1 1 0 0 0 2.5 1 M 2.5 4 L 2.5 11.5 A 2 2 0 0 0 4.5 13.5 L 10.5 13.5 M 9 12 L 10.5 13.5 L 9 15 M 13.5 12 A 1 1 0 0 0 13.5 15 A 1 1 0 0 0 13.5 12 M 13.5 12 L 13.5 4.5 A 2 2 0 0 0 11.5 2.5 L 5.5 2.5 M 7 1 L 5.5 2.5 L 7 4"
184+
fill="none"
151185
stroke="currentColor"
186+
stroke-linecap="round"
152187
stroke-linejoin="round"
188+
stroke-width="1.125px"
153189
></path>
154190
</svg>
155-
<h1>Animals</h1>
191+
<span class="title">Animals</span>
156192
</div>
157193
</header>
158194
<main>
159-
<div class="content">
160-
<div class="highlight">
195+
<div class="content padding">
196+
<h1>
161197
<span aria-hidden="true" class="emoji">build_emoji</span>
162-
<div class="intro-container">
163-
<span class="intro-row">build_hello!</span>
164-
<span class="intro-row">I'm a build_name.</span>
165-
</div>
166-
</div>
198+
build_hello! I'm a build_name.
199+
</h1>
200+
<p>
201+
This is a static website for testing networking and demonstrating
202+
rolling updates and load-balancing. The animal emoji and greeting
203+
above vary based on which version of this site is deployed to the
204+
server. The data in the table below vary depending on which server
205+
handled the request.
206+
</p>
167207
<table>
168208
<tbody>
169209
<tr>
170-
<th>Hostname:</th>
210+
<th>Hostname</th>
171211
<td>nginx_hostname</td>
172212
</tr>
173213
<tr>
174-
<th>Address:</th>
214+
<th>Address</th>
175215
<td>nginx_address</td>
176216
</tr>
177217
</tbody>
178218
</table>
179219
</div>
180220
</main>
181221
<footer>
182-
<a target="_blank" href="https://github.com/kangasta/animals.git"
183-
>kangasta / animals</a
184-
>
185-
build_version_note
222+
<div class="content padding">
223+
<div class="version">
224+
<a
225+
target="_blank"
226+
href="https://github.com/cicd-tutorials/animals.git"
227+
>CI/CD Tutorials / Animals</a
228+
>
229+
build_version_note
230+
</div>
231+
<div>
232+
Theme from
233+
<a target="_blank" href="https://squidfunk.github.io/mkdocs-material/"
234+
>Material for MkDocs</a
235+
>
236+
</div>
237+
</div>
186238
</footer>
187239
</body>
188240
</html>

‎index.txt‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,4 @@ build_emoji build_hello! I'm a build_name.
33
Hostname: nginx_hostname
44
Address: nginx_address
55

6-
kangasta / animals build_version_note
6+
cicd-tutorials / animals build_version_note

0 commit comments

Comments
 (0)