Skip to content

Commit 75847bf

Browse files
NotLe0nNotLe0n
committed
css rewrite
1 parent b07224c commit 75847bf

File tree

10 files changed

+92
-131
lines changed

10 files changed

+92
-131
lines changed

‎assets/css/changelog.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,10 @@ h2 {
1212

1313
li {
1414
word-wrap: break-word;
15-
}
1615

17-
li p {
18-
display: inline-block;
16+
p {
17+
display: inline-block;
18+
}
1919
}
2020

2121
h2 + ul:not(ul ul) {

‎assets/css/download.css‎

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,23 @@
11
#dl-row {
2-
display: flex;
2+
display: flex;
33
align-items: center;
44
justify-content: center;
55
flex-direction: column;
6+
row-gap: 1rem;
67
}
78

89
#dl-wrapper {
910
display: flex;
10-
align-items: center;
11-
padding-bottom: 1rem
11+
place-items: center;
12+
flex-wrap: wrap;
13+
justify-content: center;
14+
gap: 1rem;
1215
}
1316

1417
#dl-btn {
1518
display: flex;
1619
flex-direction: column;
17-
padding-top: 0.25rem;
18-
padding-bottom: 0.25rem;
19-
padding-left: 1rem;
20-
padding-right: 1rem;
21-
margin-right: 1rem;
20+
padding: .25rem 1rem;
2221
align-items: center;
2322
}
2423

@@ -27,13 +26,11 @@
2726
display: flex;
2827
flex-direction: row;
2928
align-items: center;
29+
gap: 0.5rem;
3030
}
3131

3232
#dl-icon {
33-
width: 1rem;
34-
height: 1rem;
3533
fill: var(--button-color);
36-
margin-right: 0.5rem;
3734
}
3835

3936
#dl-text {

‎assets/css/features.css‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
flex-direction: column;
44
width: 100%;
55
height: calc(100% - var(--c-button-height));
6-
padding: 1.5rem;
76
}
87

98
.feature-content {
@@ -14,7 +13,7 @@
1413
.feature {
1514
flex-direction: row;
1615
}
17-
.feature content {
16+
.feature-content {
1817
width: 50%;
1918
height: 80%;
2019
}

‎assets/css/home.css‎

Lines changed: 35 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -12,88 +12,67 @@ button, [role=button] {
1212
color: var(--button-color);
1313
border-radius: 0.5rem;
1414
border: var(--button-color) solid 1px;
15-
}
1615

17-
button:hover {
18-
background-color: hsl(from var(--button-color) h s l / 10%)
16+
&:hover {
17+
background-color: hsl(from var(--button-color) h s l / 10%)
18+
}
1919
}
2020

2121
.stripe {
22+
display: grid;
23+
flex-direction: column;
24+
grid-template-rows: auto 1fr;
25+
padding: 1rem;
2226
width: 100%;
2327
height: 40rem;
28+
gap: 1rem;
29+
30+
@media (min-width: 1024px) {
31+
grid-template-rows: none;
32+
height: 27rem;
33+
}
2434
}
2535

2636
.black {
27-
display: flex;
28-
flex-direction: column;
2937
background-color: #27272a;
3038
color: white;
3139
height: auto;
32-
}
3340

34-
.black > div {
35-
width: 100%;
36-
padding: 1.5rem;
37-
}
41+
ul {
42+
padding: 0;
43+
}
3844

39-
.black ul {
40-
padding: 0;
41-
}
45+
#fizzbuzz-wrapper {
46+
width: 100%;
47+
height: 14rem;
48+
}
4249

43-
#fizzbuzz-wrapper {
44-
width: 100%;
45-
height: 14rem;
50+
@media (min-width: 1024px) {
51+
grid-template-columns: 1fr 1fr;
52+
}
4653
}
4754

4855
.red {
56+
display: block;
4957
background-color: #ef4444;
5058
color: black;
5159
--button-color: black;
5260
}
5361

5462
.gold {
55-
display: flex;
56-
flex-direction: column;
57-
padding: 1.5rem;
63+
justify-items: center;
5864
background-color: #facc15;
5965
color: black;
60-
}
6166

62-
#vs-code-text {
63-
width: 100%;
64-
}
65-
66-
#vs-code-img {
67-
width: 100%;
68-
padding: 1rem;
69-
display: flex;
70-
justify-content: center;
71-
}
72-
73-
#vs-code-img img {
74-
width: 100%;
75-
max-width: 36rem;
76-
}
77-
78-
@media (min-width: 1024px) {
79-
.stripe {
80-
height: 27rem;
81-
}
82-
.black, .gold {
83-
flex-direction: row;
84-
}
85-
.black > div {
86-
width: 50%;
87-
}
88-
#vs-code-text {
89-
width: 40%;
90-
height: 100%;
67+
@media (min-width: 1024px) {
68+
grid-template-columns: 1fr 2fr;
69+
70+
#fizzbuzz-wrapper {
71+
height: 66.66%;
72+
}
9173
}
92-
#vs-code-img {
93-
width: 60%;
94-
height: 100%;
95-
}
96-
#fizzbuzz-wrapper {
97-
height: 66.66%;
74+
75+
img {
76+
max-width: 38rem;
9877
}
99-
}
78+
}

‎assets/css/main.css‎

Lines changed: 30 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -23,13 +23,8 @@ h1 {
2323
}
2424

2525
h2 {
26-
font-size: 1.5rem; /* 24px */
27-
line-height: 2rem; /* 32px */
28-
}
29-
30-
.small {
31-
font-size: 0.75rem;
32-
line-height: 1rem;
26+
font-size: 1.5rem;
27+
line-height: 2rem;
3328
}
3429

