source for getorbyt.com
getorbyt.com/
client
bsky
orbytapp
app
orbyt
bluesky
getorbyt
orbytvideo
atproto
video
style: update layout and styling for 404 and app pages
- Replace min-height with 100dvh for better responsiveness in 404.astro and app.astro.
- Change body display to grid and center content using place-items for improved layout consistency.
- Remove unnecessary flex properties from container elements to streamline styling.
+7
-13
+2
-3
src/pages/404.astro
+2
-3
src/pages/404.astro
···
41
41
body {
42
42
font-family: 'Figtree', -apple-system, BlinkMacSystemFont, sans-serif;
43
43
background: var(--orbyt-page-bg);
44
-
min-height: 100vh;
45
44
min-height: 100dvh;
46
45
color: var(--orbyt-white);
47
46
overflow-x: hidden;
47
+
display: grid;
48
+
place-items: center;
48
49
}
49
50
50
51
.container {
···
52
53
max-width: var(--site-content-max-width);
53
54
margin-inline: auto;
54
55
padding: var(--site-page-padding-y) var(--site-page-padding-x);
55
-
min-height: 100vh;
56
-
min-height: 100dvh;
57
56
display: flex;
58
57
flex-direction: column;
59
58
}
+5
-10
src/pages/app.astro
+5
-10
src/pages/app.astro
···
41
41
margin: 0;
42
42
padding: 0;
43
43
height: 100%;
44
-
min-height: 100vh;
44
+
min-height: 100%;
45
45
}
46
46
body {
47
47
--bg-color: #000;
48
48
--fg-color: #f3f5fe;
49
49
background: var(--bg-color);
50
50
font-family: 'Figtree', sans-serif;
51
-
display: flex;
52
-
align-items: center;
53
-
justify-content: center;
51
+
min-height: 100dvh;
52
+
display: grid;
53
+
place-items: center;
54
+
overflow-x: hidden;
54
55
}
55
56
.container {
56
-
position: relative;
57
57
width: 100%;
58
58
max-width: 800px;
59
59
padding: 20px;
60
-
min-height: 100vh;
61
-
display: flex;
62
-
flex-direction: column;
63
60
}
64
61
.main-content {
65
-
flex: 1;
66
62
display: flex;
67
63
flex-direction: column;
68
-
justify-content: center;
69
64
align-items: center;
70
65
text-align: center;
71
66
}