joshua/bl2skills.com
1
0
Fork 0
mirror of https://github.com/seigler/bl2skills.com synced 2025-07-27 01:36:10 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

quick cleanup

Browse source
This commit is contained in:
Joshua Seigler 2017-07-16 16:32:59 -04:00
parent 85b2fbae39
commit 5d23fd78ef
8 changed files with 1314 additions and 1205 deletions
Download patch file Download diff file Expand all files Collapse all files

2
assassin.html
View file

@ -209,7 +209,7 @@
<div class="summary"> <div class="summary">
<h2>List of Skills:</h2> <h2>List of Skills:</h2>
<div class="descriptionContainer"></div> <div class="descriptionContainer"></div>
<!--#include virtual="./footer.txt"--> <div class="footer">Art &copy; 2012 <a href="http://www.gearboxsoftware.com/" target="_blank">Gearbox Studios</a>. <a href="https://www.google.com/webfonts" target="_blank">Fonts</a> by Google. Code hosted on Github. <a href="https://github.com/seigler/bl2skills.com">Source Code</a>.</div>
</div> </div>
</body> </body>

2
commando.html
View file

@ -217,7 +217,7 @@
<div class="summary"> <div class="summary">
<h2>List of Skills:</h2> <h2>List of Skills:</h2>
<div class="descriptionContainer"></div> <div class="descriptionContainer"></div>
<!--#include virtual="./footer.txt"--> <div class="footer">Art &copy; 2012 <a href="http://www.gearboxsoftware.com/" target="_blank">Gearbox Studios</a>. <a href="https://www.google.com/webfonts" target="_blank">Fonts</a> by Google. Code hosted on Github. <a href="https://github.com/seigler/bl2skills.com">Source Code</a>.</div>
</div> </div>
</body> </body>

16
footer.txt
View file

@ -1,16 +0,0 @@
<div class="footer">Art &copy; 2012 <a href="http://www.gearboxsoftware.com/" target="_blank">Gearbox Studios</a>. <a href="https://www.google.com/webfonts" target="_blank">Fonts</a> by Google. <a href="http://cdnjs.com/" target="_blank">scripts</a> hosted by Cloudflare. Code by <a href="http://www.reddit.com/message/compose/?to=kuqumi" target="_blank">kuqumi</a> of <a href="http://www.reddit.com/" target="_blank">Reddit.com</a> <a href="http://www.reddit.com/r/borderlands" target="_blank">/r/borderlands</a>. Bitcoins are welcome: <a href="bitcoin:1BoigKJBs1ngoi6EFy97jACUC2pn1a2Xxv?amount=0.01&label=bl2skills.com%20donation">1BoigKJBs1ngoi6EFy97jACUC2pn1a2Xxv</a></div>
<!-- Piwik -->
<script type="text/javascript">
var _paq = _paq || [];
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="https://analytics.seigler.net/";
_paq.push(['setTrackerUrl', u+'piwik.php']);
_paq.push(['setSiteId', 1]);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.type='text/javascript';
g.defer=true; g.async=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
})();
</script>
<noscript><img src="http://analytics.seigler.net/piwik.php?idsite=1" style="position:absolute;border:0;" alt="" /></noscript>
<!-- End Piwik Code -->

2
gunzerker.html
View file

@ -223,7 +223,7 @@
<div class="summary"> <div class="summary">
<h2>List of Skills:</h2> <h2>List of Skills:</h2>
<div class="descriptionContainer"></div> <div class="descriptionContainer"></div>
<!--#include virtual="./footer.txt"--> <div class="footer">Art &copy; 2012 <a href="http://www.gearboxsoftware.com/" target="_blank">Gearbox Studios</a>. <a href="https://www.google.com/webfonts" target="_blank">Fonts</a> by Google. Code hosted on Github. <a href="https://github.com/seigler/bl2skills.com">Source Code</a>.</div>
</div> </div>
</body> </body>

573
main.css
View file

