Skip to content

Commit 24422c0

Browse files
committed
Fix mobile styling
1 parent bf16d1b commit 24422c0

File tree

4 files changed

+61
-70
lines changed

4 files changed

+61
-70
lines changed

docs/copy.png

959 Bytes
Loading

docs/index.html

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,10 @@
1717

1818
<script defer src="//unpkg.com/docsify@4.13.1/lib/docsify.min.js"></script>
1919
<script defer src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-csharp.min.js"></script>
20+
<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/zoom-image.min.js"></script>
2021

2122
<link rel="icon" type="image/x-icon" href="/favicon.png" />
2223

23-
2424
<link rel="stylesheet" href="/styles/syntax-coloring.css" />
2525
<link rel="stylesheet" href="/styles/content.css" />
2626
<link rel="stylesheet" href="/styles/navbar.css" />
@@ -30,7 +30,8 @@
3030

3131
<link rel="preconnect" href="https://fonts.googleapis.com" />
3232
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
33-
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
33+
<link rel="stylesheet"
34+
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
3435
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" />
3536
</head>
3637

@@ -43,12 +44,20 @@
4344
<li><a href="/Documentation/">Documentation</a></li>
4445
<li><a href="/Api/LDtk/">Api</a></li>
4546
<li><a href="/Changelog">Changelog</a></li>
46-
<li><a href="https://ldtk.io/json/#ldtk-ProjectJson">Json</a></li>
47+
<li>
48+
<a href="https://ldtk.io/json/#ldtk-ProjectJson">Json</a>
49+
</li>
4750
</ul>
4851
<div class="icon-navbar">
49-
<a href="https://ldtk.io/"><img src="/ldtk.png" class="icon" /></a>
50-
<a href="https://github.com/IrishBruse/LDtkMonogame"><img src="https://ldtk.io/wp-content/themes/ldtk/icons/github.svg" alt="Github" class="icon"></a>
51-
<a href="https://ldtk.io/go/discord"><img src="https://ldtk.io/wp-content/themes/ldtk/icons/discord.svg" alt="Discord" class="icon"></a>
52+
<a href="https://ldtk.io/">
53+
<img src="/ldtk.png" class="icon" />
54+
</a>
55+
<a href="https://github.com/IrishBruse/LDtkMonogame">
56+
<img src="https://ldtk.io/wp-content/themes/ldtk/icons/github.svg" alt="Github" class="icon" />
57+
</a>
58+
<a href="https://ldtk.io/go/discord">
59+
<img src="https://ldtk.io/wp-content/themes/ldtk/icons/discord.svg" alt="Discord" class="icon" />
60+
</a>
5261
</div>
5362
</div>
5463
</nav>

docs/styles/content.css

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -74,12 +74,9 @@ p > code {
7474
display: inline-block;
7575
}
7676

77-
.markdown-section p > img:not([height]) {
78-
height: 28em;
79-
}
80-
8177
.markdown-section p:not([align]) > img {
82-
max-width: 100%;
78+
width: 100%;
79+
max-width: 750px;
8380
border: 1px solid rgba(115, 127, 157, 0.6);
8481
border-radius: 3px;
8582
box-shadow: 2px 8px 0px rgba(0, 0, 0, 0.2);

docs/styles/style.css

Lines changed: 44 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -125,6 +125,16 @@ main.hidden {
125125
text-decoration: underline;
126126
}
127127

128+
body.close .sidebar-toggle {
129+
width: auto;
130+
}
131+
132+
.sidebar {
133+
left: 0px;
134+
width: 300px;
135+
transition: left 250ms ease, width 250ms ease;
136+
}
137+
128138
.content {
129139
position: relative;
130140
left: 300px;
@@ -133,62 +143,23 @@ main.hidden {
133143
}
134144

135145
body.close .sidebar {
136-
transform: translateX(-300px);
137-
}
138-
139-
body.close .sidebar-toggle {
140-
width: auto;
146+
left: -300px;
147+
width: 300px;
141148
}
142149

143150
body.close .content {
144151
left: 0;
145152
width: 100%;
146153
}
147154

148-
@media print {
149-
.github-corner,
150-
.sidebar-toggle,
151-
.sidebar,
152-
.app-nav {
153-
display: none;
154-
}
155+
.app-nav {
156+
overflow-x: auto;
155157
}
156158

157159
@media screen and (max-width: 768px) {
158-
.app-nav {
159-
margin-top: 16px;
160-
}
161-
162-
.icon-navbar,
163-
.app-nav .logo {
164-
display: none;
165-
}
166-
167-
.app-nav li ul {
168-
top: 30px;
169-
}
170-
171-
main {
172-
height: auto;
173-
min-height: 100vh;
174-
overflow-x: hidden;
175-
}
176-
177-
.sidebar {
178-
transform: translateX(-300px);
179-
transition: transform 250ms ease;
180-
}
181-
182-
.content {
183-
left: 0;
184-
width: 100%;
185-
padding-top: 20px;
186-
transition: left 250ms ease;
187-
}
188-
189-
.app-nav,
190-
.github-corner {
191-
transition: transform 250ms ease;
160+
#main {
161+
margin: 0;
162+
max-width: 100%;
192163
}
193164

194165
.sidebar-toggle {
@@ -197,31 +168,33 @@ body.close .content {
197168
padding: 30px 30px 10px 10px;
198169
}
199170

200-
body.close .sidebar {
201-
transform: translateX(300px);
202-
}
203-
204171
body.close .sidebar-toggle {
205172
transition: 1s background-color;
206173
width: 284px;
207174
padding: 10px;
208175
}
209176

210-
body.close .content {
211-
transform: translateX(300px);
177+
body.close .sidebar {
178+
left: 0px;
179+
width: 300px;
180+
transition: left 250ms ease, width 250ms ease;
212181
}
213182

214-
body.close .app-nav,
215-
body.close .github-corner {
216-
display: none;
183+
body.close .content {
184+
position: relative;
185+
left: 300px;
186+
width: 100%;
187+
transition: left 250ms ease, width 250ms ease;
217188
}
218189

219-
.github-corner:hover .octo-arm {
220-
animation: none;
190+
.sidebar {
191+
left: -300px;
192+
width: 300px;
221193
}
222194

223-
.github-corner .octo-arm {
224-
animation: octocat-wave 560ms ease-in-out;
195+
.content {
196+
left: 0;
197+
width: 100%;
225198
}
226199
}
227200

@@ -329,3 +302,15 @@ h4 {
329302
font-size: 1em;
330303
font-weight: normal;
331304
}
305+
.docsify-copy-code-button {
306+
background-color: transparent;
307+
padding: 0px;
308+
padding-top: 10px;
309+
padding-right: 10px;
310+
display: block;
311+
}
312+
.docsify-copy-code-button .label {
313+
font-family: "Material Symbols Outlined";
314+
font-size: 12;
315+
background-color: transparent;
316+
}

0 commit comments

Comments
 (0)