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> <title>Snuffler</title>
</head> </head>
<body> <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="centerbox">
<div id="titlebox"><img src="favicon.ico" />Snuffler</div> <div id="titlebox"><img src="favicon.ico" />Snuffler</div>
@ -67,5 +84,6 @@ $database->close();
?> ?>
</div> </div>
</div>
</body> </body>
</html> </html>

View file

@ -7,6 +7,26 @@ hr {
border-color: #584200; 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 { #loginform {
text-align: center; text-align: center;
} }
@ -19,17 +39,22 @@ hr {
height: 1em; height: 1em;
} }
#centerbox { #centerbox {
margin: auto; margin-left: 1rem;
max-width: 50em; margin-right: 1rem;
background-color: #271d00;
border-radius: 1rem;
padding: .5rem;
flex-grow: 1;
order: 1;
} }
#postform { #postform {
margin-top: 1em; margin-top: 1rem;
margin-bottom: 1em; margin-bottom: 1rem;
} }
#postformtextarea { #postformtextarea {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
border-radius: 1em; border-radius: 1rem;
} }
#postformactionrow { #postformactionrow {
text-align: right; text-align: right;
@ -38,14 +63,9 @@ hr {
.post { .post {
border-style: solid; border-style: solid;
border-width: 1px; border-width: 1px;
padding: 1em; padding: 1rem;
margin-top: 1em; margin-top: 1rem;
margin-bottom: 1em; border-radius: 1rem;
border-radius: 1em;
/*
margin: auto;
max-width: 50em;
*/
} }
.postactions { .postactions {
float: right; float: right;