Skip to content

Commit c454067

Browse files
dschodscho
authored
Make site mobile responsive (#26)
## Summary This PR closes #19 and makes the site (all 3 pages) mobile responsive without changing the intended UI on desktop, except for the non-homepage table banner which has been removed to remain stylistically consistent with the homepage banner, responsive and more maintainable. No content has been edited. A live demo can be tested here [https://gitgitgadget.ritovision.com](https://gitgitgadget.ritovision.com) ## What has changed - Viewport tag added - The header table is replaced with a responsive block display - non-homepage pages no longer use the table banner, instead sharing the homepage banner structure - Left and right margin spacing reduced on mobile breakpoint - Banner title decreased on small ≤450 screen sizes to fit without overflow behaviors - Horizontal broken page scrolling caused by content not fitting on small screens is resolved by: - making image sizes responsive - making code blocks use overflow scroll - making long text strings break apart and wrap down to the next line as needed <details><summary><strong>Before and After Screenshots</strong></summary> <br /><br /> **Homepage - BEFORE** <img width="340" alt="homepage-before" src="https://github.com/user-attachments/assets/10420fa1-34ae-4544-abcf-203791b7028b" /> <br /><br /> **Homepage - AFTER** <img width="340" alt="homepage-after" src="https://github.com/user-attachments/assets/64f90c4a-561e-472a-b1d5-cdcf4666af16" /> <br /><br /> **Architecture - BEFORE** <img width="340" alt="architecture-before" src="https://github.com/user-attachments/assets/b7b167d8-3c90-484c-bd5a-fae0a479cbc1" /> <br /><br /> **Architecture - AFTER** <img width="340" alt="architecture-after" src="https://github.com/user-attachments/assets/466da586-2ec9-499b-9f50-afbb538e74c4" /> <br /><br /> **Reply-to-this - BEFORE** <img width="340" alt="reply-to-this-before" src="https://github.com/user-attachments/assets/87008963-5a2e-4da6-afc4-f4ea07bf46c4" /> <br /><br /> **Reply-to-this - AFTER** <img width="340" alt="reply-to-this-after" src="https://github.com/user-attachments/assets/01ee2946-c1cd-4c39-9493-de1c1af2d275" /> <br /><br /> --- **Desktop Homepage - BEFORE** <img width="1920" alt="home-desktop-before" src="https://github.com/user-attachments/assets/e0c1c6f6-19c6-407b-bb25-1ec864f9b7e8" /> <br /><br /> **Desktop Homepage - AFTER** *Notice the layout still looks and scales the same* <img width="1920" alt="home-desktop-after" src="https://github.com/user-attachments/assets/f2eabd4e-ff17-4738-a299-cb51d018dc04" /> <br /><br /> </details>
2 parents 77eb329 + 85e377b commit c454067

File tree

3 files changed

+32
-18
lines changed

3 files changed

+32
-18
lines changed

‎assets/sass/main.scss‎

Lines changed: 30 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ body {
44
background-image: linear-gradient(#d7cdc0ff, #fdf7f6ff);
55
margin-right: 10%;
66
margin-left: 10%;
7+
overflow-wrap: break-word;
78
}
89
.block {
910
background-color: rgb(247, 243, 239);
@@ -13,19 +14,36 @@ body {
1314
padding-bottom: .1em;
1415
border-radius: 2em;
1516
}
17+
img {
18+
max-width: 100%;
19+
height: auto;
20+
}
1621
.banner {
1722
text-align: center;
1823
font-weight: bold;
19-
td img {
20-
height: 150px;
21-
}
2224
}
2325
big {
2426
font-size: 400%;
2527
}
2628
small {
2729
font-size: 70%;
2830
}
31+
pre {
32+
background-color: rgb(247, 243, 239);
33+
border: 1px solid #c5bbb0;
34+
border-radius: 0.5em;
35+
padding: 1em;
36+
overflow-x: auto;
37+
}
38+
code {
39+
background-color: rgb(247, 243, 239);
40+
padding: 0.1em 0.3em;
41+
border-radius: 0.25em;
42+
}
43+
pre code {
44+
background-color: transparent;
45+
padding: 0;
46+
}
2947
div.feature-matrix {
3048
table {
3149
border-collapse: collapse;
@@ -60,7 +78,16 @@ div.feature-matrix {
6078
vertical-align: center;
6179
}
6280
}
81+
@media screen and (max-width: 450px) {
82+
big {
83+
font-size: 300%;
84+
}
85+
}
6386
@media screen and (max-width: 767px) {
87+
body {
88+
margin-right: 3%;
89+
margin-left: 3%;
90+
}
6491
.tg {
6592
width: auto !important;
6693
}

‎layouts/_default/baseof.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
46
<title>{{ .Title }}</title>
57
{{- $style := resources.Get "sass/main.scss" | resources.ExecuteAsTemplate "main.scss" . | css.Sass }}
68
<link rel="stylesheet" href="{{ $style.RelPermalink }}">

‎layouts/partials/banner.html‎

Lines changed: 0 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -7,21 +7,6 @@
77
<small>... one iteration at a time... </small>
88
{{- end -}}
99
<div class="banner">
10-
{{- if eq .Kind "home" }}
1110
{{ partial "logo.html" . }}
1211
{{ partial "subtitle.html" . }}
13-
{{- else }}
14-
<table style="width: 100%">
15-
<tbody>
16-
<tr>
17-
<td>
18-
{{ partial "logo.html" . }}
19-
</td>
20-
<td>
21-
{{ partial "subtitle.html" . }}
22-
</td>
23-
</tr>
24-
</tbody>
25-
</table>
26-
{{- end }}
2712
</div>{{ if eq .Kind "home" }}<hr />{{ end }}

0 commit comments

Comments
 (0)