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

9
layouts/main.html
View File

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