sbrl-github/Minetest-WorldEditAdditions
1
0
Fork 0
mirror of https://github.com/sbrl/Minetest-WorldEditAdditions.git synced 2024-11-26 09:03:01 +00:00
Code Issues Releases Wiki Activity

Support smaller screens

Browse source
This commit is contained in:
Starbeamrainbowlabs 2021-06-21 01:12:18 +01:00
parent 96a645c546
commit f0bafdcb64
Signed by: sbrl
GPG key ID: 1BE5172E637709C2
4 changed files with 45 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.docs/css.njk
View file

@ -4,3 +4,4 @@ permalink: theme.css
{% include "css/patterns.css" %} {% include "css/patterns.css" %}
{% include "css/theme.css" %} {% include "css/theme.css" %}
{% include "css/gallerybox.css" %} {% include "css/gallerybox.css" %}
{% include "css/smallscreens.css" %}

6
.docs/css/gallerybox.css
View file

@ -11,6 +11,12 @@ be (slightly) less hacky once :target-within lands in browsers.
Exported to codepen: https://codepen.io/sbrl/details/YzZJYxg Exported to codepen: https://codepen.io/sbrl/details/YzZJYxg
*/ */
@media (orientation: landscape) {
.gallerybox-gallery {
max-width: 95vw;
}
}
.gallerybox { .gallerybox {
display: flex; display: flex;

33
.docs/css/smallscreens.css Normal file
View file

@ -0,0 +1,33 @@
@media (max-width: 1200px) {
nav > ul a {
padding: 0.5em;
}
}
@media (max-width: 930px) {
nav {
display: flex;
flex-direction: column;
align-items: center;
}
nav > h1 {
width: 100%;
}
.bigbox {
padding: 0 5vmin;
}
}
@media (max-width: 640px) {
nav > ul {
padding-top: 0.5em;
flex-wrap: wrap;
}
.bigbox h1 {
font-size: 1.5em;
}
}

7
.docs/css/theme.css
View file

@ -102,6 +102,7 @@ nav ul {
margin: 0; padding: 0; margin: 0; padding: 0;
display: flex; display: flex;
justify-content: space-evenly; justify-content: space-evenly;
align-items: center;
} }
nav > ul a { nav > ul a {
background: var(--bg-transcluscent-slight); background: var(--bg-transcluscent-slight);
@ -247,6 +248,7 @@ footer {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; justify-content: center; align-items: center; justify-content: center;
text-align: center; /* If any text wraps in a <p>, then this makes sure it's still centred */
background: content-box linear-gradient(var(--bg-transcluscent), var(--bg-transcluscent)), background: content-box linear-gradient(var(--bg-transcluscent), var(--bg-transcluscent)),
var(--bg) center / cover; var(--bg) center / cover;
@ -271,7 +273,7 @@ footer {
.features-large > :where(figure, .features-item) { .features-large > :where(figure, .features-item) {
background: var(--bg-transcluscent); background: var(--bg-transcluscent);
background-image: var(--pattern-bricks); background-image: var(--pattern-bricks);
margin: 0.1em; margin: 1em 0.1em;
padding: 1em; padding: 1em;
max-width: 15em; max-width: 15em;
box-shadow: 0.25em 0.25em 0.5em var(--shadow); box-shadow: 0.25em 0.25em 0.5em var(--shadow);
@ -306,12 +308,13 @@ footer {
padding: 1em 0; padding: 1em 0;
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
flex-wrap: wrap;
} }
.bigbutton { .bigbutton {
display: inline-block; display: inline-block;
margin: 0; margin: 0.25em 0;
padding: 0.35em 0.45em; padding: 0.35em 0.45em;
border: 0; border: 0;
border-radius: 0.25em; border-radius: 0.25em;