UI no longer looks like shit

This commit is contained in:
quad 2015-12-23 16:30:48 +01:00
parent e77154f68b
commit f24699f564
3 changed files with 53 additions and 30 deletions

View File

@ -1,4 +1,4 @@
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,700);
/* Being lazy 101 */
* {
@ -8,39 +8,52 @@
}
body {
font-family: "Lato", sans-serif;
font-family: "Open Sans", "Lato", sans-serif;
color: #ffffff;
background-color: #2d2d2d;
}
.header {
width: 100%;
padding: 10px;
}
.header h1 {
font-size: 36pt;
font-weight: 300;
text-align: center;
}
.header .inner {
width: 100%;
max-width: 920px;
margin-left: auto;
margin-right: auto;
}
.page {
width: 100%;
max-width: 920px;
padding: 10px;
margin-left: auto;
margin-right: auto;
margin-top: 50vh;
transform: translateY(-50%)
}
.title {
font-size: 34pt;
font-weight: 300;
margin-bottom: 20px;
text-align: center;
}
.links {
font-size: 0;
margin-top: 20px;
text-align: center;
list-style: none;
}
.links li {
font-size: 12pt;
display: inline-block;
padding: 5px;
width: 25%;
}
.links li a {
color: inherit;
text-decoration: none;
}
.links li a:hover {
text-decoration: underline;
}
.uploadForm {
margin-top: 80px;
width: 100%;
text-align: center;
}

View File

@ -7,13 +7,6 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="header">
<div class="inner">
<h1>
{{ page.title }}
</h1>
</div>
</div>
<div class="page">
{% block body %}{% endblock %}
</div>

View File

@ -1,14 +1,31 @@
{% extends "layout.html" %}
{% extends "shell.html" %}
{% block body %}
<h1 class="title">
QuadFile
</h1>
<form action="" id="form" name="fileForm" method="post" enctype="multipart/form-data" class="uploadForm">
<div class="uploadButton">
<p>
Select a file
Click to select a file
</p>
<input id="file" type="file" name="file">
</div>
<input type="hidden" name="source" value="web">
</form>
<ul class="links">
<li>
<a href="/about">About</a>
</li>
<li>
<a href="/faq">F.A.Q</a>
</li>
<li>
<a href="/sharex">ShareX</a>
</li>
<li>
<a href="/terms">Terms</a>
</li>
</ul>
<script>
document.getElementById("file").onchange = function() {
document.getElementById("form").submit();