extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2025-06-26 04:21:38 +02:00
Code Issues Packages Projects Releases Wiki Activity

[design] improve responsive layout and font size

Browse Source
This commit is contained in:
zombieFox 2018-12-26 23:34:04 -07:00
parent 968a43ab3b
commit 2bd6aad056
2 changed files with 27 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
css/base.css
View File

@ -53,9 +53,11 @@
} }
@media (min-width: 700px) { @media (min-width: 700px) {
:root {
--root-font-size: 16px;
}
:root.is-link-block { :root.is-link-block {
--link-height: 9em; --link-height: 9em;
--root-font-size: 16px;
} }
} }

29
css/grid.css
View File

@ -10,7 +10,7 @@
} }
.grid-item-head { .grid-item-head {
padding: 1em 2em 0 2em; padding: 2em 2em 0 2em;
width: 100%; width: 100%;
} }
@ -26,12 +26,19 @@
} }
@media (min-width: 700px) { @media (min-width: 700px) {
.grid-item-head,
.grid-item-body {
padding-left: 8vw;
padding-right: 8vw;
}
.grid-item-head { .grid-item-head {
padding: 4em 2em 2em 2em; padding-top: 3em;
} }
.grid-item-body { .grid-item-body {
padding: 2em 2em 25vh 2em; padding-bottom: 25vh;
grid-template-columns: repeat(3, minmax(1em, 1fr)); grid-template-columns: repeat(3, minmax(1em, 1fr));
} }
} }
@ -40,16 +47,28 @@
.grid-item-head, .grid-item-head,
.grid-item-body { .grid-item-body {
padding-left: 15vw; padding-left: 11vw;
padding-right: 15vw; padding-right: 11vw;
}
.grid-item-head {
padding-top: 4em;
} }
.grid-item-body { .grid-item-body {
padding-top: 3em;
grid-template-columns: repeat(4, minmax(1em, 1fr)); grid-template-columns: repeat(4, minmax(1em, 1fr));
} }
} }
@media (min-width: 1300px) { @media (min-width: 1300px) {
.grid-item-head,
.grid-item-body {
padding-left: 14vw;
padding-right: 14vw;
}
.grid-item-body { .grid-item-body {
grid-template-columns: repeat(5, minmax(1em, 1fr)); grid-template-columns: repeat(5, minmax(1em, 1fr));
} }