drobná úprava vzhledu

master
David Zálešák 4 years ago
parent 3e1238cd49
commit 2e91df6260

@ -1,70 +1,75 @@
body, html { body,
margin: 0; html {
padding: 0; margin: 0;
height: 100%; padding: 0;
height: 100%;
} }
nav { nav {
border-bottom: 2px solid #ccc; border-bottom: 2px solid #ccc;
margin: 0; margin: 0;
grid-area: nav; grid-area: nav;
padding: 0.3em 2em;
} }
ul { ul {
margin: 0; margin: 0;
padding-left: 10pt; padding-left: 10pt;
list-style: none; list-style: none;
} }
ul:nth-child(1) { ul:nth-child(1) {
padding: 1em 1em; padding: 1em 1em;
}
li:hover {
background-color: blue;
} }
li::before { li::before {
content: ''; content: "";
margin-right: 5pt; margin-right: 5pt;
width: 1em; width: 1em;
height: 1em; height: 1em;
display: inline-block; display: inline-block;
} }
li[style]::before { li[style]::before {
content: ''; content: "";
display: inline-block; display: inline-block;
background-image: url('../img/arrow-down.svg'); background-image: url("../img/arrow-down.svg");
background-size: cover; background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
width: 0.7em; width: 0.7em;
height: 0.7em; height: 0.7em;
margin-right: 3pt; margin-right: 3pt;
} }
.container { .container {
display: grid; display: grid;
grid-template-columns: max-content auto; grid-template-columns: max-content auto;
grid-template-rows: 3em auto auto; grid-template-rows: max-content auto max-content;
height: 100%; height: 100%;
grid-template-areas: grid-template-areas:
"nav nav" "nav nav"
"aside section" "aside section"
"footer footer"; "footer footer";
} }
section { section {
grid-area: section; grid-area: section;
} }
aside { aside {
margin: 0; margin: 0;
height: 100%; height: 100%;
grid-area: aside; grid-area: aside;
overflow-y: scroll; overflow-y: scroll;
margin-right: 2px solid #ccc; margin-right: 2px solid #ccc;
} }
footer { footer {
border-top: 2px solid #ccc; border-top: 2px solid #ccc;
grid-area: footer; grid-area: footer;
text-align: right; text-align: right;
padding: 0.3em 2em; padding: 0.3em 2em;
}
}

@ -14,7 +14,10 @@
<div class="container"> <div class="container">
<nav></nav> <nav>
<button class="clone">Clone</button>
<button class="purge">Purge</button>
</nav>
<aside> <aside>
<ul> <ul>