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 */ /* Being lazy 101 */
* { * {
@ -8,39 +8,52 @@
} }
body { body {
font-family: "Lato", sans-serif; font-family: "Open Sans", "Lato", sans-serif;
color: #ffffff; color: #ffffff;
background-color: #2d2d2d; 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 { .page {
width: 100%; width: 100%;
max-width: 920px; max-width: 920px;
padding: 10px; padding: 10px;
margin-left: auto; margin-left: auto;
margin-right: 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 { .uploadForm {
margin-top: 80px;
width: 100%; width: 100%;
text-align: center; text-align: center;
} }

View File

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

View File

@ -1,14 +1,31 @@
{% extends "layout.html" %} {% extends "shell.html" %}
{% block body %} {% block body %}
<h1 class="title">
QuadFile
</h1>
<form action="" id="form" name="fileForm" method="post" enctype="multipart/form-data" class="uploadForm"> <form action="" id="form" name="fileForm" method="post" enctype="multipart/form-data" class="uploadForm">
<div class="uploadButton"> <div class="uploadButton">
<p> <p>
Select a file Click to select a file
</p> </p>
<input id="file" type="file" name="file"> <input id="file" type="file" name="file">
</div> </div>
<input type="hidden" name="source" value="web"> <input type="hidden" name="source" value="web">
</form> </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> <script>
document.getElementById("file").onchange = function() { document.getElementById("file").onchange = function() {
document.getElementById("form").submit(); document.getElementById("form").submit();