Commit 56bce1ff authored by Mike Bone's avatar Mike Bone

Visual tidy

parent 5edc10a9
......@@ -4,9 +4,12 @@
<title>What The Fork Is My New Project Name?</title>
<meta name="description" content="A project name idea generator" />
<meta name="author" content="DefProc" />
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<link rel="apple-touch-icon" href="images/custom_icon.png"/>
<link rel="shortcut icon" href="images/favicon.png"/>
<link rel="stylesheet" href="styles/main.css" />
<link href="https://fonts.googleapis.com/css?family=Space+Mono:400,700&display=swap" rel="stylesheet">
</head>
<body>
<div id="wrapper">
......@@ -36,7 +39,7 @@
<div id="credit">Built from <a href="https://github.com/soulwire/WTFEngine" title="An HTML / CSS / JavaScript template for creating WhatTheForkIsMyMashup.com style web sites" target="_blank">WTF Engine</a> by <a href="http://blog.soulwire.co.uk/" title="Made by Justin Windle @soulwire">Justin</a></div>
<div id="total">There are <span id="templates"></span> and <span id="outcomes"></span> possibilities</div>
</footer>
<img class="loading" src="images/loading.gif">
<div class="lds-ripple"><div></div><div></div></div>
</div>
<script src="scripts/vendor/zepto.min.js"></script>
<script src="scripts/wtf.js"></script>
......
......@@ -165,7 +165,7 @@ var WTF = (function() {
function initUI() {
$( '.loading' ).remove();
$( '.lds-ripple' ).remove();
dom = {
generate: $( '#generate' ),
......
......@@ -10,35 +10,33 @@ html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address
body {
font-family: Arial, sans-serif;
height: 100%;
}
.loading {
position: absolute;
opacity: 0.8;
margin: -24px 0 0 -24px;
left: 50%;
top: 50%;
height: 100vh;
background: #283048;
background: -webkit-linear-gradient(to top, #283048, #859398);
background: linear-gradient(to top, #283048, #859398);
font-family: 'Space Mono';
text-align: center;
overflow: hidden;
}
#wrapper {
width: 710px;
width: 70%;
margin: 0 auto;
}
header, article {
font-weight: 800;
font-weight: bold;
color: #000;
}
header {
margin-top: 70px;
margin-bottom: 15%;
}
header h1 {
font-size: 60px;
line-height: 60px;
display: none;
}
#output {
......@@ -47,14 +45,6 @@ header h1 {
margin: 60px 0;
}
#output.animate {
-webkit-transition: opacity 0.5s ease-out;
-moz-transition: opacity 0.5s ease-out;
-ms-transition: opacity 0.5s ease-out;
-o-transition: opacity 0.5s ease-out;
-transition: opacity 0.5s ease-out;
}
noscript {
font-weight: 800;
font-size: 48px;
......@@ -105,7 +95,7 @@ footer {
text-align: right;
line-height: 16px;
font-size: 12px;
color: #666;
color: #fff;
margin: 12px 24px;
bottom: 0;
right: 0;
......@@ -113,9 +103,47 @@ footer {
footer a {
text-decoration: none;
color: #000;
color: #f90;
}
footer a:hover {
text-decoration: underline;
}
/* ---------- Loader ---------- */
.lds-ripple {
display: inline-block;
position: absolute;
width: 80px;
height: 80px;
left: 48%;
top: 48%;
}
.lds-ripple div {
position: absolute;
border: 4px solid #fff;
opacity: 1;
border-radius: 50%;
animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple div:nth-child(2) {
animation-delay: -0.5s;
}
@keyframes lds-ripple {
0% {
top: 36px;
left: 36px;
width: 0;
height: 0;
opacity: 1;
}
100% {
top: 0px;
left: 0px;
width: 72px;
height: 72px;
opacity: 0;
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment