mirror of
https://github.com/sbrl/Minetest-WorldEditAdditions.git
synced 2024-08-20 13:34:05 +02:00
Support smaller screens
This commit is contained in:
parent
96a645c546
commit
f0bafdcb64
@ -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" %}
|
||||||
|
@ -10,6 +10,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 {
|
||||||
|
33
.docs/css/smallscreens.css
Normal file
33
.docs/css/smallscreens.css
Normal 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;
|
||||||
|
}
|
||||||
|
}
|
@ -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;
|
||||||
|
Loading…
Reference in New Issue
Block a user