jyapayne/nimforum
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Position glow arrow with CSS

Browse source
This commit is contained in:
Nycto 2015-04-23 19:58:15 -07:00
commit aacd7639a3
6 changed files with 157 additions and 199 deletions
Download patch file Download diff file Expand all files Collapse all files

10
main.tmpl
View file

@ -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

12
public/css/arrow.js
View file

@ -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";
}

5
public/css/forum.js
View file

@ -1,5 +0,0 @@
"use strict";
window.onload = function() {
positionGlowArrow();
};

30
public/css/style.css
View file

@ -34,7 +34,10 @@ 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 }
@ -76,25 +79,24 @@ pre .EscapeSequence
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 {
position: relative;
color:#1cb3ec; color:#1cb3ec;
text-shadow:0 0 4px rgba(28,179,236,.8); text-shadow:0 0 4px rgba(28,179,236,.8);
background-image:url("/images/head-link_hover.png"); } background-image:url("/images/head-link_hover.png"); }
#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); }
#head-banner { width:200px; height:100px; background:#000; } #head-banner { width:200px; height:100px; background:#000; }
#neck { z-index:0; height:40px; }
#neck.home { height:370px; }
#neck > div { position:relative }
#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 { #glow-line-vert {
position:fixed; position:fixed;
top:100px; top:100px;

12
public/js/arrow.js
View file

@ -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";
}

5
public/js/forum.js
View file

@ -1,5 +0,0 @@
"use strict";
window.onload = function() {
positionGlowArrow();
};