Skip to content

Commit 7fb34e5

Browse files
alanlomelinojaf
andauthored
Mobile optimizations (#2496)
* Mobile optimizations Typing text hidden on mobile Community sponsors optimized on mobile Removal of news menu item Minor tweaks * Make header smaller on mobile Long scrollbar on docs sidebar menu fixed Different fix for cards padding * Tweaks Co-authored-by: alanlomeli <[email protected]> Co-authored-by: nojaf <[email protected]>
1 parent 1e8c68c commit 7fb34e5

File tree

3 files changed

+30
-7
lines changed

3 files changed

+30
-7
lines changed

docs/.style/homepage.sass

Lines changed: 24 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,12 @@ html, body
99
border: 1px solid red
1010

1111
header
12-
height: 100vh
12+
height: 500px
1313
position: relative
14-
padding: 4rem 0
14+
15+
@include media-breakpoint-up(md)
16+
padding: 4rem 0
17+
height: 100vh
1518

1619
video
1720
filter: blur(0.025rem)
@@ -76,18 +79,21 @@ header
7679
// border-top: 1px solid $white
7780
7881
#core-title
82+
display: none
7983
color: $white
8084
text-align: center
8185
font-size: 4rem
8286
position: absolute
8387
top: 50%
8488
left: 50%
8589
transform: translate(-50%, -50%)
90+
@include media-breakpoint-up(md)
91+
display: block
8692

8793
#cta-buttons
8894
z-index: 1
8995
position: absolute
90-
bottom: 9rem
96+
bottom: 2rem
9197
left: 50%
9298
transform: translateX(-50%)
9399

@@ -98,6 +104,21 @@ header
98104
margin: 0 1rem
99105
margin-bottom: 1rem
100106

107+
.community-sponsors
108+
flex-wrap: wrap
109+
justify-content: space-around
110+
align-items: center
111+
li
112+
padding: 0.3rem
113+
flex: 45%
114+
@include media-breakpoint-up(md)
115+
justify-content: space-evenly
116+
flex-direction: row
117+
@include media-breakpoint-up(sm)
118+
padding: 0.3rem
119+
align-items: center
120+
flex-direction: row
121+
101122
.discord
102123
position: fixed
103124
background-color: $primary

docs/.style/sidebar.sass

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,12 @@ $sidebar-width: 300px
66
77
@mixin hide-column
88
max-width: 0
9+
max-height: 0
910
overflow-x: hidden
1011

1112
@mixin reset-column
1213
max-width: initial
14+
max-height: initial
1315
overflow-x: initial
1416

1517
body

docs/index.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@
6161
<li class="nav-item">
6262
<a class="nav-link" href="./docs/index.html">Documentation</a>
6363
</li>
64-
<li class="nav-item">
64+
<li class="nav-item d-none">
6565
<a class="nav-link" href="./news">News</a>
6666
</li>
6767
<li class="nav-item">
@@ -249,7 +249,7 @@ <h3 class="my-4">Enterprise sponsors</h3>
249249
</div>
250250
</div>
251251
<h3 class="my-4">Community sponsors</h3>
252-
<ul class="mt-3 list-unstyled d-flex justify-content-evenly">
252+
<ul class="community-sponsors mt-3 list-unstyled d-flex">
253253
<li><a href="https://tinybluerobots.com"><img src="https://github.com/TinyBlueRobots.png?size=50" alt="Tiny Blue Robots" class="me-2 img-thumbnail">Tiny Blue Robots</a></li>
254254
<li><a href="https://github.com/ThisFunctionalTom"><img src="https://github.com/ThisFunctionalTom.png?size=50" alt="Tomas Leko" class="me-2 img-thumbnail">Tomas Leko</a></li>
255255
<li><a href="https://github.com/zyzhu"><img src="https://github.com/zyzhu.png?size=50" alt="Zhenyong Zhu" class="me-2 img-thumbnail">Zhenyong Zhu</a></li>
@@ -327,7 +327,7 @@ <h5 class="card-title text-primary"><i class="bi bi-newspaper me-1"></i>Fantomas
327327
</div>
328328
</div>
329329
</div>
330-
<div class="col-md-4">
330+
<div class="col-md-4 mt-4 mt-md-0">
331331
<div class="card bg-white">
332332
<div class="card-body text-dark">
333333
<h5 class="card-title text-primary"><i class="bi bi-newspaper me-1"></i>World domination,
@@ -365,7 +365,7 @@ <h5 class="card-title text-primary"><i class="bi bi-youtube me-1"></i>Daemon</h5
365365
</div>
366366
</div>
367367
</div>
368-
<div class="col-md-4">
368+
<div class="col-md-4 mt-4 mt-md-0">
369369
<div class="card bg-white">
370370
<div class="card-body text-dark">
371371
<h5 class="card-title text-primary"><i class="bi bi-newspaper me-1"></i>Formatting your code the easy way</h5>

0 commit comments

Comments
 (0)