rnhmjoj/breve
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Use flexbox for a sane layout

Browse Source
This commit is contained in:
rnhmjoj 2015-04-21 16:13:55 +02:00
parent 5bb954aa8c
commit 619bd7f7dd
2 changed files with 16 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
layouts/main.css
View File

@ -1,54 +1,32 @@
@import url(http://fonts.googleapis.com/css?family=Inconsolata:400,700);
@import url(http://reset5.googlecode.com/hg/reset.min.css);
html, body { overflow: hidden }
body, input { font-size: 1.1em }
@import url(https://cdn.rawgit.com/necolas/normalize.css/master/normalize.css);
body {
background-color: #181b20;
color: #9b9081;
font-family: Inconsolata;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
}
#container {
text-align:center;
position: absolute;
height: 100%;
width: 100%;
}
#center { align-self: center }
#container:before {
content: '';
display: inline-block;
height: 75%;
min-height: 20em;
vertical-align: middle;
}
#center {
display: inline-block;
text-align:left;
margin-top: -2em;
}
body,input { font-size: 1.1em; }
footer {
position: absolute;
width: 100%;
bottom: 0;
left: 0;
padding: 1em;
font-size: .9em;
color: #595450;
padding: 1em;
}
footer span {
float: right;
margin-right: 2em;
footer span {
float: right;
margin-right: 2em;
}
h1 {
margin: 1em 0 0 1em;
font-size: 1.8em;
font-weight: 700;
color: #515e66;
@ -76,6 +54,7 @@ input[type="submit"] {
background: transparent;
color: #775750;
cursor: pointer;
padding: .2em .4em!important;
}
a:link, a:visited {

9
layouts/main.html
View File

@ -7,13 +7,14 @@
<meta name="author" content="Michele Guerini Rocco">
<meta charset="utf-8">
<link rel=stylesheet href="main.css" type="text/css">
<script src="https://cdn.rawgit.com/LeaVerou/prefixfree/gh-pages/prefixfree.min.js"></script>
</head>
<body>
<h1><a href="/">BREVE</a></h1>
<header>
<h1><a href="/">BREVE</a></h1>
<h2>a url shortener</h2>
<div id="container">
<div id="center">$yield$</div>
</div>
</header>
<div id="center">$yield$</div>
<footer>
breve is open <a href="https://github.com/rnhmjoj/breve">source</a>
<span>© Rnhmjoj</span>