What a *flex*
This commit is contained in:
parent
261816fa4e
commit
3de23d681b
2 changed files with 51 additions and 13 deletions
18
index.php
18
index.php
|
@ -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>
|
||||
|
|
46
style.css
46
style.css
|
@ -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;
|
||||
|
|
Loading…
Reference in a new issue