What a *flex*

This commit is contained in:
Jarkko Toivanen 2024-09-28 19:42:37 +03:00
parent 261816fa4e
commit 3de23d681b
Signed by: jt
GPG key ID: 9151B109B73ECAD5
2 changed files with 51 additions and 13 deletions

View file

@ -14,6 +14,23 @@ if(!$database) {
<title>Snuffler</title>
</head>
<body>
<div id="flexout">
<div id="lpanel" class="flexpanel">
<ul>
<li>Kotisivu</li>
<li>Viestit</li>
<li>Kalavaleet</li>
<li>Takasivu</li>
</ul>
</div>
<div id="rpanel" class="flexpanel">
<ul>
<li>Mikko Mällikäs<br /><small>@mmallikas</small></li>
<li>Jarkko Toivanen<br /><small>@jt</small></li>
</ul>
</div>
<div id="centerbox">
<div id="titlebox"><img src="favicon.ico" />Snuffler</div>
@ -67,5 +84,6 @@ $database->close();
?>
</div>
</div>
</body>
</html>

View file

@ -7,6 +7,26 @@ hr {
border-color: #584200;
}
#flexout {
display: flex;
max-width: 75rem;
margin: auto;
justify-content: center;
}
#lpanel {
order: 0;
}
#rpanel {
order: 2;
}
#rpanel, #lpanel, .flexpanel {
width: 15rem;
border-radius: 1rem;
padding: .5rem;
background-color: #271d00;
}
#loginform {
text-align: center;
}
@ -19,17 +39,22 @@ hr {
height: 1em;
}
#centerbox {
margin: auto;
max-width: 50em;
margin-left: 1rem;
margin-right: 1rem;
background-color: #271d00;
border-radius: 1rem;
padding: .5rem;
flex-grow: 1;
order: 1;
}
#postform {
margin-top: 1em;
margin-bottom: 1em;
margin-top: 1rem;
margin-bottom: 1rem;
}
#postformtextarea {
box-sizing: border-box;
width: 100%;
border-radius: 1em;
border-radius: 1rem;
}
#postformactionrow {
text-align: right;
@ -38,14 +63,9 @@ hr {
.post {
border-style: solid;
border-width: 1px;
padding: 1em;
margin-top: 1em;
margin-bottom: 1em;
border-radius: 1em;
/*
margin: auto;
max-width: 50em;
*/
padding: 1rem;
margin-top: 1rem;
border-radius: 1rem;
}
.postactions {
float: right;