[design] improve head spacing

This commit is contained in:
zombieFox 2018-12-27 09:27:28 -07:00
parent ff56cec78e
commit fe92c77fcd
2 changed files with 11 additions and 16 deletions

View File

@ -10,7 +10,7 @@
}
.grid-item-head {
padding: 2em 2em 0 2em;
padding: 2em 2em 1em 2em;
width: 100%;
}
@ -33,12 +33,7 @@
padding-right: 8vw;
}
.grid-item-head {
padding-top: 3em;
}
.grid-item-body {
padding-bottom: 25vh;
grid-template-columns: repeat(3, minmax(1em, 1fr));
}
}
@ -51,12 +46,7 @@
padding-right: 11vw;
}
.grid-item-head {
padding-top: 4em;
}
.grid-item-body {
padding-top: 3em;
grid-template-columns: repeat(4, minmax(1em, 1fr));
}
}
@ -69,6 +59,11 @@
padding-right: 14vw;
}
.grid-item-head {
padding-top: 3em;
padding-bottom: 2em;
}
.grid-item-body {
grid-template-columns: repeat(5, minmax(1em, 1fr));
}

View File

@ -30,10 +30,10 @@
<div class="grid-item-head">
<div class="head">
<div class="head-item mb-3 mb-lg-0">
<div class="head-item mb-3 mb-xl-0">
<p class="clock"></p>
</div>
<div class="head-item head-search mb-3 mb-lg-0">
<div class="head-item head-search mb-3 mb-xl-0">
<form class="search" action="http://www.google.com/search" method="get">
<input class="search-input mb-0" type="text" placeholder="Find bookmarks or search" tabindex="1" name="q" autocomplete="off" tabindex="1">
<input type="submit" value="Search" class="is-hidden">
@ -42,7 +42,7 @@
<span class="icon-close"></span>
</button>
</div>
<div class="head-item button-group mb-3 mb-lg-0">
<div class="head-item button-group mb-3 mb-xl-0">
<button class="button mb-0 control-add" tabindex="1">
<span class="button-text">Add</span>
</button>
@ -50,7 +50,7 @@
<span class="button-text">Edit</span>
</button>
</div>
<div class="head-item button-group mb-3 mb-lg-0">
<div class="head-item button-group mb-3 mb-xl-0">
<button class="button mb-0 control-link-list" tabindex="1">
<span class="button-text">List</span>
</button>
@ -58,7 +58,7 @@
<span class="button-text">Block</span>
</button>
</div>
<div class="head-item mb-3 mb-lg-0">
<div class="head-item mb-3 mb-xl-0">
<form class="theme">
<label class="button mb-0 theme-label" for="accent-picker">
<span class="button-text">Accent</span>