3530
ul {
@@ -43,52 +38,49 @@ p {
4338
main {
4439
display: flex;
4540
flex-direction: column;
46-
padding-top: 4rem;
4741
}
4842

49-
nav {
50-
display: flex;
51-
align-items: center;
43+
header {
44+
display: grid;
45+
grid-template-columns: calc(2rem + 48px) 1fr;
46+
align-items: center;
47+
padding: 10px 2rem;
5248
width: 100%;
53-
height: 4rem;
54-
justify-content: space-around;
55-
position: fixed;
49+
position: sticky;
5650
top: 0;
5751
z-index: 1;
52+
color: white;
5853
background-color: #171717;
59-
font-size: 1.125rem;
60-
}
6154

62-
nav a {
63-
color: white;
64-
text-decoration: none;
65-
}
55+
a {
56+
text-decoration: none;
57+
}
58+
59+
nav {
60+
display: flex;
61+
flex-wrap: wrap;
62+
column-gap: 2rem;
63+
font-size: 1.25rem;
64+
}
6665

66+
@media screen and (max-width: 400px) {
67+
grid-template-columns: 0 1fr;
68+
svg {
69+
display: none;
70+
}
6771

68-
@media screen and (max-width: 425px) {
69-
nav svg {
70-
display: none;
72+
nav {
73+
font-size: 1.125rem;
74+
}
7175
}
7276
}
7377

7478
a {
7579
color: inherit;
76-
}
7780

78-
a:hover {
79-
text-decoration: underline;
80-
}
81-
82-
footer {
83-
width: 100%;
84-
height: 4rem;
85-
background-color: #171717;
86-
color: white;
87-
display: flex;
88-
flex-direction: row;
89-
align-items: center;
90-
gap: 1rem;
91-
padding: 1rem;
81+
&:hover {
82+
text-decoration: underline;
83+
}
9284
}
9385

9486
::-webkit-scrollbar {

‎assets/css/reset.css‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,6 @@
66
*, ::before, ::after {
77
box-sizing: border-box; /* 1 */
88
border-width: 0; /* 2 */
9-
border-style: solid; /* 2 */
10-
border-color: currentColor; /* 2 */
119
}
1210

1311
/*
@@ -159,8 +157,7 @@ textarea {
159157
Set the default cursor for buttons.
160158
*/
161159

162-
button,
163-
[role="button"] {
160+
button, [role="button"] {
164161
cursor: pointer;
165162
}
166163

‎content/de/_index.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,4 +16,4 @@ DDP ist eine (Witz-)Programmiersprache von NotLe0n und bafto, die so entworfen w
1616

1717
<br>
1818

19-
<p class="small">* für Deutsche</p>
19+
<small>* für Deutsche</small>

‎layouts/_default/baseof.html‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,19 @@
22
<html lang="{{ or site.Language.LanguageCode site.Language.Lang }}" dir="{{ or site.Language.LanguageDirection `ltr` }}">
33
{{ partial "head" . }}
44
<body>
5-
<nav>
5+
<header>
66
{{- $logo := resources.Get "/img/ddp-logo.svg" | minify }}
77
<a href="/">{{ $logo.Content | safeHTML}}</a>
8-
9-
<a href='{{ T "docs-link" }}'>Bedienungsanleitung</a>
10-
<a href="https://spiel.ddp.im">Spielplatz</a>
11-
<a href="https://github.com/DDP-Projekt">GitHub</a>
12-
</nav>
8+
<nav>
9+
<a href='{{ T "docs-link" }}'>Bedienungsanleitung</a>
10+
<a href="https://spiel.ddp.im">Spielplatz</a>
11+
<a href="/changelog">Changelog</a>
12+
<a href="https://github.com/DDP-Projekt">GitHub</a>
13+
<a href="mailto:contact@ddp.im">Kontakt</a>
14+
</nav>
15+
</header>
1316
<main>
1417
{{ block "main" . }}{{ end }}
1518
</main>
16-
<footer>
17-
<a href="mailto:contact@ddp.im">contact</a>
18-
<a href="/changelog">DDP changelog</a>
19-
</footer>
2019
</body>
2120
</html>

‎layouts/_default/home.html‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
{{ .Content }}
88
<br>
99
{{ $other := (index .Translations 0) }}
10-
<a href="{{ $other.Permalink}}" class="small">{{ $other.Language.LanguageName }} site</a>
10+
<a href="{{ $other.Permalink}}"><small>{{ $other.Language.LanguageName }} site</small></a>
1111
</div>
1212
<div>
1313
<div id="fizzbuzz-wrapper">
@@ -22,13 +22,11 @@
2222
{{ partial "features" . }}
2323
</div>
2424
<div class="stripe gold">
25-
<div id="vs-code-text">
25+
<div>
2626
{{ with .Site.GetPage "vscode-support" }}
2727
{{ .Content }}
2828
{{ end }}
2929
</div>
30-
<div id="vs-code-img">
31-
<img src="/img/vscode-screenshot.png" alt="vscode" width="100%">
32-
</div>
30+
<img src="/img/vscode-screenshot.png" alt="vscode" width="100%">
3331
</div>
3432
{{- end -}}

‎layouts/partials/dl-row.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<div id="dl-wrapper">
66
<button id="dl-btn">
77
<div id="dl-label">
8-
<svg id="dl-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg>
8+
<svg id="dl-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="1rem" height="1rem"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg>
99
<span>{{ T "download" }}</span>
1010
</div>
1111
<span id="dl-text"></span>

0 commit comments

Comments
 (0)