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/theme.css" %}
|
||||
{% include "css/gallerybox.css" %}
|
||||
{% include "css/smallscreens.css" %}
|
||||
|
@ -11,6 +11,12 @@ be (slightly) less hacky once :target-within lands in browsers.
|
||||
Exported to codepen: https://codepen.io/sbrl/details/YzZJYxg
|
||||
*/
|
||||
|
||||
@media (orientation: landscape) {
|
||||
.gallerybox-gallery {
|
||||
max-width: 95vw;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.gallerybox {
|
||||
display: flex;
|
||||
|
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;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
}
|
||||
nav > ul a {
|
||||
background: var(--bg-transcluscent-slight);
|
||||
@ -247,6 +248,7 @@ footer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
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)),
|
||||
var(--bg) center / cover;
|
||||
|
||||
@ -271,7 +273,7 @@ footer {
|
||||
.features-large > :where(figure, .features-item) {
|
||||
background: var(--bg-transcluscent);
|
||||
background-image: var(--pattern-bricks);
|
||||
margin: 0.1em;
|
||||
margin: 1em 0.1em;
|
||||
padding: 1em;
|
||||
max-width: 15em;
|
||||
box-shadow: 0.25em 0.25em 0.5em var(--shadow);
|
||||
@ -306,12 +308,13 @@ footer {
|
||||
padding: 1em 0;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.bigbutton {
|
||||
display: inline-block;
|
||||
|
||||
margin: 0;
|
||||
margin: 0.25em 0;
|
||||
padding: 0.35em 0.45em;
|
||||
border: 0;
|
||||
border-radius: 0.25em;
|
||||
|
Loading…
Reference in New Issue
Block a user