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>
|
<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>
|
||||||
|
|
46
style.css
46
style.css
|
@ -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;
|
||||||
|
|
Loading…
Reference in a new issue