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>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<!--- #neck --->
|
|
||||||
<section id="neck">
|
|
||||||
<div class="wide-layout tall">
|
|
||||||
<div style="right: 131px;" id="glow-arrow" class="forum"></div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!--- #body --->
|
<!--- #body --->
|
||||||
<section id="body" class="forum">
|
<section id="body" class="forum">
|
||||||
<div id="body-border"></div>
|
<div id="body-border"></div>
|
||||||
|
|
@ -171,9 +164,6 @@
|
||||||
ga('send', 'pageview');
|
ga('send', 'pageview');
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script src="${frontQuery}js/arrow.js"></script>
|
|
||||||
<script src="${frontQuery}js/forum.js"></script>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
#end proc
|
#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; }
|
html { margin:0; overflow-x:auto; }
|
||||||
body {
|
body {
|
||||||
overflow-x:hidden;
|
overflow-x:hidden;
|
||||||
min-width:1030px;
|
min-width:1030px;
|
||||||
margin:0;
|
margin:0;
|
||||||
font: 13pt Helvetica,Arial,sans-serif;
|
font: 13pt Helvetica,Arial,sans-serif;
|
||||||
background:#152534 url("/images/bg.png") no-repeat fixed center top; }
|
background:#152534 url("/images/bg.png") no-repeat fixed center top; }
|
||||||
|
|
||||||
pre { color: #F5F5F5;}
|
pre { color: #F5F5F5;}
|
||||||
pre, pre * { cursor:text; }
|
pre, pre * { cursor:text; }
|
||||||
|
|
@ -34,20 +34,23 @@ pre .EscapeSequence
|
||||||
.talk-layout { margin:0 40px; }
|
.talk-layout { margin:0 40px; }
|
||||||
.wide-layout { margin:0 auto; }
|
.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.docs { margin-left:280px; background:rgba(0,0,0,.25) url("/images/head-fade.png") no-repeat right top; }
|
||||||
#head > div { position:relative }
|
#head > div { position:relative }
|
||||||
|
|
||||||
#head-logo {
|
#head-logo {
|
||||||
position:absolute;
|
position:absolute;
|
||||||
left:-390px;
|
left:-390px;
|
||||||
top:0;
|
top:0;
|
||||||
width:917px;
|
width:917px;
|
||||||
height:268px;
|
height:268px;
|
||||||
pointer-events:none;
|
pointer-events:none;
|
||||||
background:url("/images/logo.png") no-repeat; }
|
background:url("/images/logo.png") no-repeat; }
|
||||||
#head.docs #head-logo { left:-381px; position:fixed; }
|
#head.docs #head-logo { left:-381px; position:fixed; }
|
||||||
#head.forum #head-logo { left:-370px; }
|
#head.forum #head-logo { left:-370px; }
|
||||||
|
|
||||||
#head-logo-link {
|
#head-logo-link {
|
||||||
position:absolute;
|
position:absolute;
|
||||||
|
|
@ -59,114 +62,113 @@ pre .EscapeSequence
|
||||||
#head.docs #head-logo-link { left:-260px; }
|
#head.docs #head-logo-link { left:-260px; }
|
||||||
#head.forum #head-logo-link { left:30px; }
|
#head.forum #head-logo-link { left:30px; }
|
||||||
|
|
||||||
#head-links { position:absolute; right:0; bottom:13px; }
|
#head-links { position:absolute; right:0; bottom:13px; }
|
||||||
#head.docs #head-links,
|
#head.docs #head-links,
|
||||||
#head.forum #head-links { right:20px; }
|
#head.forum #head-links { right:20px; }
|
||||||
#head-links > a {
|
#head-links > a {
|
||||||
display:block;
|
display:block;
|
||||||
float:left;
|
float:left;
|
||||||
padding:10px 25px 25px 25px;
|
padding:10px 25px 25px 25px;
|
||||||
color:rgba(255,255,255,.5);
|
color:rgba(255,255,255,.5);
|
||||||
font-size:14pt;
|
font-size:14pt;
|
||||||
text-decoration:none;
|
text-decoration:none;
|
||||||
letter-spacing:1px;
|
letter-spacing:1px;
|
||||||
background:url("/images/head-link.png") no-repeat center bottom;
|
background:url("/images/head-link.png") no-repeat center bottom;
|
||||||
transition:
|
transition:
|
||||||
color 0.3s ease-in-out,
|
color 0.3s ease-in-out,
|
||||||
text-shadow 0.4s ease-in-out; }
|
text-shadow 0.4s ease-in-out; }
|
||||||
#head-links > a:hover,
|
#head-links > a:hover,
|
||||||
#head-links > a.active {
|
#head-links > a.active {
|
||||||
color:#1cb3ec;
|
position: relative;
|
||||||
text-shadow:0 0 4px rgba(28,179,236,.8);
|
color:#1cb3ec;
|
||||||
background-image:url("/images/head-link_hover.png"); }
|
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; }
|
#head-banner { width:200px; height:100px; background:#000; }
|
||||||
#neck.home { height:370px; }
|
|
||||||
#neck > div { position:relative }
|
|
||||||
|
|
||||||
#glow-arrow {
|
#glow-line-vert {
|
||||||
position:absolute;
|
position:fixed;
|
||||||
top:-9px;
|
top:100px;
|
||||||
left:0;
|
left:280px;
|
||||||
right:-16px;
|
width:3px;
|
||||||
height:48px;
|
height:844px;
|
||||||
background:url("/images/glow-arrow.png") no-repeat right; }
|
background:url("/images/glow-line-vert.png") no-repeat; }
|
||||||
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; }
|
|
||||||
|
|
||||||
|
|
||||||
#body { z-index:1; position:relative; background:rgba(220,231,248,.6); }
|
#body { z-index:1; position:relative; background:rgba(220,231,248,.6); }
|
||||||
#body.docs { margin:0 40px 20px 320px; }
|
#body.docs { margin:0 40px 20px 320px; }
|
||||||
#body.forum { margin:0 40px 20px 40px; min-height: 700px; }
|
#body.forum { margin:0 40px 20px 40px; min-height: 700px; }
|
||||||
|
|
||||||
#body-border {
|
#body-border {
|
||||||
position:absolute;
|
position:absolute;
|
||||||
top:-25px;
|
top:-25px;
|
||||||
left:0;
|
left:0;
|
||||||
right:0;
|
right:0;
|
||||||
height:35px;
|
height:35px;
|
||||||
background:rgba(0,0,0,.25); }
|
background:rgba(0,0,0,.25); }
|
||||||
|
|
||||||
#body-border-left {
|
#body-border-left {
|
||||||
position:absolute;
|
position:absolute;
|
||||||
left:-25px;
|
left:-25px;
|
||||||
top:-25px;
|
top:-25px;
|
||||||
bottom:-25px;
|
bottom:-25px;
|
||||||
width:35px;
|
width:35px;
|
||||||
background:rgba(0,0,0,.25); }
|
background:rgba(0,0,0,.25); }
|
||||||
|
|
||||||
#body-border-right {
|
#body-border-right {
|
||||||
position:absolute;
|
position:absolute;
|
||||||
right:-25px;
|
right:-25px;
|
||||||
top:-25px;
|
top:-25px;
|
||||||
bottom:-25px;
|
bottom:-25px;
|
||||||
width:35px;
|
width:35px;
|
||||||
background:rgba(0,0,0,.25); }
|
background:rgba(0,0,0,.25); }
|
||||||
|
|
||||||
#body-border-bottom {
|
#body-border-bottom {
|
||||||
position:absolute;
|
position:absolute;
|
||||||
left:10px;
|
left:10px;
|
||||||
right:10px;
|
right:10px;
|
||||||
bottom:-25px;
|
bottom:-25px;
|
||||||
height:35px;
|
height:35px;
|
||||||
background:rgba(0,0,0,.25); }
|
background:rgba(0,0,0,.25); }
|
||||||
|
|
||||||
#body.docs #body-border,
|
#body.docs #body-border,
|
||||||
#body.forum #body-border { left:10px; right:10px; }
|
#body.forum #body-border { left:10px; right:10px; }
|
||||||
|
|
||||||
#glow-line {
|
#glow-line {
|
||||||
position:absolute;
|
position:absolute;
|
||||||
top:-27px;
|
top:-27px;
|
||||||
left:100px;
|
left:100px;
|
||||||
right:-25px;
|
right:-25px;
|
||||||
height:3px;
|
height:3px;
|
||||||
background:url("/images/glow-line.png") no-repeat left; }
|
background:url("/images/glow-line.png") no-repeat left; }
|
||||||
#glow-line-bottom {
|
#glow-line-bottom {
|
||||||
position:absolute;
|
position:absolute;
|
||||||
bottom:-27px;
|
bottom:-27px;
|
||||||
left:-25px;
|
left:-25px;
|
||||||
right:100px;
|
right:100px;
|
||||||
height:3px;
|
height:3px;
|
||||||
background:url("/images/glow-line2.png") no-repeat right; }
|
background:url("/images/glow-line2.png") no-repeat right; }
|
||||||
|
|
||||||
#content { padding:40px 0; }
|
#content { padding:40px 0; }
|
||||||
#content.page { width:680px; min-height:800px; padding-left:20px; }
|
#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 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 h2 { font-size:16pt; letter-spacing:1px; color:rgba(0,0,0,.7); margin-top:40px; }
|
||||||
#content p { color: #1D1D1D; margin: 5pt 0pt; }
|
#content p { color: #1D1D1D; margin: 5pt 0pt; }
|
||||||
#content a { color:#CEDAE9; text-decoration:none; }
|
#content a { color:#CEDAE9; text-decoration:none; }
|
||||||
#content a:hover { color:#fff; }
|
#content a:hover { color:#fff; }
|
||||||
#content ul { padding-left:20px; }
|
#content ul { padding-left:20px; }
|
||||||
#content li { margin-bottom:10px; text-align:justify; }
|
#content li { margin-bottom:10px; text-align:justify; }
|
||||||
|
|
||||||
#talk-heads { overflow:auto; margin:0 8px 0 8px; }
|
#talk-heads { overflow:auto; margin:0 8px 0 8px; }
|
||||||
#talk-heads > div { float:left; font-size:120%; font-weight:bold; }
|
#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 h4 { font-size:11pt; color:rgba(255,255,255,.4); margin:40px 0 6px 0; }
|
||||||
#foot a:hover { color:#fff; }
|
#foot a:hover { color:#fff; }
|
||||||
|
|
||||||
#foot-links { float:left; }
|
#foot-links { float:left; }
|
||||||
#foot-links > div { float:left; padding:0 40px 0 0; line-height:120%; }
|
#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-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 { 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 a { color:inherit; text-decoration:none; }
|
||||||
#foot-legal > h4 > a { color:inherit; }
|
#foot-legal > h4 > a { color:inherit; }
|
||||||
|
|
||||||
#mascot {
|
#mascot {
|
||||||
z-index:2;
|
z-index:2;
|
||||||
position:absolute;
|
position:absolute;
|
||||||
top:-340px;
|
top:-340px;
|
||||||
right:25px;
|
right:25px;
|
||||||
width:202px;
|
width:202px;
|
||||||
height:319px;
|
height:319px;
|
||||||
background:url("/images/mascot.png") no-repeat; }
|
background:url("/images/mascot.png") no-repeat; }
|
||||||
|
|
||||||
article#content
|
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