405 lines
10 KiB
CSS
Executable file
405 lines
10 KiB
CSS
Executable file
/*
|
|
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 = 60 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%
|
|
}
|
|
.title{
|
|
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{
|
|
float:left;
|
|
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#vaga{
|
|
border: 5px solid black; border-top-right-radius: 25px; border-bottom-left-radius: 25px;
|
|
|
|
}
|
|
|
|
.text_post#other{
|
|
display: none;
|
|
|
|
}
|
|
|
|
/* =======================================
|
|
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;
|
|
font-size: 0.8em;
|
|
}
|
|
.text_post{
|
|
height: 75px;
|
|
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;
|
|
font-size: 0.8em;
|
|
}
|
|
}
|
|
|
|
|
|
/* =======================================
|
|
Responsive -- Width: 500 or less, Landscape
|
|
======================================= */
|
|
@media handheld,screen and (max-width: 500px) and (orientation: landscape){
|
|
|
|
#page{
|
|
max-width: 29em; /* 464px / 16px = 29 em */
|
|
}
|
|
|
|
}
|