@ -1,282 +1,407 @@
html,body { height: 100%; margin: 0; padding: 0; } html,
html {overflow-y: scroll;}
body { body {
background: #333 url("background.jpg") no-repeat fixed center center; min-height: 100vh;
background-size: cover; margin: 0;
color: #eee; padding: 0;
font: 15pt/17pt Homenaje, Impact, sans-serif;
cursor: default;
text-align: center;
}
::-moz-selection { color: black; background: #FBB406; }
::selection { color: black; background: #FBB406; }
h1, h2, h3 {
margin: 0;
font-weight: normal;
}
em {
font-style: normal;
}
.header {
font-size: 24pt;
text-transform: uppercase;
line-height: 1;
padding-bottom: 10px;
margin-bottom: 10px;
}
body.choicePage {
display: table;
width: 100%;
}
body.choicePage .wrapper {
display: table-cell;
width: 100%;
vertical-align: middle;
}
.header *
{
position: relative;
z-index: 11;
}
.header .links {
text-align: center;
line-height: 1.2;
font-size: 50%;
z-index: 20;
}
.header a.permalink {
color: white;
padding: 0.5em 0;
-moz-user-select: text;
-webkit-user-select: text;
-ms-user-select: text;
-o-user-select: text;
user-select: text;
}
.header a.reset {
color: red;
}
.header, .summary {
background-color: rgba(0,0,0,0.5);
}
.header h1 {
color: #FFDE09;
font-size: 140%;
}
.header h1 em {
font-style: normal;
font-size: 200%;
position: relative;
top: 0.15em;
}
.header h2 {
color: #FBB406;
font-size: 150%;
}
.header h3 {
font-size: 80%;
}
.treeCollection {
text-align: center;
width: 741px;
height: 396px;
margin: 20px auto 30px auto;
position: relative;
z-index: 20;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.treewrapper {
float: left;
width: 247px;
height: 396px;
}
.tree {
width: 174px;
text-align: center;
margin: 20px auto 0;
}
.bglayer {
position: absolute;
height: 396px;
width: 247px;
}
.bglayer.color {
height: 80px;
} }
.green .gray { background: url("skill_bg_green_gray.png") transparent; } html {
.blue .gray { background: url("skill_bg_blue_gray.png") transparent; } overflow-y: scroll;
.red .gray { background: url("skill_bg_red_gray.png") transparent; } }
.green .color { background: url("skill_bg_green.png") transparent; }
.blue .color { background: url("skill_bg_blue.png") transparent; } body {
.red .color { background: url("skill_bg_red.png") transparent; } display: flex;
flex-direction: column;
background: #333 url("background.jpg") no-repeat fixed center center;
background-size: cover;
color: #eee;
font: 15pt/17pt Homenaje, Impact, sans-serif;
cursor: default;
text-align: center;
}
::-moz-selection {
color: black;
background: #FBB406;
}
::selection {
color: black;
background: #FBB406;
}
h1,
h2,
h3 {
margin: 0;
font-weight: normal;
}
em {
font-style: normal;
}
.header {
font-size: 24pt;
text-transform: uppercase;
line-height: 1;
padding-bottom: 10px;
margin-bottom: 10px;
}
body.choicePage {
display: table;
width: 100%;
}
body.choicePage .wrapper {
display: table-cell;
width: 100%;
vertical-align: middle;
}
.header * {
position: relative;
z-index: 11;
}
.header .links {
text-align: center;
line-height: 1.2;
font-size: 50%;
z-index: 20;
}
.header a.permalink {
color: white;
padding: 0.5em 0;
-moz-user-select: text;
-webkit-user-select: text;
-ms-user-select: text;
-o-user-select: text;
user-select: text;
}
.header a.reset {
color: red;
}
.header,
.summary {
background-color: rgba(0, 0, 0, 0.5);
}
.header h1 {
color: #FFDE09;
font-size: 140%;
}
.header h1 em {
font-style: normal;
font-size: 200%;
position: relative;
top: 0.15em;
}
.header h2 {
color: #FBB406;
font-size: 150%;
}
.header h3 {
font-size: 80%;
}
.treeCollection {
text-align: center;
width: 741px;
height: 396px;
margin: 20px auto 30px auto;
position: relative;
z-index: 20;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.treewrapper {
float: left;
width: 247px;
height: 396px;
}
.tree {
width: 174px;
text-align: center;
margin: 20px auto 0;
}
.bglayer {
position: absolute;
height: 396px;
width: 247px;
}
.bglayer.color {
height: 80px;
}
.green .gray {
background: url("skill_bg_green_gray.png") transparent;
}
.blue .gray {
background: url("skill_bg_blue_gray.png") transparent;
}
.red .gray {
background: url("skill_bg_red_gray.png") transparent;
}
.green .color {
background: url("skill_bg_green.png") transparent;
}
.blue .color {
background: url("skill_bg_blue.png") transparent;
}
.red .color {
background: url("skill_bg_red.png") transparent;
}
.skill { .skill {
padding: 3px; padding: 3px;
width: 52px; width: 52px;
height: 53px; height: 53px;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
float: left; float: left;
} }
.skill>img { .skill>img {
width: 52px; width: 52px;
height: 53px; height: 53px;
} }
.points { .points {
visibility: hidden; visibility: hidden;
position: absolute; position: absolute;
width: 35px; width: 35px;
height: 21px; height: 21px;
line-height: 21px; line-height: 21px;
bottom: 0; right: 0; bottom: 0;
padding: 0 2px; right: 0;
background: url("icons/points_overlay.png") transparent; padding: 0 2px;
color: white; background: url("icons/points_overlay.png") transparent;
color: white;
} }
.skill.partial .points { color: #F80; }
.skill.full .points { color: #0B0; }
.tier, div.totalPoints, legend { .skill.partial .points {
clear: both; color: #F80;
} }
div.totalPoints {
text-align: right; .skill.full .points {
} color: #0B0;
legend, span.totalPoints {
text-transform: uppercase;
font-weight: bold;
font-size: 22pt;
color: white;
text-shadow: black 0 0 4px;
position: absolute;
display: block;
width: 174px;
} }
.tier,
div.totalPoints,
legend { legend {
width: 150px; clear: both;
text-align: left; }
div.totalPoints {
text-align: right;
}
legend,
span.totalPoints {
text-transform: uppercase;
font-weight: bold;
font-size: 22pt;
color: white;
text-shadow: black 0 0 4px;
position: absolute;
display: block;
width: 174px;
}
legend {
width: 150px;
text-align: left;
}
.push1 {
margin-left: 58px;
}
.skill.partial .perLevel,
.skill.full .perLevel {
display: none;
} }
.push1 { margin-left: 58px; }
.skill.partial .perLevel, .skill.full .perLevel { display: none; }
.tree .description { .tree .description {
display: none; display: none;
position: absolute; position: absolute;
top: 0; top: 0;
width: 200px; width: 200px;
z-index: 20; z-index: 20;
background-color: #111; background-color: #111;
color: white; color: white;
padding: 0 0.25em 0.5em; padding: 0 0.25em 0.5em;
text-align: center; text-align: center;
} }
.green .description, .blue .description {
left: 110%; .green .description,
.blue .description {
left: 110%;
} }
.red .description { .red .description {
right: 110%; right: 110%;
} }
.tier[data-level='4'] .description { .tier[data-level='4'] .description {
top: auto; top: auto;
bottom: -59px; bottom: -59px;
} }
.tier[data-level='4'] .description.shortTier4Description { .tier[data-level='4'] .description.shortTier4Description {
top: 0; top: 0;
bottom: auto; bottom: auto;
} }
.tier[data-level='5'] .description { .tier[data-level='5'] .description {
top: auto; top: auto;
bottom: 0; bottom: 0;
} }
.tree .description h2 { .tree .description h2 {
padding: 0.15em 0; padding: 0.15em 0;
margin-bottom: 0.15em; margin-bottom: 0.15em;
font-size: 125%; font-size: 125%;
border-bottom: 1px solid gray; border-bottom: 1px solid gray;
} }
.summary { .summary {
position: relative; display: flex;
margin: 10px 0 0; flex-grow: 1;
padding: 8px 0; flex-direction: column;
line-height: 1.1; position: relative;
z-index: 10; margin: 10px 0 0;
padding: 8px 0;
line-height: 1.1;
z-index: 10;
} }
.descriptionContainer { .descriptionContainer {
max-width: 700px; max-width: 700px;
margin: 0 auto; margin: 0 auto;
} }
.descriptionContainer div.skillText { .descriptionContainer div.skillText {
clear: both; clear: both;
border-top: 1px solid white; border-top: 1px solid white;
text-align: left; text-align: left;
} }
.descriptionContainer strong { .descriptionContainer strong {
display: block; display: block;
font-weight: normal; font-weight: normal;
font-size: 120%; font-size: 120%;
float: left; float: left;
clear: left; clear: left;
width: 220px; width: 220px;
margin-right: -220px; margin-right: -220px;
text-align: right; text-align: right;
} }
.descriptionContainer div.descriptionText { .descriptionContainer div.descriptionText {
margin: 4px 0 4px 230px; margin: 4px 0 4px 230px;
padding: 0; padding: 0;
} }
.descriptionContainer .perLevel { .descriptionContainer .perLevel {
display: none; display: none;
} }
.footer { .footer {
margin-top: 100px; padding-top: 50px;
text-align: center; margin-top: auto;
font-size: 70%; text-align: center;
color: white; font-size: 70%;
color: rgba(255,255,255,0.5); color: white;
color: rgba(255, 255, 255, 0.5);
} }
.footer a { color: white; color: rgba(255,255,255,0.5); }
.footer a:hover { color: red; } .footer a {
color: white;
color: rgba(255, 255, 255, 0.5);
}
.footer a:hover {
color: red;
}
.skill.partial .description em { .skill.partial .description em {
color: #F80; color: #F80;
} }
.skill.full .description em { .skill.full .description em {
color: #0B0; color: #0B0;
} }
.skill:hover .description { .skill:hover .description {
display: block; display: block;
} }
.skill:hover .description:hover { .skill:hover .description:hover {
display: none; display: none;
} }
.green legend { color: #41974D; }
.blue legend { color: #2A87C7; } .green legend {
.red legend { color: #A93640; } color: #41974D;
}
.blue legend {
color: #2A87C7;
}
.red legend {
color: #A93640;
}
a.biglink { a.biglink {
display: inline-block; display: inline-block;
color: inherit; color: inherit;
padding: 1em; padding: 1em;
margin: 10px; margin: 10px;
background: rgba(0,0,0,0.5); background: rgba(0, 0, 0, 0.5);
border: 2px solid white; border: 2px solid white;
text-decoration: none; text-decoration: none;
} }
a.biglink:hover { a.biglink:hover {
background: black; background: black;
text-decoration: underline; text-decoration: underline;
} }
a.unavailable { cursor: not-allowed; }
a.unavailable:hover { text-decoration: none; } a.unavailable {
cursor: not-allowed;
}
a.unavailable:hover {
text-decoration: none;
}
img.portrait { img.portrait {
position: absolute; position: absolute;
position: fixed; position: fixed;
height: 95%; height: 95%;
left: 0; left: 0;
bottom: 0; bottom: 0;
z-index: 0; z-index: 0;
} }

2
mechromancer.html
View file

@ -233,7 +233,7 @@
<div class="summary"> <div class="summary">
<h2>List of Skills:</h2> <h2>List of Skills:</h2>
<div class="descriptionContainer"></div> <div class="descriptionContainer"></div>
<!--#include virtual="./footer.txt"--> <div class="footer">Art &copy; 2012 <a href="http://www.gearboxsoftware.com/" target="_blank">Gearbox Studios</a>. <a href="https://www.google.com/webfonts" target="_blank">Fonts</a> by Google. Code hosted on Github. <a href="https://github.com/seigler/bl2skills.com">Source Code</a>.</div>
</div> </div>
</body> </body>

2
psycho.html
View file

@ -230,7 +230,7 @@
<div class="summary"> <div class="summary">
<h2>List of Skills:</h2> <h2>List of Skills:</h2>
<div class="descriptionContainer"></div> <div class="descriptionContainer"></div>
<!--#include virtual="./footer.txt"--> <div class="footer">Art &copy; 2012 <a href="http://www.gearboxsoftware.com/" target="_blank">Gearbox Studios</a>. <a href="https://www.google.com/webfonts" target="_blank">Fonts</a> by Google. Code hosted on Github. <a href="https://github.com/seigler/bl2skills.com">Source Code</a>.</div>
</div> </div>
</body> </body>

2
siren.html
View file

@ -211,7 +211,7 @@
<div class="summary"> <div class="summary">
<h2>List of Skills:</h2> <h2>List of Skills:</h2>
<div class="descriptionContainer"></div> <div class="descriptionContainer"></div>
<!--#include virtual="./footer.txt"--> <div class="footer">Art &copy; 2012 <a href="http://www.gearboxsoftware.com/" target="_blank">Gearbox Studios</a>. <a href="https://www.google.com/webfonts" target="_blank">Fonts</a> by Google. Code hosted on Github. <a href="https://github.com/seigler/bl2skills.com">Source Code</a>.</div>
</div> </div>
</body> </body>