extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2024-10-05 01:31:57 +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) {
:root {
--root-font-size: 16px;
}
:root.is-link-block {
--link-height: 9em;
--root-font-size: 16px;
}
}

29
css/grid.css
View File

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