De-cluttering...
This commit is contained in:
Bill Niblock
parent
2773f1cc0f
commit
9912bf67c4
2 changed files with 0 additions and 541 deletions
|
|
@ -1,426 +0,0 @@
|
|||
/*
|
||||
CSS for www.theinternetvagabond.com
|
||||
Written by Bill Niblock
|
||||
|
||||
Attempting to use a fluid grid and responsive design approach.
|
||||
|
||||
"Optimal" Page width: 1024px
|
||||
Columns: 6; Column Width: 139px; Column Spacer Width: 18
|
||||
Single Column: 6.906em; 14.48%
|
||||
Single Spacer: 1.875%
|
||||
Assumed default type size: 16px
|
||||
|
||||
Remember: target / context = result
|
||||
*/
|
||||
|
||||
/* =============================
|
||||
Reset Styles, Thanks to...
|
||||
|
||||
http://meyerweb.com/eric/tools/css/reset/
|
||||
v2.0 | 20110126
|
||||
License: none (public domain)
|
||||
============================= */
|
||||
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
b, u, i, center,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
article, aside, canvas, details, embed,
|
||||
figure, figcaption, footer, header, hgroup,
|
||||
menu, nav, output, ruby, section, summary,
|
||||
time, mark, audio, video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/* HTML5 display-role reset for older browsers */
|
||||
article, aside, details, figcaption, figure,
|
||||
footer, header, hgroup, menu, nav, section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
body {
|
||||
line-height: 1;
|
||||
}
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
}
|
||||
blockquote, q {
|
||||
quotes: none;
|
||||
}
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
/* ==========================
|
||||
Utility Styles
|
||||
============================= */
|
||||
|
||||
/* Font used for sub title.
|
||||
Font found on http://www.fontspace.com
|
||||
Font created by Michael Tension (mtension AT gmail DOT com)
|
||||
*/
|
||||
|
||||
@font-face {
|
||||
font-family: "header sub";
|
||||
src: url("../trinkets/Prophecy_Script.ttf") format("truetype");
|
||||
}
|
||||
|
||||
.clean { clear:both;}
|
||||
|
||||
#page {
|
||||
margin: 20px auto;
|
||||
padding: 0 1em;
|
||||
max-width: 64em; /* 1024px / 16px = 64 em */
|
||||
}
|
||||
|
||||
|
||||
/* ==========================
|
||||
Left Column Styles
|
||||
============================= */
|
||||
|
||||
.lft_col {
|
||||
float:left; margin-left: 3.75%; margin-top: 175px;
|
||||
width: 14.48%
|
||||
}
|
||||
|
||||
.leftbar {
|
||||
/*margin-left: 125px; margin-top: 150px;*/
|
||||
padding: 0px 0px 0px 0px;
|
||||
}
|
||||
|
||||
.leftbar_border1 {
|
||||
width: 30px; height: 300px;
|
||||
padding-left: 15px; padding-bottom: 0px; margin-left: -15px;
|
||||
border-right: 5px solid #0033CC; border-bottom-right-radius: 10px;
|
||||
border-bottom: 5px solid #0033CC;
|
||||
font: bolder 22px "Courier New", Courier, monospace;
|
||||
text-shadow: 2px 2px lightgrey;
|
||||
color: blue;
|
||||
}
|
||||
|
||||
.leftbar_border2 {
|
||||
width: 20px; padding-left: 10px; margin-left: -24px; margin-top: -5px;
|
||||
border-top: 5px solid #0033CC; border-top-left-radius: 10px;
|
||||
border-left: 5px solid #0033CC; border-bottom-left-radius: 0px;
|
||||
}
|
||||
|
||||
.leftbar_links {
|
||||
margin-left: -36px; z-index: 8;
|
||||
padding: 0px;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.leftbar_links_link {
|
||||
position: relative;
|
||||
height: 40px; width: 180px; margin-top: 15px; margin-bottom: 15px;
|
||||
background-color: white; white-space: nowrap; overflow: hidden;
|
||||
border: 5px solid #0033CC; border-radius: 10px;
|
||||
-o-transition-property: width;
|
||||
-moz-transition-property: width;
|
||||
-webkit-transition-property: width;
|
||||
-ms-transition-property: width;
|
||||
-o-transition-duration: 1s;
|
||||
-moz-transition-duration: 1s;
|
||||
-webkit-transition-duration: 1s;
|
||||
-ms-transition-duration: 1s;
|
||||
}
|
||||
|
||||
/* .leftbar_links_link:hover {
|
||||
width: 180px;
|
||||
} */
|
||||
|
||||
.lbll_text {
|
||||
float: left; position: absolute; right: 0px; width: 140px; height: 100%; z-index: 9;
|
||||
font: 1.7em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
|
||||
text-shadow: 2px 2px lightgrey; letter-spacing: 1px; text-align: right;
|
||||
}
|
||||
.lbll_img {
|
||||
float: left; position: absolute; left: 0px; z-index: 10;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
|
||||
/* ==========================
|
||||
Right Column Styles
|
||||
============================= */
|
||||
|
||||
/* ==========================
|
||||
Middle Column Styles
|
||||
============================= */
|
||||
.mid_col {
|
||||
float:right;
|
||||
width: 80.665%
|
||||
}
|
||||
|
||||
.titlei {
|
||||
margin: 0px auto; width: 100%;
|
||||
}
|
||||
|
||||
.page_title {
|
||||
width: 100%;
|
||||
margin-left: 50px;
|
||||
}
|
||||
|
||||
.page_title_word {
|
||||
float:left;
|
||||
font: 2.0em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
|
||||
/* font-style: italic; */ text-shadow: 2px 2px #DEDEDE; color: darkgrey; letter-spacing: 8px;
|
||||
}
|
||||
|
||||
.page_title_word:first-letter {
|
||||
font: 2.2em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
|
||||
vertical-align: -10px;
|
||||
/* font-style: italic */ color: white; text-shadow: 0px 0px 15px blue;
|
||||
}
|
||||
|
||||
.page_title_sub {
|
||||
font: 1.2em "header sub";
|
||||
text-align: center; vertical-align: center;
|
||||
font-style: italic; margin: 0px auto;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
.page_title_sub_border1{
|
||||
padding-left: 250px; margin-left: -50px; margin-right: -5px;
|
||||
border-top: 5px solid #0033CC; border-top-right-radius: 10px;
|
||||
border-right: 5px solid #0033CC;
|
||||
}
|
||||
|
||||
.page_title_sub_border2{
|
||||
padding: 0px 50px 0px 25px;
|
||||
border-left: 5px solid #0033CC; border-bottom-left-radius: 10px;
|
||||
border-bottom: 5px solid #0033CC;
|
||||
}
|
||||
*/
|
||||
|
||||
|
||||
/* ==========================
|
||||
Main Styles
|
||||
============================= */
|
||||
.main {
|
||||
float: left;
|
||||
position: absolute; top: 250px;
|
||||
max-width: 1500px; height: 1000px;
|
||||
}
|
||||
|
||||
|
||||
.main_posts {
|
||||
float:left; position: relative; top: -100px;
|
||||
margin: 0px auto 0px 50px;
|
||||
width: 80%; max-width: 1300px;
|
||||
}
|
||||
|
||||
/* =============================
|
||||
Post Styles
|
||||
============================= */
|
||||
.dyna_post {
|
||||
display: none;
|
||||
background-color: #DD5555; border: 2px solid red; border-radius: 10px;
|
||||
padding: 10px; height: 100%;
|
||||
font: 15px "Lucida Sans Unicode", "Lucida Grande", sans-serif; color: black;
|
||||
}
|
||||
|
||||
.about_cont {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.about_title {
|
||||
font: 2.0em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
|
||||
font-style: italic; text-shadow: 2px 2px lightgrey; letter-spacing: 8px;
|
||||
}
|
||||
|
||||
.about_title:first-letter {
|
||||
font: 2.2em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
|
||||
vertical-align: -20px;
|
||||
font-style: italic; text-shadow: 3px 3px lightgrey;
|
||||
}
|
||||
|
||||
.about_info {
|
||||
padding-left: 250px;
|
||||
}
|
||||
|
||||
.sort_cont {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sort_title {
|
||||
float:left;
|
||||
font: 2.0em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
|
||||
font-style: italic; text-shadow: 2px 2px lightgrey; letter-spacing: 8px;
|
||||
}
|
||||
|
||||
.sort_title:first-letter {
|
||||
font: 2.2em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
|
||||
vertical-align: -20px;
|
||||
font-style: italic; text-shadow: 3px 3px lightgrey;
|
||||
}
|
||||
|
||||
.sort_info {
|
||||
padding-left: 250px; height: 100px;
|
||||
}
|
||||
|
||||
.text_post {
|
||||
height: 100%; overflow: hidden;
|
||||
padding: 10px 200px 10px 30px; margin: 50px 0px;
|
||||
}
|
||||
|
||||
.text_post#gplus {
|
||||
border-top: 5px solid green; border-left: 5px solid gold; border-bottom: 5px solid blue; border-right: 5px solid red;
|
||||
/*background: url('') no-repeat top right; */
|
||||
}
|
||||
|
||||
.text_post#twit {
|
||||
border: 5px solid lightblue; border-radius: 10px;
|
||||
}
|
||||
|
||||
.text_post#vagai {
|
||||
border: 5px solid black; border-top-right-radius: 25px; border-bottom-left-radius: 25px;
|
||||
}
|
||||
|
||||
.text_post#other {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.text_post#about {
|
||||
padding: 10px; margin: 10px 0px;
|
||||
}
|
||||
|
||||
.text_post#temp {
|
||||
/*display: none;*/
|
||||
border: 5px solid #3333AA; border-radius: 15px; background-color: #7777DD;
|
||||
padding: 20px; margin: 10px 0px;
|
||||
font-size: 1.2em; color: lightgrey;
|
||||
}
|
||||
|
||||
/* =======================================
|
||||
Responsive -- Width: 1150 thru 850
|
||||
======================================= */
|
||||
@media screen and (max-width: 1150px) {
|
||||
|
||||
#page {
|
||||
max-width: 50em; /* 800px / 16px = 50 em */
|
||||
}
|
||||
|
||||
.lft_col {
|
||||
margin-left: 1.875%;
|
||||
width: 14.48%
|
||||
}
|
||||
|
||||
.leftbar_border1 {
|
||||
border-left: 5px solid #0033CC; border-bottom-left-radius: 10px;
|
||||
border-bottom: 5px solid #0033CC;
|
||||
border-right: 0px solid white; border-bottom-right-radius: 0px;
|
||||
}
|
||||
|
||||
.leftbar_border2 {
|
||||
margin-left: 14px; margin-top: -5px;
|
||||
border-top: 5px solid #0033CC; border-top-right-radius: 10px;
|
||||
border-right: 5px solid #0033CC;
|
||||
border-left: 0px solid white; border-top-left-radius: 0px;
|
||||
}
|
||||
|
||||
.leftbar_links {
|
||||
margin-left: -2px; z-index: 8;
|
||||
padding: 0px;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.leftbar_links_link {
|
||||
position: relative;
|
||||
height: 40px; width: 40px; margin-top: 15px; margin-bottom: 15px;
|
||||
background-color: white; white-space: nowrap; overflow: hidden;
|
||||
border: 5px solid #0033CC; border-radius: 10px;
|
||||
-o-transition-property: width;
|
||||
-moz-transition-property: width;
|
||||
-webkit-transition-property: width;
|
||||
-ms-transition-property: width;
|
||||
-o-transition-duration: 1s;
|
||||
-moz-transition-duration: 1s;
|
||||
-webkit-transition-duration: 1s;
|
||||
-ms-transition-duration: 1s;
|
||||
}
|
||||
|
||||
.leftbar_links_link:hover {
|
||||
width: 180px;
|
||||
}
|
||||
|
||||
.mid_col {
|
||||
width: 83.54%;
|
||||
}
|
||||
|
||||
.main_post {
|
||||
width: 100%;
|
||||
margin: 0px auto;
|
||||
}
|
||||
|
||||
.text_post {
|
||||
margin: 25px 0px;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 0px auto;
|
||||
}
|
||||
|
||||
.page_title_word {
|
||||
font: 1.4em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
|
||||
}
|
||||
|
||||
.page_title_word:first-letter {
|
||||
font: 1.8em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
|
||||
}
|
||||
|
||||
.page_title_sub {
|
||||
font: 1.0em "header sub";
|
||||
}
|
||||
}
|
||||
|
||||
/* ====================================
|
||||
Responsive -- Width: 850 thru 500
|
||||
======================================= */
|
||||
@media screen and (max-width: 850px) {
|
||||
|
||||
#page {
|
||||
max-width: 40em; /* 640px / 16px = 40 em */
|
||||
}
|
||||
|
||||
.lft_col {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mid_col {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.main_post {
|
||||
width: 100%;
|
||||
margin: 0px auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* ====================================
|
||||
Responsive -- Width: 500 or less, Landscape
|
||||
======================================= */
|
||||
@media handheld,screen and (max-width: 500px) and (orientation: landscape) {
|
||||
|
||||
#page {
|
||||
max-width: 29em; /* 464px / 16px = 29 em */
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,115 +0,0 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>The Internet Vagabond :: Home</title>
|
||||
<meta name="description" content="The rants of the wandering computer scientist, constantly in search of truth, knowledge, and a decent ping." />
|
||||
<meta name="keywords" content="internet, vagabond" />
|
||||
<meta name="author" content="Bill 'Vagabond Azulien' Nibz" />
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="css2.css" />
|
||||
<script type="text/javascript" src="trinkets/testing/jquery.js"></script>
|
||||
<script type="text/javascript" src="trinkets/testing/test.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="page">
|
||||
|
||||
<!-- Left-Bar -->
|
||||
|
||||
<div class="lft_col">
|
||||
<section class="leftbar">
|
||||
<header class="leftbar_border1"><br />F<br />O<br />L<br />L<br />L<br />O<br />W<br /><br />M<br />E<br /></header>
|
||||
<div class="leftbar_border2">
|
||||
<ul class="leftbar_links">
|
||||
<li class="leftbar_links_link">
|
||||
<a href="https://plus.google.com/108889767571068230161" title="The Internet Vagabond on Google+!">
|
||||
<div class="lbll_img"><img src="trinkets/testing/gplogo_small.png" alt="Google+" /></div>
|
||||
<div class="lbll_text">Google+  </div>
|
||||
<div class="clean"></div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="leftbar_links_link">
|
||||
<a href="https://twitter.com/#!/Azulien" title="The Internet Vagabond on Twitter!">
|
||||
<div class="lbll_img"><img src="trinkets/testing/twlogo_small.png" alt="Twitter" /></div>
|
||||
<div class="lbll_text">Twitter  </div>
|
||||
<div class="clean"></div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="leftbar_links_link">
|
||||
<a href="http://www.youtube.com/user/TheInternetVagabond" title="The Internet Vagabond on YouTube!">
|
||||
<div class="lbll_img"><img src="trinkets/testing/ytlogo_small.png" alt="YouTube" /></div>
|
||||
<div class="lbll_text">YouTube  </div>
|
||||
<div class="clean"></div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="leftbar_links_link">
|
||||
<a href="http://steamcommunity.com/id/azulien" title="The Internet Vagabond gaming on Steam!">
|
||||
<div class="lbll_img"><img src="trinkets/testing/steam_logo.png" alt="Steam" /></div>
|
||||
<div class="lbll_text">Steam  </div>
|
||||
<div class="clean"></div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="leftbar_links_link">
|
||||
<a href="http://www.twitch.tv/vagabondazulien" title="The Internet Vagabond live-streaming on Twitch.tv!">
|
||||
<div class="lbll_img"><img src="trinkets/testing/ttvlogo_small.png" alt="Twitch.tv" /></div>
|
||||
<div class="lbll_text">Twitch.tv  </div>
|
||||
<div class="clean"></div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section> <!-- End .leftbar -->
|
||||
</div> <!-- End .lft_col -->
|
||||
|
||||
<!-- End Left Bar -->
|
||||
<!-- Main Section -->
|
||||
|
||||
<section class="mid_col">
|
||||
<header class="title">
|
||||
<div class="page_title">
|
||||
<div class="page_title_word">THE    </div>
|
||||
<div class="page_title_word">INTERNET   </div>
|
||||
<div class="page_title_word">VAGABOND     </div>
|
||||
</div>
|
||||
<div class="clean"></div>
|
||||
<div class="page_title_sub">
|
||||
<span class="page_title_sub_border1"></span>
|
||||
<span class="page_title_sub_border2">In search of truth, knowledge, and a decent ping</span>
|
||||
</div>
|
||||
<header>
|
||||
|
||||
<div class="main_post">
|
||||
|
||||
<!-- This section contains the pulled-in posts from multiple sources that compose the main content of the page -->
|
||||
<div class="text_post" id="temp">
|
||||
<p>Welcome to <span style="font-style:italic">The Internet Vagabond</span></p><br />
|
||||
<p>This "About" page will often serve as a temporary front page while I mess around with the rest of the site. Sorry for any inconveniences!</p><br />
|
||||
<p>Feel free to find me on the web by following any of the links to the left.</p>
|
||||
</div>
|
||||
|
||||
<div class="text_post" id="about">
|
||||
<div class="about_title">About The Vagabond</div>
|
||||
<p>My name is Bill Niblock. I am a computer scientist by education, a computer junkie by hobby, and a gamer by preference.</p><br />
|
||||
<p>While not slaving away at my day job, I can most likely be found staring into a glowing rectangle, watching text and motion picture fly by. I am an avid gamer, preferring the PC over most consoles, but I by no means neglect their worthiness. I spend a lot of time on YouTube, even more time on reddit, and somehow even more time on game-streaming sites. Common between all these (except maybe YouTube) is the awesome community that gaming can provide, an environment which I believe is of great importance to the future of gaming, and is still very much in its infant stage. I hope someday to help foster said community into a veritable juggernaut of awesome.</p><br />
|
||||
<p>Aside from gaming, I also enjoy coding. As of the time of this rendition of my about page, I can't claim much in the way of worthwhile web applications. I have a comfy job, and a comfy life, and complacency breeds apathy; in other words, I'm lazy. I enjoy exploring new technologies, and I hope that in the near future, I can combine them with my love for the gaming community to create something truely magnificent. Stay tuned!</p><br />
|
||||
<p>Offline, I am an amateur philosopher, an aspiring musician, an avid reader, and a novice socialite. There are many aspects of my life that I enjoy jumping between, and I hope that through this site, I can share many of them with you.</p>
|
||||
<br /><br /><hr width="60%" /><br />
|
||||
<div class="about_title">About The Site</div>
|
||||
<p><span style="font-style:italic">The Internet Vagabond</span> is the personal site of me, Bill Niblock. Mostly a blog, this site moreso serves as a digital playground, for me to experiment with new features in web development.</p><br />
|
||||
<p>Initially a pet-project, I hope to develop the site into something more than just another blog. Many of the projects I think of I hope to develop on this site, making use of it for commentary, community and statuses. While I can understand the importance of maintaining secrecy in business endeavors, I can also appreciate that many of those endeavors are lost to endless bureaucracy due to exactly that secrecy. For many of my projects, it would be far better if they even saw the light of day than be held back simply because I thought I could make a few bucks on them.</p><br />
|
||||
<p>I also want this site to act as a "social front page" for my online presence. By pulling in my Twitter posts, my Google+ posts, and mixing in any stand-alone articles, I can gather anything and everything interesting about me or by me in one location. I've never been a proponent of narcisistic endeavors, but I can justify this one as a worthwhile pursuit of knowledge. Besides, if someone else stumbles upon my site and thinks they would like a similar layout or blog, then they have a starting place and some example code to work with</p>
|
||||
<br /><br /><hr width="60%" /><br />
|
||||
<div class="about_title">Parting Thoughts</div>
|
||||
<p>This site has always been about sharing my adventures throughout life, both on and off the Internet. I hope that you enjoy the journey as much as (presumably) I do! Thanks for stopping by!</p>
|
||||
<br /><br />
|
||||
</div>
|
||||
|
||||
</div> <!-- END .main_post -->
|
||||
</section> <!-- END .main -->
|
||||
|
||||
<!-- End Main Section -->
|
||||
|
||||
|
||||
</div> <!-- END .page -->
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in a new issue