mirror of
https://github.com/danbee/cv
synced 2025-03-04 08:59:12 +00:00
660 lines
14 KiB
Sass
660 lines
14 KiB
Sass
/* ====================================================
|
|
*
|
|
* Dan Barber CV Styles
|
|
* Based on:
|
|
* 320 and Up boilerplate extension
|
|
*
|
|
* Author: Andy Clarke
|
|
* Version: 0.9b
|
|
* URL: http://stuffandnonsense.co.uk/projects/320andup/
|
|
* _____________________________________________________
|
|
*
|
|
* 1.ROOT
|
|
* 2.HEADINGS
|
|
* 3.TYPOGRAPHY
|
|
* 4.LINKS
|
|
* 5.FIGURES & IMAGES
|
|
* 6.TABLES
|
|
* 7.FORMS (See css/mylibs/forms.css)
|
|
* 8.BANNER header[role="banner"]
|
|
* 9.NAVIGATION nav[role="navigation"]
|
|
* 10.CONTENT
|
|
* 11.MAIN div[role="main"]
|
|
* 12.COMPLIMENTARY div[role="complementary"]
|
|
* 13.CONTENTINFO footer[role="contentinfo"]
|
|
* 14.GLOBAL OBJECTS
|
|
* 15.VENDOR-SPECIFIC
|
|
* 16.TEMPLATE SPECIFICS
|
|
* 17.MODERNIZR
|
|
*
|
|
* COLOURS
|
|
|
|
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
|
|
|
|
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section
|
|
display: block
|
|
|
|
abbr[title]
|
|
border-bottom: 1px dotted
|
|
cursor: help
|
|
|
|
/* 1.ROOT
|
|
|
|
html
|
|
overflow-y: scroll
|
|
background: white
|
|
|
|
body
|
|
margin: 0 auto
|
|
padding: 0 0
|
|
font: 100% / 1.4 "museo-sans-1", "museo-sans-2", sans-serif
|
|
font-weight: 100
|
|
color: #262626
|
|
background: white
|
|
background: -moz-linear-gradient(left, rgba(239,239,239,1) 0%, rgba(255,255,255,1) 35%, rgba(255,255,255,1) 65%, rgba(239,239,239,1) 100%)
|
|
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(239,239,239,1)), color-stop(35%,rgba(255,255,255,1)), color-stop(65%,rgba(255,255,255,1)), color-stop(100%,rgba(239,239,239,1)))
|
|
background: -webkit-linear-gradient(left, rgba(239,239,239,1) 0%,rgba(255,255,255,1) 35%,rgba(255,255,255,1) 65%,rgba(239,239,239,1) 100%)
|
|
background: -o-linear-gradient(left, rgba(239,239,239,1) 0%,rgba(255,255,255,1) 35%,rgba(255,255,255,1) 65%,rgba(239,239,239,1) 100%)
|
|
background: -ms-linear-gradient(left, rgba(239,239,239,1) 0%,rgba(255,255,255,1) 35%,rgba(255,255,255,1) 65%,rgba(239,239,239,1) 100%)
|
|
background: linear-gradient(to right, rgba(239,239,239,1) 0%,rgba(255,255,255,1) 35%,rgba(255,255,255,1) 65%,rgba(239,239,239,1) 100%)
|
|
|
|
#stripe
|
|
background: #262626
|
|
height: 12px
|
|
line-height: 0
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1)
|
|
canvas
|
|
height: 12px
|
|
width: 100%
|
|
|
|
.container
|
|
margin: 0 auto
|
|
padding: 0 0
|
|
width: 90%
|
|
|
|
/* 2.HEADINGS
|
|
|
|
h1, h2, h3, h4, h5, h6
|
|
font-family: "museo-slab-1","museo-slab-2", "Helvetica Neue", Helvetica, Arial, serif
|
|
font-weight: black
|
|
text-shadow: 1px 1px 1px white
|
|
text-rendering: optimizeLegibility
|
|
|
|
h1
|
|
margin-top: 0
|
|
margin-bottom: .1em
|
|
font-size: 3em
|
|
/* 48 / 16 = 3
|
|
line-height: 1.2
|
|
font-weight: 900
|
|
text-align: center
|
|
width: 100%
|
|
&:before
|
|
content: ''
|
|
display: block
|
|
height: 130px
|
|
font-size: 3em
|
|
margin-top: 0
|
|
text-align: center
|
|
background: url(../img/l/danbarberlogo.png) center center no-repeat
|
|
background-size: 95px
|
|
|
|
/* Hide the logomark in ie7/8 as it just doesn't work correctly. It's not essential.
|
|
|
|
.ie8 h1:before, .ie7 h1:before
|
|
border: 1px solid red
|
|
display: none
|
|
|
|
h2
|
|
margin-bottom: .75em
|
|
font-size: 1.7em
|
|
/* 36 / 16 = 2
|
|
line-height: 1.2
|
|
text-align: center
|
|
|
|
h3
|
|
text-transform: uppercase
|
|
margin-bottom: 1em
|
|
font-size: 1.4em
|
|
/* 24 / 16 = 1.5
|
|
line-height: 1.3
|
|
|
|
h4
|
|
margin-bottom: 0.75em
|
|
margin-top: 1.7em
|
|
font-size: 1.2em
|
|
/* 20 / 16 = 1.25
|
|
line-height: 1.25
|
|
font-weight: 500
|
|
|
|
h5
|
|
margin-bottom: 1.5em
|
|
font-size: 1em
|
|
/* 16 / 16 = 1
|
|
|
|
h6
|
|
font-size: 1em
|
|
/* 16 / 16 = 1
|
|
|
|
/* 3.TYPOGRAPHY
|
|
|
|
.link
|
|
float: right
|
|
|
|
.period
|
|
font-style: italic
|
|
|
|
p, ol, ul, dl, address
|
|
margin-bottom: 0.75em
|
|
font-size: 1em
|
|
/* 16 / 16 = 1
|
|
|
|
ul, ol
|
|
margin: 0 0 0 -24px
|
|
padding-left: 24px
|
|
|
|
ul
|
|
ul
|
|
padding-left: 0
|
|
list-style-type: disc
|
|
|
|
ol
|
|
list-style-type: decimal
|
|
|
|
li
|
|
ul, ol
|
|
margin: 0
|
|
font-size: 1em
|
|
/* 16 / 16 = 1
|
|
|
|
.container>section
|
|
border-top: 2px solid #666
|
|
padding-top: 1em
|
|
margin-bottom: 2em
|
|
ul, ol
|
|
list-style: none
|
|
|
|
dl, dd
|
|
margin-bottom: 1.5em
|
|
|
|
dt
|
|
font-weight: normal
|
|
|
|
blockquote
|
|
margin: 0 0 1.5em -24px
|
|
padding-left: 24px
|
|
border-left: 1px solid rgb(200, 200, 200)
|
|
font-style: italic
|
|
&:before, &:after
|
|
content: ''
|
|
content: none
|
|
|
|
q
|
|
&:before, &:after
|
|
content: ''
|
|
content: none
|
|
|
|
b, strong
|
|
font-weight: bold
|
|
|
|
i, em
|
|
font-style: italic
|
|
|
|
sup, sub
|
|
position: relative
|
|
font-size: 75%
|
|
line-height: 0
|
|
|
|
sup
|
|
top: -0.5em
|
|
|
|
sub
|
|
bottom: -0.25em
|
|
|
|
address
|
|
font-style: normal
|
|
|
|
pre
|
|
margin-bottom: 1.5em
|
|
white-space: pre
|
|
white-space: pre-wrap
|
|
word-wrap: break-word
|
|
font: .875em 'andale mono', 'lucida console', monospace
|
|
line-height: 1.5
|
|
|
|
code
|
|
font: .875em 'andale mono', 'lucida console', monospace
|
|
line-height: 1.5
|
|
|
|
small
|
|
font-size: 1em
|
|
/* 16 / 16 = 1
|
|
|
|
/* 4.LINKS
|
|
|
|
a
|
|
outline: none
|
|
color: rgb(23, 119, 175)
|
|
text-decoration: none
|
|
&:visited
|
|
outline: none
|
|
color: rgb(23, 119, 175)
|
|
text-decoration: none
|
|
&:hover, &:focus
|
|
outline: none
|
|
color: rgb(40, 40, 40)
|
|
text-decoration: underline
|
|
&:active
|
|
outline: none
|
|
color: rgb(0, 0, 0)
|
|
|
|
/* 5.FIGURES & IMAGES
|
|
|
|
figure
|
|
margin-bottom: 1.5em
|
|
img, object, embed
|
|
margin-bottom: .75em
|
|
max-width: 100%
|
|
|
|
figcaption
|
|
display: block
|
|
font-weight: normal
|
|
|
|
/* 6.TABLES
|
|
|
|
table
|
|
border-collapse: collapse
|
|
border-spacing: 0
|
|
margin-bottom: 1.4em
|
|
width: 100%
|
|
font-size: .875em
|
|
/* 14 / 16 = .875
|
|
|
|
th
|
|
font-weight: bold
|
|
padding: .25em 10px .25em 5px
|
|
|
|
td, caption
|
|
padding: .25em 10px .25em 5px
|
|
|
|
tfoot
|
|
font-style: italic
|
|
|
|
caption
|
|
background-color: transparent
|
|
|
|
/* 7.FORMS (See css/mylibs/forms.css)
|
|
|
|
/* 8.BANNER
|
|
/* 9.NAVIGATION
|
|
/* 10.CONTENT
|
|
/* 11.MAIN
|
|
/* 12.COMPLIMENTARY
|
|
/* 13.CONTENTINFO
|
|
|
|
/* 14.GLOBAL OBJECTS
|
|
|
|
.clearfix
|
|
zoom: 1
|
|
&:before
|
|
content: "\0020"
|
|
display: block
|
|
height: 0
|
|
overflow: hidden
|
|
&:after
|
|
content: "\0020"
|
|
display: block
|
|
height: 0
|
|
overflow: hidden
|
|
clear: both
|
|
|
|
/* 15.VENDOR-SPECIFIC
|
|
|
|
body
|
|
-webkit-text-size-adjust: 100%
|
|
-ms-text-size-adjust: 100%
|
|
|
|
a:link
|
|
-webkit-tap-highlight-color: rgb(52, 158, 219)
|
|
|
|
::-webkit-selection
|
|
background: rgb(23, 119, 175)
|
|
color: rgb(250, 250, 250)
|
|
text-shadow: none
|
|
::-moz-selection
|
|
background: rgb(23, 119, 175)
|
|
color: rgb(250, 250, 250)
|
|
text-shadow: none
|
|
::selection
|
|
background: rgb(23, 119, 175)
|
|
color: rgb(250, 250, 250)
|
|
text-shadow: none
|
|
::-webkit-input-placeholder
|
|
padding: 10px
|
|
font-size: .875em
|
|
line-height: 1.4
|
|
|
|
/* input[type=search] { -webkit-appearance: none; }
|
|
*
|
|
*input[type="search"]::-webkit-search-decoration,
|
|
*input[type="search"]::-webkit-search-cancel-button { display: none; }
|
|
|
|
input:-moz-placeholder
|
|
padding: 10px
|
|
font-size: .875em
|
|
line-height: 1.4
|
|
|
|
.ie7 img, .iem7 img
|
|
-ms-interpolation-mode: bicubic
|
|
|
|
div, input, textarea
|
|
-webkit-box-sizing: border-box
|
|
-moz-box-sizing: border-box
|
|
-o-box-sizing: border-box
|
|
box-sizing: border-box
|
|
|
|
/* Non-semantic helper classes
|
|
|
|
/* Image replacement
|
|
|
|
.ir
|
|
display: block
|
|
text-indent: -999em
|
|
overflow: hidden
|
|
background-repeat: no-repeat
|
|
text-align: left
|
|
direction: ltr
|
|
|
|
/* Hide for screenreaders and visual browsers
|
|
|
|
.hidden
|
|
display: none
|
|
visibility: hidden
|
|
|
|
/* Hide visually
|
|
|
|
.visuallyhidden
|
|
position: absolute
|
|
clip: rect(0 0 0 0)
|
|
overflow: hidden
|
|
margin: -1px
|
|
padding: 0
|
|
height: 1px
|
|
width: 1px
|
|
border: 0
|
|
&.focusable
|
|
&:active, &:focus
|
|
position: static
|
|
clip: auto
|
|
overflow: visible
|
|
height: auto
|
|
margin: 0
|
|
width: auto
|
|
|
|
/* Allow an element to be focusable via keyboard
|
|
|
|
/* Hide but maintain layout
|
|
|
|
.invisible
|
|
visibility: hidden
|
|
|
|
/* 16.TEMPLATE SPECIFICS
|
|
|
|
#goog-fixurl
|
|
ul
|
|
list-style-type: none
|
|
input
|
|
margin-bottom: 1.5em
|
|
|
|
/* 17.MODERNIZR
|
|
|
|
/* MEDIA QUERIES
|
|
|
|
/*Print __________________________________________________________________________________________________________
|
|
@media print
|
|
*
|
|
background: transparent !important
|
|
color: black !important
|
|
text-shadow: none !important
|
|
filter: none !important
|
|
-ms-filter: none !important
|
|
a
|
|
color: #444 !important
|
|
text-decoration: underline
|
|
&:visited
|
|
color: #444 !important
|
|
text-decoration: underline
|
|
&[href]:after
|
|
content: " (" attr(href) ")"
|
|
abbr[title]:after
|
|
content: " (" attr(title) ")"
|
|
a
|
|
&[href^="javascript:"]:after, &[href^="#"]:after
|
|
content: ""
|
|
pre, blockquote
|
|
border: 1px solid #999
|
|
page-break-inside: avoid
|
|
thead
|
|
display: table-header-group
|
|
tr, img
|
|
page-break-inside: avoid
|
|
@page
|
|
margin: .5cm
|
|
|
|
p, h2, h3
|
|
orphans: 3
|
|
widows: 3
|
|
h2, h3
|
|
page-break-after: avoid
|
|
|
|
/*/mediaquery
|
|
|
|
/*480px __________________________________________________________________________________________________________
|
|
@media only screen and (min-width: 480px)
|
|
/* 1.ROOT
|
|
body
|
|
font-size: 1.05em
|
|
/* 2.HEADINGS
|
|
h1
|
|
margin-top: 0.5em
|
|
text-align: left
|
|
margin-bottom: 0
|
|
font-size: 3.3em
|
|
&:before
|
|
float: right
|
|
font-size: 2em
|
|
width: 78px
|
|
background-size: 78px
|
|
background-position: top center
|
|
position: relative
|
|
top: 0em
|
|
text-align: right
|
|
margin-bottom: -0.5em
|
|
h2
|
|
text-align: left
|
|
/* 3.TYPOGRAPHY
|
|
/* 4.LINKS
|
|
/* 5.FIGURES & IMAGES
|
|
/* 6.TABLES
|
|
/* 7.FORMS
|
|
/* 8.BANNER
|
|
/* 9.NAVIGATION
|
|
/* 10.CONTENT
|
|
/* #experience h4 { float: left; margin-top: 0; }
|
|
*#experience li { margin-top: 2.2em; }
|
|
*#experience .period { clear: none; text-align: right; position: relative; top: 0.1em; }
|
|
*#experience p { clear: both; }
|
|
/* 11.MAIN
|
|
/* 12.COMPLIMENTARY
|
|
/* 13.CONTENTINFO
|
|
/* 14.GLOBAL OBJECTS
|
|
/* 15.VENDOR-SPECIFIC
|
|
/* 16.TEMPLATE SPECIFICS
|
|
/* 17.MODERNIZR
|
|
|
|
/*/mediaquery
|
|
|
|
/*480px __________________________________________________________________________________________________________
|
|
@media only screen and (min-width: 540px)
|
|
/* 1.ROOT
|
|
/* 2.HEADINGS
|
|
/* 3.TYPOGRAPHY
|
|
/* 4.LINKS
|
|
/* 5.FIGURES & IMAGES
|
|
/* 6.TABLES
|
|
/* 7.FORMS
|
|
/* 8.BANNER
|
|
/* 9.NAVIGATION
|
|
/* 10.CONTENT
|
|
#profile, #experience
|
|
float: left
|
|
width: 63%
|
|
#skills
|
|
float: right
|
|
width: 30%
|
|
margin-left: 7%
|
|
#portfolio
|
|
float: left
|
|
width: 63%
|
|
#interests, #contact
|
|
float: right
|
|
width: 30%
|
|
margin-left: 7%
|
|
/* 11.MAIN
|
|
/* 12.COMPLIMENTARY
|
|
/* 13.CONTENTINFO
|
|
/* 14.GLOBAL OBJECTS
|
|
/* 15.VENDOR-SPECIFIC
|
|
/* 16.TEMPLATE SPECIFICS
|
|
/* 17.MODERNIZR
|
|
|
|
/*/mediaquery
|
|
|
|
/*768px __________________________________________________________________________________________________________
|
|
@media only screen and (min-width: 768px)
|
|
/* 1.ROOT
|
|
body
|
|
font-size: 1.1em
|
|
/* 2.HEADINGS
|
|
h1
|
|
font-size: 5em
|
|
margin-bottom: 0em
|
|
&:before
|
|
width: 130px
|
|
background-size: 130px
|
|
background-position: top center
|
|
position: relative
|
|
top: 0em
|
|
h2
|
|
font-size: 2em
|
|
/* 3.TYPOGRAPHY
|
|
/* 4.LINKS
|
|
/* 5.FIGURES & IMAGES
|
|
/* 6.TABLES
|
|
/* 7.FORMS
|
|
/* 8.BANNER
|
|
/* 9.NAVIGATION
|
|
/* 10.CONTENT
|
|
/* 11.MAIN
|
|
/* 12.COMPLIMENTARY
|
|
/* 13.CONTENTINFO
|
|
/* 14.GLOBAL OBJECTS
|
|
/* 15.VENDOR-SPECIFIC
|
|
/* 16.TEMPLATE SPECIFICS
|
|
/* 17.MODERNIZR
|
|
|
|
/*/mediaquery
|
|
|
|
/*992px __________________________________________________________________________________________________________
|
|
@media only screen and (min-width: 992px)
|
|
/* 1.ROOT
|
|
.container
|
|
width: 890px
|
|
/* 2.HEADINGS
|
|
/* 3.TYPOGRAPHY
|
|
/* 4.LINKS
|
|
/* 5.FIGURES & IMAGES
|
|
/* 6.TABLES
|
|
/* 7.FORMS
|
|
/* 8.BANNER
|
|
/* 9.NAVIGATION
|
|
/* 10.CONTENT
|
|
/* 11.MAIN
|
|
/* 12.COMPLIMENTARY
|
|
/* 13.CONTENTINFO
|
|
/* 14.GLOBAL OBJECTS
|
|
/* 15.VENDOR-SPECIFIC
|
|
/* 16.TEMPLATE SPECIFICS
|
|
/* 17.MODERNIZR
|
|
|
|
/*/mediaquery
|
|
|
|
/*1382px __________________________________________________________________________________________________________
|
|
@media only screen and (min-width: 1382px)
|
|
/* 1.ROOT
|
|
/* 2.HEADINGS
|
|
/* 3.TYPOGRAPHY
|
|
/* 4.LINKS
|
|
/* 5.FIGURES & IMAGES
|
|
/* 6.TABLES
|
|
/* 7.FORMS
|
|
/* 8.BANNER
|
|
/* 9.NAVIGATION
|
|
/* 10.CONTENT
|
|
/* 11.MAIN
|
|
/* 12.COMPLIMENTARY
|
|
/* 13.CONTENTINFO
|
|
/* 14.GLOBAL OBJECTS
|
|
/* 15.VENDOR-SPECIFIC
|
|
/* 16.TEMPLATE SPECIFICS
|
|
/* 17.MODERNIZR
|
|
|
|
/*/mediaquery
|
|
|
|
/*2x __________________________________________________________________________________________________________
|
|
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)
|
|
/* 1.ROOT
|
|
/* 2.HEADINGS
|
|
h1:before
|
|
background-image: url(../img/h/danbarberlogo.png)
|
|
/* 3.TYPOGRAPHY
|
|
/* 4.LINKS
|
|
/* 5.FIGURES & IMAGES
|
|
/* 6.TABLES
|
|
/* 7.FORMS
|
|
/* 8.BANNER
|
|
/* 9.NAVIGATION
|
|
/* 10.CONTENT
|
|
/* 11.MAIN
|
|
/* 12.COMPLIMENTARY
|
|
/* 13.CONTENTINFO
|
|
/* 14.GLOBAL OBJECTS
|
|
/* 15.VENDOR-SPECIFIC
|
|
/* 16.TEMPLATE SPECIFICS
|
|
/* 17.MODERNIZR
|
|
|
|
/*/mediaquery
|
|
|
|
/*
|
|
* Sources:
|
|
* http://meyerweb.com/eric/tools/css/reset
|
|
* http://people.opera.com/patrickl/experiments/keyboard/test
|
|
* http://gist.github.com/413930
|
|
* http://pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap
|
|
* http://sitepoint.com/blogs/2010/08/20/ie-remove-textarea-scrollbars
|
|
* http://tjkdesign.com/ez-css/css/base.css
|
|
* http://viget.com/inspire/styling-the-button-element-in-internet-explorer
|
|
* http://code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing
|
|
* http://html5doctor.com/html-5-reset-stylesheet/
|
|
* http://praegnanz.de/weblog/htmlcssjs-kickstart/
|
|
* http://camendesign.com/design/
|
|
* http://yui.yahooapis.com/2.8.1/build/base/base.css
|
|
* http://webaim.org/techniques/css/invisiblecontent/
|
|
* http://drupal.org/node/897638
|