Position glow arrow with CSS
This commit is contained in:
Nycto
parent
7e32c81358
commit
aacd7639a3
6 changed files with 157 additions and 199 deletions
10
main.tmpl
10
main.tmpl
|
|
@ -33,13 +33,6 @@
|
|||
</div>
|
||||
</header>
|
||||
|
||||
<!--- #neck --->
|
||||
<section id="neck">
|
||||
<div class="wide-layout tall">
|
||||
<div style="right: 131px;" id="glow-arrow" class="forum"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!--- #body --->
|
||||
<section id="body" class="forum">
|
||||
<div id="body-border"></div>
|
||||
|
|
@ -171,9 +164,6 @@
|
|||
ga('send', 'pageview');
|
||||
|
||||
</script>
|
||||
|
||||
<script src="${frontQuery}js/arrow.js"></script>
|
||||
<script src="${frontQuery}js/forum.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
#end proc
|
||||
|
|
|
|||
|
|
@ -1,12 +0,0 @@
|
|||
"use strict";
|
||||
|
||||
function positionGlowArrow() {
|
||||
var headLinks = document.getElementById("head-links");
|
||||
var activeLink = headLinks.getElementsByClassName("active")[0]
|
||||
if (activeLink == undefined || activeLink == null)
|
||||
return;
|
||||
|
||||
var offset = (headLinks.offsetWidth - activeLink.offsetLeft) - (activeLink.offsetWidth / 2) - 133;
|
||||
var glowArrow = document.getElementById("glow-arrow");
|
||||
glowArrow.style.right = offset + "px";
|
||||
}
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
"use strict";
|
||||
|
||||
window.onload = function() {
|
||||
positionGlowArrow();
|
||||
};
|
||||
|
|
@ -3,11 +3,11 @@ a, a * { cursor:pointer; }
|
|||
|
||||
html { margin:0; overflow-x:auto; }
|
||||
body {
|
||||
overflow-x:hidden;
|
||||
min-width:1030px;
|
||||
margin:0;
|
||||
font: 13pt Helvetica,Arial,sans-serif;
|
||||
background:#152534 url("/images/bg.png") no-repeat fixed center top; }
|
||||
overflow-x:hidden;
|
||||
min-width:1030px;
|
||||
margin:0;
|
||||
font: 13pt Helvetica,Arial,sans-serif;
|
||||
background:#152534 url("/images/bg.png") no-repeat fixed center top; }
|
||||
|
||||
pre { color: #F5F5F5;}
|
||||
pre, pre * { cursor:text; }
|
||||
|
|
@ -34,20 +34,23 @@ pre .EscapeSequence
|
|||
.talk-layout { margin:0 40px; }
|
||||
.wide-layout { margin:0 auto; }
|
||||
|
||||
#head { height:100px; background:url("/images/head.png") repeat-x bottom; }
|
||||
#head {
|
||||
height:100px;
|
||||
margin-bottom: 40px;
|
||||
background:url("/images/head.png") repeat-x bottom; }
|
||||
#head.docs { margin-left:280px; background:rgba(0,0,0,.25) url("/images/head-fade.png") no-repeat right top; }
|
||||
#head > div { position:relative }
|
||||
|
||||
#head-logo {
|
||||
position:absolute;
|
||||
left:-390px;
|
||||
top:0;
|
||||
width:917px;
|
||||
height:268px;
|
||||
pointer-events:none;
|
||||
background:url("/images/logo.png") no-repeat; }
|
||||
#head.docs #head-logo { left:-381px; position:fixed; }
|
||||
#head.forum #head-logo { left:-370px; }
|
||||
#head-logo {
|
||||
position:absolute;
|
||||
left:-390px;
|
||||
top:0;
|
||||
width:917px;
|
||||
height:268px;
|
||||
pointer-events:none;
|
||||
background:url("/images/logo.png") no-repeat; }
|
||||
#head.docs #head-logo { left:-381px; position:fixed; }
|
||||
#head.forum #head-logo { left:-370px; }
|
||||
|
||||
#head-logo-link {
|
||||
position:absolute;
|
||||
|
|
@ -59,114 +62,113 @@ pre .EscapeSequence
|
|||
#head.docs #head-logo-link { left:-260px; }
|
||||
#head.forum #head-logo-link { left:30px; }
|
||||
|
||||
#head-links { position:absolute; right:0; bottom:13px; }
|
||||
#head.docs #head-links,
|
||||
#head.forum #head-links { right:20px; }
|
||||
#head-links > a {
|
||||
display:block;
|
||||
float:left;
|
||||
padding:10px 25px 25px 25px;
|
||||
color:rgba(255,255,255,.5);
|
||||
font-size:14pt;
|
||||
text-decoration:none;
|
||||
letter-spacing:1px;
|
||||
background:url("/images/head-link.png") no-repeat center bottom;
|
||||
transition:
|
||||
color 0.3s ease-in-out,
|
||||
text-shadow 0.4s ease-in-out; }
|
||||
#head-links > a:hover,
|
||||
#head-links > a.active {
|
||||
color:#1cb3ec;
|
||||
text-shadow:0 0 4px rgba(28,179,236,.8);
|
||||
background-image:url("/images/head-link_hover.png"); }
|
||||
#head-links { position:absolute; right:0; bottom:13px; }
|
||||
#head.docs #head-links,
|
||||
#head.forum #head-links { right:20px; }
|
||||
#head-links > a {
|
||||
display:block;
|
||||
float:left;
|
||||
padding:10px 25px 25px 25px;
|
||||
color:rgba(255,255,255,.5);
|
||||
font-size:14pt;
|
||||
text-decoration:none;
|
||||
letter-spacing:1px;
|
||||
background:url("/images/head-link.png") no-repeat center bottom;
|
||||
transition:
|
||||
color 0.3s ease-in-out,
|
||||
text-shadow 0.4s ease-in-out; }
|
||||
#head-links > a:hover,
|
||||
#head-links > a.active {
|
||||
position: relative;
|
||||
color:#1cb3ec;
|
||||
text-shadow:0 0 4px rgba(28,179,236,.8);
|
||||
background-image:url("/images/head-link_hover.png"); }
|
||||
|
||||
#head-banner { width:200px; height:100px; background:#000; }
|
||||
#head-links > a.active:after {
|
||||
display: block;
|
||||
content: "";
|
||||
width: 771px;
|
||||
background: url("/images/glow-arrow.png") no-repeat left;
|
||||
height: 41px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: -49px;
|
||||
transform: translateX(-618px); }
|
||||
|
||||
#neck { z-index:0; height:40px; }
|
||||
#neck.home { height:370px; }
|
||||
#neck > div { position:relative }
|
||||
#head-banner { width:200px; height:100px; background:#000; }
|
||||
|
||||
#glow-arrow {
|
||||
position:absolute;
|
||||
top:-9px;
|
||||
left:0;
|
||||
right:-16px;
|
||||
height:48px;
|
||||
background:url("/images/glow-arrow.png") no-repeat right; }
|
||||
glow-arrow.docs { left:280px; }
|
||||
|
||||
#glow-line-vert {
|
||||
position:fixed;
|
||||
top:100px;
|
||||
left:280px;
|
||||
width:3px;
|
||||
height:844px;
|
||||
background:url("/images/glow-line-vert.png") no-repeat; }
|
||||
#glow-line-vert {
|
||||
position:fixed;
|
||||
top:100px;
|
||||
left:280px;
|
||||
width:3px;
|
||||
height:844px;
|
||||
background:url("/images/glow-line-vert.png") no-repeat; }
|
||||
|
||||
|
||||
#body { z-index:1; position:relative; background:rgba(220,231,248,.6); }
|
||||
#body.docs { margin:0 40px 20px 320px; }
|
||||
#body.forum { margin:0 40px 20px 40px; min-height: 700px; }
|
||||
|
||||
#body-border {
|
||||
position:absolute;
|
||||
top:-25px;
|
||||
left:0;
|
||||
right:0;
|
||||
height:35px;
|
||||
background:rgba(0,0,0,.25); }
|
||||
#body-border {
|
||||
position:absolute;
|
||||
top:-25px;
|
||||
left:0;
|
||||
right:0;
|
||||
height:35px;
|
||||
background:rgba(0,0,0,.25); }
|
||||
|
||||
#body-border-left {
|
||||
position:absolute;
|
||||
left:-25px;
|
||||
top:-25px;
|
||||
bottom:-25px;
|
||||
width:35px;
|
||||
background:rgba(0,0,0,.25); }
|
||||
#body-border-left {
|
||||
position:absolute;
|
||||
left:-25px;
|
||||
top:-25px;
|
||||
bottom:-25px;
|
||||
width:35px;
|
||||
background:rgba(0,0,0,.25); }
|
||||
|
||||
#body-border-right {
|
||||
position:absolute;
|
||||
right:-25px;
|
||||
top:-25px;
|
||||
bottom:-25px;
|
||||
width:35px;
|
||||
background:rgba(0,0,0,.25); }
|
||||
#body-border-right {
|
||||
position:absolute;
|
||||
right:-25px;
|
||||
top:-25px;
|
||||
bottom:-25px;
|
||||
width:35px;
|
||||
background:rgba(0,0,0,.25); }
|
||||
|
||||
#body-border-bottom {
|
||||
position:absolute;
|
||||
left:10px;
|
||||
right:10px;
|
||||
bottom:-25px;
|
||||
height:35px;
|
||||
background:rgba(0,0,0,.25); }
|
||||
#body-border-bottom {
|
||||
position:absolute;
|
||||
left:10px;
|
||||
right:10px;
|
||||
bottom:-25px;
|
||||
height:35px;
|
||||
background:rgba(0,0,0,.25); }
|
||||
|
||||
#body.docs #body-border,
|
||||
#body.forum #body-border { left:10px; right:10px; }
|
||||
#body.docs #body-border,
|
||||
#body.forum #body-border { left:10px; right:10px; }
|
||||
|
||||
#glow-line {
|
||||
position:absolute;
|
||||
top:-27px;
|
||||
left:100px;
|
||||
right:-25px;
|
||||
height:3px;
|
||||
background:url("/images/glow-line.png") no-repeat left; }
|
||||
#glow-line-bottom {
|
||||
position:absolute;
|
||||
bottom:-27px;
|
||||
left:-25px;
|
||||
right:100px;
|
||||
height:3px;
|
||||
background:url("/images/glow-line2.png") no-repeat right; }
|
||||
#glow-line {
|
||||
position:absolute;
|
||||
top:-27px;
|
||||
left:100px;
|
||||
right:-25px;
|
||||
height:3px;
|
||||
background:url("/images/glow-line.png") no-repeat left; }
|
||||
#glow-line-bottom {
|
||||
position:absolute;
|
||||
bottom:-27px;
|
||||
left:-25px;
|
||||
right:100px;
|
||||
height:3px;
|
||||
background:url("/images/glow-line2.png") no-repeat right; }
|
||||
|
||||
#content { padding:40px 0; }
|
||||
#content.page { width:680px; min-height:800px; padding-left:20px; }
|
||||
#content h1 { font-size:20pt; letter-spacing:1px; color:rgba(0,0,0,.75); }
|
||||
#content h2 { font-size:16pt; letter-spacing:1px; color:rgba(0,0,0,.7); margin-top:40px; }
|
||||
#content p { color: #1D1D1D; margin: 5pt 0pt; }
|
||||
#content a { color:#CEDAE9; text-decoration:none; }
|
||||
#content a:hover { color:#fff; }
|
||||
#content ul { padding-left:20px; }
|
||||
#content li { margin-bottom:10px; text-align:justify; }
|
||||
#content { padding:40px 0; }
|
||||
#content.page { width:680px; min-height:800px; padding-left:20px; }
|
||||
#content h1 { font-size:20pt; letter-spacing:1px; color:rgba(0,0,0,.75); }
|
||||
#content h2 { font-size:16pt; letter-spacing:1px; color:rgba(0,0,0,.7); margin-top:40px; }
|
||||
#content p { color: #1D1D1D; margin: 5pt 0pt; }
|
||||
#content a { color:#CEDAE9; text-decoration:none; }
|
||||
#content a:hover { color:#fff; }
|
||||
#content ul { padding-left:20px; }
|
||||
#content li { margin-bottom:10px; text-align:justify; }
|
||||
|
||||
#talk-heads { overflow:auto; margin:0 8px 0 8px; }
|
||||
#talk-heads > div { float:left; font-size:120%; font-weight:bold; }
|
||||
|
|
@ -382,21 +384,21 @@ pre .EscapeSequence
|
|||
#foot h4 { font-size:11pt; color:rgba(255,255,255,.4); margin:40px 0 6px 0; }
|
||||
#foot a:hover { color:#fff; }
|
||||
|
||||
#foot-links { float:left; }
|
||||
#foot-links > div { float:left; padding:0 40px 0 0; line-height:120%; }
|
||||
#foot-links a { display:block; font-size:10pt; color:rgba(255,255,255,.3); text-decoration:none; }
|
||||
#foot-legal { float:right; font-size:10pt; color:rgba(255,255,255,.3); line-height:150%; text-align:right; }
|
||||
#foot-legal a { color:inherit; text-decoration:none; }
|
||||
#foot-legal > h4 > a { color:inherit; }
|
||||
#foot-links { float:left; }
|
||||
#foot-links > div { float:left; padding:0 40px 0 0; line-height:120%; }
|
||||
#foot-links a { display:block; font-size:10pt; color:rgba(255,255,255,.3); text-decoration:none; }
|
||||
#foot-legal { float:right; font-size:10pt; color:rgba(255,255,255,.3); line-height:150%; text-align:right; }
|
||||
#foot-legal a { color:inherit; text-decoration:none; }
|
||||
#foot-legal > h4 > a { color:inherit; }
|
||||
|
||||
#mascot {
|
||||
#mascot {
|
||||
z-index:2;
|
||||
position:absolute;
|
||||
top:-340px;
|
||||
right:25px;
|
||||
width:202px;
|
||||
height:319px;
|
||||
background:url("/images/mascot.png") no-repeat; }
|
||||
position:absolute;
|
||||
top:-340px;
|
||||
right:25px;
|
||||
width:202px;
|
||||
height:319px;
|
||||
background:url("/images/mascot.png") no-repeat; }
|
||||
|
||||
article#content
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,12 +0,0 @@
|
|||
"use strict";
|
||||
|
||||
function positionGlowArrow() {
|
||||
var headLinks = document.getElementById("head-links");
|
||||
var activeLink = headLinks.getElementsByClassName("active")[0]
|
||||
if (activeLink == undefined || activeLink == null)
|
||||
return;
|
||||
|
||||
var offset = (headLinks.offsetWidth - activeLink.offsetLeft) - (activeLink.offsetWidth / 2) - 133;
|
||||
var glowArrow = document.getElementById("glow-arrow");
|
||||
glowArrow.style.right = offset + "px";
|
||||
}
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
"use strict";
|
||||
|
||||
window.onload = function() {
|
||||
positionGlowArrow();
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue