switched to a grid-based layout

This commit is contained in:
/dev/urandom 2020-07-28 14:25:58 +03:00
parent 73680fdc17
commit 63aba48524
2 changed files with 91 additions and 30 deletions

View file

@ -29,6 +29,7 @@
#define C_LWRN #f5ee9b #define C_LWRN #f5ee9b
#define C_LGREEN #7cc264 #define C_LGREEN #7cc264
#define C_DGREEN #316F23
@font-face { @font-face {
font-family: "Xolonium"; font-family: "Xolonium";
@ -51,7 +52,6 @@ body {
margin: 0; margin: 0;
} }
blockquote { blockquote {
margin: 6pt; margin: 6pt;
padding-inline: 1em; padding-inline: 1em;
@ -93,15 +93,43 @@ th, td {
display: inline; display: inline;
} }
.footer { .footer, .navbar {
background: C_FOOTERBG; background: C_FOOTERBG;
color: C_FOOTERFG; color: C_FOOTERFG;
text-align: center; text-align: center;
font-family: sans-serif; font-family: sans-serif;
font-size: 0.8em; font-size: 0.8em;
}
.navbar {
padding: 6pt;
}
.footer {
padding: 12pt 6pt; padding: 12pt 6pt;
} }
.nav_linkmenu a {
display: inline-block;
background: C_FOOTERBG;
margin: 3px;
padding: 3px;
border: 1px solid C_DBORDER;
color: C_FOOTLINK;
}
.nav_linkmenu a:hover {
background: C_LWRN;
color: C_BODYFG;
border: 1px solid C_DWRN;
}
.nav_linkmenu a:active {
background: C_LGREEN;
color: C_BODYFG;
border: 1px solid C_DGREEN;
}
.footer a, .footer a:visited { .footer a, .footer a:visited {
color: C_FOOTLINK; color: C_FOOTLINK;
} }
@ -225,5 +253,31 @@ HASH(#itime-progress) {
max-width: 768pt; max-width: 768pt;
margin: auto; margin: auto;
} }
.middle {
display: grid;
grid-template-columns: 160pt auto;
grid-template-rows: 100fr auto;
}
.navbar {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
}
.footer {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 2;
grid-row-end: 3;
}
.content {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3;
}
.nav_linkmenu a {
display: block;
}
} }

View file

@ -1,4 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<!-- vim: set sw=2: -->
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
@ -20,6 +21,11 @@
<h2><a href="/">rnd's website</a><span class="titlesep"> | </span></h2><h3><?theme title?></h3> <h2><a href="/">rnd's website</a><span class="titlesep"> | </span></h2><h3><?theme title?></h3>
</div> </div>
</div> </div>
<div class="middle">
<div class="navbar nav_linkmenu">
<a href="/index.html">Main page</a>
<a href="/tokipona">toki pona</a>
</div>
<div class="content"> <div class="content">
<?theme body?> <?theme body?>
</div> </div>
@ -43,6 +49,7 @@
Website created and updated by /dev/urandom. Source code available on the Website created and updated by /dev/urandom. Source code available on the
<a href="https://gitlab.com/dev_urandom/simple-site">GitLab page</a>. <a href="https://gitlab.com/dev_urandom/simple-site">GitLab page</a>.
</div> </div>
</div>
</body> </body>
<script src="/scripts.js"></script> <script src="/scripts.js"></script>
</html> </html>