better accessibility, restructured header so the logo is accessbile via keyboard as well as mouse
This commit is contained in:
Craig Erskine
@@ -1 +1 @@
|
||||
{"main.css":"main-08a472a5.css","main.js":"main-aad70835.js"}
|
||||
{"main.css":"main-29c4a5b6.css","main.js":"main-aad70835.js"}
|
||||
+26
-9
@@ -1,14 +1,6 @@
|
||||
@tailwind preflight;
|
||||
@tailwind components;
|
||||
|
||||
.transition { transition: all .25s; }
|
||||
.transition-slow { transition: all 1s; }
|
||||
.transition-fast { transition: all .1s; }
|
||||
.transition-none { transition: none; }
|
||||
.text-shadow-none { text-shadow: none; }
|
||||
.text-shadow { text-shadow: 0 1px 0 #000; }
|
||||
.text-shadow-white { text-shadow: 0 1px 0 rgba(255,255,255,.2); }
|
||||
|
||||
a { @apply .no-underline .transition; }
|
||||
h1,h2,h3,h4,h5,h6 { @apply .mb-4 .leading-tight; }
|
||||
p,ul,ol,table { @apply .mb-4; }
|
||||
@@ -17,6 +9,8 @@ table table { @apply .mb-0; }
|
||||
iframe { @apply .mb-4; }
|
||||
img { vertical-align: middle; }
|
||||
|
||||
.logo a:hover,.logo a:focus { transform: translate(0,-2px); }
|
||||
|
||||
.bg-btn { background-image: linear-gradient(to bottom, rgba(255,255,255,.1) 0%,rgba(0,0,0,0.1) 100%); }
|
||||
|
||||
.img-border { display: inline-block; position: relative; }
|
||||
@@ -41,4 +35,27 @@ img { vertical-align: middle; }
|
||||
.modal { display: none; z-index: 9999; }
|
||||
.blocker{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;overflow:auto;z-index:9999;padding:20px;box-sizing:border-box;background-color:#000;background-color:rgba(50,50,50,.75);text-align:center}.blocker:before{content:"";display:inline-block;height:100%;vertical-align:middle;margin-right:-0.05em}.blocker.behind{background-color:transparent}.modal{display:none;vertical-align:middle;position:relative;z-index:2;max-width:768px;box-sizing:border-box;width:90%;background:#fff;padding:15px 30px;-webkit-border-radius:8px;-moz-border-radius:8px;-o-border-radius:8px;-ms-border-radius:8px;border-radius:8px;-webkit-box-shadow:0 0 10px #000;-moz-box-shadow:0 0 10px #000;-o-box-shadow:0 0 10px #000;-ms-box-shadow:0 0 10px #000;box-shadow:0 0 10px #000;text-align:left}.modal a.close-modal{position:absolute;top:-12.5px;right:-12.5px;display:block;width:30px;height:30px;text-indent:-9999px;background-size:contain;background-repeat:no-repeat;background-position:center center;background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAAAXNSR0IArs4c6QAAA3hJREFUaAXlm8+K00Acx7MiCIJH/yw+gA9g25O49SL4AO3Bp1jw5NvktC+wF88qevK4BU97EmzxUBCEolK/n5gp3W6TTJPfpNPNF37MNsl85/vN/DaTmU6PknC4K+pniqeKJ3k8UnkvDxXJzzy+q/yaxxeVHxW/FNHjgRSeKt4rFoplzaAuHHDBGR2eS9G54reirsmienDCTRt7xwsp+KAoEmt9nLaGitZxrBbPFNaGfPloGw2t4JVamSt8xYW6Dg1oCYo3Yv+rCGViV160oMkcd8SYKnYV1Nb1aEOjCe6L5ZOiLfF120EjWhuBu3YIZt1NQmujnk5F4MgOpURzLfAwOBSTmzp3fpDxuI/pabxpqOoz2r2HLAb0GMbZKlNV5/Hg9XJypguryA7lPF5KMdTZQzHjqxNPhWhzIuAruOl1eNqKEx1tSh5rfbxdw7mOxCq4qS68ZTjKS1YVvilu559vWvFHhh4rZrdyZ69Vmpgdj8fJbDZLJpNJ0uv1cnr/gjrUhQMuI+ANjyuwftQ0bbL6Erp0mM/ny8Fg4M3LtdRxgMtKl3jwmIHVxYXChFy94/Rmpa/pTbNUhstKV+4Rr8lLQ9KlUvJKLyG8yvQ2s9SBy1Jb7jV5a0yapfF6apaZLjLLcWtd4sNrmJUMHyM+1xibTjH82Zh01TNlhsrOhdKTe00uAzZQmN6+KW+sDa/JD2PSVQ873m29yf+1Q9VDzfEYlHi1G5LKBBWZbtEsHbFwb1oYDwr1ZiF/2bnCSg1OBE/pfr9/bWx26UxJL3ONPISOLKUvQza0LZUxSKyjpdTGa/vDEr25rddbMM0Q3O6Lx3rqFvU+x6UrRKQY7tyrZecmD9FODy8uLizTmilwNj0kraNcAJhOp5aGVwsAGD5VmJBrWWbJSgWT9zrzWepQF47RaGSiKfeGx6Szi3gzmX/HHbihwBser4B9UJYpFBNX4R6vTn3VQnez0SymnrHQMsRYGTr1dSk34ljRqS/EMd2pLQ8YBp3a1PLfcqCpo8gtHkZFHKkTX6fs3MY0blKnth66rKCnU0VRGu37ONrQaA4eZDFtWAu2fXj9zjFkxTBOo8F7t926gTp/83Kyzzcy2kZD6xiqxTYnHLRFm3vHiRSwNSjkz3hoIzo8lCKWUlg/YtGs7tObunDAZfpDLbfEI15zsEIY3U/x/gHHc/G1zltnAgAAAABJRU5ErkJggg==')}.modal-spinner{display:none;position:fixed;top:50%;left:50%;transform:translateY(-50%) translateX(-50%);padding:12px 16px;border-radius:5px;background-color:#111;height:20px}.modal-spinner>div{border-radius:100px;background-color:#fff;height:20px;width:2px;margin:0 1px;display:inline-block;-webkit-animation:sk-stretchdelay 1.2s infinite ease-in-out;animation:sk-stretchdelay 1.2s infinite ease-in-out}.modal-spinner .rect2{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.modal-spinner .rect3{-webkit-animation-delay:-1.0s;animation-delay:-1.0s}.modal-spinner .rect4{-webkit-animation-delay:-0.9s;animation-delay:-0.9s}@-webkit-keyframes sk-stretchdelay{0%,40%,100%{-webkit-transform:scaleY(0.5)}20%{-webkit-transform:scaleY(1.0)}}@keyframes sk-stretchdelay{0%,40%,100%{transform:scaleY(0.5);-webkit-transform:scaleY(0.5)}20%{transform:scaleY(1.0);-webkit-transform:scaleY(1.0)}}
|
||||
|
||||
@tailwind utilities;
|
||||
@tailwind utilities;
|
||||
|
||||
@variants responsive {
|
||||
.transition { transition: all .25s; }
|
||||
.transition-slow { transition: all 1s; }
|
||||
.transition-fast { transition: all .1s; }
|
||||
.transition-none { transition: none; }
|
||||
.text-shadow-none { text-shadow: none; }
|
||||
.text-shadow { text-shadow: 0 1px 0 #000; }
|
||||
.text-shadow-white { text-shadow: 0 1px 0 rgba(255,255,255,.2); }
|
||||
|
||||
.order-1 { order: 1; }
|
||||
.order-2 { order: 2; }
|
||||
.order-3 { order: 3; }
|
||||
.order-4 { order: 4; }
|
||||
.order-5 { order: 5; }
|
||||
.order-6 { order: 6; }
|
||||
.order-7 { order: 7; }
|
||||
.order-8 { order: 8; }
|
||||
.order-9 { order: 9; }
|
||||
.order-10 { order: 10; }
|
||||
.order-11 { order: 11; }
|
||||
.order-12 { order: 12; }
|
||||
}
|
||||
+7
-7
@@ -31,13 +31,13 @@
|
||||
<div class="page bg-no-repeat bg-top" style="background-image: url('img/retro-grid.jpg');">
|
||||
<header class="mb-32">
|
||||
<div class="mx-auto max-w-xl relative">
|
||||
<h3 class="logo m-0 h-32 lg:h-48 flex items-center text-center justify-center relative z-10"><a href="/"><img src="img/logo.png" alt="OpenEmu" /></a></h3>
|
||||
<nav class="w-full font-bold text-lg lg:absolute lg:pin-t z-20">
|
||||
<ul class="list-reset lg:h-48 flex items-center justify-center">
|
||||
<li class="mx-2 lg:mx-0"><a href="#overview" class="overview-nav text-red hover:text-red-light focus:text-red-light">Overview</a></li>
|
||||
<li class="mx-2 lg:mx-0 lg:ml-24"><a href="http://github.com/OpenEmu" class="text-red hover:text-red-light focus:text-red-light">GitHub</a></li>
|
||||
<li class="mx-2 lg:mx-0 lg:ml-auto"><a href="http://github.com/OpenEmu/OpenEmu/wiki" class="text-red hover:text-red-light focus:text-red-light">Help</a></li>
|
||||
<li class="mx-2 lg:mx-0 lg:ml-24"><a href="#donate-modal" class="donate-nav text-red hover:text-red-light focus:text-red-light">Donate</a></li>
|
||||
<nav class="w-full font-bold text-lg">
|
||||
<ul class="list-reset lg:h-48 flex flex-wrap items-center justify-center lg:justify-between">
|
||||
<li class="logo w-full lg:w-auto lg:flex-1 text-center lg:order-3"><a href="/" class="inline-block"><img src="img/logo.png" alt="OpenEmu" /></a></li>
|
||||
<li class="mx-2 lg:mx-0 lg:order-1"><a href="#overview" class="overview-nav text-red hover:text-red-light focus:text-red-light">Overview</a></li>
|
||||
<li class="mx-2 lg:mx-24 lg:order-2"><a href="http://github.com/OpenEmu" class="text-red hover:text-red-light focus:text-red-light">GitHub</a></li>
|
||||
<li class="mx-2 lg:mx-24 lg:order-4"><a href="http://github.com/OpenEmu/OpenEmu/wiki" class="text-red hover:text-red-light focus:text-red-light">Help</a></li>
|
||||
<li class="mx-2 lg:mx-0 lg:order-5"><a href="#donate-modal" class="donate-nav text-red hover:text-red-light focus:text-red-light">Donate</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
File diff suppressed because one or more lines are too long
Executable
+1
File diff suppressed because one or more lines are too long
+8
-8
@@ -24,20 +24,20 @@
|
||||
<meta property="og:description" content="Console and Arcade video game emulator for macOS." />
|
||||
|
||||
<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
|
||||
<link href="css/main-08a472a5.css" rel="stylesheet" />
|
||||
<link href="css/main-29c4a5b6.css" rel="stylesheet" />
|
||||
</head>
|
||||
<body class="bg-black text-grey-lightest text-sm leading-normal text-shadow overflow-y-scroll overflow-x-hidden" style="background-image: url('img/grunge.png');">
|
||||
|
||||
<div class="page bg-no-repeat bg-top" style="background-image: url('img/retro-grid.jpg');">
|
||||
<header class="mb-32">
|
||||
<div class="mx-auto max-w-xl relative">
|
||||
<h3 class="logo m-0 h-32 lg:h-48 flex items-center text-center justify-center relative z-10"><a href="/"><img src="img/logo.png" alt="OpenEmu" /></a></h3>
|
||||
<nav class="w-full font-bold text-lg lg:absolute lg:pin-t z-20">
|
||||
<ul class="list-reset lg:h-48 flex items-center justify-center">
|
||||
<li class="mx-2 lg:mx-0"><a href="#overview" class="overview-nav text-red hover:text-red-light focus:text-red-light">Overview</a></li>
|
||||
<li class="mx-2 lg:mx-0 lg:ml-24"><a href="http://github.com/OpenEmu" class="text-red hover:text-red-light focus:text-red-light">GitHub</a></li>
|
||||
<li class="mx-2 lg:mx-0 lg:ml-auto"><a href="http://github.com/OpenEmu/OpenEmu/wiki" class="text-red hover:text-red-light focus:text-red-light">Help</a></li>
|
||||
<li class="mx-2 lg:mx-0 lg:ml-24"><a href="#donate-modal" class="donate-nav text-red hover:text-red-light focus:text-red-light">Donate</a></li>
|
||||
<nav class="w-full font-bold text-lg">
|
||||
<ul class="list-reset lg:h-48 flex flex-wrap items-center justify-center lg:justify-between">
|
||||
<li class="logo w-full lg:w-auto lg:flex-1 text-center lg:order-3"><a href="/" class="inline-block"><img src="img/logo.png" alt="OpenEmu" /></a></li>
|
||||
<li class="mx-2 lg:mx-0 lg:order-1"><a href="#overview" class="overview-nav text-red hover:text-red-light focus:text-red-light">Overview</a></li>
|
||||
<li class="mx-2 lg:mx-24 lg:order-2"><a href="http://github.com/OpenEmu" class="text-red hover:text-red-light focus:text-red-light">GitHub</a></li>
|
||||
<li class="mx-2 lg:mx-24 lg:order-4"><a href="http://github.com/OpenEmu/OpenEmu/wiki" class="text-red hover:text-red-light focus:text-red-light">Help</a></li>
|
||||
<li class="mx-2 lg:mx-0 lg:order-5"><a href="#donate-modal" class="donate-nav text-red hover:text-red-light focus:text-red-light">Donate</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user