Merge branch 'flatui'
2
Gemfile
|
@ -16,6 +16,8 @@ gem 'typogruby'
|
||||||
gem 'nanoc-cachebuster'
|
gem 'nanoc-cachebuster'
|
||||||
gem 'nanoc-javascript-concatenator'
|
gem 'nanoc-javascript-concatenator'
|
||||||
|
|
||||||
|
gem 'coffee-script'
|
||||||
|
|
||||||
gem 'uglifier'
|
gem 'uglifier'
|
||||||
gem 'multi_json', '~> 1.3' # needed by uglifier
|
gem 'multi_json', '~> 1.3' # needed by uglifier
|
||||||
|
|
||||||
|
|
|
@ -5,6 +5,10 @@ GEM
|
||||||
rack (>= 1.0.0)
|
rack (>= 1.0.0)
|
||||||
builder (3.2.0)
|
builder (3.2.0)
|
||||||
chunky_png (1.2.7)
|
chunky_png (1.2.7)
|
||||||
|
coffee-script (2.2.0)
|
||||||
|
coffee-script-source
|
||||||
|
execjs
|
||||||
|
coffee-script-source (1.6.2)
|
||||||
colored (1.2)
|
colored (1.2)
|
||||||
compass (0.12.2)
|
compass (0.12.2)
|
||||||
chunky_png (~> 1.2)
|
chunky_png (~> 1.2)
|
||||||
|
@ -55,6 +59,7 @@ PLATFORMS
|
||||||
DEPENDENCIES
|
DEPENDENCIES
|
||||||
adsf
|
adsf
|
||||||
builder
|
builder
|
||||||
|
coffee-script
|
||||||
compass
|
compass
|
||||||
haml
|
haml
|
||||||
i18n
|
i18n
|
||||||
|
|
32
Rules
|
@ -23,16 +23,32 @@ compile '/sitemap/', :rep => 'gzip' do
|
||||||
filter :shellcmd, :cmd => 'gzip'
|
filter :shellcmd, :cmd => 'gzip'
|
||||||
end
|
end
|
||||||
|
|
||||||
compile '/css/*/' do
|
# Use screen.scss as the single entry point for styles, ignore everything else in /assets/css
|
||||||
# filter :sass, syntax: :scss, load_paths: SASS_LOAD_PATHS
|
|
||||||
filter :sass, Compass.sass_engine_options
|
compile '/css/screen/' do
|
||||||
|
filter :sass, :syntax => :scss if @item[:extension] == 'scss'
|
||||||
|
end
|
||||||
|
|
||||||
|
compile '/css/*' do
|
||||||
|
end
|
||||||
|
|
||||||
|
route '/css/screen/' do
|
||||||
|
fp = fingerprint(item[:filename])
|
||||||
|
item.identifier.chop + fp + '.css'
|
||||||
end
|
end
|
||||||
|
|
||||||
compile '/js/*/' do
|
compile '/js/*/' do
|
||||||
|
filter :coffeescript if @item[:extension] == 'coffee'
|
||||||
|
|
||||||
filter :concat_js
|
filter :concat_js
|
||||||
filter :uglify_js
|
filter :uglify_js
|
||||||
end
|
end
|
||||||
|
|
||||||
|
route '/js/*/' do
|
||||||
|
fp = fingerprint(item[:filename])
|
||||||
|
item.identifier.chop + fp + '.js'
|
||||||
|
end
|
||||||
|
|
||||||
compile '/rss/' do
|
compile '/rss/' do
|
||||||
filter :erb
|
filter :erb
|
||||||
end
|
end
|
||||||
|
@ -67,6 +83,7 @@ compile '*' do
|
||||||
end
|
end
|
||||||
|
|
||||||
if %w(html haml md).include?(item[:extension])
|
if %w(html haml md).include?(item[:extension])
|
||||||
|
layout 'page'
|
||||||
layout 'default'
|
layout 'default'
|
||||||
filter :cache_buster
|
filter :cache_buster
|
||||||
end
|
end
|
||||||
|
@ -86,15 +103,6 @@ route %r{^/(assets/.*|sitemap|robots|atom)/$} do
|
||||||
item.identifier.chop + fp + '.' + ext
|
item.identifier.chop + fp + '.' + ext
|
||||||
end
|
end
|
||||||
|
|
||||||
route '/css/*/' do
|
|
||||||
fp = fingerprint(item[:filename])
|
|
||||||
item.identifier.chop + fp + '.css'
|
|
||||||
end
|
|
||||||
|
|
||||||
route '/js/*/' do
|
|
||||||
fp = fingerprint(item[:filename])
|
|
||||||
item.identifier.chop + fp + '.js'
|
|
||||||
end
|
|
||||||
|
|
||||||
route '/rss/' do
|
route '/rss/' do
|
||||||
'/rss.xml'
|
'/rss.xml'
|
||||||
|
|
|
@ -1,86 +1,71 @@
|
||||||
---
|
---
|
||||||
title: About Ariejan
|
title: About Ariejan
|
||||||
---
|
---
|
||||||
.content_wrap.nobg
|
.row
|
||||||
%section#middle_content
|
.large-8.columns
|
||||||
.one_half
|
:markdown
|
||||||
%img.gravatar(width="120" height="120" src="//www.gravatar.com/avatar/a9bfdd0cc75c857b669c37548b8bfdf9?s=240")
|
## Hi, I'm Ariejan de Vroom
|
||||||
|
|
||||||
:markdown
|
Hi! I'm Ariejan de Vroom, a thirty-two year old Ruby on Rails developer and Software
|
||||||
### Hi, I'm Ariejan de Vroom
|
Craftsman. I live in [Breugel, the Netherlands][1] with my fiancée [Laura][2]
|
||||||
|
and work full-time at [Kabisa ICT][3].
|
||||||
|
|
||||||
Hi! I'm Ariejan de Vroom, a thirty-two year old Ruby on Rails developer and Software
|
I started programming in the mid-nineties with [GW-BASIC][9] and [QBasic][10]. Soon
|
||||||
Craftsman. I live in [Breugel, the Netherlands][1] with my fiancée [Laura][2]
|
thereafter I discovered [Turbo Pascal][11] and then made the jump to [Delphi][12].
|
||||||
and work full-time at [Kabisa ICT][3].
|
|
||||||
|
|
||||||
I started programming in the mid-nineties with [GW-BASIC][9] and [QBasic][10]. Soon
|
At this point I started playing with lots of different languages and platforms. Then,
|
||||||
thereafter I discovered [Turbo Pascal][11] and then made the jump to [Delphi][12].
|
almost naturally I made the switch to the web and started developing in [PHP][13].
|
||||||
|
|
||||||
At this point I started playing with lots of different languages and platforms. Then,
|
Not satisfied with the often messy code from the PHP community I discovered [Ruby on Rails][14]
|
||||||
almost naturally I made the switch to the web and started developing in [PHP][13].
|
somewhere in 2005. I've been writing Ruby ever since.
|
||||||
|
|
||||||
Not satisfied with the often messy code from the PHP community I discovered [Ruby on Rails][14]
|
### Find out more about me
|
||||||
somewhere in 2005. I've been writing Ruby ever since.
|
|
||||||
|
|
||||||
#### Find out more about me
|
Check me out on [Twitter][4], [Github][6] or [LinkedIn][5] to get to know me a bit better.
|
||||||
|
|
||||||
Check me out on [Twitter][4], [Github][6] or [LinkedIn][5] to get to know me a bit better.
|
If you want to contact me, please use the contact form on this page or [tweet something][4]
|
||||||
|
or [send an email directly][8].
|
||||||
|
|
||||||
If you want to contact me, please use the contact form on this page or [tweet something][4]
|
[1]: http://maps.google.nl/maps?f=q&source=s_q&hl=nl&geocode=&q=eindhoven&sll=52.469397,5.509644&sspn=4.692139,10.942383&ie=UTF8&hq=&hnear=Breugel,+Noord-Brabant&ll=51.440313,5.482178&spn=4.800964,10.942383&t=h&z=7
|
||||||
or [send an email directly][8].
|
[2]: http://laura-oerlemans.net/
|
||||||
|
[3]: http://kabisa.nl/
|
||||||
|
[4]: http://twitter.com/ariejan
|
||||||
|
[5]: http://aj.gs/linkedin
|
||||||
|
[6]: http://aj.gs/github
|
||||||
|
[8]: mailto:ariejan@ariejan.net
|
||||||
|
[9]: http://en.wikipedia.org/wiki/GW-BASIC
|
||||||
|
[10]: http://en.wikipedia.org/wiki/Qbasic
|
||||||
|
[11]: http://en.wikipedia.org/wiki/Turbo_pascal
|
||||||
|
[12]: http://en.wikipedia.org/wiki/Borland_Delphi
|
||||||
|
[13]: http://en.wikipedia.org/wiki/Php
|
||||||
|
[14]: http://en.wikipedia.org/wiki/Ruby_on_rails
|
||||||
|
|
||||||
[1]: http://maps.google.nl/maps?f=q&source=s_q&hl=nl&geocode=&q=eindhoven&sll=52.469397,5.509644&sspn=4.692139,10.942383&ie=UTF8&hq=&hnear=Breugel,+Noord-Brabant&ll=51.440313,5.482178&spn=4.800964,10.942383&t=h&z=7
|
.large-4.columns
|
||||||
[2]: http://laura-oerlemans.net/
|
.avatar
|
||||||
[3]: http://kabisa.nl/
|
|
||||||
[4]: http://twitter.com/ariejan
|
|
||||||
[5]: http://aj.gs/linkedin
|
|
||||||
[6]: http://aj.gs/github
|
|
||||||
[8]: mailto:ariejan@ariejan.net
|
|
||||||
[9]: http://en.wikipedia.org/wiki/GW-BASIC
|
|
||||||
[10]: http://en.wikipedia.org/wiki/Qbasic
|
|
||||||
[11]: http://en.wikipedia.org/wiki/Turbo_pascal
|
|
||||||
[12]: http://en.wikipedia.org/wiki/Borland_Delphi
|
|
||||||
[13]: http://en.wikipedia.org/wiki/Php
|
|
||||||
[14]: http://en.wikipedia.org/wiki/Ruby_on_rails
|
|
||||||
|
|
||||||
.one_half.last
|
%form(id="form1" name="form1" class="wufoo page" autocomplete="off" enctype="multipart/form-data" method="post" novalidate action="https://ariejan.wufoo.com/forms/z7x4z5/#public")
|
||||||
%form(id="form1" name="form1" class="wufoo page" autocomplete="off" enctype="multipart/form-data" method="post" novalidate action="https://ariejan.wufoo.com/forms/z7x4z5/#public")
|
|
||||||
|
|
||||||
%h3 Leave me a message
|
%h3 Leave me a message
|
||||||
|
|
||||||
%ul
|
%ul
|
||||||
%li#foli1.notranslate
|
%li
|
||||||
%label.desc#title1(for="Field1")
|
%div
|
||||||
Message
|
%textarea.field.textarea.medium(name="Field1" spellcheck="true" rows="10" cols="50" tabindex="1" placeholder="How can I be of help?" onkeyup="" required)
|
||||||
%span#req_1.req *
|
|
||||||
%div
|
|
||||||
%textarea#Field1.field.textarea.medium(name="Field1" spellcheck="true" rows="10" cols="50" tabindex="1" onkeyup="" required)
|
|
||||||
|
|
||||||
|
%li
|
||||||
|
%div
|
||||||
|
%input(id="Field4" name="Field4" type="text" class="field text large" value="" maxlength="255" tabindex="2" onkeyup="" placeholder="Your name, please")
|
||||||
|
|
||||||
%li#foli4.notranslate
|
%li
|
||||||
%label.desc#title4(for="Field4")
|
%div
|
||||||
Your name
|
%input(id="Field2" name="Field2" type="email" spellcheck="false" class="field text large" value="" maxlength="255" tabindex="3" required placeholder="Your email address")
|
||||||
%div
|
|
||||||
%input(id="Field4" name="Field4" type="text" class="field text large" value="" maxlength="255" tabindex="2" onkeyup="")
|
|
||||||
%p.instruct#instruct4
|
|
||||||
%small Just so I know who's talking to me.
|
|
||||||
|
|
||||||
%li#foli2.notranslate
|
%li.buttons
|
||||||
%label.desc#title2(for="Field2")
|
%div
|
||||||
Email Address
|
%a.button(href="javascript:{}" onclick="document.getElementById('form1').submit();")
|
||||||
%span#req_2.req *
|
%span Send message
|
||||||
%div
|
|
||||||
%input(id="Field2" name="Field2" type="email" spellcheck="false" class="field text large" value="" maxlength="255" tabindex="3" required)
|
|
||||||
|
|
||||||
%p.instruct#instruct2
|
%li.hide
|
||||||
%small We won't share this with strangers.
|
%label(for="comment") Do Not Fill This Out
|
||||||
|
%textarea(name="comment" id="comment" rows="1" cols="1")
|
||||||
%li.buttons
|
%input(type="hidden" id="idstamp" name="idstamp" value="CUVI8NzGGu1E9xkpfytNrtxYAhGs8IrYwj0vZn2ji1c=")
|
||||||
%div
|
|
||||||
%a.button(href="javascript:{}" onclick="document.getElementById('form1').submit();")
|
|
||||||
%span Send message
|
|
||||||
|
|
||||||
%li.hide
|
|
||||||
%label(for="comment") Do Not Fill This Out
|
|
||||||
%textarea(name="comment" id="comment" rows="1" cols="1")
|
|
||||||
%input(type="hidden" id="idstamp" name="idstamp" value="CUVI8NzGGu1E9xkpfytNrtxYAhGs8IrYwj0vZn2ji1c=")
|
|
||||||
|
|
|
@ -1,9 +1,11 @@
|
||||||
---
|
---
|
||||||
title: Software Craftsmanship
|
title: Software Craftsmanship
|
||||||
---
|
---
|
||||||
.content_wrap.nobg
|
.row
|
||||||
%section#middle_content
|
.large-8.push-2.columns
|
||||||
:markdown
|
:markdown
|
||||||
|
# Craftsmanship
|
||||||
|
|
||||||
Well, this is awkward. I've got all these great arguments in my head to explain to you why software craftsmanship is so important and great. But I just haven't had any time yet to write them all down for you in a coherent way.
|
Well, this is awkward. I've got all these great arguments in my head to explain to you why software craftsmanship is so important and great. But I just haven't had any time yet to write them all down for you in a coherent way.
|
||||||
|
|
||||||
Please stand-by while I type this up. Soon. Promise!
|
Please stand-by while I type this up. Soon. Promise!
|
|
@ -1,277 +0,0 @@
|
||||||
body {font:13px/18px Helvetica, Arial, 'Nimbus Sans L', sans-serif;}
|
|
||||||
|
|
||||||
li p {
|
|
||||||
font-size:13px;
|
|
||||||
line-height:18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
input, textarea {font:13px/18px "Droid Sans", Helvetica, "Nimbus Sans L", sans-serif;}
|
|
||||||
|
|
||||||
code {font:12px/16px Monaco,Menlo,Consolas,"Courier New",monospace;}
|
|
||||||
|
|
||||||
h1 {font:36px/54px "Open Sans", Helvetica, "Nimbus Sans L", sans-serif;}
|
|
||||||
|
|
||||||
h2 {font:400 24px/36px "Open Sans", Helvetica, "Nimbus Sans L", sans-serif;}
|
|
||||||
|
|
||||||
h3,
|
|
||||||
.sitemap > li > a {font:22px/36px "Open Sans", Helvetica, "Nimbus Sans L", sans-serif;}
|
|
||||||
|
|
||||||
h4,
|
|
||||||
#sidebar .widgettitle {font:18px/24px "Open Sans", Helvetica, "Nimbus Sans L", sans-serif;}
|
|
||||||
|
|
||||||
h5 {font:italic 18px/24px "Open Sans", Helvetica, "Nimbus Sans L", sans-serif;}
|
|
||||||
|
|
||||||
h6,
|
|
||||||
.portfolio_inner .hover_effect .post_category a,
|
|
||||||
.sitemap > li > ul > li > a,
|
|
||||||
.cms_archive li {font:italic 14px/18px "Open Sans", Helvetica, "Nimbus Sans L", sans-serif;}
|
|
||||||
|
|
||||||
small,
|
|
||||||
abbr {font:12px/18px Arial, Helvetica, 'Nimbus Sans L', sans-serif;}
|
|
||||||
|
|
||||||
blockquote,
|
|
||||||
q,
|
|
||||||
.format-aside .entry-content {font:italic 18px/24px "Open Sans", Helvetica, "Nimbus Sans L", sans-serif;}
|
|
||||||
|
|
||||||
q:after, blockquote:after {font-family:"Open Sans", Helvetica, "Nimbus Sans L", sans-serif;}
|
|
||||||
|
|
||||||
span.dropcap,
|
|
||||||
span.dropcap2 {font-family: "Open Sans", Helvetica, "Nimbus Sans L", sans-serif;}
|
|
||||||
|
|
||||||
.button,
|
|
||||||
.button_medium,
|
|
||||||
.button_large,
|
|
||||||
.comment-reply-link,
|
|
||||||
.tabs li a,
|
|
||||||
.cmsms_comments {font-family:"Open Sans", Helvetica, "Nimbus Sans L", sans-serif;}
|
|
||||||
|
|
||||||
#navigation > li > a {font:600 14px/20px "Open Sans", Helvetica, "Nimbus Sans L", sans-serif;}
|
|
||||||
|
|
||||||
#navigation ul li a {font:600 13px/20px "Open Sans", Helvetica, "Nimbus Sans L", sans-serif;}
|
|
||||||
|
|
||||||
|
|
||||||
/* Colors */
|
|
||||||
|
|
||||||
/* ---------------------------------------------- Content Color */
|
|
||||||
|
|
||||||
body,
|
|
||||||
a:hover,
|
|
||||||
.jp-playlist-current a,
|
|
||||||
.wp-pagenavi a,
|
|
||||||
.cmsmsLike span {color:#808080;}
|
|
||||||
|
|
||||||
input,
|
|
||||||
textarea {color:#808080;}
|
|
||||||
|
|
||||||
.cmsmsLike {background-color:#cccccc;}
|
|
||||||
|
|
||||||
.cont_nav,
|
|
||||||
.cont_nav a {color:#ffffff;}
|
|
||||||
|
|
||||||
/* ---------------------------------------------- Navigation Color */
|
|
||||||
|
|
||||||
#navigation > li > a {
|
|
||||||
background-color:#191919;
|
|
||||||
color:#ffffff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav_wrap_inner.navi_scrolled {background-color:#191919;}
|
|
||||||
|
|
||||||
#navigation ul li a {
|
|
||||||
background-color:#191919;
|
|
||||||
color:#ffffff;
|
|
||||||
}
|
|
||||||
|
|
||||||
#navigation > li > ul {background-color:#191919;}
|
|
||||||
|
|
||||||
#navigation ul li.current_page_item > a,
|
|
||||||
#navigation ul li > a:hover,
|
|
||||||
#navigation ul li:hover > a {
|
|
||||||
background-color:#252525;
|
|
||||||
color:#ffffff;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ---------------------------------------------- Buttons Colors */
|
|
||||||
|
|
||||||
.cmsmsLike:hover,
|
|
||||||
.resp_navigation.active,
|
|
||||||
.widget_custom_popular_portfolio_entries .cmsms_content_slider_parent ul.cmsms_slides_nav li.active a,
|
|
||||||
.widget_custom_popular_portfolio_entries .cmsms_content_slider_parent ul.cmsms_slides_nav li:hover a,
|
|
||||||
.widget_custom_testimonials_entries .cmsms_content_slider_parent ul.cmsms_slides_nav li.active a,
|
|
||||||
.widget_custom_testimonials_entries .cmsms_content_slider_parent ul.cmsms_slides_nav li:hover a,
|
|
||||||
.tp-bullets.simplebullets .bullet:hover,
|
|
||||||
.tp-bullets.simplebullets .bullet.selected,
|
|
||||||
#slide_top {background-color:#ff9108;}
|
|
||||||
|
|
||||||
/* ---------------------------------------------- Headings Colors */
|
|
||||||
|
|
||||||
h1,
|
|
||||||
.post .entry-title a,
|
|
||||||
.post.format-link .entry-title a:hover {color:#565656;}
|
|
||||||
|
|
||||||
h2 {color:#565656;}
|
|
||||||
|
|
||||||
h3 {color:#565656;}
|
|
||||||
|
|
||||||
h4 {color:#565656;}
|
|
||||||
|
|
||||||
h5 {color:#565656;}
|
|
||||||
|
|
||||||
h6,
|
|
||||||
.portfolio_inner .entry-title a {color:#565656;}
|
|
||||||
|
|
||||||
.color_2,
|
|
||||||
q:before,
|
|
||||||
blockquote:before,
|
|
||||||
q,
|
|
||||||
blockquote,
|
|
||||||
.tog,
|
|
||||||
.tog:hover,
|
|
||||||
.tabs li a,
|
|
||||||
.tour li a {color:#565656;}
|
|
||||||
|
|
||||||
/* ---------------------------------------------- Links Colors */
|
|
||||||
|
|
||||||
a,
|
|
||||||
.color_3,
|
|
||||||
.post footer .published,
|
|
||||||
.post .entry-title a:hover,
|
|
||||||
.post.format-link .entry-title a,
|
|
||||||
.cmsmsLike:hover span,
|
|
||||||
.portfolio_inner .entry-title a:hover {
|
|
||||||
// color:#ff9108;
|
|
||||||
// color: #658590;
|
|
||||||
color: #4aabcc;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul.cmsms_slides_nav li.active a,
|
|
||||||
ul.cmsms_slides_nav li:hover a,
|
|
||||||
span.dropcap2,
|
|
||||||
.tog:hover .cmsms_plus,
|
|
||||||
.tog.current .cmsms_plus,
|
|
||||||
.tour li.current .cmsms_plus,
|
|
||||||
.tour li a:hover .cmsms_plus,
|
|
||||||
.cmsms_comments,
|
|
||||||
.wp-pagenavi > span.current,
|
|
||||||
.wp-pagenavi a:hover,
|
|
||||||
.portfolio_inner .hover_effect {
|
|
||||||
// background-color:#ff9108;
|
|
||||||
background-color: #658590;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tabs li a.current {
|
|
||||||
// background:#ff9108;
|
|
||||||
background: #658590;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="text"]:focus,
|
|
||||||
textarea:focus,
|
|
||||||
select:focus,
|
|
||||||
#bottom input:focus,
|
|
||||||
#bottom textarea:focus,
|
|
||||||
#bottom select:focus,
|
|
||||||
.tabs > li a.current,
|
|
||||||
.wp-pagenavi > span.current,
|
|
||||||
.wp-pagenavi a:hover {
|
|
||||||
// border-color:#ff9108;
|
|
||||||
background-color: #658590;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ---------------------------------------------- Slider colors */
|
|
||||||
|
|
||||||
a.cmsms_close_video:hover {background-color:#ff9108;}
|
|
||||||
|
|
||||||
.slideCaptionInnerBlock {
|
|
||||||
background:#000000;
|
|
||||||
background:rgba(0, 0, 0, .7);
|
|
||||||
}
|
|
||||||
|
|
||||||
.responsiveSlider,
|
|
||||||
.responsiveSlider h1,
|
|
||||||
.responsiveSlider h2,
|
|
||||||
.responsiveSlider h3,
|
|
||||||
.responsiveSlider h4,
|
|
||||||
.responsiveSlider h5,
|
|
||||||
.responsiveSlider h6 {color:#ffffff;}
|
|
||||||
|
|
||||||
.responsiveSlider h1 {
|
|
||||||
font-size:30px;
|
|
||||||
line-height:36px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ---------------------------------------------- Revolution Slider */
|
|
||||||
|
|
||||||
.fullwidthbanner h1 {
|
|
||||||
font:36px/36px "Open Sans", Helvetica, "Nimbus Sans L", sans-serif;
|
|
||||||
color:#3a3a3a;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fullwidthbanner h2 {
|
|
||||||
font:800 36px/36px "Open Sans", Helvetica, "Nimbus Sans L", sans-serif;
|
|
||||||
color:#3a3a3a;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fullwidthbanner h3 {font:800 72px/72px "Open Sans", Helvetica, "Nimbus Sans L", sans-serif;}
|
|
||||||
|
|
||||||
/* ---------------------------------------------- Bottom and Footer Colors */
|
|
||||||
|
|
||||||
#bottom,
|
|
||||||
#bottom a:hover {color:#817e75;}
|
|
||||||
|
|
||||||
#bottom h1 {color:#ffffff;}
|
|
||||||
|
|
||||||
#bottom h2 {color:#ffffff;}
|
|
||||||
|
|
||||||
#bottom h3 {color:#ffffff;}
|
|
||||||
|
|
||||||
#bottom h4 {color:#ffffff;}
|
|
||||||
|
|
||||||
#bottom h5 {color:#ffffff;}
|
|
||||||
|
|
||||||
#bottom h6 {color:#ffffff;}
|
|
||||||
|
|
||||||
#bottom .color_2 {color:#ffffff;}
|
|
||||||
|
|
||||||
#footer,
|
|
||||||
#footer a {color:#808080;}
|
|
||||||
|
|
||||||
|
|
||||||
/* ---------- Small Monitor (Note: Design for a width less than 1024px) ---------- */
|
|
||||||
|
|
||||||
@media only screen and (max-width: 1023px) {
|
|
||||||
|
|
||||||
.responsiveSlider h1 {
|
|
||||||
font-size:1.5em;
|
|
||||||
line-height:1.2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.portfolio_inner .hover_effect .post_category a {font-size:.9em;}
|
|
||||||
|
|
||||||
.portfolio_inner .hover_effect .entry-title {font-size:1.1em;}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ---------- Small Tablet & Mobile (Note: Design for a width less than 541px) ---------- */
|
|
||||||
|
|
||||||
@media only screen and (max-width: 540px) {
|
|
||||||
|
|
||||||
.responsibe_block_inner {border-color:#ff9108;}
|
|
||||||
|
|
||||||
#navigation > li > ul {background:none;}
|
|
||||||
|
|
||||||
#navigation > li > a,
|
|
||||||
#navigation ul li a{
|
|
||||||
background-color:#ffffff;
|
|
||||||
color:#3c3c3c;
|
|
||||||
font-weight:normal;
|
|
||||||
font-style:italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
#navigation ul li.current_page_item a,
|
|
||||||
#navigation ul li a:hover,
|
|
||||||
#navigation ul li:hover > a {
|
|
||||||
background-color:#fcfcfc;
|
|
||||||
color:#3c3c3c;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
|
@ -1,150 +0,0 @@
|
||||||
body {
|
|
||||||
font-family: "Helvetica Neue","Helvetica","Arial",sans-serif;
|
|
||||||
font-weight: 300;
|
|
||||||
font-size: 1em;
|
|
||||||
line-height: 1.9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.talk {
|
|
||||||
.caption {
|
|
||||||
margin: 0 12px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-box {
|
|
||||||
padding-top: 12px;
|
|
||||||
input#google-search-box {
|
|
||||||
width: 98%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.wufoo {
|
|
||||||
ul {
|
|
||||||
list-style-image: none;
|
|
||||||
list-style-type: none;
|
|
||||||
|
|
||||||
li.hide {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
img.gravatar {
|
|
||||||
margin-right: 12px;
|
|
||||||
margin-bottom: 12px;
|
|
||||||
float: left;
|
|
||||||
padding: 2px;
|
|
||||||
border: 1px solid #e0e0e0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fixed {
|
|
||||||
// position: fixed;
|
|
||||||
}
|
|
||||||
|
|
||||||
#influad {
|
|
||||||
width: 130px;
|
|
||||||
|
|
||||||
margin-top: 16px;
|
|
||||||
|
|
||||||
.influads_text {
|
|
||||||
margin-top: 6px;
|
|
||||||
|
|
||||||
color: #696969;
|
|
||||||
text-align: justify;
|
|
||||||
|
|
||||||
font-size: 11px;
|
|
||||||
line-height: 15px;
|
|
||||||
a {
|
|
||||||
color: #696969;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.influads_powered_div {
|
|
||||||
font-size: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
ul.tla {
|
|
||||||
font-size: 9px;
|
|
||||||
color: #999;
|
|
||||||
|
|
||||||
list-style-image: none;
|
|
||||||
list-style-type: none;
|
|
||||||
|
|
||||||
li {
|
|
||||||
display: inline;
|
|
||||||
margin-right: 8px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
ol.posts {
|
|
||||||
list-style-type: none;
|
|
||||||
list-style-image: none;
|
|
||||||
|
|
||||||
padding: 0;
|
|
||||||
margin: 0 0 24px 0;
|
|
||||||
|
|
||||||
font-family: 'Open Sans';
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 14px;
|
|
||||||
|
|
||||||
li {
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
|
|
||||||
span.date {
|
|
||||||
display: inline-block;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
pre, .plaincode{
|
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
border-radius: none;
|
|
||||||
|
|
||||||
font-size: 12px;
|
|
||||||
overflow: visible;
|
|
||||||
|
|
||||||
padding: 6px 6px;
|
|
||||||
margin: 0 0 11px 0;
|
|
||||||
|
|
||||||
word-break: normal;
|
|
||||||
word-wrap: normal;
|
|
||||||
|
|
||||||
white-space: pre;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.plaincode {
|
|
||||||
background-color: #f9f9f9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.code {
|
|
||||||
overflow: auto;
|
|
||||||
margin: 0 0 11px 0;
|
|
||||||
|
|
||||||
table {
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
.linenodiv {
|
|
||||||
background-color: #f4f4f4;
|
|
||||||
color: #AAA;
|
|
||||||
padding: 0 0.5em;
|
|
||||||
border-right: 1px solid #DDD;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
td.code {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.highlight {
|
|
||||||
background-color: #f9f9f9;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
534
content/css/font-awesome/font-awesome.scss
vendored
Normal file
|
@ -0,0 +1,534 @@
|
||||||
|
/*!
|
||||||
|
* Font Awesome 3.0.2
|
||||||
|
* the iconic font designed for use with Twitter Bootstrap
|
||||||
|
* -------------------------------------------------------
|
||||||
|
* The full suite of pictographic icons, examples, and documentation
|
||||||
|
* can be found at: http://fortawesome.github.com/Font-Awesome/
|
||||||
|
*
|
||||||
|
* License
|
||||||
|
* -------------------------------------------------------
|
||||||
|
* - The Font Awesome font is licensed under the SIL Open Font License - http://scripts.sil.org/OFL
|
||||||
|
* - Font Awesome CSS, LESS, and SASS files are licensed under the MIT License -
|
||||||
|
* http://opensource.org/licenses/mit-license.html
|
||||||
|
* - The Font Awesome pictograms are licensed under the CC BY 3.0 License - http://creativecommons.org/licenses/by/3.0/
|
||||||
|
* - Attribution is no longer required in Font Awesome 3.0, but much appreciated:
|
||||||
|
* "Font Awesome by Dave Gandy - http://fortawesome.github.com/Font-Awesome"
|
||||||
|
*
|
||||||
|
* Contact
|
||||||
|
* -------------------------------------------------------
|
||||||
|
* Email: dave@davegandy.com
|
||||||
|
* Twitter: http://twitter.com/fortaweso_me
|
||||||
|
* Work: Lead Product Designer @ http://kyruus.com
|
||||||
|
*/
|
||||||
|
|
||||||
|
$fontAwesomePath: "../font" !default;
|
||||||
|
$borderColor: #eee;
|
||||||
|
$iconMuted: #eee;
|
||||||
|
@mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius; }
|
||||||
|
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'FontAwesome';
|
||||||
|
src: url('#{$fontAwesomePath}/fontawesome-webfont.eot?v=3.0.1');
|
||||||
|
src: url('#{$fontAwesomePath}/fontawesome-webfont.eot?#iefix&v=3.0.1') format("embedded-opentype"),
|
||||||
|
url('#{$fontAwesomePath}/fontawesome-webfont.woff?v=3.0.1') format("woff"),
|
||||||
|
url('#{$fontAwesomePath}/fontawesome-webfont.ttf?v=3.0.1') format("truetype");
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Font Awesome styles
|
||||||
|
------------------------------------------------------- */
|
||||||
|
[class^="icon-"],
|
||||||
|
[class*=" icon-"] {
|
||||||
|
font-family: FontAwesome;
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
text-decoration: inherit;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
|
||||||
|
/* sprites.less reset */
|
||||||
|
display: inline;
|
||||||
|
width: auto;
|
||||||
|
height: auto;
|
||||||
|
line-height: normal;
|
||||||
|
vertical-align: baseline;
|
||||||
|
background-image: none;
|
||||||
|
background-position: 0% 0%;
|
||||||
|
background-repeat: repeat;
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* more sprites.less reset */
|
||||||
|
.icon-white,
|
||||||
|
.nav-pills > .active > a > [class^="icon-"],
|
||||||
|
.nav-pills > .active > a > [class*=" icon-"],
|
||||||
|
.nav-list > .active > a > [class^="icon-"],
|
||||||
|
.nav-list > .active > a > [class*=" icon-"],
|
||||||
|
.navbar-inverse .nav > .active > a > [class^="icon-"],
|
||||||
|
.navbar-inverse .nav > .active > a > [class*=" icon-"],
|
||||||
|
.dropdown-menu > li > a:hover > [class^="icon-"],
|
||||||
|
.dropdown-menu > li > a:hover > [class*=" icon-"],
|
||||||
|
.dropdown-menu > .active > a > [class^="icon-"],
|
||||||
|
.dropdown-menu > .active > a > [class*=" icon-"],
|
||||||
|
.dropdown-submenu:hover > a > [class^="icon-"],
|
||||||
|
.dropdown-submenu:hover > a > [class*=" icon-"] {
|
||||||
|
background-image: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
[class^="icon-"]:before,
|
||||||
|
[class*=" icon-"]:before {
|
||||||
|
text-decoration: inherit;
|
||||||
|
display: inline-block;
|
||||||
|
speak: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* makes sure icons active on rollover in links */
|
||||||
|
a {
|
||||||
|
[class^="icon-"],
|
||||||
|
[class*=" icon-"] {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* makes the font 33% larger relative to the icon container */
|
||||||
|
.icon-large:before {
|
||||||
|
vertical-align: -10%;
|
||||||
|
font-size: 1.3333333333333333em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn, .nav {
|
||||||
|
[class^="icon-"],
|
||||||
|
[class*=" icon-"] {
|
||||||
|
display: inline;
|
||||||
|
/* keeps button heights with and without icons the same */
|
||||||
|
&.icon-large { line-height: .9em; }
|
||||||
|
&.icon-spin { display: inline-block; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-tabs, .nav-pills {
|
||||||
|
[class^="icon-"],
|
||||||
|
[class*=" icon-"] {
|
||||||
|
/* keeps button heights with and without icons the same */
|
||||||
|
&, &.icon-large { line-height: .9em; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
li, .nav li {
|
||||||
|
[class^="icon-"],
|
||||||
|
[class*=" icon-"] {
|
||||||
|
display: inline-block;
|
||||||
|
width: 1.25em;
|
||||||
|
text-align: center;
|
||||||
|
&.icon-large {
|
||||||
|
/* increased font size for icon-large */
|
||||||
|
width: 1.5625em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.icons {
|
||||||
|
list-style-type: none;
|
||||||
|
text-indent: -.75em;
|
||||||
|
|
||||||
|
li {
|
||||||
|
[class^="icon-"],
|
||||||
|
[class*=" icon-"] {
|
||||||
|
width: .75em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-muted {
|
||||||
|
color: $iconMuted;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Icon Borders
|
||||||
|
// -------------------------
|
||||||
|
|
||||||
|
.icon-border {
|
||||||
|
border: solid 1px $borderColor;
|
||||||
|
padding: .2em .25em .15em;
|
||||||
|
@include border-radius(3px);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Icon Sizes
|
||||||
|
// -------------------------
|
||||||
|
|
||||||
|
.icon-2x {
|
||||||
|
font-size: 2em;
|
||||||
|
&.icon-border {
|
||||||
|
border-width: 2px;
|
||||||
|
@include border-radius(4px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.icon-3x {
|
||||||
|
font-size: 3em;
|
||||||
|
&.icon-border {
|
||||||
|
border-width: 3px;
|
||||||
|
@include border-radius(5px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.icon-4x {
|
||||||
|
font-size: 4em;
|
||||||
|
&.icon-border {
|
||||||
|
border-width: 4px;
|
||||||
|
@include border-radius(6px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Floats
|
||||||
|
// -------------------------
|
||||||
|
|
||||||
|
// Quick floats
|
||||||
|
.pull-right { float: right; }
|
||||||
|
.pull-left { float: left; }
|
||||||
|
|
||||||
|
[class^="icon-"],
|
||||||
|
[class*=" icon-"] {
|
||||||
|
&.pull-left {
|
||||||
|
margin-right: .3em;
|
||||||
|
}
|
||||||
|
&.pull-right {
|
||||||
|
margin-left: .3em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
[class^="icon-"],
|
||||||
|
[class*=" icon-"] {
|
||||||
|
&.pull-left, &.pull-right {
|
||||||
|
&.icon-2x { margin-top: .18em; }
|
||||||
|
}
|
||||||
|
&.icon-spin.icon-large { line-height: .8em; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn.btn-small {
|
||||||
|
[class^="icon-"],
|
||||||
|
[class*=" icon-"] {
|
||||||
|
&.pull-left, &.pull-right {
|
||||||
|
&.icon-2x { margin-top: .25em; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn.btn-large {
|
||||||
|
[class^="icon-"],
|
||||||
|
[class*=" icon-"] {
|
||||||
|
margin-top: 0; // overrides bootstrap default
|
||||||
|
&.pull-left, &.pull-right {
|
||||||
|
&.icon-2x { margin-top: .05em; }
|
||||||
|
}
|
||||||
|
&.pull-left.icon-2x { margin-right: .2em; }
|
||||||
|
&.pull-right.icon-2x { margin-left: .2em; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.icon-spin {
|
||||||
|
display: inline-block;
|
||||||
|
-moz-animation: spin 2s infinite linear;
|
||||||
|
-o-animation: spin 2s infinite linear;
|
||||||
|
-webkit-animation: spin 2s infinite linear;
|
||||||
|
animation: spin 2s infinite linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-moz-keyframes spin {
|
||||||
|
0% { -moz-transform: rotate(0deg); }
|
||||||
|
100% { -moz-transform: rotate(359deg); }
|
||||||
|
}
|
||||||
|
@-webkit-keyframes spin {
|
||||||
|
0% { -webkit-transform: rotate(0deg); }
|
||||||
|
100% { -webkit-transform: rotate(359deg); }
|
||||||
|
}
|
||||||
|
@-o-keyframes spin {
|
||||||
|
0% { -o-transform: rotate(0deg); }
|
||||||
|
100% { -o-transform: rotate(359deg); }
|
||||||
|
}
|
||||||
|
@-ms-keyframes spin {
|
||||||
|
0% { -ms-transform: rotate(0deg); }
|
||||||
|
100% { -ms-transform: rotate(359deg); }
|
||||||
|
}
|
||||||
|
@keyframes spin {
|
||||||
|
0% { transform: rotate(0deg); }
|
||||||
|
100% { transform: rotate(359deg); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@-moz-document url-prefix() {
|
||||||
|
.icon-spin { height: .9em; }
|
||||||
|
.btn .icon-spin { height: auto; }
|
||||||
|
.icon-spin.icon-large { height: 1.25em; }
|
||||||
|
.btn .icon-spin.icon-large { height: .75em; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
|
||||||
|
readers do not read off random characters that represent icons */
|
||||||
|
.icon-glass:before { content: "\f000"; }
|
||||||
|
.icon-music:before { content: "\f001"; }
|
||||||
|
.icon-search:before { content: "\f002"; }
|
||||||
|
.icon-envelope:before { content: "\f003"; }
|
||||||
|
.icon-heart:before { content: "\f004"; }
|
||||||
|
.icon-star:before { content: "\f005"; }
|
||||||
|
.icon-star-empty:before { content: "\f006"; }
|
||||||
|
.icon-user:before { content: "\f007"; }
|
||||||
|
.icon-film:before { content: "\f008"; }
|
||||||
|
.icon-th-large:before { content: "\f009"; }
|
||||||
|
.icon-th:before { content: "\f00a"; }
|
||||||
|
.icon-th-list:before { content: "\f00b"; }
|
||||||
|
.icon-ok:before { content: "\f00c"; }
|
||||||
|
.icon-remove:before { content: "\f00d"; }
|
||||||
|
.icon-zoom-in:before { content: "\f00e"; }
|
||||||
|
|
||||||
|
.icon-zoom-out:before { content: "\f010"; }
|
||||||
|
.icon-off:before { content: "\f011"; }
|
||||||
|
.icon-signal:before { content: "\f012"; }
|
||||||
|
.icon-cog:before { content: "\f013"; }
|
||||||
|
.icon-trash:before { content: "\f014"; }
|
||||||
|
.icon-home:before { content: "\f015"; }
|
||||||
|
.icon-file:before { content: "\f016"; }
|
||||||
|
.icon-time:before { content: "\f017"; }
|
||||||
|
.icon-road:before { content: "\f018"; }
|
||||||
|
.icon-download-alt:before { content: "\f019"; }
|
||||||
|
.icon-download:before { content: "\f01a"; }
|
||||||
|
.icon-upload:before { content: "\f01b"; }
|
||||||
|
.icon-inbox:before { content: "\f01c"; }
|
||||||
|
.icon-play-circle:before { content: "\f01d"; }
|
||||||
|
.icon-repeat:before { content: "\f01e"; }
|
||||||
|
|
||||||
|
/* \f020 doesn't work in Safari. all shifted one down */
|
||||||
|
.icon-refresh:before { content: "\f021"; }
|
||||||
|
.icon-list-alt:before { content: "\f022"; }
|
||||||
|
.icon-lock:before { content: "\f023"; }
|
||||||
|
.icon-flag:before { content: "\f024"; }
|
||||||
|
.icon-headphones:before { content: "\f025"; }
|
||||||
|
.icon-volume-off:before { content: "\f026"; }
|
||||||
|
.icon-volume-down:before { content: "\f027"; }
|
||||||
|
.icon-volume-up:before { content: "\f028"; }
|
||||||
|
.icon-qrcode:before { content: "\f029"; }
|
||||||
|
.icon-barcode:before { content: "\f02a"; }
|
||||||
|
.icon-tag:before { content: "\f02b"; }
|
||||||
|
.icon-tags:before { content: "\f02c"; }
|
||||||
|
.icon-book:before { content: "\f02d"; }
|
||||||
|
.icon-bookmark:before { content: "\f02e"; }
|
||||||
|
.icon-print:before { content: "\f02f"; }
|
||||||
|
|
||||||
|
.icon-camera:before { content: "\f030"; }
|
||||||
|
.icon-font:before { content: "\f031"; }
|
||||||
|
.icon-bold:before { content: "\f032"; }
|
||||||
|
.icon-italic:before { content: "\f033"; }
|
||||||
|
.icon-text-height:before { content: "\f034"; }
|
||||||
|
.icon-text-width:before { content: "\f035"; }
|
||||||
|
.icon-align-left:before { content: "\f036"; }
|
||||||
|
.icon-align-center:before { content: "\f037"; }
|
||||||
|
.icon-align-right:before { content: "\f038"; }
|
||||||
|
.icon-align-justify:before { content: "\f039"; }
|
||||||
|
.icon-list:before { content: "\f03a"; }
|
||||||
|
.icon-indent-left:before { content: "\f03b"; }
|
||||||
|
.icon-indent-right:before { content: "\f03c"; }
|
||||||
|
.icon-facetime-video:before { content: "\f03d"; }
|
||||||
|
.icon-picture:before { content: "\f03e"; }
|
||||||
|
|
||||||
|
.icon-pencil:before { content: "\f040"; }
|
||||||
|
.icon-map-marker:before { content: "\f041"; }
|
||||||
|
.icon-adjust:before { content: "\f042"; }
|
||||||
|
.icon-tint:before { content: "\f043"; }
|
||||||
|
.icon-edit:before { content: "\f044"; }
|
||||||
|
.icon-share:before { content: "\f045"; }
|
||||||
|
.icon-check:before { content: "\f046"; }
|
||||||
|
.icon-move:before { content: "\f047"; }
|
||||||
|
.icon-step-backward:before { content: "\f048"; }
|
||||||
|
.icon-fast-backward:before { content: "\f049"; }
|
||||||
|
.icon-backward:before { content: "\f04a"; }
|
||||||
|
.icon-play:before { content: "\f04b"; }
|
||||||
|
.icon-pause:before { content: "\f04c"; }
|
||||||
|
.icon-stop:before { content: "\f04d"; }
|
||||||
|
.icon-forward:before { content: "\f04e"; }
|
||||||
|
|
||||||
|
.icon-fast-forward:before { content: "\f050"; }
|
||||||
|
.icon-step-forward:before { content: "\f051"; }
|
||||||
|
.icon-eject:before { content: "\f052"; }
|
||||||
|
.icon-chevron-left:before { content: "\f053"; }
|
||||||
|
.icon-chevron-right:before { content: "\f054"; }
|
||||||
|
.icon-plus-sign:before { content: "\f055"; }
|
||||||
|
.icon-minus-sign:before { content: "\f056"; }
|
||||||
|
.icon-remove-sign:before { content: "\f057"; }
|
||||||
|
.icon-ok-sign:before { content: "\f058"; }
|
||||||
|
.icon-question-sign:before { content: "\f059"; }
|
||||||
|
.icon-info-sign:before { content: "\f05a"; }
|
||||||
|
.icon-screenshot:before { content: "\f05b"; }
|
||||||
|
.icon-remove-circle:before { content: "\f05c"; }
|
||||||
|
.icon-ok-circle:before { content: "\f05d"; }
|
||||||
|
.icon-ban-circle:before { content: "\f05e"; }
|
||||||
|
|
||||||
|
.icon-arrow-left:before { content: "\f060"; }
|
||||||
|
.icon-arrow-right:before { content: "\f061"; }
|
||||||
|
.icon-arrow-up:before { content: "\f062"; }
|
||||||
|
.icon-arrow-down:before { content: "\f063"; }
|
||||||
|
.icon-share-alt:before { content: "\f064"; }
|
||||||
|
.icon-resize-full:before { content: "\f065"; }
|
||||||
|
.icon-resize-small:before { content: "\f066"; }
|
||||||
|
.icon-plus:before { content: "\f067"; }
|
||||||
|
.icon-minus:before { content: "\f068"; }
|
||||||
|
.icon-asterisk:before { content: "\f069"; }
|
||||||
|
.icon-exclamation-sign:before { content: "\f06a"; }
|
||||||
|
.icon-gift:before { content: "\f06b"; }
|
||||||
|
.icon-leaf:before { content: "\f06c"; }
|
||||||
|
.icon-fire:before { content: "\f06d"; }
|
||||||
|
.icon-eye-open:before { content: "\f06e"; }
|
||||||
|
|
||||||
|
.icon-eye-close:before { content: "\f070"; }
|
||||||
|
.icon-warning-sign:before { content: "\f071"; }
|
||||||
|
.icon-plane:before { content: "\f072"; }
|
||||||
|
.icon-calendar:before { content: "\f073"; }
|
||||||
|
.icon-random:before { content: "\f074"; }
|
||||||
|
.icon-comment:before { content: "\f075"; }
|
||||||
|
.icon-magnet:before { content: "\f076"; }
|
||||||
|
.icon-chevron-up:before { content: "\f077"; }
|
||||||
|
.icon-chevron-down:before { content: "\f078"; }
|
||||||
|
.icon-retweet:before { content: "\f079"; }
|
||||||
|
.icon-shopping-cart:before { content: "\f07a"; }
|
||||||
|
.icon-folder-close:before { content: "\f07b"; }
|
||||||
|
.icon-folder-open:before { content: "\f07c"; }
|
||||||
|
.icon-resize-vertical:before { content: "\f07d"; }
|
||||||
|
.icon-resize-horizontal:before { content: "\f07e"; }
|
||||||
|
|
||||||
|
.icon-bar-chart:before { content: "\f080"; }
|
||||||
|
.icon-twitter-sign:before { content: "\f081"; }
|
||||||
|
.icon-facebook-sign:before { content: "\f082"; }
|
||||||
|
.icon-camera-retro:before { content: "\f083"; }
|
||||||
|
.icon-key:before { content: "\f084"; }
|
||||||
|
.icon-cogs:before { content: "\f085"; }
|
||||||
|
.icon-comments:before { content: "\f086"; }
|
||||||
|
.icon-thumbs-up:before { content: "\f087"; }
|
||||||
|
.icon-thumbs-down:before { content: "\f088"; }
|
||||||
|
.icon-star-half:before { content: "\f089"; }
|
||||||
|
.icon-heart-empty:before { content: "\f08a"; }
|
||||||
|
.icon-signout:before { content: "\f08b"; }
|
||||||
|
.icon-linkedin-sign:before { content: "\f08c"; }
|
||||||
|
.icon-pushpin:before { content: "\f08d"; }
|
||||||
|
.icon-external-link:before { content: "\f08e"; }
|
||||||
|
|
||||||
|
.icon-signin:before { content: "\f090"; }
|
||||||
|
.icon-trophy:before { content: "\f091"; }
|
||||||
|
.icon-github-sign:before { content: "\f092"; }
|
||||||
|
.icon-upload-alt:before { content: "\f093"; }
|
||||||
|
.icon-lemon:before { content: "\f094"; }
|
||||||
|
.icon-phone:before { content: "\f095"; }
|
||||||
|
.icon-check-empty:before { content: "\f096"; }
|
||||||
|
.icon-bookmark-empty:before { content: "\f097"; }
|
||||||
|
.icon-phone-sign:before { content: "\f098"; }
|
||||||
|
.icon-twitter:before { content: "\f099"; }
|
||||||
|
.icon-facebook:before { content: "\f09a"; }
|
||||||
|
.icon-github:before { content: "\f09b"; }
|
||||||
|
.icon-unlock:before { content: "\f09c"; }
|
||||||
|
.icon-credit-card:before { content: "\f09d"; }
|
||||||
|
.icon-rss:before { content: "\f09e"; }
|
||||||
|
|
||||||
|
.icon-hdd:before { content: "\f0a0"; }
|
||||||
|
.icon-bullhorn:before { content: "\f0a1"; }
|
||||||
|
.icon-bell:before { content: "\f0a2"; }
|
||||||
|
.icon-certificate:before { content: "\f0a3"; }
|
||||||
|
.icon-hand-right:before { content: "\f0a4"; }
|
||||||
|
.icon-hand-left:before { content: "\f0a5"; }
|
||||||
|
.icon-hand-up:before { content: "\f0a6"; }
|
||||||
|
.icon-hand-down:before { content: "\f0a7"; }
|
||||||
|
.icon-circle-arrow-left:before { content: "\f0a8"; }
|
||||||
|
.icon-circle-arrow-right:before { content: "\f0a9"; }
|
||||||
|
.icon-circle-arrow-up:before { content: "\f0aa"; }
|
||||||
|
.icon-circle-arrow-down:before { content: "\f0ab"; }
|
||||||
|
.icon-globe:before { content: "\f0ac"; }
|
||||||
|
.icon-wrench:before { content: "\f0ad"; }
|
||||||
|
.icon-tasks:before { content: "\f0ae"; }
|
||||||
|
|
||||||
|
.icon-filter:before { content: "\f0b0"; }
|
||||||
|
.icon-briefcase:before { content: "\f0b1"; }
|
||||||
|
.icon-fullscreen:before { content: "\f0b2"; }
|
||||||
|
|
||||||
|
.icon-group:before { content: "\f0c0"; }
|
||||||
|
.icon-link:before { content: "\f0c1"; }
|
||||||
|
.icon-cloud:before { content: "\f0c2"; }
|
||||||
|
.icon-beaker:before { content: "\f0c3"; }
|
||||||
|
.icon-cut:before { content: "\f0c4"; }
|
||||||
|
.icon-copy:before { content: "\f0c5"; }
|
||||||
|
.icon-paper-clip:before { content: "\f0c6"; }
|
||||||
|
.icon-save:before { content: "\f0c7"; }
|
||||||
|
.icon-sign-blank:before { content: "\f0c8"; }
|
||||||
|
.icon-reorder:before { content: "\f0c9"; }
|
||||||
|
.icon-list-ul:before { content: "\f0ca"; }
|
||||||
|
.icon-list-ol:before { content: "\f0cb"; }
|
||||||
|
.icon-strikethrough:before { content: "\f0cc"; }
|
||||||
|
.icon-underline:before { content: "\f0cd"; }
|
||||||
|
.icon-table:before { content: "\f0ce"; }
|
||||||
|
|
||||||
|
.icon-magic:before { content: "\f0d0"; }
|
||||||
|
.icon-truck:before { content: "\f0d1"; }
|
||||||
|
.icon-pinterest:before { content: "\f0d2"; }
|
||||||
|
.icon-pinterest-sign:before { content: "\f0d3"; }
|
||||||
|
.icon-google-plus-sign:before { content: "\f0d4"; }
|
||||||
|
.icon-google-plus:before { content: "\f0d5"; }
|
||||||
|
.icon-money:before { content: "\f0d6"; }
|
||||||
|
.icon-caret-down:before { content: "\f0d7"; }
|
||||||
|
.icon-caret-up:before { content: "\f0d8"; }
|
||||||
|
.icon-caret-left:before { content: "\f0d9"; }
|
||||||
|
.icon-caret-right:before { content: "\f0da"; }
|
||||||
|
.icon-columns:before { content: "\f0db"; }
|
||||||
|
.icon-sort:before { content: "\f0dc"; }
|
||||||
|
.icon-sort-down:before { content: "\f0dd"; }
|
||||||
|
.icon-sort-up:before { content: "\f0de"; }
|
||||||
|
|
||||||
|
.icon-envelope-alt:before { content: "\f0e0"; }
|
||||||
|
.icon-linkedin:before { content: "\f0e1"; }
|
||||||
|
.icon-undo:before { content: "\f0e2"; }
|
||||||
|
.icon-legal:before { content: "\f0e3"; }
|
||||||
|
.icon-dashboard:before { content: "\f0e4"; }
|
||||||
|
.icon-comment-alt:before { content: "\f0e5"; }
|
||||||
|
.icon-comments-alt:before { content: "\f0e6"; }
|
||||||
|
.icon-bolt:before { content: "\f0e7"; }
|
||||||
|
.icon-sitemap:before { content: "\f0e8"; }
|
||||||
|
.icon-umbrella:before { content: "\f0e9"; }
|
||||||
|
.icon-paste:before { content: "\f0ea"; }
|
||||||
|
.icon-lightbulb:before { content: "\f0eb"; }
|
||||||
|
.icon-exchange:before { content: "\f0ec"; }
|
||||||
|
.icon-cloud-download:before { content: "\f0ed"; }
|
||||||
|
.icon-cloud-upload:before { content: "\f0ee"; }
|
||||||
|
|
||||||
|
.icon-user-md:before { content: "\f0f0"; }
|
||||||
|
.icon-stethoscope:before { content: "\f0f1"; }
|
||||||
|
.icon-suitcase:before { content: "\f0f2"; }
|
||||||
|
.icon-bell-alt:before { content: "\f0f3"; }
|
||||||
|
.icon-coffee:before { content: "\f0f4"; }
|
||||||
|
.icon-food:before { content: "\f0f5"; }
|
||||||
|
.icon-file-alt:before { content: "\f0f6"; }
|
||||||
|
.icon-building:before { content: "\f0f7"; }
|
||||||
|
.icon-hospital:before { content: "\f0f8"; }
|
||||||
|
.icon-ambulance:before { content: "\f0f9"; }
|
||||||
|
.icon-medkit:before { content: "\f0fa"; }
|
||||||
|
.icon-fighter-jet:before { content: "\f0fb"; }
|
||||||
|
.icon-beer:before { content: "\f0fc"; }
|
||||||
|
.icon-h-sign:before { content: "\f0fd"; }
|
||||||
|
.icon-plus-sign-alt:before { content: "\f0fe"; }
|
||||||
|
|
||||||
|
.icon-double-angle-left:before { content: "\f100"; }
|
||||||
|
.icon-double-angle-right:before { content: "\f101"; }
|
||||||
|
.icon-double-angle-up:before { content: "\f102"; }
|
||||||
|
.icon-double-angle-down:before { content: "\f103"; }
|
||||||
|
.icon-angle-left:before { content: "\f104"; }
|
||||||
|
.icon-angle-right:before { content: "\f105"; }
|
||||||
|
.icon-angle-up:before { content: "\f106"; }
|
||||||
|
.icon-angle-down:before { content: "\f107"; }
|
||||||
|
.icon-desktop:before { content: "\f108"; }
|
||||||
|
.icon-laptop:before { content: "\f109"; }
|
||||||
|
.icon-tablet:before { content: "\f10a"; }
|
||||||
|
.icon-mobile-phone:before { content: "\f10b"; }
|
||||||
|
.icon-circle-blank:before { content: "\f10c"; }
|
||||||
|
.icon-quote-left:before { content: "\f10d"; }
|
||||||
|
.icon-quote-right:before { content: "\f10e"; }
|
||||||
|
|
||||||
|
.icon-spinner:before { content: "\f110"; }
|
||||||
|
.icon-circle:before { content: "\f111"; }
|
||||||
|
.icon-reply:before { content: "\f112"; }
|
||||||
|
.icon-github-alt:before { content: "\f113"; }
|
||||||
|
.icon-folder-close-alt:before { content: "\f114"; }
|
||||||
|
.icon-folder-open-alt:before { content: "\f115"; }
|
|
@ -1,70 +0,0 @@
|
||||||
.p_options_block,
|
|
||||||
.p_filter_container:hover ul.p_filter {filter:alpha(opacity=100);}
|
|
||||||
|
|
||||||
.p_filter_container ul.p_filter,
|
|
||||||
.cmsms-form-builder .check_parent input[type="checkbox"],
|
|
||||||
.cmsms-form-builder .check_parent input[type="radio"],
|
|
||||||
.loading {filter:alpha(opacity=0);}
|
|
||||||
|
|
||||||
.button,
|
|
||||||
.button_medium,
|
|
||||||
.button_large,
|
|
||||||
.dropcap2,
|
|
||||||
.tabs li a.current,
|
|
||||||
.related_posts > ul > li a.current,
|
|
||||||
.tour li a,
|
|
||||||
.comment-reply-link,
|
|
||||||
.cmsmsLike,
|
|
||||||
.cmsms_rounding {
|
|
||||||
position:relative;
|
|
||||||
z-index:0;
|
|
||||||
}
|
|
||||||
|
|
||||||
div.p_filter {height:1000px;}
|
|
||||||
|
|
||||||
.p_filter_container ul.p_filter {top:32px;}
|
|
||||||
|
|
||||||
.button span,
|
|
||||||
.button_medium span,
|
|
||||||
.button_large span {transition:none;}
|
|
||||||
|
|
||||||
.button,
|
|
||||||
.button_medium,
|
|
||||||
.button_large {margin-right:3px;}
|
|
||||||
|
|
||||||
.cmsms-form-builder .check_parent input[type="radio"]+label,
|
|
||||||
.cmsms-form-builder .check_parent input[type="checkbox"]+label {background-image:none;}
|
|
||||||
|
|
||||||
.cmsms-form-builder .check_parent input[type="radio"],
|
|
||||||
.cmsms-form-builder .check_parent input[type="checkbox"] {
|
|
||||||
filter:alpha(opacity=100);
|
|
||||||
margin-top:11px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cmsms_slider_video.hidden {display:none;}
|
|
||||||
|
|
||||||
@media only screen and (min-width: 541px) and (max-width: 767px) {
|
|
||||||
|
|
||||||
.widget_colored.four_box,
|
|
||||||
.one_fourth,
|
|
||||||
.one_fourth.last,
|
|
||||||
.one_fourth+.one_fourth,
|
|
||||||
.one_fourth+.one_fourth+.one_fourth,
|
|
||||||
.one_fourth+.one_fourth+.one_fourth+.one_fourth,
|
|
||||||
.portfolio_container.two_blocks .portfolio,
|
|
||||||
.portfolio_container.four_blocks .portfolio:nth-child(odd),
|
|
||||||
.portfolio_container.four_blocks .portfolio:nth-child(even),
|
|
||||||
.format-album.four_blocks .resize .cmsms_media_box:nth-child(odd),
|
|
||||||
.format-album.four_blocks .resize .cmsms_media_box:nth-child(even),
|
|
||||||
.post_type_shortcode.four_blocks article:nth-child(odd),
|
|
||||||
.post_type_shortcode.four_blocks article:nth-child(even),
|
|
||||||
.cms_archive li:nth-child(odd),
|
|
||||||
.cms_archive li:nth-child(even),
|
|
||||||
.sitemap > li > ul > li:nth-child(odd),
|
|
||||||
.sitemap > li > ul > li:nth-child(even) {
|
|
||||||
width:100%;
|
|
||||||
float:none;
|
|
||||||
padding-right:0;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
|
@ -1,21 +0,0 @@
|
||||||
span.dropcap2,
|
|
||||||
.button,
|
|
||||||
.button > span,
|
|
||||||
.button_medium,
|
|
||||||
.button_medium >span,
|
|
||||||
.button_large,
|
|
||||||
.button_large > span,
|
|
||||||
.cmsmsLike,
|
|
||||||
.cmsms_close_video,
|
|
||||||
#slide_top,
|
|
||||||
.cmsms_slides_nav,
|
|
||||||
a.cmsms_prev_slide,
|
|
||||||
a.cmsms_next_slide,
|
|
||||||
.cmsms_rounding,
|
|
||||||
.widget_custom_popular_portfolio_entries figure img,
|
|
||||||
.tp-bullets,
|
|
||||||
.tp-leftarrow,
|
|
||||||
.tp-rightarrow{behavior:url(css/styles/pie.htc);}
|
|
||||||
|
|
||||||
.p_options_block .button,
|
|
||||||
.p_options_block .button span {behavior:none;}
|
|
277
content/css/screen.scss
Normal file
|
@ -0,0 +1,277 @@
|
||||||
|
$turquoise: #1ABC9C;
|
||||||
|
$greensea: #16A085;
|
||||||
|
$emerland: #2ECC71;
|
||||||
|
$nephritis: #27AE60;
|
||||||
|
$peterriver: #3498DB;
|
||||||
|
$belizehole: #2980B9;
|
||||||
|
$amethyst: #9B59B6;
|
||||||
|
$wisteria: #8E44AD;
|
||||||
|
$wetasphalt: #34495E;
|
||||||
|
$midnightblue: #2C3E50;
|
||||||
|
$sunflower: #F1C40F;
|
||||||
|
$orange: #F39C12;
|
||||||
|
$carrot: #E67E22;
|
||||||
|
$pumpkin: #D35400;
|
||||||
|
$alizarin: #E74C3C;
|
||||||
|
$pomegranate: #C0392B;
|
||||||
|
$clouds: #ECF0F1;
|
||||||
|
$silver: #BDC3C7;
|
||||||
|
$concrete: #95A5A6;
|
||||||
|
$asbestos: #7F8C8D;
|
||||||
|
|
||||||
|
$border-radius: 6px;
|
||||||
|
|
||||||
|
@import url(http://fonts.googleapis.com/css?family=Lato:900|PT+Sans:400,700,400italic,700italic);
|
||||||
|
@import "zurb-foundation/normalize.scss";
|
||||||
|
@import "zurb-foundation/foundation.scss";
|
||||||
|
@import "pygments";
|
||||||
|
|
||||||
|
html > body {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
background-color: $clouds;
|
||||||
|
|
||||||
|
font-size: 14px;
|
||||||
|
font-family: "PT Sans", helvetica, arial;
|
||||||
|
}
|
||||||
|
|
||||||
|
a, a:hover, a:visited, a:active {
|
||||||
|
color: $peterriver;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
header#title {
|
||||||
|
background-color: $peterriver;
|
||||||
|
|
||||||
|
margin: 0;
|
||||||
|
padding: 12px;
|
||||||
|
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
margin: 12px 0;
|
||||||
|
|
||||||
|
font-family: "Lato", arial;
|
||||||
|
font-weight: 900;
|
||||||
|
font-size: 52px;
|
||||||
|
letter-spacing: 4px;
|
||||||
|
|
||||||
|
display: inline-block;
|
||||||
|
color: $peterriver;
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 4px 16px;
|
||||||
|
border-radius: $border-radius;
|
||||||
|
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
nav#primary {
|
||||||
|
text-align: center;
|
||||||
|
background-color: $peterriver;
|
||||||
|
|
||||||
|
padding-bottom: 16px;
|
||||||
|
|
||||||
|
ol {
|
||||||
|
list-style-type: none;
|
||||||
|
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
li {
|
||||||
|
display: inline-block;
|
||||||
|
|
||||||
|
font-size: 18px;
|
||||||
|
font-family: "Lato", arial;
|
||||||
|
|
||||||
|
background-color: $belizehole;
|
||||||
|
padding: 4px 8px;
|
||||||
|
margin: 0 3px;
|
||||||
|
|
||||||
|
border-radius: $border-radius;
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #ffffff;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#wrapper {
|
||||||
|
@include grid-row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
width: 128px;
|
||||||
|
height: 128px;
|
||||||
|
border-radius: 64px;
|
||||||
|
background: url(https://secure.gravatar.com/avatar/a9bfdd0cc75c857b669c37548b8bfdf9?s=256) no-repeat;
|
||||||
|
background-size: 128px 128px;
|
||||||
|
|
||||||
|
margin: 32px auto 32px auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.influads {
|
||||||
|
margin: 32px auto 32px auto;
|
||||||
|
font-size: 12px;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
.influads_text {
|
||||||
|
margin-top: 3px;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: $concrete;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.influads_powered_div {
|
||||||
|
a {
|
||||||
|
color: $silver;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#content {
|
||||||
|
margin: 12px;
|
||||||
|
|
||||||
|
article.post, article.page {
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
font-family: 'Lato';
|
||||||
|
}
|
||||||
|
|
||||||
|
.meta {
|
||||||
|
margin-top: -18px;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
ol, ul {
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
section#posts {
|
||||||
|
h2.year {
|
||||||
|
font-size: 24px;
|
||||||
|
text-align: center;
|
||||||
|
border-bottom: 3px solid $silver;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-listing {
|
||||||
|
margin-bottom: 1.75em;
|
||||||
|
|
||||||
|
h3.title {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
.summary {
|
||||||
|
margin-top: -12px;
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-bottom: 0.5em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
section.post {
|
||||||
|
section#main {
|
||||||
|
@include grid-column(8, false, false, 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
section#sidebar {
|
||||||
|
@include grid-column(2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
section.page {
|
||||||
|
@include grid-column(12);
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
@include grid-row;
|
||||||
|
clear: both;
|
||||||
|
|
||||||
|
.copyright {
|
||||||
|
@include grid-column(12);
|
||||||
|
|
||||||
|
text-align: center;
|
||||||
|
font-size: 12px;
|
||||||
|
|
||||||
|
color: $concrete;
|
||||||
|
|
||||||
|
ul.tla {
|
||||||
|
color: $silver;
|
||||||
|
|
||||||
|
list-style-type: none;
|
||||||
|
|
||||||
|
li {
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
pre, .plaincode{
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
border-radius: none;
|
||||||
|
|
||||||
|
font-size: 12px;
|
||||||
|
overflow: visible;
|
||||||
|
|
||||||
|
padding: 6px 6px;
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
word-break: normal;
|
||||||
|
word-wrap: normal;
|
||||||
|
|
||||||
|
white-space: pre;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plaincode {
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.code {
|
||||||
|
overflow: auto;
|
||||||
|
margin: 0 0 11px 0;
|
||||||
|
|
||||||
|
table {
|
||||||
|
width: 100%;
|
||||||
|
background: inherit;
|
||||||
|
|
||||||
|
td, th {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.linenodiv {
|
||||||
|
background-color: #f4f4f4;
|
||||||
|
color: #AAA;
|
||||||
|
padding: 0 0.5em;
|
||||||
|
border-right: 1px solid #DDD;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
td.code {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight {
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
form {
|
||||||
|
ul {
|
||||||
|
list-style-type: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
p.instruct {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,5 +0,0 @@
|
||||||
@import "willbridge";
|
|
||||||
@import "fonts";
|
|
||||||
@import "jquery_prettyphoto";
|
|
||||||
@import "pygments";
|
|
||||||
@import "main";
|
|
46
content/css/zurb-foundation/foundation.scss
vendored
Normal file
|
@ -0,0 +1,46 @@
|
||||||
|
// Make sure the charset is set appropriately
|
||||||
|
@charset "UTF-8";
|
||||||
|
|
||||||
|
// This includes all of the foundation global elements that are needed to work with any of the other files.
|
||||||
|
@import "foundation/foundation-global";
|
||||||
|
|
||||||
|
// Foundation Components
|
||||||
|
@import
|
||||||
|
"foundation/components/global",
|
||||||
|
"foundation/components/grid",
|
||||||
|
"foundation/components/visibility",
|
||||||
|
"foundation/components/block-grid",
|
||||||
|
"foundation/components/type",
|
||||||
|
"foundation/components/buttons",
|
||||||
|
"foundation/components/forms",
|
||||||
|
"foundation/components/custom-forms",
|
||||||
|
"foundation/components/button-groups",
|
||||||
|
"foundation/components/dropdown-buttons",
|
||||||
|
"foundation/components/split-buttons",
|
||||||
|
"foundation/components/flex-video",
|
||||||
|
"foundation/components/section",
|
||||||
|
"foundation/components/top-bar",
|
||||||
|
"foundation/components/orbit",
|
||||||
|
"foundation/components/reveal",
|
||||||
|
"foundation/components/joyride",
|
||||||
|
"foundation/components/clearing",
|
||||||
|
"foundation/components/alert-boxes",
|
||||||
|
"foundation/components/breadcrumbs",
|
||||||
|
"foundation/components/keystrokes",
|
||||||
|
"foundation/components/labels",
|
||||||
|
"foundation/components/inline-lists",
|
||||||
|
"foundation/components/pagination",
|
||||||
|
"foundation/components/panels",
|
||||||
|
"foundation/components/pricing-tables",
|
||||||
|
"foundation/components/progress-bars",
|
||||||
|
"foundation/components/side-nav",
|
||||||
|
"foundation/components/sub-nav",
|
||||||
|
"foundation/components/switch",
|
||||||
|
"foundation/components/magellan",
|
||||||
|
"foundation/components/tables",
|
||||||
|
"foundation/components/thumbs",
|
||||||
|
"foundation/components/tooltips",
|
||||||
|
"foundation/components/dropdown";
|
||||||
|
|
||||||
|
|
||||||
|
|
198
content/css/zurb-foundation/foundation/_foundation-global.scss
Normal file
|
@ -0,0 +1,198 @@
|
||||||
|
// Foundation Global Function, Variables and Mixins
|
||||||
|
//
|
||||||
|
// Variables
|
||||||
|
//
|
||||||
|
|
||||||
|
// The default font-size is set to 100% of the browser style sheet (usually 16px)
|
||||||
|
// for compatibility with brower-based text zoom or user-set defaults.
|
||||||
|
$base-font-size: 100% !default;
|
||||||
|
|
||||||
|
// Set your base font-size in pixels so emCalc can do its magic below
|
||||||
|
$em-base: 16px !default;
|
||||||
|
|
||||||
|
// We use these to control various global styles
|
||||||
|
$body-bg: #fff !default;
|
||||||
|
$body-font-color: #222 !default;
|
||||||
|
$body-font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif !default;
|
||||||
|
$body-font-weight: normal !default;
|
||||||
|
$body-font-style: normal !default;
|
||||||
|
|
||||||
|
// We use these to control text direction settings
|
||||||
|
$text-direction: ltr !default; // Controls default global text direction, 'rtl' or 'ltr'
|
||||||
|
$default-float: left !default;
|
||||||
|
$opposite-direction: right !default;
|
||||||
|
// No need to change this conditional statement, $text-direction variable controls it all.
|
||||||
|
@if $text-direction == ltr {
|
||||||
|
$default-float: left;
|
||||||
|
$opposite-direction: right;
|
||||||
|
} @else {
|
||||||
|
$default-float: right;
|
||||||
|
$opposite-direction: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
// We use these as default colors throughout
|
||||||
|
$primary-color: #2ba6cb !default;
|
||||||
|
$secondary-color: #e9e9e9 !default;
|
||||||
|
$alert-color: #c60f13 !default;
|
||||||
|
$success-color: #5da423 !default;
|
||||||
|
|
||||||
|
// We use these to make sure border radius matches unless we want it different.
|
||||||
|
$global-radius: 3px !default;
|
||||||
|
$global-rounded: 1000px !default;
|
||||||
|
|
||||||
|
// We use these to control inset shadow shiny edges and depressions.
|
||||||
|
$shiny-edge-size: 0 1px 0 !default;
|
||||||
|
$shiny-edge-color: rgba(#fff, .5) !default;
|
||||||
|
$shiny-edge-active-color: rgba(#000, .2) !default;
|
||||||
|
|
||||||
|
// We use this to control whether or not CSS classes come through in the gem files.
|
||||||
|
$include-html-classes: true !default;
|
||||||
|
$include-print-styles: true !default;
|
||||||
|
|
||||||
|
$include-html-grid-classes: $include-html-classes !default;
|
||||||
|
$include-html-visibility-classes: $include-html-classes !default;
|
||||||
|
$include-html-button-classes: $include-html-classes !default;
|
||||||
|
$include-html-form-classes: $include-html-classes !default;
|
||||||
|
$include-html-media-classes: $include-html-classes !default;
|
||||||
|
$include-html-section-classes: $include-html-classes !default;
|
||||||
|
$include-html-reveal-classes: $include-html-classes !default;
|
||||||
|
$include-html-alert-classes: $include-html-classes !default;
|
||||||
|
$include-html-nav-classes: $include-html-classes !default;
|
||||||
|
$include-html-label-classes: $include-html-classes !default;
|
||||||
|
$include-html-panel-classes: $include-html-classes !default;
|
||||||
|
$include-html-pricing-classes: $include-html-classes !default;
|
||||||
|
$include-html-progress-classes: $include-html-classes !default;
|
||||||
|
$include-html-magellan-classes: $include-html-classes !default;
|
||||||
|
|
||||||
|
//
|
||||||
|
// Functions
|
||||||
|
//
|
||||||
|
|
||||||
|
// Working in ems is annoying. Think in pixels by using this handy function, emCalc(#px)
|
||||||
|
@function emCalc($pxWidth) {
|
||||||
|
@return $pxWidth / $em-base * 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Creating rems and pixels
|
||||||
|
@function remCalc($pxWidth) {
|
||||||
|
@return $pxWidth / $em-base * 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Grid Calculation for Percentages
|
||||||
|
@function gridCalc($colNumber, $totalColumns) {
|
||||||
|
@return percentage(($colNumber / $totalColumns));
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Mixins
|
||||||
|
//
|
||||||
|
|
||||||
|
// We use this to control border radius.
|
||||||
|
@mixin radius($radius:$global-radius) {
|
||||||
|
@if $radius {
|
||||||
|
-webkit-border-radius: $radius;
|
||||||
|
border-radius: $radius;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// We use this to create equal side border radius on elements.
|
||||||
|
@mixin side-radius($side, $radius) {
|
||||||
|
@include radius(0);
|
||||||
|
@if $side == left {
|
||||||
|
-moz-border-radius-bottomleft: $radius;
|
||||||
|
-moz-border-radius-topleft: $radius;
|
||||||
|
-webkit-border-bottom-left-radius: $radius;
|
||||||
|
-webkit-border-top-left-radius: $radius;
|
||||||
|
border-bottom-left-radius: $radius;
|
||||||
|
border-top-left-radius: $radius;
|
||||||
|
}
|
||||||
|
@else if $side == right {
|
||||||
|
-moz-border-radius-topright: $radius;
|
||||||
|
-moz-border-radius-bottomright: $radius;
|
||||||
|
-webkit-border-top-right-radius: $radius;
|
||||||
|
-webkit-border-bottom-right-radius: $radius;
|
||||||
|
border-top-right-radius: $radius;
|
||||||
|
border-bottom-right-radius: $radius;
|
||||||
|
}
|
||||||
|
@else if $side == top {
|
||||||
|
-moz-border-radius-topright: $radius;
|
||||||
|
-moz-border-radius-topleft: $radius;
|
||||||
|
-webkit-border-top-right-radius: $radius;
|
||||||
|
-webkit-border-top-left-radius: $radius;
|
||||||
|
border-top-right-radius: $radius;
|
||||||
|
border-top-left-radius: $radius;
|
||||||
|
}
|
||||||
|
@else if $side == bottom {
|
||||||
|
-moz-border-radius-bottomright: $radius;
|
||||||
|
-moz-border-radius-bottomleft: $radius;
|
||||||
|
-webkit-border-bottom-right-radius: $radius;
|
||||||
|
-webkit-border-bottom-left-radius: $radius;
|
||||||
|
border-bottom-right-radius: $radius;
|
||||||
|
border-bottom-left-radius: $radius;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// We can control whether or not we have inset shadows edges.
|
||||||
|
@mixin inset-shadow($active:true) {
|
||||||
|
-webkit-box-shadow: $shiny-edge-size $shiny-edge-color inset;
|
||||||
|
box-shadow: $shiny-edge-size $shiny-edge-color inset;
|
||||||
|
|
||||||
|
@if $active { &:active {
|
||||||
|
-webkit-box-shadow: $shiny-edge-size $shiny-edge-active-color inset;
|
||||||
|
box-shadow: $shiny-edge-size $shiny-edge-active-color inset; } }
|
||||||
|
}
|
||||||
|
|
||||||
|
// We use this to add transitions to elements
|
||||||
|
@mixin single-transition($property:all, $speed:300ms, $ease:ease-out) {
|
||||||
|
-webkit-transition: $property $speed $ease;
|
||||||
|
-moz-transition: $property $speed $ease;
|
||||||
|
transition: $property $speed $ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
// We use this to add box-sizing across browser prefixes
|
||||||
|
@mixin box-sizing($type:border-box) {
|
||||||
|
-moz-box-sizing: $type;
|
||||||
|
-webkit-box-sizing: $type;
|
||||||
|
box-sizing: $type;
|
||||||
|
}
|
||||||
|
|
||||||
|
// We use this to create equalateral triangles
|
||||||
|
@mixin css-triangle($triangle-size, $triangle-color, $triangle-direction) {
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border: solid $triangle-size;
|
||||||
|
@if ($triangle-direction == top) {
|
||||||
|
border-color: $triangle-color transparent transparent transparent;
|
||||||
|
}
|
||||||
|
@if ($triangle-direction == bottom) {
|
||||||
|
border-color: transparent transparent $triangle-color transparent;
|
||||||
|
}
|
||||||
|
@if ($triangle-direction == left) {
|
||||||
|
border-color: transparent transparent transparent $triangle-color;
|
||||||
|
}
|
||||||
|
@if ($triangle-direction == right) {
|
||||||
|
border-color: transparent $triangle-color transparent transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// We use this to do clear floats
|
||||||
|
@mixin clearfix() {
|
||||||
|
*zoom:1;
|
||||||
|
&:before, &:after { content: " "; display: table; }
|
||||||
|
&:after { clear: both; }
|
||||||
|
}
|
||||||
|
|
||||||
|
// Media Queries
|
||||||
|
$small-screen: emCalc(768px) !default;
|
||||||
|
$medium-screen: emCalc(1280px) !default;
|
||||||
|
$large-screen: emCalc(1440px) !default;
|
||||||
|
|
||||||
|
$screen: "only screen" !default;
|
||||||
|
$small: "only screen and (min-width:"#{$small-screen}")" !default;
|
||||||
|
$medium: "only screen and (min-width:"#{$medium-screen}")" !default;
|
||||||
|
$large: "only screen and (min-width:"#{$large-screen}")" !default;
|
||||||
|
$landscape: "only screen and (orientation: landscape)" !default;
|
||||||
|
$portrait: "only screen and (orientation: portrait)" !default;
|
|
@ -0,0 +1,106 @@
|
||||||
|
//
|
||||||
|
// Alert Variables
|
||||||
|
//
|
||||||
|
|
||||||
|
// We use this to control alert padding.
|
||||||
|
$alert-padding-top: emCalc(11px) !default;
|
||||||
|
$alert-padding-default-float: $alert-padding-top !default;
|
||||||
|
$alert-padding-opposite-direction: $alert-padding-top + emCalc(10px) !default;
|
||||||
|
$alert-padding-bottom: $alert-padding-top + emCalc(1px) !default;
|
||||||
|
|
||||||
|
// We use these to control text style.
|
||||||
|
$alert-font-weight: bold !default;
|
||||||
|
$alert-font-size: emCalc(14px) !default;
|
||||||
|
$alert-font-color: #fff !default;
|
||||||
|
$alert-font-color-alt: darken($secondary-color, 60%) !default;
|
||||||
|
|
||||||
|
// We use this for close hover effect.
|
||||||
|
$alert-function-factor: 10% !default;
|
||||||
|
|
||||||
|
// We use these to control border styles.
|
||||||
|
$alert-border-style: solid !default;
|
||||||
|
$alert-border-width: 1px !default;
|
||||||
|
$alert-border-color: darken($primary-color, $alert-function-factor) !default;
|
||||||
|
$alert-bottom-margin: emCalc(20px) !default;
|
||||||
|
|
||||||
|
// We use these to style the close buttons
|
||||||
|
$alert-close-color: #333 !default;
|
||||||
|
$alert-close-position: emCalc(5px) !default;
|
||||||
|
$alert-close-font-size: emCalc(22px) !default;
|
||||||
|
$alert-close-opacity: 0.3 !default;
|
||||||
|
$alert-close-opacity-hover: 0.5 !default;
|
||||||
|
$alert-close-padding: 5px 4px 4px !default;
|
||||||
|
|
||||||
|
// We use this to control border radius
|
||||||
|
$alert-radius: $global-radius !default;
|
||||||
|
|
||||||
|
//
|
||||||
|
// Alert Mixins
|
||||||
|
//
|
||||||
|
|
||||||
|
// We use this mixin to create a default alert base.
|
||||||
|
@mixin alert-base {
|
||||||
|
border-style: $alert-border-style;
|
||||||
|
border-width: $alert-border-width;
|
||||||
|
display: block;
|
||||||
|
font-weight: $alert-font-weight;
|
||||||
|
margin-bottom: $alert-bottom-margin;
|
||||||
|
position: relative;
|
||||||
|
padding: $alert-padding-top $alert-padding-opposite-direction $alert-padding-bottom $alert-padding-default-float;
|
||||||
|
font-size: $alert-font-size;
|
||||||
|
}
|
||||||
|
|
||||||
|
// We use this mixin to add alert styles
|
||||||
|
@mixin alert-style($bg:$primary-color) {
|
||||||
|
|
||||||
|
// This find the lightness percentage of the background color.
|
||||||
|
$bg-lightness: lightness($bg);
|
||||||
|
|
||||||
|
// We control which background color and border come through.
|
||||||
|
background-color: $bg;
|
||||||
|
border-color: darken($bg, $alert-function-factor);
|
||||||
|
|
||||||
|
// We control the text color for you based on the background color.
|
||||||
|
@if $bg-lightness > 70% { color: $alert-font-color-alt; }
|
||||||
|
@else { color: $alert-font-color; }
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// We use this to create the close button.
|
||||||
|
@mixin alert-close {
|
||||||
|
font-size: $alert-close-font-size;
|
||||||
|
padding: $alert-close-padding;
|
||||||
|
line-height: 0;
|
||||||
|
position: absolute;
|
||||||
|
top: $alert-close-position + emCalc(2px);
|
||||||
|
#{$opposite-direction}: $alert-close-position;
|
||||||
|
color: $alert-close-color;
|
||||||
|
opacity: $alert-close-opacity;
|
||||||
|
&:hover,
|
||||||
|
&:focus { opacity: $alert-close-opacity-hover; }
|
||||||
|
}
|
||||||
|
|
||||||
|
// We use this to quickly create alerts with a single mixin.
|
||||||
|
@mixin alert($bg:$primary-color, $radius:false) {
|
||||||
|
@include alert-base;
|
||||||
|
@include alert-style($bg);
|
||||||
|
@include radius($radius);
|
||||||
|
}
|
||||||
|
|
||||||
|
@if $include-html-alert-classes {
|
||||||
|
|
||||||
|
/* Foundation Alerts */
|
||||||
|
.alert-box {
|
||||||
|
@include alert;
|
||||||
|
|
||||||
|
.close { @include alert-close; }
|
||||||
|
|
||||||
|
&.radius { @include radius($alert-radius); }
|
||||||
|
&.round { @include radius($global-rounded); }
|
||||||
|
|
||||||
|
&.success { @include alert-style($success-color); }
|
||||||
|
&.alert { @include alert-style($alert-color); }
|
||||||
|
&.secondary { @include alert-style($secondary-color); }
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -0,0 +1,66 @@
|
||||||
|
//
|
||||||
|
// Block Grid Variables
|
||||||
|
//
|
||||||
|
|
||||||
|
// We use this to control the maximum number of block grid elements per row
|
||||||
|
$block-grid-elements: 12 !default;
|
||||||
|
$block-grid-default-spacing: 10px !default;
|
||||||
|
|
||||||
|
// Enables media queries for block-grid classes. Set to false if writing semantic HTML.
|
||||||
|
$block-grid-media-queries: true !default;
|
||||||
|
|
||||||
|
//
|
||||||
|
// Block Grid Mixins
|
||||||
|
//
|
||||||
|
|
||||||
|
// We use this mixin to create different block-grids. You can apply per-row and spacing options.
|
||||||
|
// Setting $base-style to false will ommit default styles.
|
||||||
|
@mixin block-grid($per-row:false, $spacing:$block-grid-default-spacing, $base-style:true) {
|
||||||
|
|
||||||
|
@if $base-style {
|
||||||
|
display: block;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0 (-$spacing);
|
||||||
|
@include clearfix;
|
||||||
|
|
||||||
|
&>li {
|
||||||
|
display: block;
|
||||||
|
height: auto;
|
||||||
|
float: $default-float;
|
||||||
|
padding: 0 $spacing $spacing;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@if $per-row {
|
||||||
|
&>li {
|
||||||
|
width: 100%/$per-row;
|
||||||
|
padding: 0 $spacing $spacing;
|
||||||
|
|
||||||
|
&:nth-of-type(#{$per-row}n+1) { clear: both; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
@if $block-grid-media-queries {
|
||||||
|
/* Foundation Block Grids for below small breakpoint */
|
||||||
|
@media only screen {
|
||||||
|
[class*="block-grid-"] { @include block-grid; }
|
||||||
|
|
||||||
|
@for $i from 1 through $block-grid-elements {
|
||||||
|
.small-block-grid-#{($i)} {
|
||||||
|
@include block-grid($i,$block-grid-default-spacing,false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Foundation Block Grids for above small breakpoint */
|
||||||
|
@media #{$small} {
|
||||||
|
@for $i from 1 through $block-grid-elements {
|
||||||
|
.large-block-grid-#{($i)} {
|
||||||
|
@include block-grid($i,$block-grid-default-spacing,false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
[class*="small-block-grid-"] > li { clear: none !important; }
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,117 @@
|
||||||
|
//
|
||||||
|
// Breadcrumb Variables
|
||||||
|
//
|
||||||
|
|
||||||
|
// We use this to set the background color for the breadcrumb container.
|
||||||
|
$crumb-bg: lighten($secondary-color, 5%) !default;
|
||||||
|
|
||||||
|
// We use these to set the padding around the breadcrumbs.
|
||||||
|
$crumb-padding: emCalc(6px) emCalc(14px) emCalc(9px) !default;
|
||||||
|
$crumb-side-padding: emCalc(12px) !default;
|
||||||
|
|
||||||
|
// We use these to control border styles.
|
||||||
|
$crumb-function-factor: 10% !default;
|
||||||
|
$crumb-border-size: 1px !default;
|
||||||
|
$crumb-border-style: solid !default;
|
||||||
|
$crumb-border-color: darken($crumb-bg, $crumb-function-factor) !default;
|
||||||
|
$crumb-radius: $global-radius !default;
|
||||||
|
|
||||||
|
// We use these to set various text styles for breadcrumbs.
|
||||||
|
$crumb-font-size: emCalc(11px) !default;
|
||||||
|
$crumb-font-color: $primary-color !default;
|
||||||
|
$crumb-font-color-current: #333 !default;
|
||||||
|
$crumb-font-color-unavailable: #999 !default;
|
||||||
|
$crumb-font-transform: uppercase !default;
|
||||||
|
$crumb-link-decor: underline !default;
|
||||||
|
|
||||||
|
// We use these to control the slash between breadcrumbs
|
||||||
|
$crumb-slash-color: #aaa !default;
|
||||||
|
$crumb-slash: "/" !default;
|
||||||
|
|
||||||
|
//
|
||||||
|
// Breakcrumb Mixins
|
||||||
|
//
|
||||||
|
|
||||||
|
// We use this mixin to create a container around our breadcrumbs
|
||||||
|
@mixin crumb-container {
|
||||||
|
display: block;
|
||||||
|
padding: $crumb-padding;
|
||||||
|
overflow: hidden;
|
||||||
|
margin-#{$default-float}: 0;
|
||||||
|
list-style: none;
|
||||||
|
border-style: $crumb-border-style;
|
||||||
|
border-width: $crumb-border-size;
|
||||||
|
|
||||||
|
// We control which background color and border come through.
|
||||||
|
background-color: $crumb-bg;
|
||||||
|
border-color: $crumb-border-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
// We use this mixin to create breadcrumb styles from list items.
|
||||||
|
@mixin crumbs {
|
||||||
|
|
||||||
|
// A normal state will make the links look and act like clickable breadcrumbs.
|
||||||
|
margin: 0;
|
||||||
|
padding: 0 $crumb-side-padding 0 0;
|
||||||
|
float: $default-float;
|
||||||
|
|
||||||
|
&:hover a,
|
||||||
|
&:focus a { text-decoration: $crumb-link-decor; }
|
||||||
|
|
||||||
|
a,
|
||||||
|
span {
|
||||||
|
font-size: $crumb-font-size;
|
||||||
|
padding-#{$default-float}: $crumb-side-padding;
|
||||||
|
text-transform: $crumb-font-transform;
|
||||||
|
color: $crumb-font-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Current is for the link of the current page
|
||||||
|
&.current {
|
||||||
|
a {
|
||||||
|
cursor: default;
|
||||||
|
color: $crumb-font-color-current;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover a,
|
||||||
|
&:focus a { text-decoration: none; }
|
||||||
|
}
|
||||||
|
|
||||||
|
// Unavailable removed color and link styles so it looks inactive.
|
||||||
|
&.unavailable {
|
||||||
|
a { color: $crumb-font-color-unavailable; }
|
||||||
|
|
||||||
|
&:hover a,
|
||||||
|
a:focus {
|
||||||
|
text-decoration: none;
|
||||||
|
color: $crumb-font-color-unavailable;
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
content: "#{$crumb-slash}";
|
||||||
|
color: $crumb-slash-color;
|
||||||
|
position: relative;
|
||||||
|
top: 1px;
|
||||||
|
}
|
||||||
|
&:first-child a,
|
||||||
|
&:first-child span { padding-#{$default-float}: 0; }
|
||||||
|
&:first-child:before { content: " "; }
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@if $include-html-nav-classes {
|
||||||
|
|
||||||
|
/* Breadcrumbs */
|
||||||
|
.breadcrumbs {
|
||||||
|
@include crumb-container;
|
||||||
|
@include radius($crumb-radius);
|
||||||
|
|
||||||
|
li {
|
||||||
|
@include crumbs;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -0,0 +1,76 @@
|
||||||
|
//
|
||||||
|
// Button Group Variables
|
||||||
|
//
|
||||||
|
|
||||||
|
// Sets the margin for the right side by default, and the left margin if right-to-left direction is used
|
||||||
|
$button-bar-margin-opposite: emCalc(10px) !default;
|
||||||
|
|
||||||
|
//
|
||||||
|
// Button Group Mixins
|
||||||
|
//
|
||||||
|
|
||||||
|
// We use this to add styles for a button group container
|
||||||
|
@mixin button-group-container($styles:true, $float:false) {
|
||||||
|
@if $styles {
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
@include clearfix();
|
||||||
|
}
|
||||||
|
@if $float {
|
||||||
|
float: #{$default-float};
|
||||||
|
margin-#{$opposite-direction}: $button-bar-margin-opposite;
|
||||||
|
& div { overflow: hidden; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// We use this to control styles for button groups
|
||||||
|
@mixin button-group-style($radius:false, $even:false, $float:$default-float) {
|
||||||
|
|
||||||
|
// We use this to control the flow, or remove those styles completely.
|
||||||
|
@if $float {
|
||||||
|
margin: 0 0 0 -1px;
|
||||||
|
float: $float;
|
||||||
|
// Make sure the first child doesn't get the negative margin.
|
||||||
|
&:first-child { margin-#{$default-float}: 0; }
|
||||||
|
}
|
||||||
|
|
||||||
|
// We use these to control left and right radius on first/last buttons in the group.
|
||||||
|
@if $radius == true {
|
||||||
|
&:first-child, &:first-child > a, &:first-child > button { @include side-radius($default-float, $button-radius); }
|
||||||
|
&:last-child, &:last-child > a, &:last-child > button { @include side-radius($opposite-direction, $button-radius); }
|
||||||
|
}
|
||||||
|
@else if $radius {
|
||||||
|
&:first-child, &:first-child > a, &:first-child > button { @include side-radius($default-float, $radius); }
|
||||||
|
&:last-child, &:last-child > a, &:last-child > button { @include side-radius($opposite-direction, $radius); }
|
||||||
|
}
|
||||||
|
|
||||||
|
// We use this to make the buttons even width across their container
|
||||||
|
@if $even {
|
||||||
|
width: percentage((100/$even) / 100);
|
||||||
|
.button { width: 100%; }
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// Only include these CSS classes if $include-html-classes: true
|
||||||
|
@if $include-html-button-classes {
|
||||||
|
|
||||||
|
/* Button Groups */
|
||||||
|
.button-group { @include button-group-container;
|
||||||
|
|
||||||
|
&> * { @include button-group-style(); }
|
||||||
|
|
||||||
|
&.radius > * { @include button-group-style($radius:$button-radius, $float:null); }
|
||||||
|
&.round > * { @include button-group-style($radius:$button-round, $float:null); }
|
||||||
|
|
||||||
|
@for $i from 2 through 8 {
|
||||||
|
&.even#{-$i} li { @include button-group-style($even:$i, $float:null); }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-bar {
|
||||||
|
@include clearfix;
|
||||||
|
.button-group { @include button-group-container($styles:false,$float:true); }
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
219
content/css/zurb-foundation/foundation/components/_buttons.scss
Normal file
|
@ -0,0 +1,219 @@
|
||||||
|
//
|
||||||
|
// Button Variables
|
||||||
|
//
|
||||||
|
|
||||||
|
// We use these to build padding for buttons.
|
||||||
|
$button-med: emCalc(12px) !default;
|
||||||
|
$button-tny: emCalc(7px) !default;
|
||||||
|
$button-sml: emCalc(9px) !default;
|
||||||
|
$button-lrg: emCalc(16px) !default;
|
||||||
|
|
||||||
|
// We use this to control the display property.
|
||||||
|
$button-display: inline-block !default;
|
||||||
|
$button-margin-bottom: emCalc(20px) !default;
|
||||||
|
|
||||||
|
// We use these to control button text styles.
|
||||||
|
$button-font-family: inherit !default;
|
||||||
|
$button-font-color: #fff !default;
|
||||||
|
$button-font-color-alt: #333 !default;
|
||||||
|
$button-font-med: emCalc(16px) !default;
|
||||||
|
$button-font-tny: emCalc(11px) !default;
|
||||||
|
$button-font-sml: emCalc(13px) !default;
|
||||||
|
$button-font-lrg: emCalc(20px) !default;
|
||||||
|
$button-font-weight: bold !default;
|
||||||
|
$button-font-align: center !default;
|
||||||
|
|
||||||
|
// We use these to control various hover effects.
|
||||||
|
$button-function-factor: 10% !default;
|
||||||
|
|
||||||
|
// We use these to control button border styles.
|
||||||
|
$button-border-width: 1px !default;
|
||||||
|
$button-border-style: solid !default;
|
||||||
|
$button-border-color: darken($primary-color, $button-function-factor) !default;
|
||||||
|
|
||||||
|
// We use this to set the default radius used throughout the core.
|
||||||
|
$button-radius: $global-radius !default;
|
||||||
|
$button-round: $global-rounded !default;
|
||||||
|
|
||||||
|
// We use this to set default opacity for disabled buttons.
|
||||||
|
$button-disabled-opacity: 0.6 !default;
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Button Mixins
|
||||||
|
//
|
||||||
|
|
||||||
|
// We use this mixin to create a default button base.
|
||||||
|
@mixin button-base($style:true, $display:$button-display) {
|
||||||
|
@if $style {
|
||||||
|
border-style: $button-border-style;
|
||||||
|
border-width: $button-border-width;
|
||||||
|
cursor: pointer;
|
||||||
|
font-family: $button-font-family;
|
||||||
|
font-weight: $button-font-weight;
|
||||||
|
line-height: 1;
|
||||||
|
margin: 0 0 $button-margin-bottom;
|
||||||
|
position: relative;
|
||||||
|
text-decoration: none;
|
||||||
|
text-align: $button-font-align;
|
||||||
|
}
|
||||||
|
@if $display { display: $display; }
|
||||||
|
}
|
||||||
|
|
||||||
|
// We use this mixin to add button size styles
|
||||||
|
@mixin button-size($padding:$button-med, $full-width:false, $is-input:false) {
|
||||||
|
|
||||||
|
// We control which padding styles come through,
|
||||||
|
// these can be turned off by setting $padding:false
|
||||||
|
@if $padding {
|
||||||
|
padding-top: $padding;
|
||||||
|
padding-#{$opposite-direction}: $padding * 2;
|
||||||
|
padding-bottom: $padding + emCalc(1px);
|
||||||
|
padding-#{$default-float}: $padding * 2;
|
||||||
|
|
||||||
|
// We control the font-size based on mixin input.
|
||||||
|
@if $padding == $button-med { font-size: $button-font-med; }
|
||||||
|
@else if $padding == $button-tny { font-size: $button-font-tny; }
|
||||||
|
@else if $padding == $button-sml { font-size: $button-font-sml; }
|
||||||
|
@else if $padding == $button-lrg { font-size: $button-font-lrg; }
|
||||||
|
@else { font-size: $padding - emCalc(2px); }
|
||||||
|
}
|
||||||
|
|
||||||
|
// We can set $full-width:true to remove side padding extend width.
|
||||||
|
@if $full-width {
|
||||||
|
padding-top: $padding;
|
||||||
|
padding-#{$opposite-direction}: 0px;
|
||||||
|
padding-bottom: $padding + emCalc(1px);
|
||||||
|
padding-#{$default-float}: 0px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
// <input>'s and <button>'s take on strange padding. We added this to help fix that.
|
||||||
|
@if $is-input == $button-lrg {
|
||||||
|
padding-top: $is-input + emCalc(.5px);
|
||||||
|
padding-bottom: $is-input + emCalc(.5px);
|
||||||
|
}
|
||||||
|
@else if $is-input {
|
||||||
|
padding-top: $is-input + emCalc(1px);
|
||||||
|
padding-bottom: $is-input;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// We use this mixin to add button color styles
|
||||||
|
@mixin button-style($bg:$primary-color, $radius:false, $disabled:false) {
|
||||||
|
|
||||||
|
// We control which background styles are used,
|
||||||
|
// these can be removed by setting $bg:false
|
||||||
|
@if $bg {
|
||||||
|
// This find the lightness percentage of the background color.
|
||||||
|
$bg-lightness: lightness($bg);
|
||||||
|
|
||||||
|
background-color: $bg;
|
||||||
|
border-color: darken($bg, $button-function-factor);
|
||||||
|
&:hover,
|
||||||
|
&:focus { background-color: darken($bg, $button-function-factor); }
|
||||||
|
|
||||||
|
// We control the text color for you based on the background color.
|
||||||
|
@if $bg-lightness > 70% {
|
||||||
|
color: $button-font-color-alt;
|
||||||
|
&:hover,
|
||||||
|
&:focus { color: $button-font-color-alt; }
|
||||||
|
}
|
||||||
|
@else {
|
||||||
|
color: $button-font-color;
|
||||||
|
&:hover,
|
||||||
|
&:focus { color: $button-font-color; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// We can set $disabled:true to create a disabled transparent button.
|
||||||
|
@if $disabled {
|
||||||
|
cursor: default;
|
||||||
|
opacity: $button-disabled-opacity;
|
||||||
|
-webkit-box-shadow: none;
|
||||||
|
box-shadow: none;
|
||||||
|
&:hover,
|
||||||
|
&:focus { background-color: $bg; }
|
||||||
|
}
|
||||||
|
|
||||||
|
// We can control how much button radius us used.
|
||||||
|
@if $radius == true { @include radius($button-radius); }
|
||||||
|
@else if $radius { @include radius($radius); }
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// We use this to quickly create buttons with a single mixin. As @jaredhardy puts it, "the kitchen sink mixin"
|
||||||
|
@mixin button($padding:$button-med, $bg:$primary-color, $radius:false, $full-width:false, $disabled:false, $is-input:false, $is-prefix:false) {
|
||||||
|
@include button-base;
|
||||||
|
@include button-size($padding, $full-width, $is-input);
|
||||||
|
@include button-style($bg, $radius, $disabled);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Button Classes
|
||||||
|
//
|
||||||
|
|
||||||
|
// Only include these classes if the variable is true, otherwise they'll be left out.
|
||||||
|
@if $include-html-button-classes {
|
||||||
|
|
||||||
|
// Default styles applied outside of media query
|
||||||
|
button, .button {
|
||||||
|
@include button-base;
|
||||||
|
@include button-size;
|
||||||
|
@include button-style;
|
||||||
|
|
||||||
|
&.secondary { @include button-style($bg:$secondary-color); }
|
||||||
|
&.success { @include button-style($bg:$success-color); }
|
||||||
|
&.alert { @include button-style($bg:$alert-color); }
|
||||||
|
|
||||||
|
&.large { @include button-size($padding:$button-lrg); }
|
||||||
|
&.small { @include button-size($padding:$button-sml); }
|
||||||
|
&.tiny { @include button-size($padding:$button-tny); }
|
||||||
|
&.expand { @include button-size(false,$full-width:true); }
|
||||||
|
|
||||||
|
&.left-align { text-align: left; text-indent: emCalc(12px); }
|
||||||
|
&.right-align { text-align: right; padding-right: emCalc(12px); }
|
||||||
|
|
||||||
|
&.disabled, &[disabled] { @include button-style($bg:$primary-color, $disabled:true);
|
||||||
|
&.secondary { @include button-style($bg:$secondary-color, $disabled:true); }
|
||||||
|
&.success { @include button-style($bg:$success-color, $disabled:true); }
|
||||||
|
&.alert { @include button-style($bg:$alert-color, $disabled:true); }
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
input.button,
|
||||||
|
button.button {
|
||||||
|
@include button-size($padding:false, $is-input:$button-med);
|
||||||
|
&.tiny { @include button-size($padding:false, $is-input:$button-tny); }
|
||||||
|
&.small { @include button-size($padding:false, $is-input:$button-sml); }
|
||||||
|
&.large { @include button-size($padding:false, $is-input:$button-lrg); }
|
||||||
|
}
|
||||||
|
|
||||||
|
// Styles for any browser or device that support media queries
|
||||||
|
@media only screen {
|
||||||
|
|
||||||
|
.button {
|
||||||
|
@include inset-shadow();
|
||||||
|
@include single-transition(background-color);
|
||||||
|
|
||||||
|
&.large { @include button-size($padding:false, $full-width:false); }
|
||||||
|
&.small { @include button-size($padding:false, $full-width:false); }
|
||||||
|
&.tiny { @include button-size($padding:false, $full-width:false); }
|
||||||
|
|
||||||
|
&.radius { @include button-style($bg:false, $radius:true); }
|
||||||
|
&.round { @include button-style($bg:false, $radius:$button-round); }
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// Additional styles for screens larger than 768px
|
||||||
|
@media #{$small} {
|
||||||
|
.button {
|
||||||
|
@include button-base($style:false, $display:inline-block);
|
||||||
|
@include button-size($padding:false, $full-width:false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
211
content/css/zurb-foundation/foundation/components/_clearing.scss
Normal file
|
@ -0,0 +1,211 @@
|
||||||
|
//
|
||||||
|
// Clearing Variables
|
||||||
|
//
|
||||||
|
|
||||||
|
// We use these to set the background colors for parts of Clearing.
|
||||||
|
$clearing-bg: #111 !default;
|
||||||
|
$clearing-caption-bg: $clearing-bg !default;
|
||||||
|
$clearing-carousel-bg: #111 !default;
|
||||||
|
$clearing-img-bg: $clearing-bg !default;
|
||||||
|
|
||||||
|
// We use these to style the close button
|
||||||
|
$clearing-close-color: #fff !default;
|
||||||
|
$clearing-close-size: 40px !default;
|
||||||
|
|
||||||
|
// We use these to style the arrows
|
||||||
|
$clearing-arrow-size: 16px !default;
|
||||||
|
$clearing-arrow-color: $clearing-close-color !default;
|
||||||
|
|
||||||
|
// We use these to style captions
|
||||||
|
$clearing-caption-font-color: #fff !default;
|
||||||
|
$clearing-caption-padding: 10px 30px !default;
|
||||||
|
|
||||||
|
// We use these to make the image and carousel height and style
|
||||||
|
$clearing-active-img-height: 75% !default;
|
||||||
|
$clearing-carousel-height: 150px !default;
|
||||||
|
$clearing-carousel-thumb-width: 175px !default;
|
||||||
|
$clearing-carousel-thumb-active-border: 4px solid rgb(255,255,255) !default;
|
||||||
|
|
||||||
|
|
||||||
|
// We decided to not create a mixin for Clearing because it relies
|
||||||
|
// on predefined classes and structure to work properly.
|
||||||
|
// The variables above should give enough control.
|
||||||
|
|
||||||
|
/* Clearing Styles */
|
||||||
|
[data-clearing] {
|
||||||
|
@include clearfix;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clearing-blackout {
|
||||||
|
background: $clearing-bg;
|
||||||
|
position: fixed;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
top: 0;
|
||||||
|
#{$default-float}: 0;
|
||||||
|
z-index: 998;
|
||||||
|
|
||||||
|
.clearing-close { display: block; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.clearing-container {
|
||||||
|
position: relative;
|
||||||
|
z-index: 998;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.visible-img {
|
||||||
|
height: 95%;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
img {
|
||||||
|
position: absolute;
|
||||||
|
#{$default-float}: 50%;
|
||||||
|
top: 50%;
|
||||||
|
margin-#{$default-float}: -50%;
|
||||||
|
max-height: 100%;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.clearing-caption {
|
||||||
|
color: $clearing-caption-font-color;
|
||||||
|
line-height: 1.3;
|
||||||
|
margin-bottom: 0;
|
||||||
|
text-align: center;
|
||||||
|
bottom: 0;
|
||||||
|
background: $clearing-caption-bg;
|
||||||
|
width: 100%;
|
||||||
|
padding: $clearing-caption-padding;
|
||||||
|
position: absolute;
|
||||||
|
#{$default-float}: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clearing-close {
|
||||||
|
z-index: 999;
|
||||||
|
padding-#{$default-float}: 20px;
|
||||||
|
padding-top: 10px;
|
||||||
|
font-size: $clearing-close-size;
|
||||||
|
line-height: 1;
|
||||||
|
color: $clearing-close-color;
|
||||||
|
display: none;
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus { color: #ccc; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.clearing-assembled .clearing-container { height: 100%;
|
||||||
|
.carousel > ul { display: none; }
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Large screen overrides
|
||||||
|
@media #{$small} {
|
||||||
|
.clearing-main-prev,
|
||||||
|
.clearing-main-next {
|
||||||
|
position: absolute;
|
||||||
|
height: 100%;
|
||||||
|
width: 40px;
|
||||||
|
top: 0;
|
||||||
|
& > span {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
display: block;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border: solid $clearing-arrow-size;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.clearing-main-prev {
|
||||||
|
#{$default-float}: 0;
|
||||||
|
& > span {
|
||||||
|
#{$default-float}: 5px;
|
||||||
|
border-color: transparent;
|
||||||
|
border-#{$opposite-direction}-color: $clearing-arrow-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.clearing-main-next {
|
||||||
|
#{$opposite-direction}: 0;
|
||||||
|
& > span {
|
||||||
|
border-color: transparent;
|
||||||
|
border-#{$default-float}-color: $clearing-arrow-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.clearing-main-prev.disabled,
|
||||||
|
.clearing-main-next.disabled { opacity: 0.5; }
|
||||||
|
|
||||||
|
// If you want to show a lightbox, but only have a single image come through as the thumbnail
|
||||||
|
.clearing-feature ~ li { display: none; }
|
||||||
|
|
||||||
|
.clearing-assembled .clearing-container {
|
||||||
|
|
||||||
|
.carousel {
|
||||||
|
background: $clearing-carousel-bg;
|
||||||
|
height: $clearing-carousel-height;
|
||||||
|
margin-top: 5px;
|
||||||
|
|
||||||
|
& > ul {
|
||||||
|
display: block;
|
||||||
|
z-index: 999;
|
||||||
|
width: 200%;
|
||||||
|
height: 100%;
|
||||||
|
margin-#{$default-float}: 0;
|
||||||
|
position: relative;
|
||||||
|
#{$default-float}: 0;
|
||||||
|
|
||||||
|
li {
|
||||||
|
display: block;
|
||||||
|
width: $clearing-carousel-thumb-width;
|
||||||
|
height: inherit;
|
||||||
|
padding: 0;
|
||||||
|
float: $default-float;
|
||||||
|
overflow: hidden;
|
||||||
|
margin-#{$opposite-direction}: 1px;
|
||||||
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
|
opacity: 0.4;
|
||||||
|
|
||||||
|
&.fix-height {
|
||||||
|
img {
|
||||||
|
min-height: 100%;
|
||||||
|
height: 100%;
|
||||||
|
max-width: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
a.th {
|
||||||
|
border: none;
|
||||||
|
-webkit-box-shadow: none;
|
||||||
|
box-shadow: none;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
cursor: pointer !important;
|
||||||
|
min-width: 100% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.visible { opacity: 1; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.visible-img {
|
||||||
|
background: $clearing-img-bg;
|
||||||
|
overflow: hidden;
|
||||||
|
height: $clearing-active-img-height;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.clearing-close {
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
#{$opposite-direction}: 20px;
|
||||||
|
padding-#{$default-float}: 0;
|
||||||
|
padding-top: 0;
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,240 @@
|
||||||
|
//
|
||||||
|
// Custom Form Variables
|
||||||
|
//
|
||||||
|
|
||||||
|
// We use these to control the basic form styles input styles
|
||||||
|
$custom-form-border-color: #ccc !default;
|
||||||
|
$custom-form-bg: #fff !default;
|
||||||
|
$custom-form-bg-disabled: #ddd !default;
|
||||||
|
$custom-form-check-color: #222 !default;
|
||||||
|
|
||||||
|
// We use these to style the custom select form element.
|
||||||
|
$custom-select-bg: #fff !default;
|
||||||
|
$custom-select-fade-to-color: #f3f3f3 !default;
|
||||||
|
$custom-select-border-color: #ddd !default;
|
||||||
|
$custom-select-triangle-color: #aaa !default;
|
||||||
|
$custom-select-triangle-color-open: #222 !default;
|
||||||
|
$custom-select-height: emCalc(13px) + ($form-spacing * 1.5) !default;
|
||||||
|
$custom-select-margin-bottom: emCalc(20px) !default;
|
||||||
|
$custom-select-font-color-selected: #141414 !default;
|
||||||
|
$custom-select-disabled-color: #888 !default;
|
||||||
|
|
||||||
|
// We use these to control the style of the custom select dropdown element.
|
||||||
|
$custom-dropdown-height: 200px !default;
|
||||||
|
$custom-dropdown-bg: #fff !default;
|
||||||
|
$custom-dropdown-border-color: darken(#fff, 20%) !default;
|
||||||
|
$custom-dropdown-border-width: 1px !default;
|
||||||
|
$custom-dropdown-border-style: solid !default;
|
||||||
|
$custom-dropdown-font-color: #555 !default;
|
||||||
|
$custom-dropdown-font-size: emCalc(14px) !default;
|
||||||
|
$custom-dropdown-color-selected: #eeeeee !default;
|
||||||
|
$custom-dropdown-font-color-selected: #000 !default;
|
||||||
|
$custom-dropdown-shadow: 0 2px 2px 0px rgba(0,0,0,0.1) !default;
|
||||||
|
$custom-dropdown-offset-top: auto !default;
|
||||||
|
$custom-dropdown-list-padding: emCalc(4px) !default;
|
||||||
|
$custom-dropdown-default-float-padding: emCalc(6px) !default;
|
||||||
|
$custom-dropdown-opposite-padding: emCalc(38px) !default;
|
||||||
|
$custom-dropdown-list-item-min-height: emCalc(24px) !default;
|
||||||
|
$custom-dropdown-width-small: 134px !default;
|
||||||
|
$custom-dropdown-width-medium: 254px !default;
|
||||||
|
$custom-dropdown-width-large: 434px !default;
|
||||||
|
|
||||||
|
// We decided not to make a mixin for the custom forms because
|
||||||
|
// they rely on a very specific class naming structure.
|
||||||
|
// We may look at updating this in the future.
|
||||||
|
|
||||||
|
// Only include these classes if the variable is true, otherwise they'll be left out.
|
||||||
|
@if $include-html-button-classes {
|
||||||
|
|
||||||
|
/* Custom Checkbox and Radio Inputs */
|
||||||
|
form.custom {
|
||||||
|
|
||||||
|
.custom {
|
||||||
|
display: inline-block;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
position: relative;
|
||||||
|
top: 2px;
|
||||||
|
border: solid 1px $custom-form-border-color;
|
||||||
|
background: $custom-form-bg;
|
||||||
|
|
||||||
|
&.radio { @include radius(1000px); }
|
||||||
|
|
||||||
|
&.checkbox {
|
||||||
|
&:before {
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
line-height: 0.8;
|
||||||
|
height: 14px;
|
||||||
|
width: 14px;
|
||||||
|
text-align: center;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
#{$default-float}: 0;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.radio.checked {
|
||||||
|
&:before {
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
@include radius(1000px);
|
||||||
|
background: $custom-form-check-color;
|
||||||
|
position: relative;
|
||||||
|
top: 3px;
|
||||||
|
#{$default-float}: 3px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.checkbox.checked {
|
||||||
|
&:before {
|
||||||
|
content: "\00d7";
|
||||||
|
color: $custom-form-check-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Custom Select Options and Dropdowns */
|
||||||
|
form.custom {
|
||||||
|
.custom.dropdown {
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
top: 0;
|
||||||
|
height: $custom-select-height;
|
||||||
|
margin-bottom: $custom-select-margin-bottom;
|
||||||
|
margin-top: 0px;
|
||||||
|
padding: 0px;
|
||||||
|
width: 100%;
|
||||||
|
background: $custom-dropdown-bg;
|
||||||
|
background: -moz-linear-gradient(top, $custom-dropdown-bg 0%, $custom-select-fade-to-color 100%);
|
||||||
|
background: -webkit-linear-gradient(top, $custom-dropdown-bg 0%,$custom-select-fade-to-color 100%);
|
||||||
|
background: linear-gradient(to bottom, $custom-dropdown-bg 0%,$custom-select-fade-to-color 100%);
|
||||||
|
-webkit-box-shadow: none;
|
||||||
|
box-shadow: none;
|
||||||
|
font-size: $custom-dropdown-font-size;
|
||||||
|
vertical-align: top;
|
||||||
|
|
||||||
|
ul {
|
||||||
|
overflow-y: auto;
|
||||||
|
max-height: $custom-dropdown-height;
|
||||||
|
}
|
||||||
|
|
||||||
|
.current {
|
||||||
|
cursor:default;
|
||||||
|
white-space: nowrap;
|
||||||
|
line-height: $custom-select-height - emCalc(1px);
|
||||||
|
color: $input-font-color;
|
||||||
|
text-decoration: none;
|
||||||
|
overflow: hidden;
|
||||||
|
display: block;
|
||||||
|
margin-#{$default-float}: $form-spacing / 2;
|
||||||
|
margin-#{$opposite-direction}: $custom-select-height;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selector {
|
||||||
|
cursor:default;
|
||||||
|
position: absolute;
|
||||||
|
width: $form-spacing * 2.5;
|
||||||
|
height: $custom-select-height;
|
||||||
|
display: block;
|
||||||
|
#{$opposite-direction}: 0;
|
||||||
|
top: 0;
|
||||||
|
&:after {
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
@include css-triangle(5px, $custom-select-triangle-color, top);
|
||||||
|
position: absolute;
|
||||||
|
#{$default-float}: ($form-spacing * 2.5) / 2 - emCalc(5px);
|
||||||
|
top: 50%;
|
||||||
|
margin-top: -3px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover, &.open {
|
||||||
|
a.selector {
|
||||||
|
&:after { @include css-triangle(5px, $custom-select-triangle-color-open, top); }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.disabled {
|
||||||
|
color: $custom-select-disabled-color;
|
||||||
|
&:hover {
|
||||||
|
background: transparent;
|
||||||
|
color: $custom-select-disabled-color;
|
||||||
|
&:after { display: none; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.open ul {
|
||||||
|
display: block;
|
||||||
|
z-index: 10;
|
||||||
|
min-width:100%;
|
||||||
|
@include box-sizing(content-box);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.small { max-width: $custom-dropdown-width-small; }
|
||||||
|
&.medium { max-width: $custom-dropdown-width-medium; }
|
||||||
|
&.large { max-width: $custom-dropdown-width-large; }
|
||||||
|
&.expand { width: 100% !important; }
|
||||||
|
|
||||||
|
&.open.small ul { min-width: $custom-dropdown-width-small; @include box-sizing(border-box); }
|
||||||
|
&.open.medium ul { min-width: $custom-dropdown-width-medium; @include box-sizing(border-box); }
|
||||||
|
&.open.large ul { min-width: $custom-dropdown-width-large; @include box-sizing(border-box); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom.dropdown ul {
|
||||||
|
position: absolute;
|
||||||
|
width: auto;
|
||||||
|
display: none;
|
||||||
|
margin: 0;
|
||||||
|
#{$default-float}: -$input-border-width;
|
||||||
|
top: $custom-dropdown-offset-top;
|
||||||
|
-webkit-box-shadow: $custom-dropdown-shadow;
|
||||||
|
box-shadow: $custom-dropdown-shadow;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
background: $custom-dropdown-bg;
|
||||||
|
border: $custom-dropdown-border-style $custom-dropdown-border-width $custom-dropdown-border-color;
|
||||||
|
font-size: $em-base;
|
||||||
|
|
||||||
|
li {
|
||||||
|
color: $custom-dropdown-font-color;
|
||||||
|
font-size: $custom-dropdown-font-size;
|
||||||
|
cursor: default;
|
||||||
|
padding-top: $custom-dropdown-list-padding;
|
||||||
|
padding-bottom: $custom-dropdown-list-padding;
|
||||||
|
padding-#{$default-float}: $custom-dropdown-default-float-padding;
|
||||||
|
padding-#{$opposite-direction}: $custom-dropdown-opposite-padding;
|
||||||
|
min-height: $custom-dropdown-list-item-min-height;
|
||||||
|
line-height: $custom-dropdown-list-item-min-height;
|
||||||
|
margin: 0;
|
||||||
|
white-space: nowrap;
|
||||||
|
list-style: none;
|
||||||
|
|
||||||
|
&.selected {
|
||||||
|
background: $custom-dropdown-color-selected;
|
||||||
|
color: $custom-dropdown-font-color-selected;
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
background-color: darken($custom-dropdown-color-selected, 4%);
|
||||||
|
color: $custom-dropdown-font-color-selected;
|
||||||
|
}
|
||||||
|
&.selected:hover {
|
||||||
|
background: $custom-dropdown-color-selected;
|
||||||
|
cursor: default;
|
||||||
|
color: $custom-dropdown-font-color-selected;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.show { display: block; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Custom input, disabled */
|
||||||
|
.custom.disabled { background-color: $custom-form-bg-disabled; }
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,114 @@
|
||||||
|
//
|
||||||
|
// Dropdown Button Variables
|
||||||
|
//
|
||||||
|
|
||||||
|
// We use these to set the color of the pip in dropdown buttons
|
||||||
|
$dropdown-button-pip-color: #fff !default;
|
||||||
|
$dropdown-button-pip-color-alt: #333 !default;
|
||||||
|
|
||||||
|
// We use these to style tiny dropdown buttons
|
||||||
|
$dropdown-button-padding-tny: $button-tny * 5 !default;
|
||||||
|
$dropdown-button-pip-size-tny: $button-tny !default;
|
||||||
|
$dropdown-button-pip-opposite-tny: $button-tny * 2 !default;
|
||||||
|
$dropdown-button-pip-top-tny: -$button-tny / 2 + emCalc(1px) !default;
|
||||||
|
|
||||||
|
// We use these to style small dropdown buttons
|
||||||
|
$dropdown-button-padding-sml: $button-sml * 5 !default;
|
||||||
|
$dropdown-button-pip-size-sml: $button-sml !default;
|
||||||
|
$dropdown-button-pip-opposite-sml: $button-sml * 2 !default;
|
||||||
|
$dropdown-button-pip-top-sml: -$button-sml / 2 + emCalc(1px) !default;
|
||||||
|
|
||||||
|
// We use these to style medium dropdown buttons
|
||||||
|
$dropdown-button-padding-med: $button-med * 4 + emCalc(3px) !default;
|
||||||
|
$dropdown-button-pip-size-med: $button-med - emCalc(3px) !default;
|
||||||
|
$dropdown-button-pip-opposite-med: $button-med * 2 !default;
|
||||||
|
$dropdown-button-pip-top-med: -$button-med / 2 + emCalc(2px) !default;
|
||||||
|
|
||||||
|
// We use these to style large dropdown buttons
|
||||||
|
$dropdown-button-padding-lrg: $button-lrg * 4 !default;
|
||||||
|
$dropdown-button-pip-size-lrg: $button-lrg - emCalc(6px) !default;
|
||||||
|
$dropdown-button-pip-opposite-lrg: $button-lrg + emCalc(12px) !default;
|
||||||
|
$dropdown-button-pip-top-lrg: -$button-lrg / 2 + emCalc(3px) !default;
|
||||||
|
|
||||||
|
//
|
||||||
|
// Dropdown Button Mixin
|
||||||
|
//
|
||||||
|
|
||||||
|
// We use this mixin to build off of the button mixin and add dropdown button styles
|
||||||
|
@mixin dropdown-button($padding:medium, $pip-color:#fff, $base-style:true) {
|
||||||
|
|
||||||
|
// We add in base styles, but they can be negated by setting to 'false'.
|
||||||
|
@if $base-style {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
// This creates the base styles for the triangle pip
|
||||||
|
&:before {
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
display: block;
|
||||||
|
border-style: solid;
|
||||||
|
border-color: $dropdown-button-pip-color transparent transparent transparent;
|
||||||
|
top: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// If we're dealing with tiny buttons, use these styles
|
||||||
|
@if $padding == tiny {
|
||||||
|
padding-#{$opposite-direction}: $dropdown-button-padding-tny;
|
||||||
|
&:before {
|
||||||
|
border-width: $dropdown-button-pip-size-tny;
|
||||||
|
#{$opposite-direction}: $dropdown-button-pip-opposite-tny;
|
||||||
|
margin-top: $dropdown-button-pip-top-tny;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// If we're dealing with small buttons, use these styles
|
||||||
|
@if $padding == small {
|
||||||
|
padding-#{$opposite-direction}: $dropdown-button-padding-sml;
|
||||||
|
&:before {
|
||||||
|
border-width: $dropdown-button-pip-size-sml;
|
||||||
|
#{$opposite-direction}: $dropdown-button-pip-opposite-sml;
|
||||||
|
margin-top: $dropdown-button-pip-top-sml;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// If we're dealing with default (medium) buttons, use these styles
|
||||||
|
@if $padding == medium {
|
||||||
|
padding-#{$opposite-direction}: $dropdown-button-padding-med;
|
||||||
|
&:before {
|
||||||
|
border-width: $dropdown-button-pip-size-med;
|
||||||
|
#{$opposite-direction}: $dropdown-button-pip-opposite-med;
|
||||||
|
margin-top: $dropdown-button-pip-top-med;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// If we're dealing with large buttons, use these styles
|
||||||
|
@if $padding == large {
|
||||||
|
padding-#{$opposite-direction}: $dropdown-button-padding-lrg;
|
||||||
|
&:before {
|
||||||
|
border-width: $dropdown-button-pip-size-lrg;
|
||||||
|
#{$opposite-direction}: $dropdown-button-pip-opposite-lrg;
|
||||||
|
margin-top: $dropdown-button-pip-top-lrg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// We can control the pip color. We didn't use logic in this case, just set it and forget it.
|
||||||
|
@if $pip-color {
|
||||||
|
&:before { border-color: $pip-color transparent transparent transparent; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@if $include-html-button-classes {
|
||||||
|
|
||||||
|
/* Dropdown Button */
|
||||||
|
.dropdown.button { @include dropdown-button;
|
||||||
|
&.tiny { @include dropdown-button(tiny,$base-style:false); }
|
||||||
|
&.small { @include dropdown-button(small,$base-style:false); }
|
||||||
|
&.large { @include dropdown-button(large,$base-style:false); }
|
||||||
|
&.secondary:before { border-color: $dropdown-button-pip-color-alt transparent transparent transparent; }
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
145
content/css/zurb-foundation/foundation/components/_dropdown.scss
Normal file
|
@ -0,0 +1,145 @@
|
||||||
|
//
|
||||||
|
// Dropdown Variables
|
||||||
|
//
|
||||||
|
|
||||||
|
// We use these to controls height and width styles.
|
||||||
|
$f-dropdown-max-width: 200px !default;
|
||||||
|
$f-dropdown-height: auto !default;
|
||||||
|
$f-dropdown-max-height: none !default;
|
||||||
|
$f-dropdown-margin-top: 2px !default;
|
||||||
|
|
||||||
|
// We use this to control the background color
|
||||||
|
$f-dropdown-bg: #fff !default;
|
||||||
|
|
||||||
|
// We use this to set the border styles for dropdowns.
|
||||||
|
$f-dropdown-border-style: solid !default;
|
||||||
|
$f-dropdown-border-width: 1px !default;
|
||||||
|
$f-dropdown-border-color: darken(#fff, 20%) !default;
|
||||||
|
|
||||||
|
// We use these to style the triangle pip.
|
||||||
|
$f-dropdown-triangle-size: 6px !default;
|
||||||
|
$f-dropdown-triangle-color: #fff !default;
|
||||||
|
$f-dropdown-triangle-side-offset: 10px !default;
|
||||||
|
|
||||||
|
// We use these to control styles for the list elements.
|
||||||
|
$f-dropdown-list-style: none !default;
|
||||||
|
$f-dropdown-font-color: #555 !default;
|
||||||
|
$f-dropdown-font-size: emCalc(14px) !default;
|
||||||
|
$f-dropdown-list-padding: emCalc(5px) emCalc(10px) !default;
|
||||||
|
$f-dropdown-line-height: emCalc(18px) !default;
|
||||||
|
$f-dropdown-list-hover-bg: #eeeeee !default;
|
||||||
|
$dropdown-mobile-default-float: 0 !default;
|
||||||
|
|
||||||
|
// We use this to control the styles for when the dropdown has custom content.
|
||||||
|
$f-dropdown-content-padding: emCalc(20px) !default;
|
||||||
|
|
||||||
|
//
|
||||||
|
// Dropdown Mixins
|
||||||
|
//
|
||||||
|
|
||||||
|
// NOTE: Make default max-width change between list and content types. Can add more width with classes, maybe .small, .medium, .large, etc.;
|
||||||
|
|
||||||
|
// We use this to style the dropdown container element.
|
||||||
|
@mixin dropdown-container($content:list, $triangle:true, $max-width:$f-dropdown-max-width) {
|
||||||
|
position: absolute;
|
||||||
|
top: -9999px;
|
||||||
|
list-style: $f-dropdown-list-style;
|
||||||
|
|
||||||
|
*:first-child { margin-top: 0; }
|
||||||
|
*:last-child { margin-bottom: 0; }
|
||||||
|
|
||||||
|
@if $content == list {
|
||||||
|
width: 100%;
|
||||||
|
max-height: $f-dropdown-max-height;
|
||||||
|
height: $f-dropdown-height;
|
||||||
|
background: $f-dropdown-bg;
|
||||||
|
border: $f-dropdown-border-style $f-dropdown-border-width $f-dropdown-border-color;
|
||||||
|
font-size: $em-base;
|
||||||
|
z-index: 99;
|
||||||
|
}
|
||||||
|
@else if $content == content {
|
||||||
|
padding: $f-dropdown-content-padding;
|
||||||
|
width: 100%;
|
||||||
|
height: $f-dropdown-height;
|
||||||
|
max-height: $f-dropdown-max-height;
|
||||||
|
background: $f-dropdown-bg;
|
||||||
|
border: $f-dropdown-border-style $f-dropdown-border-width $f-dropdown-border-color;
|
||||||
|
font-size: $em-base;
|
||||||
|
z-index: 99;
|
||||||
|
}
|
||||||
|
|
||||||
|
@if $triangle {
|
||||||
|
margin-top: $f-dropdown-margin-top;
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
@include css-triangle($f-dropdown-triangle-size, $f-dropdown-triangle-color, bottom);
|
||||||
|
position: absolute;
|
||||||
|
top: -($f-dropdown-triangle-size * 2);
|
||||||
|
#{$default-float}: $f-dropdown-triangle-side-offset;
|
||||||
|
z-index: 99;
|
||||||
|
}
|
||||||
|
&:after {
|
||||||
|
@include css-triangle($f-dropdown-triangle-size + 1, $f-dropdown-border-color, bottom);
|
||||||
|
position: absolute;
|
||||||
|
top: -(($f-dropdown-triangle-size + 1) * 2);
|
||||||
|
#{$default-float}: $f-dropdown-triangle-side-offset - 1;
|
||||||
|
z-index: 98;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.right:before {
|
||||||
|
left: auto;
|
||||||
|
right: $f-dropdown-triangle-side-offset;
|
||||||
|
}
|
||||||
|
&.right:after {
|
||||||
|
left: auto;
|
||||||
|
right: $f-dropdown-triangle-side-offset - 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@if $max-width { max-width: $max-width; }
|
||||||
|
@else { max-width: $f-dropdown-max-width; }
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// We use this to style the list elements or content inside the dropdown.
|
||||||
|
@mixin dropdown-style {
|
||||||
|
font-size: $f-dropdown-font-size;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: $f-dropdown-list-padding;
|
||||||
|
line-height: $f-dropdown-line-height;
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus { background: $f-dropdown-list-hover-bg; }
|
||||||
|
|
||||||
|
a { color: $f-dropdown-font-color; }
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@if $include-html-nav-classes {
|
||||||
|
|
||||||
|
@media only screen and (max-width: 767px) {
|
||||||
|
.f-dropdown {
|
||||||
|
max-width: 100%;
|
||||||
|
#{$default-float}: $dropdown-mobile-default-float;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Foundation Dropdowns */
|
||||||
|
.f-dropdown {
|
||||||
|
@include dropdown-container(content);
|
||||||
|
// max-width: none;
|
||||||
|
|
||||||
|
li { @include dropdown-style; }
|
||||||
|
|
||||||
|
// You can also put custom content in these dropdowns
|
||||||
|
&.content { @include dropdown-container(content, $triangle:false); }
|
||||||
|
|
||||||
|
// Sizes
|
||||||
|
&.tiny { max-width: 200px; }
|
||||||
|
&.small { max-width: 300px; }
|
||||||
|
&.medium { max-width: 500px; }
|
||||||
|
&.large { max-width: 800px; }
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -0,0 +1,45 @@
|
||||||
|
//
|
||||||
|
// Flex Video Variables
|
||||||
|
//
|
||||||
|
|
||||||
|
// We use these to control video container padding and margins
|
||||||
|
$flex-video-padding-top: emCalc(25px) !default;
|
||||||
|
$flex-video-padding-bottom: 67.5% !default;
|
||||||
|
$flex-video-margin-bottom: emCalc(16px) !default;
|
||||||
|
|
||||||
|
// We use this to control widescreen bottom padding
|
||||||
|
$flex-video-widescreen-padding-bottom: 57.25% !default;
|
||||||
|
|
||||||
|
//
|
||||||
|
// Flex Video Mixins
|
||||||
|
//
|
||||||
|
|
||||||
|
@mixin flex-video-container {
|
||||||
|
position: relative;
|
||||||
|
padding-top: $flex-video-padding-top;
|
||||||
|
padding-bottom: $flex-video-padding-bottom;
|
||||||
|
height: 0;
|
||||||
|
margin-bottom: $flex-video-margin-bottom;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
&.widescreen { padding-bottom: $flex-video-widescreen-padding-bottom; }
|
||||||
|
&.vimeo { padding-top: 0; }
|
||||||
|
|
||||||
|
iframe,
|
||||||
|
object,
|
||||||
|
embed,
|
||||||
|
video {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
#{$default-float}: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@if $include-html-media-classes {
|
||||||
|
|
||||||
|
/* Flex Video */
|
||||||
|
.flex-video { @include flex-video-container; }
|
||||||
|
|
||||||
|
}
|
337
content/css/zurb-foundation/foundation/components/_forms.scss
Normal file
|
@ -0,0 +1,337 @@
|
||||||
|
//
|
||||||
|
// Form Variables
|
||||||
|
//
|
||||||
|
|
||||||
|
// We use this to set the base for lots of form spacing and positioning styles
|
||||||
|
$form-spacing: emCalc(16px) !default;
|
||||||
|
|
||||||
|
// We use these to style the labels in different ways
|
||||||
|
$label-pointer: pointer !default;
|
||||||
|
$label-font-size: emCalc(14px) !default;
|
||||||
|
$label-font-weight: 500 !default;
|
||||||
|
$label-font-color: lighten(#000, 30%) !default;
|
||||||
|
$label-bottom-margin: emCalc(3px) !default;
|
||||||
|
$input-font-family: inherit !default;
|
||||||
|
$input-font-color: rgba(0,0,0,0.75) !default;
|
||||||
|
$input-font-size: emCalc(14px) !default;
|
||||||
|
$input-bg-color: #fff !default;
|
||||||
|
$input-focus-bg-color: darken(#fff, 2%) !default;
|
||||||
|
$input-border-color: darken(#fff, 20%) !default;
|
||||||
|
$input-focus-border-color: darken(#fff, 40%) !default;
|
||||||
|
$input-border-style: solid !default;
|
||||||
|
$input-border-width: 1px !default;
|
||||||
|
$input-disabled-bg: #ddd !default;
|
||||||
|
$input-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1) !default;
|
||||||
|
|
||||||
|
// We use these to style the fieldset border and spacing.
|
||||||
|
$fieldset-border-style: solid !default;
|
||||||
|
$fieldset-border-width: 1px !default;
|
||||||
|
$fieldset-border-color: #ddd !default;
|
||||||
|
$fieldset-padding: emCalc(20px) !default;
|
||||||
|
$fieldset-margin: emCalc(18px) 0 !default;
|
||||||
|
|
||||||
|
// We use these to style the legends when you use them
|
||||||
|
$legend-bg: #fff !default;
|
||||||
|
$legend-font-weight: bold !default;
|
||||||
|
$legend-padding: 0 emCalc(3px) !default;
|
||||||
|
|
||||||
|
// We use these to style the prefix and postfix input elements
|
||||||
|
$input-prefix-bg: darken(#fff, 5%) !default;
|
||||||
|
$input-prefix-border-color: darken(#fff, 20%) !default;
|
||||||
|
$input-prefix-border-size: 1px !default;
|
||||||
|
$input-prefix-border-type: solid !default;
|
||||||
|
$input-prefix-overflow: hidden !default;
|
||||||
|
$input-prefix-font-color: #333 !default;
|
||||||
|
$input-prefix-font-color-alt: #fff !default;
|
||||||
|
|
||||||
|
// We use these to style the error states for inputs and labels
|
||||||
|
$input-error-message-padding: emCalc(6px) emCalc(4px) !default;
|
||||||
|
$input-error-message-top: -($form-spacing) - emCalc(5px) !default;
|
||||||
|
$input-error-message-font-size: emCalc(12px) !default;
|
||||||
|
$input-error-message-font-weight: bold !default;
|
||||||
|
$input-error-message-font-color: #fff !default;
|
||||||
|
$input-error-message-font-color-alt: #333 !default;
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Form Mixins
|
||||||
|
//
|
||||||
|
|
||||||
|
// We use this mixin to give us form styles for rows inside of forms
|
||||||
|
@mixin form-row-base {
|
||||||
|
.row { margin: 0 -$form-spacing / 2;
|
||||||
|
|
||||||
|
.column,
|
||||||
|
.columns { padding: 0 $form-spacing / 2; }
|
||||||
|
|
||||||
|
// Use this to collapse the margins of a form row
|
||||||
|
&.collapse { margin: 0;
|
||||||
|
|
||||||
|
.column,
|
||||||
|
.columns { padding: 0; }
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
input.column,
|
||||||
|
input.columns { padding-#{$default-float}: $form-spacing / 2; }
|
||||||
|
}
|
||||||
|
|
||||||
|
// We use this mixin to give all basic form elements their style
|
||||||
|
@mixin form-element() {
|
||||||
|
background-color: $input-bg-color;
|
||||||
|
font-family: $input-font-family;
|
||||||
|
border: $input-border-width $input-border-style $input-border-color;
|
||||||
|
-webkit-box-shadow: $input-box-shadow;
|
||||||
|
box-shadow: $input-box-shadow;
|
||||||
|
color: $input-font-color;
|
||||||
|
display: block;
|
||||||
|
font-size: $input-font-size;
|
||||||
|
margin: 0 0 $form-spacing 0;
|
||||||
|
padding: $form-spacing / 2;
|
||||||
|
height: emCalc(13px) + ($form-spacing * 1.5);
|
||||||
|
width: 100%;
|
||||||
|
@include box-sizing(border-box);
|
||||||
|
|
||||||
|
// Basic focus styles
|
||||||
|
&:focus {
|
||||||
|
background: $input-focus-bg-color;
|
||||||
|
border-color: $input-focus-border-color;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Disabled background input background color
|
||||||
|
&[disabled] { background-color: $input-disabled-bg; }
|
||||||
|
}
|
||||||
|
|
||||||
|
// We use this mixin to create form labels
|
||||||
|
@mixin form-label($alignment:false, $base-style:true) {
|
||||||
|
|
||||||
|
// Control whether or not the base styles come through.
|
||||||
|
@if $base-style {
|
||||||
|
font-size: $label-font-size;
|
||||||
|
color: $label-font-color;
|
||||||
|
cursor: $label-pointer;
|
||||||
|
display: block;
|
||||||
|
font-weight: $label-font-weight;
|
||||||
|
margin-bottom: $label-bottom-margin;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Alignment options
|
||||||
|
@if $alignment == right {
|
||||||
|
float: none;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
@else if $alignment == inline {
|
||||||
|
margin: 0 0 $form-spacing 0;
|
||||||
|
padding: $form-spacing / 2 + emCalc($input-border-width * 2) 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// We use this mixin to create postfix/prefix form Labels
|
||||||
|
@mixin prefix-postfix-base {
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
text-align: center;
|
||||||
|
width: 100%;
|
||||||
|
padding-top: 0;
|
||||||
|
padding-bottom: 0;
|
||||||
|
border-style: $input-prefix-border-type;
|
||||||
|
border-width: $input-prefix-border-size;
|
||||||
|
overflow: $input-prefix-overflow;
|
||||||
|
font-size: $label-font-size;
|
||||||
|
height: ($label-font-size + ($form-spacing * 1.5) - emCalc(1px));
|
||||||
|
line-height: ($label-font-size + ($form-spacing * 1.5) - emCalc(1px));
|
||||||
|
}
|
||||||
|
|
||||||
|
// We use this mixin to create prefix label styles
|
||||||
|
@mixin prefix($bg:$input-prefix-bg,$is-button:false) {
|
||||||
|
|
||||||
|
@if $bg {
|
||||||
|
$bg-lightness: lightness($bg);
|
||||||
|
background: $bg;
|
||||||
|
border-color: darken($bg, 10%);
|
||||||
|
border-#{$opposite-direction}: none;
|
||||||
|
|
||||||
|
// Control the font color based on background brightness
|
||||||
|
@if $bg-lightness > 70% or $bg == yellow { color: $input-prefix-font-color; }
|
||||||
|
@else { color: $input-prefix-font-color-alt; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@if $is-button {
|
||||||
|
padding-#{$default-float}: 0;
|
||||||
|
padding-#{$opposite-direction}: 0;
|
||||||
|
padding-top: 0;
|
||||||
|
padding-bottom: 0;
|
||||||
|
text-align: center;
|
||||||
|
line-height: emCalc(34px);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// We use this mixin to create postfix label styles
|
||||||
|
@mixin postfix($bg:$input-prefix-bg, $is-button:false) {
|
||||||
|
|
||||||
|
@if $bg {
|
||||||
|
$bg-lightness: lightness($bg);
|
||||||
|
background: $bg;
|
||||||
|
border-color: darken($bg, 15%);
|
||||||
|
border-#{$default-float}: none;
|
||||||
|
|
||||||
|
// Control the font color based on background brightness
|
||||||
|
@if $bg-lightness > 70% or $bg == yellow { color: $input-prefix-font-color; }
|
||||||
|
@else { color: $input-prefix-font-color-alt; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@if $is-button {
|
||||||
|
padding-#{$default-float}: 0;
|
||||||
|
padding-#{$opposite-direction}: 0;
|
||||||
|
padding-top: 0;
|
||||||
|
padding-bottom: 0;
|
||||||
|
text-align: center;
|
||||||
|
line-height: emCalc(34px);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// We use this mixin to style fieldsets
|
||||||
|
@mixin fieldset {
|
||||||
|
border: $fieldset-border-style $fieldset-border-width $fieldset-border-color;
|
||||||
|
padding: $fieldset-padding;
|
||||||
|
margin: $fieldset-margin;
|
||||||
|
|
||||||
|
// and legend styles
|
||||||
|
legend {
|
||||||
|
font-weight: $legend-font-weight;
|
||||||
|
background: $legend-bg;
|
||||||
|
padding: $legend-padding;
|
||||||
|
margin: 0;
|
||||||
|
margin-#{$default-float}: emCalc(-3px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// We use this mixin to control border and background color of error inputs
|
||||||
|
@mixin form-error-color($color:$alert-color) {
|
||||||
|
border-color: $color;
|
||||||
|
background-color: rgba($color, 0.1);
|
||||||
|
|
||||||
|
// Go back to normal on focus
|
||||||
|
&:focus {
|
||||||
|
background: $input-focus-bg-color;
|
||||||
|
border-color: $input-focus-border-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// We use this simple mixin to style labels for error inputs
|
||||||
|
@mixin form-label-error-color($color:$alert-color) { color: $color; }
|
||||||
|
|
||||||
|
// We use this mixin to create error message styles
|
||||||
|
@mixin form-error-message($bg:$alert-color) {
|
||||||
|
display: block;
|
||||||
|
padding: $input-error-message-padding;
|
||||||
|
margin-top: $input-error-message-top;
|
||||||
|
margin-bottom: $form-spacing;
|
||||||
|
font-size: $input-error-message-font-size;
|
||||||
|
font-weight: $input-error-message-font-weight;
|
||||||
|
|
||||||
|
// We can control the text color based on the brightness of the background.
|
||||||
|
$bg-lightness: lightness($bg);
|
||||||
|
background: $bg;
|
||||||
|
@if $bg-lightness < 70% or $bg == yellow { color: $input-error-message-font-color; }
|
||||||
|
@else { color: $input-error-message-font-color-alt; }
|
||||||
|
}
|
||||||
|
|
||||||
|
// Only include these classes if the variable is true, otherwise they'll be left out.
|
||||||
|
@if $include-html-form-classes {
|
||||||
|
/* Standard Forms */
|
||||||
|
form { margin: 0 0 $form-spacing; }
|
||||||
|
|
||||||
|
/* Using forms within rows, we need to set some defaults */
|
||||||
|
form .row { @include form-row-base; }
|
||||||
|
|
||||||
|
/* Label Styles */
|
||||||
|
label { @include form-label;
|
||||||
|
&.right { @include form-label(right,false); }
|
||||||
|
&.inline { @include form-label(inline,false); }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Attach elements to the beginning or end of an input */
|
||||||
|
.prefix,
|
||||||
|
.postfix { @include prefix-postfix-base; }
|
||||||
|
|
||||||
|
/* Adjust padding, alignment and radius if pre/post element is a button */
|
||||||
|
.postfix.button { @include button-size(false,false,false); @include postfix(false,true); }
|
||||||
|
.prefix.button { @include button-size(false,false,false); @include prefix(false,true); }
|
||||||
|
.prefix.button.radius { @include side-radius($default-float, $global-radius); }
|
||||||
|
.postfix.button.radius { @include side-radius($opposite-direction, $global-radius); }
|
||||||
|
.prefix.button.round { @include side-radius($default-float, 1000px); }
|
||||||
|
.postfix.button.round { @include side-radius($opposite-direction, 1000px); }
|
||||||
|
|
||||||
|
/* Separate prefix and postfix styles when on span so buttons keep their own */
|
||||||
|
span.prefix { @include prefix();
|
||||||
|
&.radius { @include side-radius($default-float, $global-radius); }
|
||||||
|
}
|
||||||
|
span.postfix { @include postfix();
|
||||||
|
&.radius { @include side-radius($opposite-direction, $global-radius); }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Input groups will automatically style first and last elements of the group */
|
||||||
|
.input-group {
|
||||||
|
&.radius {
|
||||||
|
&>*:first-child, &>*:first-child * {
|
||||||
|
@include side-radius($default-float, $global-radius);
|
||||||
|
}
|
||||||
|
&>*:last-child, &>*:last-child * {
|
||||||
|
@include side-radius($opposite-direction, $global-radius);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.round {
|
||||||
|
&>*:first-child, &>*:first-child * {
|
||||||
|
@include side-radius($default-float, $button-round);
|
||||||
|
}
|
||||||
|
&>*:last-child, &>*:last-child * {
|
||||||
|
@include side-radius($opposite-direction, $button-round);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* We use this to get basic styling on all basic form elements */
|
||||||
|
input[type="text"],
|
||||||
|
input[type="password"],
|
||||||
|
input[type="date"],
|
||||||
|
input[type="datetime"],
|
||||||
|
input[type="datetime-local"],
|
||||||
|
input[type="month"],
|
||||||
|
input[type="week"],
|
||||||
|
input[type="email"],
|
||||||
|
input[type="number"],
|
||||||
|
input[type="search"],
|
||||||
|
input[type="tel"],
|
||||||
|
input[type="time"],
|
||||||
|
input[type="url"],
|
||||||
|
textarea {
|
||||||
|
@include form-element;
|
||||||
|
@include single-transition(all, 0.15s, linear);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* We add basic fieldset styling */
|
||||||
|
fieldset {
|
||||||
|
@include fieldset;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Error Handling */
|
||||||
|
.error input,
|
||||||
|
input.error,
|
||||||
|
.error textarea,
|
||||||
|
textarea.error {
|
||||||
|
@include form-error-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error label,
|
||||||
|
label.error { @include form-label-error-color; }
|
||||||
|
|
||||||
|
.error small,
|
||||||
|
small.error {
|
||||||
|
@include form-error-message;
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,70 @@
|
||||||
|
// Set box-sizing globally to handle padding and border widths
|
||||||
|
*,
|
||||||
|
*:before,
|
||||||
|
*:after {
|
||||||
|
@include box-sizing(border-box);
|
||||||
|
}
|
||||||
|
|
||||||
|
html,
|
||||||
|
body { font-size: $base-font-size; }
|
||||||
|
|
||||||
|
// Default body styles
|
||||||
|
body {
|
||||||
|
background: $body-bg;
|
||||||
|
color: $body-font-color;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
font-family: $body-font-family;
|
||||||
|
font-weight: $body-font-weight;
|
||||||
|
font-style: $body-font-style;
|
||||||
|
line-height: 1;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Override outline from normalize, we don't like it
|
||||||
|
a:focus { outline: none; }
|
||||||
|
|
||||||
|
// Grid Defaults to get images and embeds to work properly
|
||||||
|
img,
|
||||||
|
object,
|
||||||
|
embed { max-width: 100%; height: auto; }
|
||||||
|
|
||||||
|
object,
|
||||||
|
embed { height: 100%; }
|
||||||
|
img { -ms-interpolation-mode: bicubic; }
|
||||||
|
|
||||||
|
#map_canvas,
|
||||||
|
.map_canvas {
|
||||||
|
img,
|
||||||
|
embed,
|
||||||
|
object { max-width: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Miscellaneous useful HTML classes
|
||||||
|
.left { float: left !important; }
|
||||||
|
.right { float: right !important; }
|
||||||
|
.text-left { text-align: left !important; }
|
||||||
|
.text-right { text-align: right !important; }
|
||||||
|
.text-center { text-align: center !important; }
|
||||||
|
.text-justify { text-align: justify !important; }
|
||||||
|
.hide { display: none; }
|
||||||
|
|
||||||
|
// Font smoothing
|
||||||
|
// Antialiased font smoothing works best for light text on a dark background.
|
||||||
|
// Apply to single elements instead of globally to body.
|
||||||
|
// Note this only applies to webkit-based desktop browsers on the Mac.
|
||||||
|
.antialiased { -webkit-font-smoothing: antialiased; }
|
||||||
|
|
||||||
|
// Get rid of gap under images by making them display: inline-block; by default
|
||||||
|
img { display: inline-block; }
|
||||||
|
|
||||||
|
//
|
||||||
|
// Global resets for forms
|
||||||
|
//
|
||||||
|
|
||||||
|
// Make sure textarea takes on height automatically
|
||||||
|
textarea { height: auto; min-height: 50px; }
|
||||||
|
|
||||||
|
// Make select elements 100% width by default
|
||||||
|
select { width: 100%; }
|
168
content/css/zurb-foundation/foundation/components/_grid.scss
Normal file
|
@ -0,0 +1,168 @@
|
||||||
|
//
|
||||||
|
// Grid Variables
|
||||||
|
//
|
||||||
|
$row-width: emCalc(1000px) !default;
|
||||||
|
$column-gutter: emCalc(30px) !default;
|
||||||
|
$total-columns: 12 !default;
|
||||||
|
|
||||||
|
//
|
||||||
|
// Grid Mixins
|
||||||
|
//
|
||||||
|
|
||||||
|
// For creating container, nested, and collapsed rows.
|
||||||
|
@mixin grid-row($behavior: false) {
|
||||||
|
|
||||||
|
// use @include grid-row(nest); to include a nested row
|
||||||
|
@if $behavior == nest {
|
||||||
|
width: auto;
|
||||||
|
margin-#{$default-float}: -($column-gutter/2);
|
||||||
|
margin-#{$opposite-direction}: -($column-gutter/2);
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 0;
|
||||||
|
max-width: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
// use @include grid-row(collapse); to collapsed a container row margins
|
||||||
|
@else if $behavior == collapse {
|
||||||
|
width: 100%;
|
||||||
|
margin: 0;
|
||||||
|
max-width: $row-width;
|
||||||
|
}
|
||||||
|
|
||||||
|
// use @include grid-row(nest-collapse); to collapse outer margins on a nested row
|
||||||
|
@else if $behavior == nest-collapse {
|
||||||
|
width: auto;
|
||||||
|
margin: 0;
|
||||||
|
max-width: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
// use @include grid-row; to use a container row
|
||||||
|
@else {
|
||||||
|
width: 100%;
|
||||||
|
margin-#{$default-float}: auto;
|
||||||
|
margin-#{$opposite-direction}: auto;
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 0;
|
||||||
|
max-width: $row-width;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Clearfix for all rows
|
||||||
|
@include clearfix();
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// For creating columns - @include these inside a media query to control small vs. large grid layouts
|
||||||
|
@mixin grid-column($columns:false, $last-column:false, $center:false, $offset:false, $push:false, $pull:false, $collapse:false, $float:$default-float) {
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
// Gutter padding whenever a column isn't set to collapse
|
||||||
|
@if $collapse == false {
|
||||||
|
padding-#{$default-float}: $column-gutter / 2;
|
||||||
|
padding-#{$opposite-direction}: $column-gutter / 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
// If a column number is given, calculate width
|
||||||
|
@if $columns {
|
||||||
|
width: gridCalc($columns, $total-columns);
|
||||||
|
|
||||||
|
// If last column, float naturally instead of to the right
|
||||||
|
@if $last-column { float: $opposite-direction; }
|
||||||
|
|
||||||
|
// if collapsed, get rid of gutter padding
|
||||||
|
@else if $collapse { padding-#{$default-float}: 0; padding-#{$opposite-direction}: 0; }
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
@if $collapse { padding-#{$default-float}: 0; padding-#{$opposite-direction}: 0; }
|
||||||
|
|
||||||
|
// If offset, calculate appropriate margins
|
||||||
|
@if $offset { margin-#{$default-float}: gridCalc($offset, $total-columns); }
|
||||||
|
|
||||||
|
// Source Ordering, adds left/right depending on which you use.
|
||||||
|
@if $push { #{$default-float}: gridCalc($push, $total-columns); #{$opposite-direction}: auto; }
|
||||||
|
@if $pull { #{$opposite-direction}: gridCalc($pull, $total-columns); #{$default-float}: auto; }
|
||||||
|
|
||||||
|
// If centered, get rid of float and add appropriate margins
|
||||||
|
@if $center {
|
||||||
|
margin-#{$default-float}: auto;
|
||||||
|
margin-#{$opposite-direction}: auto;
|
||||||
|
float: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
@if $float {
|
||||||
|
@if $float == left or true { float: $default-float; }
|
||||||
|
@else if $float == right { float: $opposite-direction; }
|
||||||
|
@else { float: none; }
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Grid HTML Classes */
|
||||||
|
@if $include-html-grid-classes {
|
||||||
|
|
||||||
|
.row {
|
||||||
|
@include grid-row;
|
||||||
|
|
||||||
|
.column,
|
||||||
|
.columns { @include grid-column($columns:$total-columns); }
|
||||||
|
|
||||||
|
&.collapse {
|
||||||
|
.column,
|
||||||
|
.columns { @include grid-column($collapse:true); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.row { @include grid-row($behavior:nest);
|
||||||
|
&.collapse { @include grid-row($behavior:nest-collapse); }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen {
|
||||||
|
|
||||||
|
.row .column,
|
||||||
|
.row .columns { @include grid-column($columns:false); }
|
||||||
|
|
||||||
|
@for $i from 1 through $total-columns {
|
||||||
|
.row .small#{-$i} { @include grid-column($columns:$i,$collapse:null,$float:false); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@for $i from 1 through $total-columns - 2 {
|
||||||
|
.row .small-offset-#{$i} { @include grid-column($offset:$i, $collapse:null,$float:false); }
|
||||||
|
}
|
||||||
|
|
||||||
|
[class*="column"] + [class*="column"]:last-child { float: $opposite-direction; }
|
||||||
|
[class*="column"] + [class*="column"].end { float: $default-float; }
|
||||||
|
|
||||||
|
.column.small-centered,
|
||||||
|
.columns.small-centered { @include grid-column($center:true, $collapse:null, $float:false); }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Styles for screens that are atleast 768px; */
|
||||||
|
@media #{$small} {
|
||||||
|
|
||||||
|
@for $i from 1 through $total-columns {
|
||||||
|
.row .large#{-$i} { @include grid-column($columns:$i,$collapse:null,$float:false); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@for $i from 1 through $total-columns - 2 {
|
||||||
|
.row .large-offset-#{$i} { @include grid-column($offset:$i, $collapse:null,$float:false); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@for $i from 2 through $total-columns - 2 {
|
||||||
|
.push#{-$i} { @include grid-column($push:$i, $collapse:null, $float:false); }
|
||||||
|
.pull#{-$i} { @include grid-column($pull:$i, $collapse:null, $float:false); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@for $i from 2 through $total-columns - 2 {
|
||||||
|
.small-push#{-$i} { #{$default-float}: inherit; }
|
||||||
|
.small-pull#{-$i} { #{$opposite-direction}: inherit; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.column.large-centered,
|
||||||
|
.columns.large-centered { @include grid-column($center:true, $collapse:null, $float:false); }
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -0,0 +1,52 @@
|
||||||
|
//
|
||||||
|
// Inline List Variables
|
||||||
|
//
|
||||||
|
|
||||||
|
// We use this to control the margins and padding of the inline list.
|
||||||
|
$inline-list-top-margin: 0 !default;
|
||||||
|
$inline-list-opposite-margin: 0 !default;
|
||||||
|
$inline-list-bottom-margin: emCalc(17px) !default;
|
||||||
|
$inline-list-default-float-margin: emCalc(-22px) !default;
|
||||||
|
|
||||||
|
$inline-list-padding: 0 !default;
|
||||||
|
|
||||||
|
// We use this to control the overflow of the inline list.
|
||||||
|
$inline-list-overflow: hidden !default;
|
||||||
|
|
||||||
|
// We use this to control the list items
|
||||||
|
$inline-list-display: block !default;
|
||||||
|
|
||||||
|
// We use this to control any elments within list items
|
||||||
|
$inline-list-children-display: block !default;
|
||||||
|
|
||||||
|
//
|
||||||
|
// Inline List Mixins
|
||||||
|
//
|
||||||
|
|
||||||
|
// We use this mixin to create inline lists
|
||||||
|
@mixin inline-list {
|
||||||
|
margin: $inline-list-top-margin auto $inline-list-bottom-margin auto;
|
||||||
|
margin-#{$default-float}: $inline-list-default-float-margin;
|
||||||
|
margin-#{$opposite-direction}: $inline-list-opposite-margin;
|
||||||
|
padding: $inline-list-padding;
|
||||||
|
list-style: none;
|
||||||
|
overflow: $inline-list-overflow;
|
||||||
|
|
||||||
|
& > li {
|
||||||
|
list-style: none;
|
||||||
|
float: $default-float;
|
||||||
|
margin-#{$default-float}: emCalc(22px);
|
||||||
|
display: $inline-list-display;
|
||||||
|
&>* { display: $inline-list-children-display; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@if $include-html-grid-classes {
|
||||||
|
|
||||||
|
/* Inline Lists */
|
||||||
|
.inline-list {
|
||||||
|
@include inline-list();
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
212
content/css/zurb-foundation/foundation/components/_joyride.scss
Normal file
|
@ -0,0 +1,212 @@
|
||||||
|
//
|
||||||
|
// Joyride Variables
|
||||||
|
//
|
||||||
|
|
||||||
|
// Controlling default Joyride styles
|
||||||
|
$joyride-tip-bg: rgb(0,0,0) !default;
|
||||||
|
$joyride-tip-default-width: 300px !default;
|
||||||
|
$joyride-tip-padding: emCalc(18px) emCalc(20px) emCalc(24px) !default;
|
||||||
|
$joyride-tip-border: solid 1px #555 !default;
|
||||||
|
$joyride-tip-radius: 4px !default;
|
||||||
|
$joyride-tip-position-offset: 22px !default;
|
||||||
|
|
||||||
|
// Here, we're setting the tip dont styles
|
||||||
|
$joyride-tip-font-color: #fff !default;
|
||||||
|
$joyride-tip-font-size: emCalc(14px) !default;
|
||||||
|
$joyride-tip-header-weight: bold !default;
|
||||||
|
|
||||||
|
// This changes the nub size
|
||||||
|
$joyride-tip-nub-size: 14px !default;
|
||||||
|
|
||||||
|
// This adjusts the styles for the timer when its enabled
|
||||||
|
$joyride-tip-timer-width: 50px !default;
|
||||||
|
$joyride-tip-timer-height: 3px !default;
|
||||||
|
$joyride-tip-timer-color: #666 !default;
|
||||||
|
|
||||||
|
// This changes up the styles for the close button
|
||||||
|
$joyride-tip-close-color: #777 !default;
|
||||||
|
$joyride-tip-close-size: 30px !default;
|
||||||
|
$joyride-tip-close-weight: normal !default;
|
||||||
|
|
||||||
|
// When Joyride is filling the screen, we use this style for the bg
|
||||||
|
$joyride-screenfill: rgba(0,0,0,0.5) !default;
|
||||||
|
|
||||||
|
|
||||||
|
// We decided not to make a mixin for this because it relies on predefined classes to work properly.
|
||||||
|
|
||||||
|
/* Foundation Joyride */
|
||||||
|
.joyride-list { display: none; }
|
||||||
|
|
||||||
|
/* Default styles for the container */
|
||||||
|
.joyride-tip-guide {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
background: $joyride-tip-bg;
|
||||||
|
color: $joyride-tip-font-color;
|
||||||
|
z-index: 101;
|
||||||
|
top: 0;
|
||||||
|
#{$default-float}: 2.5%;
|
||||||
|
font-family: inherit;
|
||||||
|
font-weight: normal;
|
||||||
|
width: 95%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lt-ie9 .joyride-tip-guide {
|
||||||
|
max-width:800px;
|
||||||
|
#{$default-float}: 50%;
|
||||||
|
margin-#{$default-float}:-400px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.joyride-content-wrapper {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
padding: $joyride-tip-padding;
|
||||||
|
|
||||||
|
.button { margin-bottom: 0 !important; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Add a little css triangle pip, older browser just miss out on the fanciness of it */
|
||||||
|
.joyride-tip-guide {
|
||||||
|
.joyride-nub {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
#{$default-float}: $joyride-tip-position-offset;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border: solid $joyride-tip-nub-size;
|
||||||
|
|
||||||
|
&.top {
|
||||||
|
border-color: $joyride-tip-bg;
|
||||||
|
border-top-color: transparent !important;
|
||||||
|
border-#{$default-float}-color: transparent !important;
|
||||||
|
border-#{$opposite-direction}-color: transparent !important;
|
||||||
|
top: -($joyride-tip-nub-size*2);
|
||||||
|
bottom: none;
|
||||||
|
}
|
||||||
|
&.bottom {
|
||||||
|
border-color: $joyride-tip-bg !important;
|
||||||
|
border-bottom-color: transparent !important;
|
||||||
|
border-#{$default-float}-color: transparent !important;
|
||||||
|
border-#{$opposite-direction}-color: transparent !important;
|
||||||
|
bottom: -($joyride-tip-nub-size*2);
|
||||||
|
bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.right { right: -($joyride-tip-nub-size*2); }
|
||||||
|
&.left { left: -($joyride-tip-nub-size*2); }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Typography */
|
||||||
|
.joyride-tip-guide h1,
|
||||||
|
.joyride-tip-guide h2,
|
||||||
|
.joyride-tip-guide h3,
|
||||||
|
.joyride-tip-guide h4,
|
||||||
|
.joyride-tip-guide h5,
|
||||||
|
.joyride-tip-guide h6 {
|
||||||
|
line-height: 1.25;
|
||||||
|
margin: 0;
|
||||||
|
font-weight: $joyride-tip-header-weight;
|
||||||
|
color: $joyride-tip-font-color;
|
||||||
|
}
|
||||||
|
.joyride-tip-guide p {
|
||||||
|
margin: 0 0 emCalc(18px) 0;
|
||||||
|
font-size: $joyride-tip-font-size;
|
||||||
|
line-height: 1.3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.joyride-timer-indicator-wrap {
|
||||||
|
width: $joyride-tip-timer-width;
|
||||||
|
height: $joyride-tip-timer-height;
|
||||||
|
border: $joyride-tip-border;
|
||||||
|
position: absolute;
|
||||||
|
#{$opposite-direction}: emCalc(17px);
|
||||||
|
bottom: emCalc(16px);
|
||||||
|
}
|
||||||
|
.joyride-timer-indicator {
|
||||||
|
display: block;
|
||||||
|
width: 0;
|
||||||
|
height: inherit;
|
||||||
|
background: $joyride-tip-timer-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.joyride-close-tip {
|
||||||
|
position: absolute;
|
||||||
|
#{$opposite-direction}: 12px;
|
||||||
|
top: 10px;
|
||||||
|
color: $joyride-tip-close-color !important;
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: $joyride-tip-close-size;
|
||||||
|
font-weight: $joyride-tip-close-weight;
|
||||||
|
line-height: .5 !important;
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus { color: #eee !important; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.joyride-modal-bg {
|
||||||
|
position: fixed;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
background: transparent;
|
||||||
|
background: $joyride-screenfill;
|
||||||
|
z-index: 100;
|
||||||
|
display: none;
|
||||||
|
top: 0;
|
||||||
|
#{$default-float}: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.joyride-expose-wrapper {
|
||||||
|
background-color: #ffffff;
|
||||||
|
position: absolute;
|
||||||
|
border-radius: 3px;
|
||||||
|
z-index: 102;
|
||||||
|
-moz-box-shadow: 0px 0px 30px #ffffff;
|
||||||
|
-webkit-box-shadow: 0px 0px 15px #ffffff;
|
||||||
|
box-shadow: 0px 0px 15px #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.joyride-expose-cover {
|
||||||
|
background: transparent;
|
||||||
|
border-radius: 3px;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 9999;
|
||||||
|
top: 0px;
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Styles for screens that are atleast 768px; */
|
||||||
|
@media #{$small} {
|
||||||
|
.joyride-tip-guide { width: $joyride-tip-default-width; #{$default-float}: inherit;
|
||||||
|
.joyride-nub {
|
||||||
|
&.bottom {
|
||||||
|
border-color: $joyride-tip-bg !important;
|
||||||
|
border-bottom-color: transparent !important;
|
||||||
|
border-#{$default-float}-color: transparent !important;
|
||||||
|
border-#{$opposite-direction}-color: transparent !important;
|
||||||
|
bottom: -($joyride-tip-nub-size*2);
|
||||||
|
bottom: none;
|
||||||
|
}
|
||||||
|
&.right {
|
||||||
|
border-color: $joyride-tip-bg !important;
|
||||||
|
border-top-color: transparent !important;
|
||||||
|
border-right-color: transparent !important; border-bottom-color: transparent !important;
|
||||||
|
top: $joyride-tip-position-offset;
|
||||||
|
bottom: none;
|
||||||
|
left: auto;
|
||||||
|
right: -($joyride-tip-nub-size*2);
|
||||||
|
}
|
||||||
|
&.left {
|
||||||
|
border-color: $joyride-tip-bg !important;
|
||||||
|
border-top-color: transparent !important;
|
||||||
|
border-left-color: transparent !important;
|
||||||
|
border-bottom-color: transparent !important;
|
||||||
|
top: $joyride-tip-position-offset;
|
||||||
|
left: -($joyride-tip-nub-size*2);
|
||||||
|
right: auto; bottom: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,56 @@
|
||||||
|
//
|
||||||
|
// Keystroke Variables
|
||||||
|
//
|
||||||
|
|
||||||
|
// We use these to control text styles.
|
||||||
|
$keystroke-font: "Consolas", "Menlo", "Courier", monospace !default;
|
||||||
|
$keystroke-font-size: emCalc(15px) !default;
|
||||||
|
$keystroke-font-color: #222 !default;
|
||||||
|
$keystroke-font-color-alt: #fff !default;
|
||||||
|
$keystroke-function-factor: 7% !default;
|
||||||
|
|
||||||
|
// We use this to control keystroke padding.
|
||||||
|
$keystroke-padding: emCalc(2px) emCalc(4px) emCalc(0px) !default;
|
||||||
|
|
||||||
|
// We use these to control background and border styles.
|
||||||
|
$keystroke-bg: darken(#fff, $keystroke-function-factor) !default;
|
||||||
|
$keystroke-border-style: solid !default;
|
||||||
|
$keystroke-border-width: 1px !default;
|
||||||
|
$keystroke-border-color: darken($keystroke-bg, $keystroke-function-factor) !default;
|
||||||
|
$keystroke-radius: $global-radius !default;
|
||||||
|
|
||||||
|
//
|
||||||
|
// Keystroke Mixins
|
||||||
|
//
|
||||||
|
|
||||||
|
// We use this mixin to create keystroke styles.
|
||||||
|
@mixin keystroke($bg:$keystroke-bg) {
|
||||||
|
// This find the lightness percentage of the background color.
|
||||||
|
$bg-lightness: lightness($bg);
|
||||||
|
|
||||||
|
background-color: $bg;
|
||||||
|
border-color: darken($bg, $keystroke-function-factor);
|
||||||
|
|
||||||
|
// We adjust the font color based on the brightness of the background.
|
||||||
|
@if $bg-lightness > 70% { color: $keystroke-font-color; }
|
||||||
|
@else { color: $keystroke-font-color-alt; }
|
||||||
|
|
||||||
|
border-style: $keystroke-border-style;
|
||||||
|
border-width: $keystroke-border-width;
|
||||||
|
margin: 0;
|
||||||
|
font-family: $keystroke-font;
|
||||||
|
font-size: $keystroke-font-size;
|
||||||
|
padding: $keystroke-padding;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@if $include-html-media-classes {
|
||||||
|
|
||||||
|
/* Keystroke Characters */
|
||||||
|
.keystroke,
|
||||||
|
kbd {
|
||||||
|
@include keystroke;
|
||||||
|
@include radius($keystroke-radius);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -0,0 +1,82 @@
|
||||||
|
//
|
||||||
|
// Label Variables
|
||||||
|
//
|
||||||
|
|
||||||
|
// We use these to style the labels
|
||||||
|
$label-padding: emCalc(3px) emCalc(10px) emCalc(4px) !default;
|
||||||
|
$label-radius: $global-radius !default;
|
||||||
|
|
||||||
|
// We use these to style the label text
|
||||||
|
$label-font-sizing: emCalc(14px) !default;
|
||||||
|
$label-font-weight: bold !default;
|
||||||
|
|
||||||
|
//
|
||||||
|
// Label Mixins
|
||||||
|
//
|
||||||
|
|
||||||
|
// We use this mixin to create a default label base.
|
||||||
|
@mixin label-base {
|
||||||
|
font-weight: $label-font-weight;
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: none;
|
||||||
|
line-height: 1;
|
||||||
|
white-space: nowrap;
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
// We use this mixin to add label size styles.
|
||||||
|
@mixin label-size($padding:$label-padding, $text-size:$label-font-sizing) {
|
||||||
|
@if $padding { padding: $padding; }
|
||||||
|
@if $text-size { font-size: $text-size; }
|
||||||
|
}
|
||||||
|
|
||||||
|
// We use this mixin to add label styles.
|
||||||
|
@mixin label-style($bg:$primary-color, $radius:false) {
|
||||||
|
|
||||||
|
// We control which background color comes through
|
||||||
|
@if $bg {
|
||||||
|
|
||||||
|
// This find the lightness percentage of the background color.
|
||||||
|
$bg-lightness: lightness($bg);
|
||||||
|
|
||||||
|
background-color: $bg;
|
||||||
|
|
||||||
|
// We control the text color for you based on the background color.
|
||||||
|
@if $bg-lightness < 70% { color: #fff; }
|
||||||
|
@else { color: #333; }
|
||||||
|
}
|
||||||
|
|
||||||
|
// We use this to control the radius on labels.
|
||||||
|
@if $radius == true { @include radius($label-radius); }
|
||||||
|
@else if $radius { @include radius($radius); }
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// We use this to add close buttons to alerts
|
||||||
|
@mixin label($padding:$label-padding, $text-size:$label-font-sizing, $bg:$primary-color, $radius:false) {
|
||||||
|
|
||||||
|
@include label-base;
|
||||||
|
@include label-size($padding, $text-size);
|
||||||
|
@include label-style($bg, $radius);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@if $include-html-label-classes {
|
||||||
|
|
||||||
|
/* Labels */
|
||||||
|
.label {
|
||||||
|
@include label-base;
|
||||||
|
@include label-size;
|
||||||
|
@include label-style;
|
||||||
|
|
||||||
|
|
||||||
|
&.radius { @include label-style(false, true); }
|
||||||
|
&.round { @include label-style(false, $radius:1000px); }
|
||||||
|
|
||||||
|
&.alert { @include label-style($alert-color); }
|
||||||
|
&.success { @include label-style($success-color); }
|
||||||
|
&.secondary { @include label-style($secondary-color); }
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -0,0 +1,21 @@
|
||||||
|
//
|
||||||
|
// Magellan Variables
|
||||||
|
//
|
||||||
|
$magellan-bg: #fff !default;
|
||||||
|
$magellan-padding: 10px !default;
|
||||||
|
|
||||||
|
@if $include-html-magellan-classes {
|
||||||
|
|
||||||
|
[data-magellan-expedition] {
|
||||||
|
background: $magellan-bg;
|
||||||
|
z-index: 50;
|
||||||
|
min-width: 100%;
|
||||||
|
padding: $magellan-padding;
|
||||||
|
|
||||||
|
.sub-nav {
|
||||||
|
margin-bottom: 0;
|
||||||
|
dd { margin-bottom: 0; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
204
content/css/zurb-foundation/foundation/components/_orbit.scss
Normal file
|
@ -0,0 +1,204 @@
|
||||||
|
// Orbit Settings
|
||||||
|
|
||||||
|
// We use these to control the caption styles
|
||||||
|
$orbit-container-bg: #f5f5f5 !default;
|
||||||
|
$orbit-caption-bg-old-browser: #000 !default;
|
||||||
|
$orbit-caption-bg-old: rgb(0,0,0) !default;
|
||||||
|
$orbit-caption-bg: rgba(0,0,0,0.6) !default;
|
||||||
|
$orbit-caption-font-color: #fff !default;
|
||||||
|
|
||||||
|
// We use these to control the left/right nav styles
|
||||||
|
$orbit-nav-bg-old: rgb(0,0,0) !default;
|
||||||
|
$orbit-nav-bg: rgba(0,0,0,0.6) !default;
|
||||||
|
|
||||||
|
// We use these to control the timer styles
|
||||||
|
$orbit-timer-bg-old: rgb(0,0,0) !default;
|
||||||
|
$orbit-timer-bg: rgba(0,0,0,0.6) !default;
|
||||||
|
|
||||||
|
// We use these to control the bullet nav styles
|
||||||
|
$orbit-bullet-nav-color: #999 !default;
|
||||||
|
$orbit-bullet-nav-color-active: #222 !default;
|
||||||
|
|
||||||
|
// We use thes to controls the style of slide numbers
|
||||||
|
$orbit-slide-number-bg: rgb(0,0,0) !default;
|
||||||
|
$orbit-slide-number-font-color: #fff !default;
|
||||||
|
$orbit-slide-number-padding: emCalc(5px) !default;
|
||||||
|
|
||||||
|
// Margin for when Orbit is stacked on small screens
|
||||||
|
$stack-on-small-margin-bottom: emCalc(20px) !default;
|
||||||
|
|
||||||
|
|
||||||
|
.orbit-container {
|
||||||
|
overflow: hidden;
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
background: $orbit-container-bg;
|
||||||
|
|
||||||
|
.orbit-slides-container {
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
img { display: block; }
|
||||||
|
|
||||||
|
&>* {
|
||||||
|
position: relative;
|
||||||
|
float: $default-float;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
.orbit-caption {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
background-color: $orbit-caption-bg-old;
|
||||||
|
background-color: $orbit-caption-bg;
|
||||||
|
color: #fff;
|
||||||
|
width: 100%;
|
||||||
|
padding: 10px 14px;
|
||||||
|
font-size: emCalc(14px);
|
||||||
|
|
||||||
|
* { color: $orbit-caption-font-color; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.orbit-slide-number {
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
#{$default-float}: 10px;
|
||||||
|
font-size: 12px;
|
||||||
|
span { font-weight: 700; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.orbit-timer {
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
#{$opposite-direction}: 10px;
|
||||||
|
height: 6px;
|
||||||
|
width: 100px;
|
||||||
|
.orbit-progress {
|
||||||
|
height: 100%;
|
||||||
|
background-color: $orbit-timer-bg-old;
|
||||||
|
background-color: $orbit-timer-bg;
|
||||||
|
display: block;
|
||||||
|
width: 0%;
|
||||||
|
}
|
||||||
|
|
||||||
|
& > span {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
#{$opposite-direction}: 0px;
|
||||||
|
width: 11px;
|
||||||
|
height: 14px;
|
||||||
|
border: solid 4px #000;
|
||||||
|
border-top: none;
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.paused {
|
||||||
|
& > span {
|
||||||
|
#{$opposite-direction}: -6px;
|
||||||
|
top: 9px;
|
||||||
|
width: 11px;
|
||||||
|
height: 14px;
|
||||||
|
border: solid 8px;
|
||||||
|
border-color: transparent transparent transparent #000;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover .orbit-timer > span { display: block; }
|
||||||
|
|
||||||
|
// Let's get those controls to be right in the center on each side
|
||||||
|
.orbit-prev,
|
||||||
|
.orbit-next {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
margin-top: -25px;
|
||||||
|
background-color: $orbit-nav-bg-old;
|
||||||
|
background-color: $orbit-nav-bg;
|
||||||
|
width: 50px;
|
||||||
|
height: 60px;
|
||||||
|
line-height: 50px;
|
||||||
|
color: white;
|
||||||
|
text-indent: -9999px !important;
|
||||||
|
|
||||||
|
& > span {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
margin-top: -16px;
|
||||||
|
display: block;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border: solid 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.orbit-prev { #{$default-float}: 0;
|
||||||
|
& > span {
|
||||||
|
border-color: transparent;
|
||||||
|
border-#{$opposite-direction}-color: #fff;
|
||||||
|
}
|
||||||
|
&:hover > span {
|
||||||
|
border-#{$opposite-direction}-color: #ccc;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.orbit-next { #{$opposite-direction}: 0;
|
||||||
|
& > span {
|
||||||
|
border-color: transparent;
|
||||||
|
border-#{$default-float}-color: #fff;
|
||||||
|
#{$default-float}: 50%;
|
||||||
|
margin-#{$default-float}: -8px;
|
||||||
|
}
|
||||||
|
&:hover > span {
|
||||||
|
border-#{$default-float}-color: #ccc;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.orbit-bullets {
|
||||||
|
margin: 0 auto 30px auto;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
top: 10px;
|
||||||
|
|
||||||
|
li {
|
||||||
|
display: block;
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
background: #fff;
|
||||||
|
float: $default-float;
|
||||||
|
margin-#{$opposite-direction}: 6px;
|
||||||
|
border: solid 2px #000;
|
||||||
|
@include radius(1000px);
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
background: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child { margin-#{$opposite-direction}: 0; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.touch {
|
||||||
|
.orbit-container {
|
||||||
|
.orbit-prev,
|
||||||
|
.orbit-next { display: none; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.orbit-bullets { display: none; }
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@media #{$small} {
|
||||||
|
|
||||||
|
.touch {
|
||||||
|
.orbit-container {
|
||||||
|
.orbit-prev,
|
||||||
|
.orbit-next { display: inherit; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.orbit-bullets { display: block; }
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -0,0 +1,99 @@
|
||||||
|
//
|
||||||
|
// Pagination Variables
|
||||||
|
//
|
||||||
|
|
||||||
|
// We use these to control the pagination container
|
||||||
|
$pagination-height: emCalc(24px) !default;
|
||||||
|
$pagination-margin: emCalc(-5px) !default;
|
||||||
|
|
||||||
|
// We use these to set the list-item properties
|
||||||
|
$pagination-li-float: $default-float;
|
||||||
|
$pagination-li-height: emCalc(24px) !default;
|
||||||
|
$pagination-li-font-color: #222 !default;
|
||||||
|
$pagination-li-font-size: emCalc(14px) !default;
|
||||||
|
$pagination-li-margin: emCalc(5px) !default;
|
||||||
|
|
||||||
|
// We use these for the pagination anchor links
|
||||||
|
$pagination-link-pad: emCalc(1px) emCalc(7px) emCalc(1px) !default;
|
||||||
|
$pagination-link-font-color: #999 !default;
|
||||||
|
$pagination-link-active-bg: darken(#fff, 10%) !default;
|
||||||
|
|
||||||
|
// We use these for disabled anchor links
|
||||||
|
$pagination-link-unavailable-cursor: default !default;
|
||||||
|
$pagination-link-unavailable-font-color: #999 !default;
|
||||||
|
$pagination-link-unavailable-bg-active: transparent !default;
|
||||||
|
|
||||||
|
// We use these for currently selected anchor links
|
||||||
|
$pagination-link-current-background: $primary-color !default;
|
||||||
|
$pagination-link-current-font-color: #fff !default;
|
||||||
|
$pagination-link-current-font-weight: bold !default;
|
||||||
|
$pagination-link-current-cursor: default !default;
|
||||||
|
$pagination-link-current-active-bg: $primary-color !default;
|
||||||
|
|
||||||
|
//
|
||||||
|
// Pagination Mixin
|
||||||
|
//
|
||||||
|
|
||||||
|
// We use this mixin to set the properties for the creating Foundation pagination
|
||||||
|
@mixin pagination($center:false, $base-style:true) {
|
||||||
|
|
||||||
|
@if $base-style {
|
||||||
|
display: block;
|
||||||
|
height: $pagination-height;
|
||||||
|
margin-#{$default-float}: $pagination-margin;
|
||||||
|
|
||||||
|
li {
|
||||||
|
display: block;
|
||||||
|
float: $pagination-li-float;
|
||||||
|
height: $pagination-li-height;
|
||||||
|
color: $pagination-li-font-color;
|
||||||
|
font-size: $pagination-li-font-size;
|
||||||
|
margin-#{$default-float}: $pagination-li-margin;
|
||||||
|
|
||||||
|
a {
|
||||||
|
display: block;
|
||||||
|
padding: $pagination-link-pad;
|
||||||
|
color: $pagination-link-font-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover a,
|
||||||
|
a:focus { background: $pagination-link-active-bg; }
|
||||||
|
|
||||||
|
&.unavailable a {
|
||||||
|
cursor: $pagination-link-unavailable-cursor;
|
||||||
|
color: $pagination-link-unavailable-font-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.unavailable:hover a, &.unavailable a:focus { background: $pagination-link-unavailable-bg-active; }
|
||||||
|
|
||||||
|
&.current a {
|
||||||
|
background: $pagination-link-current-background;
|
||||||
|
color: $pagination-link-current-font-color;
|
||||||
|
font-weight: $pagination-link-current-font-weight;
|
||||||
|
cursor: $pagination-link-current-cursor;
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus { background: $pagination-link-current-active-bg; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@if $center {
|
||||||
|
& { text-align: center;
|
||||||
|
ul > li {
|
||||||
|
float: none;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@if $include-html-nav-classes {
|
||||||
|
|
||||||
|
/* Pagination */
|
||||||
|
.pagination { @include pagination; }
|
||||||
|
.pagination-centered { @include pagination(true,false); }
|
||||||
|
}
|
|
@ -0,0 +1,76 @@
|
||||||
|
//
|
||||||
|
// Panel Variables
|
||||||
|
//
|
||||||
|
|
||||||
|
// We use these to control the background and border styles
|
||||||
|
$panel-bg: darken(#fff, 5%) !default;
|
||||||
|
$panel-border-style: solid !default;
|
||||||
|
$panel-border-size: 1px !default;
|
||||||
|
|
||||||
|
// We use this % to control how much we darken things on hover
|
||||||
|
$panel-function-factor: 10% !default;
|
||||||
|
$panel-border-color: darken($panel-bg, $panel-function-factor) !default;
|
||||||
|
|
||||||
|
// We use these to set default inner padding and bottom margin
|
||||||
|
$panel-margin-bottom: emCalc(20px) !default;
|
||||||
|
$panel-padding: emCalc(20px) !default;
|
||||||
|
|
||||||
|
// We use these to set default font colors
|
||||||
|
$panel-font-color: #333 !default;
|
||||||
|
$panel-font-color-alt: #fff !default;
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Panel Mixins
|
||||||
|
//
|
||||||
|
|
||||||
|
// We use this mixin to create panels.
|
||||||
|
@mixin panel($bg:$panel-bg, $padding:$panel-padding) {
|
||||||
|
|
||||||
|
@if $bg {
|
||||||
|
$bg-lightness: lightness($bg);
|
||||||
|
|
||||||
|
border-style: $panel-border-style;
|
||||||
|
border-width: $panel-border-size;
|
||||||
|
border-color: darken($bg, $panel-function-factor);
|
||||||
|
margin-bottom: $panel-margin-bottom;
|
||||||
|
padding: $padding;
|
||||||
|
|
||||||
|
background: $bg;
|
||||||
|
|
||||||
|
// We set the font color based on the darkness of the bg.
|
||||||
|
@if $bg-lightness >= 50% and $bg == blue { h1,h2,h3,h4,h5,h6,p { color: $panel-font-color-alt; } }
|
||||||
|
@else if $bg-lightness >= 50% { h1,h2,h3,h4,h5,h6,p { color: $panel-font-color; } }
|
||||||
|
@else { h1,h2,h3,h4,h5,h6,p { color: $panel-font-color-alt; } }
|
||||||
|
|
||||||
|
// Respect the padding, fool.
|
||||||
|
&>:first-child { margin-top: 0; }
|
||||||
|
&>:last-child { margin-bottom: 0; }
|
||||||
|
|
||||||
|
// reset header line-heights for panels
|
||||||
|
h1,h2,h3,h4,h5,h6 {
|
||||||
|
line-height: 1; margin-bottom: emCalc(20px) / 2;
|
||||||
|
&.subheader { line-height: 1.4; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Only include these classes if the option exists
|
||||||
|
@if $include-html-panel-classes {
|
||||||
|
|
||||||
|
/* Panels */
|
||||||
|
.panel { @include panel;
|
||||||
|
|
||||||
|
&.callout {
|
||||||
|
@include panel($primary-color);
|
||||||
|
@include inset-shadow($active:false);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.radius {
|
||||||
|
@include panel($bg:false);
|
||||||
|
@include radius;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -0,0 +1,130 @@
|
||||||
|
//
|
||||||
|
// Pricing Table Variables
|
||||||
|
//
|
||||||
|
|
||||||
|
// We use this to control the border color
|
||||||
|
$price-table-border: solid 1px #ddd !default;
|
||||||
|
|
||||||
|
// We use this to control the bottom margin of the pricing table
|
||||||
|
$price-table-margin-bottom: emCalc(20px) !default;
|
||||||
|
|
||||||
|
// We use these to control the title styles
|
||||||
|
$price-title-bg: #ddd !default;
|
||||||
|
$price-title-padding: emCalc(15px) emCalc(20px) !default;
|
||||||
|
$price-title-align: center !default;
|
||||||
|
$price-title-color: #333 !default;
|
||||||
|
$price-title-weight: bold !default;
|
||||||
|
$price-title-size: emCalc(16px) !default;
|
||||||
|
|
||||||
|
// We use these to control the price styles
|
||||||
|
$price-money-bg: #eee !default;
|
||||||
|
$price-money-padding: emCalc(15px) emCalc(20px) !default;
|
||||||
|
$price-money-align: center !default;
|
||||||
|
$price-money-color: #333 !default;
|
||||||
|
$price-money-weight: normal !default;
|
||||||
|
$price-money-size: emCalc(20px) !default;
|
||||||
|
|
||||||
|
// We use these to control the description styles
|
||||||
|
$price-bg: #fff !default;
|
||||||
|
$price-desc-color: #777 !default;
|
||||||
|
$price-desc-padding: emCalc(15px) !default;
|
||||||
|
$price-desc-align: center !default;
|
||||||
|
$price-desc-font-size: emCalc(12px) !default;
|
||||||
|
$price-desc-weight: normal !default;
|
||||||
|
$price-desc-line-height: 1.4 !default;
|
||||||
|
$price-desc-bottom-border: dotted 1px #ddd !default;
|
||||||
|
|
||||||
|
// We use these to control the list item styles
|
||||||
|
$price-item-color: #333 !default;
|
||||||
|
$price-item-padding: emCalc(15px) !default;
|
||||||
|
$price-item-align: center !default;
|
||||||
|
$price-item-font-size: emCalc(14px) !default;
|
||||||
|
$price-item-weight: normal !default;
|
||||||
|
$price-item-bottom-border: dotted 1px #ddd !default;
|
||||||
|
|
||||||
|
// We use these to control the CTA area styles
|
||||||
|
$price-cta-bg: #f5f5f5 !default;
|
||||||
|
$price-cta-align: center !default;
|
||||||
|
$price-cta-padding: emCalc(20px) emCalc(20px) 0 !default;
|
||||||
|
|
||||||
|
//
|
||||||
|
// Pricing Table Mixins
|
||||||
|
//
|
||||||
|
|
||||||
|
// We use this to create the container element for the pricing tables
|
||||||
|
@mixin pricing-table-container {
|
||||||
|
border: $price-table-border;
|
||||||
|
margin-#{$default-float}: 0;
|
||||||
|
margin-bottom: $price-table-margin-bottom;
|
||||||
|
|
||||||
|
& * {
|
||||||
|
list-style: none;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// We use this mixin to create the pricing table title styles
|
||||||
|
@mixin pricing-table-title {
|
||||||
|
background-color: $price-title-bg;
|
||||||
|
padding: $price-title-padding;
|
||||||
|
text-align: $price-title-align;
|
||||||
|
color: $price-title-color;
|
||||||
|
font-weight: $price-title-weight;
|
||||||
|
font-size: $price-title-size;
|
||||||
|
}
|
||||||
|
|
||||||
|
// We use this mixin to control the pricing table price styles
|
||||||
|
@mixin pricing-table-price {
|
||||||
|
background-color: $price-money-bg;
|
||||||
|
padding: $price-money-padding;
|
||||||
|
text-align: $price-money-align;
|
||||||
|
color: $price-money-color;
|
||||||
|
font-weight: $price-money-weight;
|
||||||
|
font-size: $price-money-size;
|
||||||
|
}
|
||||||
|
|
||||||
|
// We use this mixin to create the description styles for the pricing table
|
||||||
|
@mixin pricing-table-description {
|
||||||
|
background-color: $price-bg;
|
||||||
|
padding: $price-desc-padding;
|
||||||
|
text-align: $price-desc-align;
|
||||||
|
color: $price-desc-color;
|
||||||
|
font-size: $price-desc-font-size;
|
||||||
|
font-weight: $price-desc-weight;
|
||||||
|
line-height: $price-desc-line-height;
|
||||||
|
border-bottom: $price-desc-bottom-border;
|
||||||
|
}
|
||||||
|
|
||||||
|
// We use this mixin to style the bullet items in the pricing table
|
||||||
|
@mixin pricing-table-bullet {
|
||||||
|
background-color: $price-bg;
|
||||||
|
padding: $price-item-padding;
|
||||||
|
text-align: $price-item-align;
|
||||||
|
color: $price-item-color;
|
||||||
|
font-size: $price-item-font-size;
|
||||||
|
font-weight: $price-item-weight;
|
||||||
|
border-bottom: $price-item-bottom-border;
|
||||||
|
}
|
||||||
|
|
||||||
|
// We use this mixin to style the CTA area of the pricing tables
|
||||||
|
@mixin pricing-table-cta {
|
||||||
|
background-color: $price-cta-bg;
|
||||||
|
text-align: $price-cta-align;
|
||||||
|
padding: $price-cta-padding;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@if $include-html-pricing-classes {
|
||||||
|
|
||||||
|
/* Pricing Tables */
|
||||||
|
.pricing-table {
|
||||||
|
@include pricing-table-container;
|
||||||
|
|
||||||
|
.title { @include pricing-table-title; }
|
||||||
|
.price { @include pricing-table-price; }
|
||||||
|
.description { @include pricing-table-description; }
|
||||||
|
.bullet-item { @include pricing-table-bullet; }
|
||||||
|
.cta-button { @include pricing-table-cta; }
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -0,0 +1,70 @@
|
||||||
|
//
|
||||||
|
// Progress Bar Variables
|
||||||
|
//
|
||||||
|
|
||||||
|
// We use this to se the prog bar height
|
||||||
|
$progress-bar-height: emCalc(25px) !default;
|
||||||
|
$progress-bar-color: transparent !default;
|
||||||
|
|
||||||
|
// We use these to control the border styles
|
||||||
|
$progress-bar-border-color: darken(#fff, 20%) !default;
|
||||||
|
$progress-bar-border-size: 1px !default;
|
||||||
|
$progress-bar-border-style: solid !default;
|
||||||
|
$progress-bar-border-radius: $global-radius !default;
|
||||||
|
|
||||||
|
// We use these to control the margin & padding
|
||||||
|
$progress-bar-pad: emCalc(2px) !default;
|
||||||
|
$progress-bar-margin-bottom: emCalc(10px) !default;
|
||||||
|
|
||||||
|
// We use these to set the meter colors
|
||||||
|
$progress-meter-color: $primary-color !default;
|
||||||
|
$progress-meter-secondary-color: $secondary-color !default;
|
||||||
|
$progress-meter-success-color: $success-color !default;
|
||||||
|
$progress-meter-alert-color: $alert-color !default;
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Progress Bar Mixins
|
||||||
|
//
|
||||||
|
|
||||||
|
// We use this to set up the progress bar container
|
||||||
|
@mixin progress-container {
|
||||||
|
background-color: $progress-bar-color;
|
||||||
|
height: $progress-bar-height;
|
||||||
|
border: $progress-bar-border-size $progress-bar-border-style $progress-bar-border-color;
|
||||||
|
padding: $progress-bar-pad;
|
||||||
|
margin-bottom: $progress-bar-margin-bottom;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin progress-meter($bg:$progress-meter-color) {
|
||||||
|
background: $bg;
|
||||||
|
height: 100%;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@if $include-html-media-classes {
|
||||||
|
|
||||||
|
/* Progress Bar */
|
||||||
|
.progress {
|
||||||
|
@include progress-container;
|
||||||
|
|
||||||
|
// Meter
|
||||||
|
.meter {
|
||||||
|
@include progress-meter;
|
||||||
|
}
|
||||||
|
&.secondary .meter { @include progress-meter($bg:$progress-meter-secondary-color); }
|
||||||
|
&.success .meter { @include progress-meter($bg:$progress-meter-success-color); }
|
||||||
|
&.alert .meter { @include progress-meter($bg:$progress-meter-alert-color); }
|
||||||
|
|
||||||
|
&.radius { @include radius($global-radius);
|
||||||
|
.meter { @include radius($global-radius - 1); }
|
||||||
|
}
|
||||||
|
|
||||||
|
&.round { @include radius(1000px);
|
||||||
|
.meter { @include radius(999px); }
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
131
content/css/zurb-foundation/foundation/components/_reveal.scss
Normal file
|
@ -0,0 +1,131 @@
|
||||||
|
// NEED TO FINISH THE LOGIC HERE
|
||||||
|
|
||||||
|
//
|
||||||
|
// Reveal Variables
|
||||||
|
//
|
||||||
|
|
||||||
|
// We use these to control the style of the reveal overlay.
|
||||||
|
$reveal-overlay-bg: rgba(#000, .45) !default;
|
||||||
|
$reveal-overlay-bg-old: #000 !default;
|
||||||
|
|
||||||
|
// We use these to control the style of the modal itself.
|
||||||
|
$reveal-modal-bg: #fff !default;
|
||||||
|
$reveal-position-top: 50px !default;
|
||||||
|
$reveal-default-width: 80% !default;
|
||||||
|
$reveal-modal-padding: emCalc(20px) !default;
|
||||||
|
$reveal-box-shadow: 0 0 10px rgba(#000,.4) !default;
|
||||||
|
|
||||||
|
// We use these to style the reveal close button
|
||||||
|
$reveal-close-font-size: emCalc(22px) !default;
|
||||||
|
$reveal-close-top: emCalc(8px) !default;
|
||||||
|
$reveal-close-side: emCalc(11px) !default;
|
||||||
|
$reveal-close-color: #aaa !default;
|
||||||
|
$reveal-close-weight: bold !default;
|
||||||
|
|
||||||
|
// We use these to control the modal border
|
||||||
|
$reveal-border-style: solid !default;
|
||||||
|
$reveal-border-width: 1px !default;
|
||||||
|
$reveal-border-color: #666 !default;
|
||||||
|
|
||||||
|
//
|
||||||
|
// Reveal Mixins
|
||||||
|
//
|
||||||
|
|
||||||
|
// We use this to create the reveal background overlay styles
|
||||||
|
@mixin reveal-bg {
|
||||||
|
position: fixed;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
background: $reveal-overlay-bg-old;
|
||||||
|
background: $reveal-overlay-bg;
|
||||||
|
z-index: 98;
|
||||||
|
display: none;
|
||||||
|
top: 0;
|
||||||
|
#{$default-float}: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// We use this mixin to create the structure of a reveal modal
|
||||||
|
@mixin reveal-modal-base($base-style:true, $width:$reveal-default-width) {
|
||||||
|
@if $base-style {
|
||||||
|
visibility: hidden;
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
#{$default-float}: 50%;
|
||||||
|
z-index: 99;
|
||||||
|
height: auto;
|
||||||
|
background-color: #fff;
|
||||||
|
|
||||||
|
// Make sure rows don't have a min-width on them
|
||||||
|
.column,
|
||||||
|
.columns { min-width: 0; }
|
||||||
|
|
||||||
|
// Get rid of margin from first and last element inside modal
|
||||||
|
& > :first-child { margin-top: 0; }
|
||||||
|
& > :last-child { margin-bottom: 0; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@if $width {
|
||||||
|
margin-#{$default-float}: -($width / 2);
|
||||||
|
width: $width;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// We use this to style the reveal modal defaults
|
||||||
|
@mixin reveal-modal-style($bg:$reveal-modal-bg, $padding:$reveal-modal-padding, $border:true, $border-style:$reveal-border-style, $border-width:$reveal-border-width, $border-color:$reveal-border-color, $box-shadow:true, $top-offset:$reveal-position-top) {
|
||||||
|
|
||||||
|
@if $bg { background-color: $bg; }
|
||||||
|
@if $padding { padding: $padding; }
|
||||||
|
|
||||||
|
@if $border { border: $border-style $border-width $border-color; }
|
||||||
|
|
||||||
|
// We can choose whether or not to include the default box-shadow.
|
||||||
|
@if $box-shadow {
|
||||||
|
-webkit-box-shadow: $reveal-box-shadow;
|
||||||
|
box-shadow: $reveal-box-shadow;
|
||||||
|
}
|
||||||
|
|
||||||
|
@if $top-offset { top: $top-offset; }
|
||||||
|
}
|
||||||
|
|
||||||
|
// We use this to create a close button for the reveal modal
|
||||||
|
@mixin reveal-close($color:$reveal-close-color) {
|
||||||
|
font-size: $reveal-close-font-size;
|
||||||
|
line-height: 1;
|
||||||
|
position: absolute;
|
||||||
|
top: $reveal-close-top;
|
||||||
|
#{$opposite-direction}: $reveal-close-side;
|
||||||
|
color: $color;
|
||||||
|
font-weight: $reveal-close-weight;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
@if $include-html-reveal-classes {
|
||||||
|
// Reveal Modals
|
||||||
|
.reveal-modal-bg { @include reveal-bg; }
|
||||||
|
|
||||||
|
.reveal-modal {
|
||||||
|
@include reveal-modal-base;
|
||||||
|
@include reveal-modal-style;
|
||||||
|
|
||||||
|
.close-reveal-modal { @include reveal-close; }
|
||||||
|
}
|
||||||
|
|
||||||
|
// Large Screen Styles
|
||||||
|
@media #{$small} {
|
||||||
|
|
||||||
|
.reveal-modal {
|
||||||
|
@include reveal-modal-style(false, emCalc(30px), false, $box-shadow: false, $top-offset: emCalc(100px));
|
||||||
|
|
||||||
|
&.small { @include reveal-modal-base(false, 30%); }
|
||||||
|
&.medium { @include reveal-modal-base(false, 40%); }
|
||||||
|
&.large { @include reveal-modal-base(false, 60%); }
|
||||||
|
&.xlarge { @include reveal-modal-base(false, 70%); }
|
||||||
|
&.expand { @include reveal-modal-base(false, 95%); }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Reveal Print Styles
|
||||||
|
@media print {
|
||||||
|
div:not(.reveal-modal) { display: none; }
|
||||||
|
}
|
||||||
|
}
|
249
content/css/zurb-foundation/foundation/components/_section.scss
Normal file
|
@ -0,0 +1,249 @@
|
||||||
|
//
|
||||||
|
// Section Variables
|
||||||
|
//
|
||||||
|
|
||||||
|
// We use these to set padding and hover factor
|
||||||
|
$section-padding: emCalc(15px) !default;
|
||||||
|
$section-function-factor: 10% !default;
|
||||||
|
|
||||||
|
// These style the titles
|
||||||
|
$section-title-color: #333 !default;
|
||||||
|
$section-title-bg: #efefef !default;
|
||||||
|
$section-title-bg-active: darken($section-title-bg, $section-function-factor) !default;
|
||||||
|
$section-title-bg-active-tabs: #fff !default;
|
||||||
|
|
||||||
|
// Want to control border size, here ya go!
|
||||||
|
$section-border-size: 1px !default;
|
||||||
|
$section-border-style: solid !default;
|
||||||
|
$section-border-color: #ccc !default;
|
||||||
|
|
||||||
|
// Control the color of the background and some size options
|
||||||
|
$section-content-bg: #fff !default;
|
||||||
|
$section-vertical-nav-min-width: emCalc(200px) !default;
|
||||||
|
$section-bottom-margin: emCalc(20px) !default;
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Section Mixins
|
||||||
|
//
|
||||||
|
|
||||||
|
// We use this mixin to create the basic container styles for sections when they act like accordions
|
||||||
|
@mixin section-container($base-style:true, $section-type:accordion) {
|
||||||
|
|
||||||
|
// We can set this to false to not include these styles to avoid repeated CSS on classes.
|
||||||
|
@if $base-style {
|
||||||
|
width: 100%;
|
||||||
|
display: block;
|
||||||
|
margin-bottom: $section-bottom-margin;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Accordion container border styles
|
||||||
|
@if $section-type == accordion {
|
||||||
|
border: $section-border-size $section-border-style $section-border-color;
|
||||||
|
border-top: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Tabs container border styles
|
||||||
|
@else if $section-type == tabs {
|
||||||
|
border: 0;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Vertical Nav container border styles
|
||||||
|
@else if $section-type == vertical-nav {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// Horizontal Nav container border styles
|
||||||
|
@else if $section-type == horizontal-nav {
|
||||||
|
position: relative;
|
||||||
|
background: $section-title-bg;
|
||||||
|
border: $section-border-size $section-border-style $section-border-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// We use this mixin to create the styles for sections as accordions.
|
||||||
|
@mixin section($section-type:accordion) {
|
||||||
|
|
||||||
|
// Accordion styles
|
||||||
|
@if $section-type == accordion {
|
||||||
|
|
||||||
|
border-top: $section-border-size $section-border-style $section-border-color;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
top: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
width: 100%;
|
||||||
|
margin: 0;
|
||||||
|
background-color: $section-title-bg;
|
||||||
|
|
||||||
|
a {
|
||||||
|
padding: $section-padding;
|
||||||
|
display: inline-block;
|
||||||
|
color: $section-title-color;
|
||||||
|
font-size: emCalc(14px);
|
||||||
|
white-space: nowrap;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
&:hover { background-color: darken($section-title-bg, $section-function-factor/2); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
display: none;
|
||||||
|
padding: $section-padding;
|
||||||
|
background-color: $section-content-bg;
|
||||||
|
|
||||||
|
&>*:last-child { margin-bottom: 0; }
|
||||||
|
&>*:first-child { padding-top: 0; }
|
||||||
|
&>*:last-child { padding-bottom: 0; }
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
.content { display: block; }
|
||||||
|
.title { background: $section-title-bg-active; }
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// Tab Styles
|
||||||
|
@else if $section-type == tabs {
|
||||||
|
padding-top: 0;
|
||||||
|
border: 0;
|
||||||
|
position: static;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
width: auto;
|
||||||
|
border: $section-border-size $section-border-style $section-border-color;
|
||||||
|
border-#{$opposite-direction}: 0;
|
||||||
|
border-bottom: 0;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1;
|
||||||
|
|
||||||
|
a { width: 100%; }
|
||||||
|
}
|
||||||
|
&:last-child .title { border-#{$opposite-direction}: $section-border-size $section-border-style $section-border-color; }
|
||||||
|
|
||||||
|
.content {
|
||||||
|
border: $section-border-size $section-border-style $section-border-color;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 10;
|
||||||
|
top: -1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
|
||||||
|
.title {
|
||||||
|
background-color: $section-title-bg-active-tabs;
|
||||||
|
z-index: 11;
|
||||||
|
border-bottom: 0;
|
||||||
|
}
|
||||||
|
.content { position: relative; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Vertical Nav Styles
|
||||||
|
@else if $section-type == vertical-nav {
|
||||||
|
|
||||||
|
padding-top: 0 !important;
|
||||||
|
|
||||||
|
.title a { display: block; width: 100%; }
|
||||||
|
|
||||||
|
.content { display: none; }
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
.content {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
#{$default-float}: 100%;
|
||||||
|
top: -1px;
|
||||||
|
z-index: 999;
|
||||||
|
min-width: $section-vertical-nav-min-width;
|
||||||
|
border: $section-border-size $section-border-style $section-border-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Horizontal Nav Styles
|
||||||
|
@else if $section-type == horizontal-nav {
|
||||||
|
padding-top: 0;
|
||||||
|
border: 0;
|
||||||
|
position: static;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
width: auto;
|
||||||
|
border: $section-border-size $section-border-style $section-border-color;
|
||||||
|
border-#{$default-float}: 0;
|
||||||
|
top: -1px;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1;
|
||||||
|
|
||||||
|
a { width: 100%; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.content { display: none; }
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
.content {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 999;
|
||||||
|
#{$default-float}: 0;
|
||||||
|
top: -2px;
|
||||||
|
min-width: $section-vertical-nav-min-width;
|
||||||
|
border: $section-border-size $section-border-style $section-border-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@if $include-html-section-classes {
|
||||||
|
|
||||||
|
/* Sections */
|
||||||
|
.section-container, .section-container.auto {
|
||||||
|
@include section-container;
|
||||||
|
|
||||||
|
section,
|
||||||
|
.section {
|
||||||
|
@include section;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-container.tabs {
|
||||||
|
@include section-container(false, tabs);
|
||||||
|
|
||||||
|
section,
|
||||||
|
.section { @include section(tabs); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@media #{$small} {
|
||||||
|
|
||||||
|
.section-container.auto {
|
||||||
|
@include section-container(false, tabs);
|
||||||
|
|
||||||
|
section,
|
||||||
|
.section { @include section(tabs); }
|
||||||
|
}
|
||||||
|
.section-container.accordion .section {
|
||||||
|
padding-top: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-container.vertical-nav {
|
||||||
|
@include section-container(false);
|
||||||
|
|
||||||
|
section,
|
||||||
|
.section { @include section(vertical-nav); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-container.horizontal-nav {
|
||||||
|
@include section-container(false, horizontal-nav);
|
||||||
|
|
||||||
|
section,
|
||||||
|
.section { @include section(horizontal-nav); }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -0,0 +1,68 @@
|
||||||
|
//
|
||||||
|
// Side Nav Variables
|
||||||
|
//
|
||||||
|
|
||||||
|
// We use this to control padding.
|
||||||
|
$side-nav-padding: emCalc(14px) 0 !default;
|
||||||
|
|
||||||
|
// We use these to control list styles.
|
||||||
|
$side-nav-list-type: none !default;
|
||||||
|
$side-nav-list-position: inside !default;
|
||||||
|
$side-nav-list-margin: 0 0 emCalc(7px) 0 !default;
|
||||||
|
|
||||||
|
// We use these to control link styles.
|
||||||
|
$side-nav-link-color: $primary-color !default;
|
||||||
|
$side-nav-link-color-active: lighten(#000, 30%) !default;
|
||||||
|
$side-nav-font-size: emCalc(14px) !default;
|
||||||
|
$side-nav-font-weight: bold !default;
|
||||||
|
|
||||||
|
// We use these to control border styles
|
||||||
|
$side-nav-divider-size: 1px !default;
|
||||||
|
$side-nav-divider-style: solid !default;
|
||||||
|
$side-nav-divider-color: darken(#fff, 10%) !default;
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Side Nav Mixins
|
||||||
|
//
|
||||||
|
|
||||||
|
|
||||||
|
// We use this to style the side-nav
|
||||||
|
@mixin side-nav($divider-color:$side-nav-divider-color, $font-size:$side-nav-font-size, $link-color:$side-nav-link-color) {
|
||||||
|
display: block;
|
||||||
|
margin: 0;
|
||||||
|
padding: $side-nav-padding;
|
||||||
|
list-style-type: $side-nav-list-type;
|
||||||
|
list-style-position: $side-nav-list-position;
|
||||||
|
|
||||||
|
li {
|
||||||
|
margin: $side-nav-list-margin;
|
||||||
|
font-size: $font-size;
|
||||||
|
|
||||||
|
a {
|
||||||
|
display: block;
|
||||||
|
color: $link-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active a {
|
||||||
|
color: $side-nav-link-color-active;
|
||||||
|
font-weight: $side-nav-font-weight;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.divider {
|
||||||
|
border-top: $side-nav-divider-size $side-nav-divider-style;
|
||||||
|
height: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
|
border-top-color: $divider-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@if $include-html-nav-classes {
|
||||||
|
|
||||||
|
/* Side Nav */
|
||||||
|
.side-nav { @include side-nav; }
|
||||||
|
|
||||||
|
}
|
|
@ -0,0 +1,159 @@
|
||||||
|
//
|
||||||
|
// Split Button Variables
|
||||||
|
//
|
||||||
|
|
||||||
|
// We use these to control different shared styles for Split Buttons
|
||||||
|
$split-button-function-factor: 15% !default;
|
||||||
|
$split-button-pip-color: #fff !default;
|
||||||
|
$split-button-pip-color-alt: #333 !default;
|
||||||
|
$split-button-active-bg-tint: rgba(0,0,0,0.1) !default;
|
||||||
|
|
||||||
|
// We use these to control tiny split buttons
|
||||||
|
$split-button-padding-tny: $button-tny * 9 !default;
|
||||||
|
$split-button-span-width-tny: $button-tny * 6.5 !default;
|
||||||
|
$split-button-pip-size-tny: $button-tny !default;
|
||||||
|
$split-button-pip-top-tny: $button-tny * 2 !default;
|
||||||
|
$split-button-pip-default-float-tny: emCalc(-5px) !default;
|
||||||
|
|
||||||
|
// We use these to control small split buttons
|
||||||
|
$split-button-padding-sml: $button-sml * 7 !default;
|
||||||
|
$split-button-span-width-sml: $button-sml * 5 !default;
|
||||||
|
$split-button-pip-size-sml: $button-sml !default;
|
||||||
|
$split-button-pip-top-sml: $button-sml * 1.5 !default;
|
||||||
|
$split-button-pip-default-float-sml: emCalc(-9px) !default;
|
||||||
|
|
||||||
|
// We use these to control medium split buttons
|
||||||
|
$split-button-padding-med: $button-med * 6.4 !default;
|
||||||
|
$split-button-span-width-med: $button-med * 4 !default;
|
||||||
|
$split-button-pip-size-med: $button-med - emCalc(3px) !default;
|
||||||
|
$split-button-pip-top-med: $button-med * 1.5 !default;
|
||||||
|
$split-button-pip-default-float-med: emCalc(-9px) !default;
|
||||||
|
|
||||||
|
// We use these to control large split buttons
|
||||||
|
$split-button-padding-lrg: $button-lrg * 6 !default;
|
||||||
|
$split-button-span-width-lrg: $button-lrg * 3.75 !default;
|
||||||
|
$split-button-pip-size-lrg: $button-lrg - emCalc(6px) !default;
|
||||||
|
$split-button-pip-top-lrg: $button-lrg + emCalc(5px) !default;
|
||||||
|
$split-button-pip-default-float-lrg: emCalc(-9px) !default;
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Split Button Mixin
|
||||||
|
//
|
||||||
|
|
||||||
|
// We use this mixin to create split buttons that build upon the button mixins
|
||||||
|
@mixin split-button($padding:medium, $pip-color:$split-button-pip-color, $span-border:$primary-color, $base-style:true) {
|
||||||
|
|
||||||
|
// With this, we can control whether or not the base styles come through.
|
||||||
|
@if $base-style {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
// Styling for the split arrow clickable area
|
||||||
|
span {
|
||||||
|
display: block;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
#{$opposite-direction}: 0;
|
||||||
|
top: 0;
|
||||||
|
border-#{$default-float}: solid 1px;
|
||||||
|
|
||||||
|
// Building the triangle pip indicator
|
||||||
|
&:before {
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
display: block;
|
||||||
|
border-style: solid;
|
||||||
|
|
||||||
|
#{$default-float}: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active { background-color: $split-button-active-bg-tint; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Control the border color for the span area of the split button
|
||||||
|
@if $span-border {
|
||||||
|
span { border-#{$default-float}-color: darken($span-border, $split-button-function-factor); }
|
||||||
|
}
|
||||||
|
|
||||||
|
// Style of the button and clickable area for tiny sizes
|
||||||
|
@if $padding == tiny {
|
||||||
|
padding-#{$opposite-direction}: $split-button-padding-tny;
|
||||||
|
|
||||||
|
span { width: $split-button-span-width-tny;
|
||||||
|
&:before {
|
||||||
|
border-width: $split-button-pip-size-tny;
|
||||||
|
top: $split-button-pip-top-tny;
|
||||||
|
margin-#{$default-float}: $split-button-pip-default-float-tny;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Style of the button and clickable area for small sizes
|
||||||
|
@else if $padding == small {
|
||||||
|
padding-#{$opposite-direction}: $split-button-padding-sml;
|
||||||
|
|
||||||
|
span { width: $split-button-span-width-sml;
|
||||||
|
&:before {
|
||||||
|
border-width: $split-button-pip-size-sml;
|
||||||
|
top: $split-button-pip-top-sml;
|
||||||
|
margin-#{$default-float}: $split-button-pip-default-float-sml;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Style of the button and clickable area for default (medium) sizes
|
||||||
|
@else if $padding == medium {
|
||||||
|
padding-#{$opposite-direction}: $split-button-padding-med;
|
||||||
|
|
||||||
|
span { width: $split-button-span-width-med;
|
||||||
|
&:before {
|
||||||
|
border-width: $split-button-pip-size-med;
|
||||||
|
top: $split-button-pip-top-med;
|
||||||
|
margin-#{$default-float}: $split-button-pip-default-float-med;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Style of the button and clickable area for large sizes
|
||||||
|
@else if $padding == large {
|
||||||
|
padding-#{$opposite-direction}: $split-button-padding-lrg;
|
||||||
|
|
||||||
|
span { width: $split-button-span-width-lrg;
|
||||||
|
&:before {
|
||||||
|
border-width: $split-button-pip-size-lrg;
|
||||||
|
top: $split-button-pip-top-lrg;
|
||||||
|
margin-#{$default-float}: $split-button-pip-default-float-lrg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Control the color of the triangle pip
|
||||||
|
@if $pip-color {
|
||||||
|
span:before { border-color: $pip-color transparent transparent transparent; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@if $include-html-button-classes {
|
||||||
|
|
||||||
|
/* Split Buttons */
|
||||||
|
.split.button { @include split-button;
|
||||||
|
|
||||||
|
&.secondary { @include split-button(false, $split-button-pip-color, $secondary-color, false); }
|
||||||
|
&.alert { @include split-button(false, false, $alert-color, false); }
|
||||||
|
&.success { @include split-button(false, false, $success-color, false); }
|
||||||
|
|
||||||
|
&.tiny { @include split-button(tiny, false, false, false); }
|
||||||
|
&.small { @include split-button(small, false, false, false); }
|
||||||
|
&.large { @include split-button(large, false, false, false); }
|
||||||
|
|
||||||
|
&.secondary { @include split-button(false, $split-button-pip-color-alt, false, false); }
|
||||||
|
|
||||||
|
&.radius span { @include side-radius($opposite-direction, $global-radius); }
|
||||||
|
&.round span { @include side-radius($opposite-direction, 1000px); }
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -0,0 +1,67 @@
|
||||||
|
//
|
||||||
|
// Sub Nav Variables
|
||||||
|
//
|
||||||
|
|
||||||
|
// We use these to control margin and padding
|
||||||
|
$sub-nav-list-margin: emCalc(-4px) 0 emCalc(18px) !default;
|
||||||
|
$sub-nav-list-padding-top: emCalc(4px) !default;
|
||||||
|
|
||||||
|
// We use this to control the definition
|
||||||
|
$sub-nav-font-size: emCalc(14px) !default;
|
||||||
|
$sub-nav-font-color: #999 !default;
|
||||||
|
$sub-nav-font-weight: normal !default;
|
||||||
|
$sub-nav-text-decoration: none !default;
|
||||||
|
$sub-nav-border-radius: 1000px !default;
|
||||||
|
|
||||||
|
// We use these to control the active item styles
|
||||||
|
$sub-nav-active-font-weight: bold !default;
|
||||||
|
$sub-nav-active-bg: $primary-color !default;
|
||||||
|
$sub-nav-active-color: #fff !default;
|
||||||
|
$sub-nav-active-padding: emCalc(3px) emCalc(9px) !default;
|
||||||
|
$sub-nav-active-cursor: default !default;
|
||||||
|
|
||||||
|
//
|
||||||
|
// Sub Nav Mixins
|
||||||
|
//
|
||||||
|
|
||||||
|
@mixin sub-nav($font-color:$sub-nav-font-color, $font-size:$sub-nav-font-size, $active-bg:$sub-nav-active-bg) {
|
||||||
|
display: block;
|
||||||
|
width: auto;
|
||||||
|
overflow: hidden;
|
||||||
|
margin: $sub-nav-list-margin;
|
||||||
|
padding-top: $sub-nav-list-padding-top;
|
||||||
|
margin-#{$opposite-direction}: 0;
|
||||||
|
margin-#{$default-float}: emCalc(-9px);
|
||||||
|
|
||||||
|
dt,
|
||||||
|
dd {
|
||||||
|
float: $default-float;
|
||||||
|
display: inline;
|
||||||
|
margin-#{$default-float}: emCalc(9px);
|
||||||
|
margin-bottom: emCalc(10px);
|
||||||
|
font-weight: $sub-nav-font-weight;
|
||||||
|
font-size: $font-size;
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: $font-color;
|
||||||
|
text-decoration: $sub-nav-text-decoration; }
|
||||||
|
|
||||||
|
&.active a {
|
||||||
|
@include radius($sub-nav-border-radius);
|
||||||
|
font-weight: $sub-nav-active-font-weight;
|
||||||
|
background: $active-bg;
|
||||||
|
padding: $sub-nav-active-padding;
|
||||||
|
cursor: $sub-nav-active-cursor;
|
||||||
|
color: $sub-nav-active-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@if $include-html-nav-classes {
|
||||||
|
|
||||||
|
/* Side Nav */
|
||||||
|
.sub-nav { @include sub-nav; }
|
||||||
|
|
||||||
|
}
|
249
content/css/zurb-foundation/foundation/components/_switch.scss
Normal file
|
@ -0,0 +1,249 @@
|
||||||
|
//
|
||||||
|
// Switch Variables
|
||||||
|
//
|
||||||
|
|
||||||
|
// Controlling border styles and background colors for the switch container
|
||||||
|
$switch-border-color: darken(#fff, 20%) !default;
|
||||||
|
$switch-border-style: solid !default;
|
||||||
|
$switch-border-width: 1px !default;
|
||||||
|
$switch-bg: #fff !default;
|
||||||
|
|
||||||
|
// We use these to control the switch heights for our default classes
|
||||||
|
$switch-height-tny: 22px !default;
|
||||||
|
$switch-height-sml: 28px !default;
|
||||||
|
$switch-height-med: 36px !default;
|
||||||
|
$switch-height-lrg: 44px !default;
|
||||||
|
$switch-bottom-margin: emCalc(20px) !default;
|
||||||
|
|
||||||
|
// We use these to control default font sizes for our classes.
|
||||||
|
$switch-font-size-tny: 11px !default;
|
||||||
|
$switch-font-size-sml: 12px !default;
|
||||||
|
$switch-font-size-med: 14px !default;
|
||||||
|
$switch-font-size-lrg: 17px !default;
|
||||||
|
$switch-label-side-padding: 6px !default;
|
||||||
|
|
||||||
|
// We use these to style the switch-paddle
|
||||||
|
$switch-paddle-bg: #fff !default;
|
||||||
|
$switch-paddle-fade-to-color: darken($switch-paddle-bg, 10%) !default;
|
||||||
|
$switch-paddle-border-color: darken($switch-paddle-bg, 35%) !default;
|
||||||
|
$switch-paddle-border-width: 1px !default;
|
||||||
|
$switch-paddle-border-style: solid !default;
|
||||||
|
$switch-paddle-transition-speed: .1s !default;
|
||||||
|
$switch-paddle-transition-ease: ease-out !default;
|
||||||
|
$switch-positive-color: lighten($success-color, 50%) !default;
|
||||||
|
$switch-negative-color: #f5f5f5 !default;
|
||||||
|
|
||||||
|
// Outline Style for tabbing through switches
|
||||||
|
$switch-label-outline: 1px dotted #888 !default;
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Switch Mixins
|
||||||
|
//
|
||||||
|
|
||||||
|
// We use this mixin to create the base styles for our switch element.
|
||||||
|
@mixin switch-base($transition-speed:$switch-paddle-transition-speed, $transition-ease:$switch-paddle-transition-ease) {
|
||||||
|
|
||||||
|
// Default position and structure for switch container.
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0;
|
||||||
|
display: block;
|
||||||
|
overflow: hidden;
|
||||||
|
border-style: $switch-border-style;
|
||||||
|
border-width: $switch-border-width;
|
||||||
|
margin-bottom: $switch-bottom-margin;
|
||||||
|
|
||||||
|
// Default label styles for type and transition
|
||||||
|
label {
|
||||||
|
position: relative;
|
||||||
|
#{$default-float}: 0;
|
||||||
|
z-index: 2;
|
||||||
|
float: $default-float;
|
||||||
|
width: 50%;
|
||||||
|
height: 100%;
|
||||||
|
margin: 0;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: $default-float;
|
||||||
|
|
||||||
|
// Transition for the switch label to follow paddle
|
||||||
|
@include single-transition(all, $transition-speed, $transition-ease);
|
||||||
|
}
|
||||||
|
|
||||||
|
// So that we don't need to recreate the form with any JS, we use the
|
||||||
|
// existing radio button, but we cleverly position and hide it.
|
||||||
|
input {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 3;
|
||||||
|
opacity: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
// Hover and focus styles for the paddle
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// The toggle area for radio switches. We call is a paddle.
|
||||||
|
& > span {
|
||||||
|
position: absolute;
|
||||||
|
top: -1px;
|
||||||
|
#{$default-float}: -1px;
|
||||||
|
z-index: 1;
|
||||||
|
display: block;
|
||||||
|
padding: 0;
|
||||||
|
border-width: $switch-paddle-border-width;
|
||||||
|
border-style: $switch-paddle-border-style;
|
||||||
|
|
||||||
|
// Transition for the switch paddle
|
||||||
|
@include single-transition(all, $transition-speed, $transition-ease);
|
||||||
|
}
|
||||||
|
|
||||||
|
// When a label isn't :checked, we hide it as it slides away.
|
||||||
|
input:not(:checked) + label { opacity: 0; }
|
||||||
|
|
||||||
|
// Controlling the position of the labels as they are toggled.
|
||||||
|
input:checked { display: none !important; }
|
||||||
|
input { #{$default-float}: 0; display: block !important; }
|
||||||
|
|
||||||
|
// Left Label alignment and position changes, including fixes for while inside a custom form
|
||||||
|
input:first-of-type + label,
|
||||||
|
input:first-of-type + span + label { #{$default-float}: -50%; }
|
||||||
|
input:first-of-type:checked + label,
|
||||||
|
input:first-of-type:checked + span + label { #{$default-float}: 0%; }
|
||||||
|
|
||||||
|
// Right Label alignment and position changes, including fixes for while inside a custom form
|
||||||
|
input:last-of-type + label,
|
||||||
|
input:last-of-type + span + label {#{$opposite-direction}: -50%; #{$default-float}: auto; text-align: $opposite-direction; }
|
||||||
|
input:last-of-type:checked + label,
|
||||||
|
input:last-of-type:checked + span + label { #{$opposite-direction}: 0%; #{$default-float}: auto; }
|
||||||
|
|
||||||
|
// Hiding custom form spans since we auto-create them
|
||||||
|
span.custom { display: none !important; }
|
||||||
|
|
||||||
|
// Bugfix for older Webkit, including mobile Webkit. Adapted from:
|
||||||
|
// http://css-tricks.com/webkit-sibling-bug/
|
||||||
|
-webkit-animation: webkitSiblingBugfix infinite 1s;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// We use this mixin to create the size styles for switches.
|
||||||
|
@mixin switch-size($height:$switch-height-med, $font-size:$switch-font-size-med, $line-height:2.3em) {
|
||||||
|
|
||||||
|
height: $height;
|
||||||
|
|
||||||
|
label {
|
||||||
|
padding: 0 emCalc($switch-label-side-padding);
|
||||||
|
line-height: $line-height;
|
||||||
|
font-size: emCalc($font-size);
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
// Move the paddle to the right position
|
||||||
|
&:first-of-type:checked ~ span {
|
||||||
|
#{$default-float}: 100%;
|
||||||
|
margin-#{$default-float}: emCalc(-$height + 1px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
& > span {
|
||||||
|
width: emCalc($height);
|
||||||
|
height: emCalc($height);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// We use this mixin to add color and other fanciness to the switches.
|
||||||
|
@mixin switch-style($paddle-bg:$switch-paddle-bg, $positive-color:$switch-positive-color, $negative-color:$switch-negative-color, $radius:false, $base-style:true) {
|
||||||
|
|
||||||
|
@if $base-style {
|
||||||
|
background: $switch-bg;
|
||||||
|
border-color: $switch-border-color;
|
||||||
|
|
||||||
|
& > span {
|
||||||
|
border-color: darken($paddle-bg, 30%);
|
||||||
|
background: $paddle-bg;
|
||||||
|
background: -moz-linear-gradient(top, $paddle-bg 0%, darken($paddle-bg, 5%) 100%);
|
||||||
|
background: -webkit-linear-gradient(top, $paddle-bg 0%, darken($paddle-bg, 5%) 100%);
|
||||||
|
background: linear-gradient(to bottom, $paddle-bg 0%, darken($paddle-bg, 5%) 100%);
|
||||||
|
|
||||||
|
// Building the alternating colored sides of the switch
|
||||||
|
-webkit-box-shadow: 2px 0 10px 0 rgba(0,0,0,0.07),
|
||||||
|
1000px 0 0 1000px $positive-color,
|
||||||
|
-2px 0 10px 0 rgba(0,0,0,0.07),
|
||||||
|
-1000px 0 0 1000px $negative-color;
|
||||||
|
box-shadow: 2px 0 10px 0 rgba(0,0,0,0.07),
|
||||||
|
1000px 0 0 980px $positive-color,
|
||||||
|
-2px 0 10px 0 rgba(0,0,0,0.07),
|
||||||
|
-1000px 0 0 1000px $negative-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
|
& > span {
|
||||||
|
background: $paddle-bg;
|
||||||
|
background: -moz-linear-gradient(top, $paddle-bg 0%, darken($paddle-bg, 10%) 100%);
|
||||||
|
background: -webkit-linear-gradient(top, $paddle-bg 0%, darken($paddle-bg, 10%) 100%);
|
||||||
|
background: linear-gradient(to bottom, $paddle-bg 0%, darken($paddle-bg, 10%) 100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active { background: transparent; }
|
||||||
|
}
|
||||||
|
|
||||||
|
// Setting up the radius for switches
|
||||||
|
@if $radius == true {
|
||||||
|
@include radius(4px);
|
||||||
|
& > span { @include radius(3px); }
|
||||||
|
}
|
||||||
|
@else if $radius {
|
||||||
|
@include radius($radius);
|
||||||
|
& > span { @include radius($radius - 1px); }
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// We use this to quickly create switches with a single mixin
|
||||||
|
@mixin switch($transition-speed:$switch-paddle-transition-speed, $transition-ease:$switch-paddle-transition-ease, $height:$switch-height-med, $font-size:$switch-font-size-med, $line-height:2.3em, $paddle-bg:$switch-paddle-bg, $positive-color:$switch-positive-color, $negative-color:$switch-negative-color, $radius:false, $base-style:true) {
|
||||||
|
@include switch-base($transition-speed, $transition-ease);
|
||||||
|
@include switch-size($height, $font-size, $line-height);
|
||||||
|
@include switch-style($paddle-bg, $positive-color, $negative-color, $radius, $base-style);
|
||||||
|
}
|
||||||
|
|
||||||
|
@if $include-html-button-classes {
|
||||||
|
|
||||||
|
/* Foundation Switches */
|
||||||
|
@media only screen {
|
||||||
|
|
||||||
|
// Containing element for the radio switch
|
||||||
|
div.switch {
|
||||||
|
@include switch;
|
||||||
|
|
||||||
|
// Large radio switches
|
||||||
|
&.large { @include switch-size($switch-height-lrg, $switch-font-size-lrg); }
|
||||||
|
|
||||||
|
// Small radio switches
|
||||||
|
&.small { @include switch-size($switch-height-sml, $switch-font-size-sml, 2.1em); }
|
||||||
|
|
||||||
|
// Tiny radio switches
|
||||||
|
&.tiny { @include switch-size($switch-height-tny, $switch-font-size-tny, 1.9em); }
|
||||||
|
|
||||||
|
// Add a radius to the switch
|
||||||
|
&.radius { @include radius(4px);
|
||||||
|
& > span { @include radius(3px); }
|
||||||
|
}
|
||||||
|
|
||||||
|
// Make the switch completely round, like a pill
|
||||||
|
&.round { @include radius(1000px);
|
||||||
|
& > span { @include radius(999px); }
|
||||||
|
label { padding: 0 emCalc($switch-label-side-padding + 3px); }
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes webkitSiblingBugfix { from { position: relative; } to { position: relative; } }
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,80 @@
|
||||||
|
//
|
||||||
|
// Table Variables
|
||||||
|
//
|
||||||
|
|
||||||
|
// These control the background color for the table and even rows
|
||||||
|
$table-bg: #fff !default;
|
||||||
|
$table-even-row-bg: #f9f9f9 !default;
|
||||||
|
|
||||||
|
// These control the table cell border style
|
||||||
|
$table-border-style: solid !default;
|
||||||
|
$table-border-size: 1px !default;
|
||||||
|
$table-border-color: #ddd !default;
|
||||||
|
|
||||||
|
// These control the table head styles
|
||||||
|
$table-head-bg: #f5f5f5 !default;
|
||||||
|
$table-head-font-size: emCalc(14px) !default;
|
||||||
|
$table-head-font-color: #222 !default;
|
||||||
|
$table-head-font-weight: bold !default;
|
||||||
|
$table-head-padding: emCalc(8px) emCalc(10px) emCalc(10px) !default;
|
||||||
|
|
||||||
|
// These control the row padding and font styles
|
||||||
|
$table-row-padding: emCalc(9px) emCalc(10px) !default;
|
||||||
|
$table-row-font-size: emCalc(14px) !default;
|
||||||
|
$table-row-font-color: #222 !default;
|
||||||
|
$table-line-height: emCalc(18px) !default;
|
||||||
|
|
||||||
|
// These are for controlling the display and margin of tables
|
||||||
|
$table-display: table-cell !default;
|
||||||
|
$table-margin-bottom: emCalc(20px) !default;
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Table Mixin
|
||||||
|
//
|
||||||
|
@mixin table {
|
||||||
|
background: $table-bg;
|
||||||
|
margin-bottom: $table-margin-bottom;
|
||||||
|
border: $table-border-style $table-border-size $table-border-color;
|
||||||
|
|
||||||
|
thead,
|
||||||
|
tfoot {
|
||||||
|
background: $table-head-bg;
|
||||||
|
font-weight: $table-head-font-weight;
|
||||||
|
|
||||||
|
tr {
|
||||||
|
th,
|
||||||
|
td {
|
||||||
|
padding: $table-head-padding;
|
||||||
|
font-size: $table-head-font-size;
|
||||||
|
color: $table-head-font-color;
|
||||||
|
text-align: $default-float;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
tr {
|
||||||
|
th,
|
||||||
|
td {
|
||||||
|
padding: $table-row-padding;
|
||||||
|
font-size: $table-row-font-size;
|
||||||
|
color: $table-row-font-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.even,
|
||||||
|
&.alt,
|
||||||
|
&:nth-of-type(even) { background: $table-even-row-bg; }
|
||||||
|
}
|
||||||
|
|
||||||
|
thead tr th,
|
||||||
|
tfoot tr th,
|
||||||
|
tbody tr td,
|
||||||
|
tr td,
|
||||||
|
tfoot tr td { display: $table-display; line-height: $table-line-height; }
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Tables */
|
||||||
|
table {
|
||||||
|
@include table;
|
||||||
|
}
|
|
@ -0,0 +1,45 @@
|
||||||
|
//
|
||||||
|
// Image Thumbnail Variables
|
||||||
|
//
|
||||||
|
|
||||||
|
// We use these to control border styles
|
||||||
|
$thumb-border-style: solid !default;
|
||||||
|
$thumb-border-width: 4px !default;
|
||||||
|
$thumb-border-color: #fff !default;
|
||||||
|
$thumb-box-shadow: 0 0 0 1px rgba(#000,.2) !default;
|
||||||
|
$thumb-box-shadow-hover: 0 0 6px 1px rgba($primary-color,0.5) !default;
|
||||||
|
|
||||||
|
// Radius and transition speed for thumbs
|
||||||
|
$thumb-radius: $global-radius !default;
|
||||||
|
$thumb-transition-speed: 200ms !default;
|
||||||
|
|
||||||
|
//
|
||||||
|
// Image Thumbnail Mixins
|
||||||
|
//
|
||||||
|
|
||||||
|
// We use this to create image thumbnail styles.
|
||||||
|
@mixin thumb($border-width:$thumb-border-width, $box-shadow:$thumb-box-shadow, $box-shadow-hover:$thumb-box-shadow-hover) {
|
||||||
|
display: inline-block;
|
||||||
|
border: $thumb-border-style $border-width $thumb-border-color;
|
||||||
|
-webkit-box-shadow: $box-shadow;
|
||||||
|
box-shadow: $box-shadow;
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus { -webkit-box-shadow: $box-shadow-hover; box-shadow: $box-shadow-hover; }
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// If html classes are turned on we'll include these classes.
|
||||||
|
@if $include-html-media-classes {
|
||||||
|
|
||||||
|
/* Image Thumbnails */
|
||||||
|
.th {
|
||||||
|
@include thumb;
|
||||||
|
@include single-transition(all,$thumb-transition-speed,ease-out);
|
||||||
|
|
||||||
|
&.radius { @include radius($thumb-radius); }
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
113
content/css/zurb-foundation/foundation/components/_tooltips.scss
Normal file
|
@ -0,0 +1,113 @@
|
||||||
|
//
|
||||||
|
// Tooltip Variables
|
||||||
|
//
|
||||||
|
$has-tip-border-bottom: dotted 1px #ccc !default;
|
||||||
|
$has-tip-font-weight: bold !default;
|
||||||
|
$has-tip-font-color: #333 !default;
|
||||||
|
$has-tip-border-bottom-hover: dotted 1px darken($primary-color, 20%) !default;
|
||||||
|
$has-tip-font-color-hover: $primary-color !default;
|
||||||
|
$has-tip-cursor-type: help !default;
|
||||||
|
|
||||||
|
$tooltip-padding: emCalc(8px) !default;
|
||||||
|
$tooltip-bg: #000 !default;
|
||||||
|
$tooltip-font-size: emCalc(15px) !default;
|
||||||
|
$tooltip-font-weight: bold !default;
|
||||||
|
$tooltip-font-color: #fff !default;
|
||||||
|
$tooltip-line-height: 1.3 !default;
|
||||||
|
$tooltip-close-font-size: emCalc(10px) !default;
|
||||||
|
$tooltip-close-font-weight: normal !default;
|
||||||
|
$tooltip-close-font-color: #888 !default;
|
||||||
|
$tooltip-font-size-sml: emCalc(14px) !default;
|
||||||
|
$tooltip-radius: $global-radius !default;
|
||||||
|
$tooltip-pip-size: 5px !default;
|
||||||
|
|
||||||
|
|
||||||
|
/* Tooltips */
|
||||||
|
|
||||||
|
.has-tip {
|
||||||
|
border-bottom: $has-tip-border-bottom;
|
||||||
|
cursor: $has-tip-cursor-type;
|
||||||
|
font-weight: $has-tip-font-weight;
|
||||||
|
color: $has-tip-font-color;
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
|
border-bottom: $has-tip-border-bottom-hover;
|
||||||
|
color: $has-tip-font-color-hover;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.tip-left,
|
||||||
|
&.tip-right { float: none !important; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 999;
|
||||||
|
font-weight: $tooltip-font-weight;
|
||||||
|
font-size: $tooltip-font-size;
|
||||||
|
line-height: $tooltip-line-height;
|
||||||
|
padding: $tooltip-padding;
|
||||||
|
max-width: 85%;
|
||||||
|
#{$default-float}: 50%;
|
||||||
|
width: 100%;
|
||||||
|
color: $tooltip-font-color;
|
||||||
|
background: $tooltip-bg;
|
||||||
|
@include radius($tooltip-radius);
|
||||||
|
|
||||||
|
&>.nub {
|
||||||
|
display: block;
|
||||||
|
#{$default-float}: $tooltip-pip-size;
|
||||||
|
position: absolute;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border: solid $tooltip-pip-size;
|
||||||
|
border-color: transparent transparent $tooltip-bg transparent;
|
||||||
|
top: -($tooltip-pip-size * 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.opened {
|
||||||
|
color: $has-tip-font-color-hover !important;
|
||||||
|
border-bottom: $has-tip-border-bottom-hover !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tap-to-close {
|
||||||
|
display: block;
|
||||||
|
font-size: $tooltip-close-font-size;
|
||||||
|
color: $tooltip-close-font-color;
|
||||||
|
font-weight: $tooltip-close-font-weight;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media #{$small} {
|
||||||
|
.tooltip {
|
||||||
|
&>.nub {
|
||||||
|
border-color: transparent transparent $tooltip-bg transparent;
|
||||||
|
top: -($tooltip-pip-size * 2);
|
||||||
|
}
|
||||||
|
&.tip-top>.nub {
|
||||||
|
border-color: $tooltip-bg transparent transparent transparent;
|
||||||
|
top: auto;
|
||||||
|
bottom: -($tooltip-pip-size * 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.tip-left,
|
||||||
|
&.tip-right { float: none !important; }
|
||||||
|
|
||||||
|
&.tip-left>.nub {
|
||||||
|
border-color: transparent transparent transparent $tooltip-bg;
|
||||||
|
right: -($tooltip-pip-size * 2);
|
||||||
|
left: auto;
|
||||||
|
top: 50%;
|
||||||
|
margin-top: -$tooltip-pip-size;
|
||||||
|
}
|
||||||
|
&.tip-right>.nub {
|
||||||
|
border-color: transparent $tooltip-bg transparent transparent;
|
||||||
|
right: auto;
|
||||||
|
left: -($tooltip-pip-size * 2);
|
||||||
|
top: 50%;
|
||||||
|
margin-top: -$tooltip-pip-size;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
459
content/css/zurb-foundation/foundation/components/_top-bar.scss
Normal file
|
@ -0,0 +1,459 @@
|
||||||
|
//
|
||||||
|
// Top Bar Variables
|
||||||
|
//
|
||||||
|
|
||||||
|
// Background color for the top bar
|
||||||
|
$topbar-bg: #111 !default;
|
||||||
|
|
||||||
|
// Height and margin
|
||||||
|
$topbar-height: 45px !default;
|
||||||
|
$topbar-margin-bottom: emCalc(30px) !default;
|
||||||
|
|
||||||
|
// Control Input height for top bar
|
||||||
|
$topbar-input-height: 2.45em !default;
|
||||||
|
|
||||||
|
// Controlling the styles for the title in the top bar
|
||||||
|
$topbar-title-weight: bold !default;
|
||||||
|
$topbar-title-font-size: emCalc(17px) !default;
|
||||||
|
|
||||||
|
// Set the link colors and styles for top-level nav
|
||||||
|
$topbar-link-color: #fff !default;
|
||||||
|
$topbar-link-weight: bold !default;
|
||||||
|
$topbar-link-font-size: emCalc(13px) !default;
|
||||||
|
|
||||||
|
// Style the top bar dropdown elements
|
||||||
|
$topbar-dropdown-bg: #333 !default;
|
||||||
|
$topbar-dropdown-link-color: #fff !default;
|
||||||
|
$topbar-dropdown-toggle-size: 5px !default;
|
||||||
|
$topbar-dropdown-toggle-color: #fff !default;
|
||||||
|
$topbar-dropdown-toggle-alpha: 0.5 !default;
|
||||||
|
$dropdown-label-color: #555 !default;
|
||||||
|
|
||||||
|
// Top menu icon styles
|
||||||
|
$topbar-menu-link-transform: uppercase !default;
|
||||||
|
$topbar-menu-link-font-size: emCalc(13px) !default;
|
||||||
|
$topbar-menu-link-weight: bold !default;
|
||||||
|
$topbar-menu-link-color: #fff !default;
|
||||||
|
$topbar-menu-icon-color: #fff !default;
|
||||||
|
$topbar-menu-link-color-toggled: #888 !default;
|
||||||
|
$topbar-menu-icon-color-toggled: #888 !default;
|
||||||
|
|
||||||
|
// Transitions and breakpoint styles
|
||||||
|
$topbar-transition-speed: 300ms !default;
|
||||||
|
$topbar-breakpoint: emCalc(940px) !default; // Change to 9999px for always mobile layout
|
||||||
|
$topbar-media-query: "only screen and (min-width:"#{$topbar-breakpoint}")" !default;
|
||||||
|
|
||||||
|
|
||||||
|
/* Wrapped around .top-bar to contain to grid width */
|
||||||
|
.contain-to-grid {
|
||||||
|
width: 100%;
|
||||||
|
background: $topbar-bg;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Wrapped around .top-bar to make it fixed at the top
|
||||||
|
.fixed {
|
||||||
|
width: 100%;
|
||||||
|
#{$default-float}: 0;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
z-index: 99;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-bar {
|
||||||
|
overflow: hidden;
|
||||||
|
height: $topbar-height;
|
||||||
|
line-height: $topbar-height;
|
||||||
|
position: relative;
|
||||||
|
background: $topbar-bg;
|
||||||
|
margin-bottom: $topbar-margin-bottom;
|
||||||
|
|
||||||
|
// Topbar Global list Styles
|
||||||
|
ul {
|
||||||
|
margin-bottom: 0;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row { max-width: none; }
|
||||||
|
|
||||||
|
form,
|
||||||
|
input { margin-bottom: 0; }
|
||||||
|
|
||||||
|
input { height: $topbar-input-height; }
|
||||||
|
|
||||||
|
.button { padding-top: .5em; padding-bottom: .5em; margin-bottom: 0; }
|
||||||
|
|
||||||
|
// Title Area
|
||||||
|
.title-area { position: relative; }
|
||||||
|
|
||||||
|
.name {
|
||||||
|
height: $topbar-height;
|
||||||
|
margin: 0;
|
||||||
|
font-size: $em-base;
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
line-height: $topbar-height;
|
||||||
|
font-size: $topbar-title-font-size;
|
||||||
|
margin: 0;
|
||||||
|
a {
|
||||||
|
font-weight: $topbar-title-weight;
|
||||||
|
color: $topbar-link-color;
|
||||||
|
width: 50%;
|
||||||
|
display: block;
|
||||||
|
padding: 0 $topbar-height / 3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Menu toggle button on small devices
|
||||||
|
.toggle-topbar {
|
||||||
|
position: absolute;
|
||||||
|
#{$opposite-direction}: 0;
|
||||||
|
top: 0;
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: $topbar-link-color;
|
||||||
|
text-transform: $topbar-menu-link-transform;
|
||||||
|
font-size: $topbar-menu-link-font-size;
|
||||||
|
font-weight: $topbar-menu-link-weight;
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
padding: 0 $topbar-height / 3;
|
||||||
|
height: $topbar-height;
|
||||||
|
line-height: $topbar-height;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Adding the class "menu-icon" will add the 3-line icon people love and adore.
|
||||||
|
&.menu-icon {
|
||||||
|
#{$opposite-direction}: $topbar-height / 3;
|
||||||
|
top: 50%;
|
||||||
|
margin-top: -16px;
|
||||||
|
padding-#{$default-float}: 40px;
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-indent: -48px;
|
||||||
|
width: 34px;
|
||||||
|
height: 34px;
|
||||||
|
line-height: 33px;
|
||||||
|
padding: 0;
|
||||||
|
color: $topbar-menu-link-color;
|
||||||
|
|
||||||
|
span {
|
||||||
|
position: absolute;
|
||||||
|
#{$opposite-direction}: 0;
|
||||||
|
display: block;
|
||||||
|
width: 16px;
|
||||||
|
height: 0;
|
||||||
|
// Shh, don't tell, but box-shadows create the menu icon :)
|
||||||
|
-webkit-box-shadow: 0 10px 0 1px $topbar-menu-icon-color,
|
||||||
|
0 16px 0 1px $topbar-menu-icon-color,
|
||||||
|
0 22px 0 1px $topbar-menu-icon-color;
|
||||||
|
|
||||||
|
box-shadow: 0 10px 0 1px $topbar-menu-icon-color,
|
||||||
|
0 16px 0 1px $topbar-menu-icon-color,
|
||||||
|
0 22px 0 1px $topbar-menu-icon-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Change things up when the top-bar is expanded
|
||||||
|
&.expanded {
|
||||||
|
height: auto;
|
||||||
|
background: transparent;
|
||||||
|
|
||||||
|
.title-area { background: $topbar-bg; }
|
||||||
|
|
||||||
|
.toggle-topbar {
|
||||||
|
a { color: $topbar-menu-link-color-toggled;
|
||||||
|
span {
|
||||||
|
// Shh, don't tell, but box-shadows create the menu icon :)
|
||||||
|
-webkit-box-shadow: 0 10px 0 1px $topbar-menu-icon-color-toggled,
|
||||||
|
0 16px 0 1px $topbar-menu-icon-color-toggled,
|
||||||
|
0 22px 0 1px $topbar-menu-icon-color-toggled;
|
||||||
|
|
||||||
|
box-shadow: 0 10px 0 1px $topbar-menu-icon-color-toggled,
|
||||||
|
0 16px 0 1px $topbar-menu-icon-color-toggled,
|
||||||
|
0 22px 0 1px $topbar-menu-icon-color-toggled;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// Right and Left Navigation that stacked by default
|
||||||
|
.top-bar-section {
|
||||||
|
#{$default-float}: 0;
|
||||||
|
position: relative;
|
||||||
|
width: auto;
|
||||||
|
@include single-transition($default-float, $topbar-transition-speed);
|
||||||
|
|
||||||
|
ul {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
display: block;
|
||||||
|
background: $topbar-dropdown-bg;
|
||||||
|
font-size: $em-base;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
border-bottom: solid 1px lighten($topbar-dropdown-bg, 10%);
|
||||||
|
border-top: solid 1px darken($topbar-dropdown-bg, 10%);
|
||||||
|
clear: both;
|
||||||
|
height: 1px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul li {
|
||||||
|
& > a {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
color: $topbar-link-color;
|
||||||
|
padding: 12px 0 12px 0;
|
||||||
|
padding-#{$default-float}: $topbar-height / 3;
|
||||||
|
font-size: $topbar-link-font-size;
|
||||||
|
font-weight: $topbar-link-weight;
|
||||||
|
background: $topbar-dropdown-bg;
|
||||||
|
height: $topbar-height;
|
||||||
|
|
||||||
|
&:hover { background: darken($topbar-dropdown-bg, 3%); }
|
||||||
|
|
||||||
|
|
||||||
|
&.button {
|
||||||
|
background: $primary-color;
|
||||||
|
font-size: $topbar-link-font-size;
|
||||||
|
&:hover {
|
||||||
|
background: darken($primary-color, 10%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.button.secondary {
|
||||||
|
background: $secondary-color;
|
||||||
|
&:hover {
|
||||||
|
background: darken($secondary-color, 10%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.button.success {
|
||||||
|
background: $success-color;
|
||||||
|
&:hover {
|
||||||
|
background: darken($success-color, 10%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.button.alert {
|
||||||
|
background: $alert-color;
|
||||||
|
&:hover {
|
||||||
|
background: darken($alert-color, 10%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// Apply the active link color when it has that class
|
||||||
|
&.active > a { background: darken($topbar-dropdown-bg, 3%); }
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add some extra padding for list items contains buttons
|
||||||
|
.has-form { padding: $topbar-height / 3; }
|
||||||
|
|
||||||
|
// Styling for list items that have a dropdown within them.
|
||||||
|
.has-dropdown {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
& > a {
|
||||||
|
&:after {
|
||||||
|
@include css-triangle($topbar-dropdown-toggle-size, rgba($topbar-dropdown-toggle-color, $topbar-dropdown-toggle-alpha), $default-float);
|
||||||
|
margin-#{$opposite-direction}: $topbar-height / 3;
|
||||||
|
margin-top: -($topbar-dropdown-toggle-size / 2) - 2;
|
||||||
|
position: absolute;
|
||||||
|
top: 22px;
|
||||||
|
#{$opposite-direction}: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.moved { position: static;
|
||||||
|
& > .dropdown {
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Styling elements inside of dropdowns
|
||||||
|
.dropdown {
|
||||||
|
position: absolute;
|
||||||
|
#{$default-float}: 100%;
|
||||||
|
top: 0;
|
||||||
|
visibility: hidden;
|
||||||
|
z-index: 99;
|
||||||
|
|
||||||
|
li { width: 100%;
|
||||||
|
a {
|
||||||
|
font-weight: normal;
|
||||||
|
padding: 8px $topbar-height / 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.title h5 { margin-bottom: 0;
|
||||||
|
a {
|
||||||
|
color: $topbar-link-color;
|
||||||
|
line-height: $topbar-height / 2;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
padding: 8px $topbar-height / 3 2px;
|
||||||
|
margin-bottom: 0;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: $dropdown-label-color;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: emCalc(10px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Element that controls breakpoint, no need to change this ever
|
||||||
|
.top-bar-js-breakpoint {
|
||||||
|
width: $topbar-breakpoint !important;
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
.js-generated { display: block; }
|
||||||
|
|
||||||
|
|
||||||
|
// Top Bar styles intended for screen sizes above the breakpoint.
|
||||||
|
@media #{$topbar-media-query} {
|
||||||
|
.top-bar { background: $topbar-bg; @include clearfix; overflow: visible;
|
||||||
|
.toggle-topbar { display: none; }
|
||||||
|
|
||||||
|
.title-area { float: $default-float; }
|
||||||
|
.name h1 a { width: auto; }
|
||||||
|
|
||||||
|
input,
|
||||||
|
.button {
|
||||||
|
line-height: 2em;
|
||||||
|
font-size: emCalc(14px);
|
||||||
|
height: 2em;
|
||||||
|
padding: 0 10px;
|
||||||
|
position: relative;
|
||||||
|
top: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.expanded { background: $topbar-bg; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.contain-to-grid .top-bar { max-width: $row-width; margin: 0 auto; }
|
||||||
|
|
||||||
|
.top-bar-section {
|
||||||
|
@include single-transition(none,0,0);
|
||||||
|
#{$default-float}: 0 !important;
|
||||||
|
|
||||||
|
ul {
|
||||||
|
width: auto;
|
||||||
|
height: auto !important;
|
||||||
|
display: inline;
|
||||||
|
|
||||||
|
li {
|
||||||
|
float: $default-float;
|
||||||
|
.js-generated { display: none; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
a:not(.button) {
|
||||||
|
padding: 0 $topbar-height / 3;
|
||||||
|
line-height: $topbar-height;
|
||||||
|
background: $topbar-bg;
|
||||||
|
&:hover { background: darken($topbar-dropdown-bg, 30%); }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.has-dropdown {
|
||||||
|
& > a {
|
||||||
|
padding-#{$opposite-direction}: $topbar-dropdown-toggle-size * 7 !important;
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
@include css-triangle($topbar-dropdown-toggle-size, rgba($topbar-dropdown-toggle-color, $topbar-dropdown-toggle-alpha), top);
|
||||||
|
margin-top: -($topbar-dropdown-toggle-size / 2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.moved { position: relative;
|
||||||
|
& > .dropdown { visibility: hidden; }
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:active {
|
||||||
|
& > .dropdown {
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown li.has-dropdown {
|
||||||
|
& > a {
|
||||||
|
&:after {
|
||||||
|
border: none;
|
||||||
|
content: "\00bb";
|
||||||
|
margin-top: -7px;
|
||||||
|
#{$opposite-direction}: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown {
|
||||||
|
#{$default-float}: 0;
|
||||||
|
top: auto;
|
||||||
|
background: transparent;
|
||||||
|
min-width: 100%;
|
||||||
|
|
||||||
|
li {
|
||||||
|
a {
|
||||||
|
color: $topbar-dropdown-link-color;
|
||||||
|
line-height: 1;
|
||||||
|
white-space: nowrap;
|
||||||
|
padding: 7px $topbar-height / 3;
|
||||||
|
background: lighten($topbar-bg, 5%);
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
white-space: nowrap;
|
||||||
|
background: lighten($topbar-bg, 5%);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Second Level Dropdowns
|
||||||
|
.dropdown {
|
||||||
|
#{$default-float}: 100%;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
& > ul > .divider {
|
||||||
|
border-bottom: none;
|
||||||
|
border-top: none;
|
||||||
|
border-#{$opposite-direction}: solid 1px lighten($topbar-bg, 10%);
|
||||||
|
border-#{$default-float}: solid 1px darken($topbar-bg, 10%);
|
||||||
|
clear: none;
|
||||||
|
height: $topbar-height;
|
||||||
|
width: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.has-form {
|
||||||
|
background: $topbar-bg;
|
||||||
|
padding: 0 $topbar-height / 3;
|
||||||
|
height: $topbar-height;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Position overrides for ul.right
|
||||||
|
ul.right {
|
||||||
|
li .dropdown {
|
||||||
|
left: auto;
|
||||||
|
right: 0;
|
||||||
|
|
||||||
|
li .dropdown { right: 100%; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
422
content/css/zurb-foundation/foundation/components/_type.scss
Normal file
|
@ -0,0 +1,422 @@
|
||||||
|
//
|
||||||
|
// Typography Variables
|
||||||
|
//
|
||||||
|
|
||||||
|
// We use these to control header font styles
|
||||||
|
$header-font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif !default;
|
||||||
|
$header-font-weight: bold !default;
|
||||||
|
$header-font-style: normal !default;
|
||||||
|
$header-font-color: #222 !default;
|
||||||
|
$header-line-height: 1.4 !default;
|
||||||
|
$header-top-margin: .2em !default;
|
||||||
|
$header-bottom-margin: .5em !default;
|
||||||
|
$header-text-rendering: optimizeLegibility !default;
|
||||||
|
|
||||||
|
// We use these to control header font sizes
|
||||||
|
$h1-font-size: emCalc(44px) !default;
|
||||||
|
$h2-font-size: emCalc(37px) !default;
|
||||||
|
$h3-font-size: emCalc(27px) !default;
|
||||||
|
$h4-font-size: emCalc(23px) !default;
|
||||||
|
$h5-font-size: emCalc(18px) !default;
|
||||||
|
$h6-font-size: 1em !default;
|
||||||
|
|
||||||
|
// These control how subheaders are styled.
|
||||||
|
$subheader-line-height: 1.4 !default;
|
||||||
|
$subheader-font-color: lighten($header-font-color, 30%) !default;
|
||||||
|
$subheader-font-weight: 300 !default;
|
||||||
|
$subheader-top-margin: .2em !default;
|
||||||
|
$subheader-bottom-margin: .5em !default;
|
||||||
|
|
||||||
|
// A general <small> styling
|
||||||
|
$small-font-size: 60% !default;
|
||||||
|
$small-font-color: lighten($header-font-color, 30%) !default;
|
||||||
|
|
||||||
|
// We use these to style paragraphs
|
||||||
|
$paragraph-font-family: inherit !default;
|
||||||
|
$paragraph-font-weight: normal !default;
|
||||||
|
$paragraph-font-size: 1em !default;
|
||||||
|
$paragraph-line-height: 1.6 !default;
|
||||||
|
$paragraph-margin-bottom: emCalc(20px) !default;
|
||||||
|
$paragraph-aside-font-size: emCalc(14px) !default;
|
||||||
|
$paragraph-aside-line-height: 1.35 !default;
|
||||||
|
$paragraph-aside-font-style: italic !default;
|
||||||
|
$paragraph-text-rendering: optimizeLegibility !default;
|
||||||
|
|
||||||
|
// We use these to style <code> tags
|
||||||
|
$code-color: darken($alert-color, 15%) !default;
|
||||||
|
$code-font-family: Consolas, 'Liberation Mono', Courier, monospace !default;
|
||||||
|
$code-font-weight: bold !default;
|
||||||
|
|
||||||
|
// We use these to style anchors
|
||||||
|
$anchor-text-decoration: none !default;
|
||||||
|
$anchor-font-color: $primary-color !default;
|
||||||
|
$anchor-font-color-hover: darken($primary-color, 5%) !default;
|
||||||
|
|
||||||
|
// We use these to style the <hr> element
|
||||||
|
$hr-border-width: 1px !default;
|
||||||
|
$hr-border-style: solid !default;
|
||||||
|
$hr-border-color: #ddd !default;
|
||||||
|
$hr-margin: emCalc(20px) !default;
|
||||||
|
|
||||||
|
// We use these to style lists
|
||||||
|
$list-style-position: outside !default;
|
||||||
|
$list-side-margin: emCalc(20px) !default;
|
||||||
|
$definition-list-header-weight: bold !default;
|
||||||
|
$definition-list-header-margin-bottom: .3em !default;
|
||||||
|
$definition-list-margin-bottom: emCalc(12px) !default;
|
||||||
|
|
||||||
|
// We use these to style blockquotes
|
||||||
|
$blockquote-font-color: lighten($header-font-color, 30%) !default;
|
||||||
|
$blockquote-padding: emCalc(9px) emCalc(20px) 0 emCalc(19px) !default;
|
||||||
|
$blockquote-border: 1px solid #ddd !default;
|
||||||
|
$blockquote-cite-font-size: emCalc(13px) !default;
|
||||||
|
$blockquote-cite-font-color: lighten($header-font-color, 20%) !default;
|
||||||
|
$blockquote-cite-link-color: $blockquote-cite-font-color !default;
|
||||||
|
|
||||||
|
// Acronym styles
|
||||||
|
$acronym-underline: 1px dotted #ddd !default;
|
||||||
|
|
||||||
|
// We use these to control padding and margin
|
||||||
|
$microformat-padding: emCalc(10px) emCalc(12px) !default;
|
||||||
|
$microformat-margin: 0 0 emCalc(20px) 0 !default;
|
||||||
|
|
||||||
|
// We use these to control the border styles
|
||||||
|
$microformat-border-width: 1px !default;
|
||||||
|
$microformat-border-style: solid !default;
|
||||||
|
$microformat-border-color: #ddd !default;
|
||||||
|
|
||||||
|
// We use these to control full name font styles
|
||||||
|
$microformat-fullname-font-weight: bold !default;
|
||||||
|
$microformat-fullname-font-size: emCalc(15px) !default;
|
||||||
|
|
||||||
|
// We use this to control the summary font styles
|
||||||
|
$microformat-summary-font-weight: bold !default;
|
||||||
|
|
||||||
|
// We use this to control abbr padding
|
||||||
|
$microformat-abbr-padding: 0 emCalc(1px) !default;
|
||||||
|
|
||||||
|
// We use this to control abbr font styles
|
||||||
|
$microformat-abbr-font-weight: bold !default;
|
||||||
|
$microformat-abbr-font-decoration: none !default;
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Typography Placeholders
|
||||||
|
//
|
||||||
|
%lead {
|
||||||
|
font-size: $paragraph-font-size + emCalc(3.5px);
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
%subheader {
|
||||||
|
line-height: $subheader-line-height;
|
||||||
|
color: $subheader-font-color;
|
||||||
|
font-weight: $subheader-font-weight;
|
||||||
|
margin-top: $subheader-top-margin;
|
||||||
|
margin-bottom: $subheader-bottom-margin;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Typography resets */
|
||||||
|
div,
|
||||||
|
dl,
|
||||||
|
dt,
|
||||||
|
dd,
|
||||||
|
ul,
|
||||||
|
ol,
|
||||||
|
li,
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6,
|
||||||
|
pre,
|
||||||
|
form,
|
||||||
|
p,
|
||||||
|
blockquote,
|
||||||
|
th,
|
||||||
|
td {
|
||||||
|
margin:0;
|
||||||
|
padding:0;
|
||||||
|
direction: $text-direction;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Default Link Styles */
|
||||||
|
a {
|
||||||
|
color: $anchor-font-color;
|
||||||
|
text-decoration: $anchor-text-decoration;
|
||||||
|
line-height: inherit;
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus { color: $anchor-font-color-hover; }
|
||||||
|
|
||||||
|
img { border:none; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Default paragraph styles */
|
||||||
|
p {
|
||||||
|
font-family: $paragraph-font-family;
|
||||||
|
font-weight: $paragraph-font-weight;
|
||||||
|
font-size: $paragraph-font-size;
|
||||||
|
line-height: $paragraph-line-height;
|
||||||
|
margin-bottom: $paragraph-margin-bottom;
|
||||||
|
text-rendering: $paragraph-text-rendering;
|
||||||
|
|
||||||
|
&.lead { @extend %lead; }
|
||||||
|
|
||||||
|
& aside {
|
||||||
|
font-size: $paragraph-aside-font-size;
|
||||||
|
line-height: $paragraph-aside-line-height;
|
||||||
|
font-style: $paragraph-aside-font-style;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Default header styles */
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
font-family: $header-font-family;
|
||||||
|
font-weight: $header-font-weight;
|
||||||
|
font-style: $header-font-style;
|
||||||
|
color: $header-font-color;
|
||||||
|
text-rendering: $header-text-rendering;
|
||||||
|
margin-top: $header-top-margin;
|
||||||
|
margin-bottom: $header-bottom-margin;
|
||||||
|
line-height: $header-line-height - emCalc(3px);
|
||||||
|
|
||||||
|
small {
|
||||||
|
font-size: $small-font-size;
|
||||||
|
color: $small-font-color;
|
||||||
|
line-height: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 { font-size: $h1-font-size - emCalc(10px); }
|
||||||
|
h2 { font-size: $h2-font-size - emCalc(10px); }
|
||||||
|
h3 { font-size: $h3-font-size - emCalc(5px); }
|
||||||
|
h4 { font-size: $h4-font-size - emCalc(5px); }
|
||||||
|
h5 { font-size: $h5-font-size; }
|
||||||
|
h6 { font-size: $h6-font-size; }
|
||||||
|
|
||||||
|
.subheader { @extend %subheader; }
|
||||||
|
|
||||||
|
hr {
|
||||||
|
border: $hr-border-style $hr-border-color;
|
||||||
|
border-width: $hr-border-width 0 0;
|
||||||
|
clear: both;
|
||||||
|
margin: $hr-margin 0 ($hr-margin - emCalc(1px));
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Helpful Typography Defaults */
|
||||||
|
em,
|
||||||
|
i {
|
||||||
|
font-style: italic;
|
||||||
|
line-height: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
strong,
|
||||||
|
b {
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
small {
|
||||||
|
font-size: $small-font-size;
|
||||||
|
line-height: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
font-family: $code-font-family;
|
||||||
|
font-weight: $code-font-weight;
|
||||||
|
color: $code-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Lists */
|
||||||
|
ul,
|
||||||
|
ol,
|
||||||
|
dl {
|
||||||
|
font-size: $paragraph-font-size;
|
||||||
|
line-height: $paragraph-line-height;
|
||||||
|
margin-bottom: $paragraph-margin-bottom;
|
||||||
|
list-style-position: $list-style-position;
|
||||||
|
font-family: $paragraph-font-family;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Unordered Lists */
|
||||||
|
ul {
|
||||||
|
li {
|
||||||
|
ul,
|
||||||
|
ol {
|
||||||
|
margin-#{$default-float}: $list-side-margin;
|
||||||
|
margin-bottom: 0;
|
||||||
|
font-size: 1em; /* Override nested font-size change */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.square,
|
||||||
|
&.circle,
|
||||||
|
&.disc {
|
||||||
|
li ul { list-style: inherit; }
|
||||||
|
}
|
||||||
|
|
||||||
|
&.square { list-style-type: square; }
|
||||||
|
&.circle { list-style-type: circle; }
|
||||||
|
&.disc { list-style-type: disc; }
|
||||||
|
&.no-bullet { list-style: none; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Ordered Lists */
|
||||||
|
ol {
|
||||||
|
li {
|
||||||
|
ul,
|
||||||
|
ol {
|
||||||
|
margin-#{$default-float}: $list-side-margin;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Definition Lists */
|
||||||
|
dl {
|
||||||
|
dt {
|
||||||
|
margin-bottom: $definition-list-header-margin-bottom;
|
||||||
|
font-weight: $definition-list-header-weight;
|
||||||
|
}
|
||||||
|
dd { margin-bottom: $definition-list-margin-bottom; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Abbreviations */
|
||||||
|
abbr,
|
||||||
|
acronym {
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-size: 90%;
|
||||||
|
color: $body-font-color;
|
||||||
|
border-bottom: $acronym-underline;
|
||||||
|
cursor: help;
|
||||||
|
}
|
||||||
|
abbr {
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Blockquotes */
|
||||||
|
blockquote {
|
||||||
|
margin: 0 0 $paragraph-margin-bottom;
|
||||||
|
padding: $blockquote-padding;
|
||||||
|
border-#{$default-float}: $blockquote-border;
|
||||||
|
|
||||||
|
cite {
|
||||||
|
display: block;
|
||||||
|
font-size: $blockquote-cite-font-size;
|
||||||
|
color: $blockquote-cite-font-color;
|
||||||
|
&:before {
|
||||||
|
content: "\2014 \0020";
|
||||||
|
}
|
||||||
|
|
||||||
|
a,
|
||||||
|
a:visited {
|
||||||
|
color: $blockquote-cite-link-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
blockquote,
|
||||||
|
blockquote p {
|
||||||
|
line-height: $paragraph-line-height;
|
||||||
|
color: $blockquote-font-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Microformats */
|
||||||
|
.vcard {
|
||||||
|
display: inline-block;
|
||||||
|
margin: $microformat-margin;
|
||||||
|
border: $microformat-border-width $microformat-border-style $microformat-border-color;
|
||||||
|
padding: $microformat-padding;
|
||||||
|
|
||||||
|
li {
|
||||||
|
margin: 0;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.fn {
|
||||||
|
font-weight: $microformat-fullname-font-weight;
|
||||||
|
font-size: $microformat-fullname-font-size;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.vevent {
|
||||||
|
.summary { font-weight: $microformat-summary-font-weight; }
|
||||||
|
|
||||||
|
abbr {
|
||||||
|
cursor: default;
|
||||||
|
text-decoration: $microformat-abbr-font-decoration;
|
||||||
|
font-weight: $microformat-abbr-font-weight;
|
||||||
|
border: none;
|
||||||
|
padding: $microformat-abbr-padding;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@media #{$small} {
|
||||||
|
h1,h2,h3,h4,h5,h6 { line-height: $header-line-height; }
|
||||||
|
h1 { font-size: $h1-font-size; }
|
||||||
|
h2 { font-size: $h2-font-size; }
|
||||||
|
h3 { font-size: $h3-font-size; }
|
||||||
|
h4 { font-size: $h4-font-size; }
|
||||||
|
}
|
||||||
|
|
||||||
|
// Only include these styles if you want them.
|
||||||
|
@if $include-print-styles {
|
||||||
|
/*
|
||||||
|
* Print styles.
|
||||||
|
*
|
||||||
|
* Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/
|
||||||
|
* Credit to Paul Irish and HTML5 Boilerplate (html5boilerplate.com)
|
||||||
|
*/
|
||||||
|
.print-only { display: none !important; }
|
||||||
|
@media print {
|
||||||
|
* {
|
||||||
|
background: transparent !important;
|
||||||
|
color: #000 !important; /* Black prints faster: h5bp.com/s */
|
||||||
|
box-shadow: none !important;
|
||||||
|
text-shadow: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
a,
|
||||||
|
a:visited { text-decoration: underline;}
|
||||||
|
a[href]:after { content: " (" attr(href) ")"; }
|
||||||
|
|
||||||
|
abbr[title]:after { content: " (" attr(title) ")"; }
|
||||||
|
|
||||||
|
// Don't show links for images, or javascript/internal links
|
||||||
|
.ir a:after,
|
||||||
|
a[href^="javascript:"]:after,
|
||||||
|
a[href^="#"]:after { content: ""; }
|
||||||
|
|
||||||
|
pre,
|
||||||
|
blockquote {
|
||||||
|
border: 1px solid #999;
|
||||||
|
page-break-inside: avoid;
|
||||||
|
}
|
||||||
|
|
||||||
|
thead { display: table-header-group; /* h5bp.com/t */ }
|
||||||
|
|
||||||
|
tr,
|
||||||
|
img { page-break-inside: avoid; }
|
||||||
|
|
||||||
|
img { max-width: 100% !important; }
|
||||||
|
|
||||||
|
@page { margin: 0.5cm; }
|
||||||
|
|
||||||
|
p,
|
||||||
|
h2,
|
||||||
|
h3 {
|
||||||
|
orphans: 3;
|
||||||
|
widows: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2,
|
||||||
|
h3 { page-break-after: avoid; }
|
||||||
|
|
||||||
|
.hide-on-print { display: none !important; }
|
||||||
|
.print-only { display: block !important; }
|
||||||
|
.hide-for-print { display: none !important; }
|
||||||
|
.show-for-print { display: inherit !important; }
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,320 @@
|
||||||
|
//
|
||||||
|
// Foundation Visibility Classes
|
||||||
|
//
|
||||||
|
@if $include-html-visibility-classes {
|
||||||
|
|
||||||
|
/* Foundation Visibility HTML Classes */
|
||||||
|
.show-for-small,
|
||||||
|
.show-for-medium-down,
|
||||||
|
.show-for-large-down { display: inherit !important; }
|
||||||
|
|
||||||
|
.show-for-medium,
|
||||||
|
.show-for-medium-up,
|
||||||
|
.show-for-large,
|
||||||
|
.show-for-large-up,
|
||||||
|
.show-for-xlarge { display: none !important; }
|
||||||
|
|
||||||
|
.hide-for-medium,
|
||||||
|
.hide-for-medium-up,
|
||||||
|
.hide-for-large,
|
||||||
|
.hide-for-large-up,
|
||||||
|
.hide-for-xlarge { display: inherit !important; }
|
||||||
|
|
||||||
|
.hide-for-small,
|
||||||
|
.hide-for-medium-down,
|
||||||
|
.hide-for-large-down { display: none !important; }
|
||||||
|
|
||||||
|
/* Specific visilbity for tables */
|
||||||
|
table {
|
||||||
|
&.show-for-small,
|
||||||
|
&.show-for-medium-down,
|
||||||
|
&.show-for-large-down,
|
||||||
|
&.hide-for-medium,
|
||||||
|
&.hide-for-medium-up,
|
||||||
|
&.hide-for-large,
|
||||||
|
&.hide-for-large-up,
|
||||||
|
&.hide-for-xlarge { display: table; }
|
||||||
|
}
|
||||||
|
thead {
|
||||||
|
&.show-for-small,
|
||||||
|
&.show-for-medium-down,
|
||||||
|
&.show-for-large-down,
|
||||||
|
&.hide-for-medium,
|
||||||
|
&.hide-for-medium-up,
|
||||||
|
&.hide-for-large,
|
||||||
|
&.hide-for-large-up,
|
||||||
|
&.hide-for-xlarge { display: table-header-group !important; }
|
||||||
|
}
|
||||||
|
tbody {
|
||||||
|
&.show-for-small,
|
||||||
|
&.show-for-medium-down,
|
||||||
|
&.show-for-large-down,
|
||||||
|
&.hide-for-medium,
|
||||||
|
&.hide-for-medium-up,
|
||||||
|
&.hide-for-large,
|
||||||
|
&.hide-for-large-up,
|
||||||
|
&.hide-for-xlarge { display: table-row-group !important; }
|
||||||
|
}
|
||||||
|
tr {
|
||||||
|
&.show-for-small,
|
||||||
|
&.show-for-medium-down,
|
||||||
|
&.show-for-large-down,
|
||||||
|
&.hide-for-medium,
|
||||||
|
&.hide-for-medium-up,
|
||||||
|
&.hide-for-large,
|
||||||
|
&.hide-for-large-up,
|
||||||
|
&.hide-for-xlarge { display: table-row !important; }
|
||||||
|
}
|
||||||
|
td,
|
||||||
|
th {
|
||||||
|
&.show-for-small,
|
||||||
|
&.show-for-medium-down,
|
||||||
|
&.show-for-large-down,
|
||||||
|
&.hide-for-medium,
|
||||||
|
&.hide-for-medium-up,
|
||||||
|
&.hide-for-large,
|
||||||
|
&.hide-for-large-up,
|
||||||
|
&.hide-for-xlarge { display: table-cell !important; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Medium Displays: 768px - 1279px */
|
||||||
|
@media #{$small} {
|
||||||
|
.show-for-medium,
|
||||||
|
.show-for-medium-up { display: inherit !important; }
|
||||||
|
|
||||||
|
.show-for-small { display: none !important; }
|
||||||
|
|
||||||
|
.hide-for-small { display: inherit !important; }
|
||||||
|
|
||||||
|
.hide-for-medium,
|
||||||
|
.hide-for-medium-up { display: none !important; }
|
||||||
|
|
||||||
|
/* Specific visilbity for tables */
|
||||||
|
table {
|
||||||
|
&.show-for-medium,
|
||||||
|
&.show-for-medium-up,
|
||||||
|
&.hide-for-small { display: table; }
|
||||||
|
}
|
||||||
|
thead {
|
||||||
|
&.show-for-medium,
|
||||||
|
&.show-for-medium-up,
|
||||||
|
&.hide-for-small { display: table-header-group !important; }
|
||||||
|
}
|
||||||
|
tbody {
|
||||||
|
&.show-for-medium,
|
||||||
|
&.show-for-medium-up,
|
||||||
|
&.hide-for-small { display: table-row-group !important; }
|
||||||
|
}
|
||||||
|
tr {
|
||||||
|
&.show-for-medium,
|
||||||
|
&.show-for-medium-up,
|
||||||
|
&.hide-for-small { display: table-row !important; }
|
||||||
|
}
|
||||||
|
td,
|
||||||
|
th {
|
||||||
|
&.show-for-medium,
|
||||||
|
&.show-for-medium-up,
|
||||||
|
&.hide-for-small { display: table-cell !important; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Large Displays: 1280px - 1440px */
|
||||||
|
@media #{$medium} {
|
||||||
|
.show-for-large,
|
||||||
|
.show-for-large-up { display: inherit !important; }
|
||||||
|
|
||||||
|
.show-for-medium,
|
||||||
|
.show-for-medium-down { display: none !important; }
|
||||||
|
|
||||||
|
.hide-for-medium,
|
||||||
|
.hide-for-medium-down { display: inherit !important; }
|
||||||
|
|
||||||
|
.hide-for-large,
|
||||||
|
.hide-for-large-up { display: none !important; }
|
||||||
|
|
||||||
|
/* Specific visilbity for tables */
|
||||||
|
table {
|
||||||
|
&.show-for-large,
|
||||||
|
&.show-for-large-up,
|
||||||
|
&.hide-for-medium,
|
||||||
|
&.hide-for-medium-down { display: table; }
|
||||||
|
}
|
||||||
|
thead {
|
||||||
|
&.show-for-large,
|
||||||
|
&.show-for-large-up,
|
||||||
|
&.hide-for-medium,
|
||||||
|
&.hide-for-medium-down { display: table-header-group !important; }
|
||||||
|
}
|
||||||
|
tbody {
|
||||||
|
&.show-for-large,
|
||||||
|
&.show-for-large-up,
|
||||||
|
&.hide-for-medium,
|
||||||
|
&.hide-for-medium-down { display: table-row-group !important; }
|
||||||
|
}
|
||||||
|
tr {
|
||||||
|
&.show-for-large,
|
||||||
|
&.show-for-large-up,
|
||||||
|
&.hide-for-medium,
|
||||||
|
&.hide-for-medium-down { display: table-row !important; }
|
||||||
|
}
|
||||||
|
td,
|
||||||
|
th {
|
||||||
|
&.show-for-large,
|
||||||
|
&.show-for-large-up,
|
||||||
|
&.hide-for-medium,
|
||||||
|
&.hide-for-medium-down { display: table-cell !important; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* X-Large Displays: 1400px and up */
|
||||||
|
@media #{$large} {
|
||||||
|
.show-for-xlarge { display: inherit !important; }
|
||||||
|
|
||||||
|
.show-for-large,
|
||||||
|
.show-for-large-down { display: none !important; }
|
||||||
|
|
||||||
|
.hide-for-large,
|
||||||
|
.hide-for-large-down { display: inherit !important; }
|
||||||
|
|
||||||
|
.hide-for-xlarge { display: none !important; }
|
||||||
|
|
||||||
|
/* Specific visilbity for tables */
|
||||||
|
table {
|
||||||
|
&.show-for-xlarge,
|
||||||
|
&.hide-for-large,
|
||||||
|
&.hide-for-large-down { display: table; }
|
||||||
|
}
|
||||||
|
thead {
|
||||||
|
&.show-for-xlarge,
|
||||||
|
&.hide-for-large,
|
||||||
|
&.hide-for-large-down { display: table-header-group !important; }
|
||||||
|
}
|
||||||
|
tbody {
|
||||||
|
&.show-for-xlarge,
|
||||||
|
&.hide-for-large,
|
||||||
|
&.hide-for-large-down { display: table-row-group !important; }
|
||||||
|
}
|
||||||
|
tr {
|
||||||
|
&.show-for-xlarge,
|
||||||
|
&.hide-for-large,
|
||||||
|
&.hide-for-large-down { display: table-row !important; }
|
||||||
|
}
|
||||||
|
td,
|
||||||
|
th {
|
||||||
|
&.show-for-xlarge,
|
||||||
|
&.hide-for-large,
|
||||||
|
&.hide-for-large-down { display: table-cell !important; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Orientation targeting */
|
||||||
|
.show-for-landscape,
|
||||||
|
.hide-for-portrait { display: inherit !important; }
|
||||||
|
.hide-for-landscape,
|
||||||
|
.show-for-portrait { display: none !important; }
|
||||||
|
|
||||||
|
/* Specific visilbity for tables */
|
||||||
|
table {
|
||||||
|
&.hide-for-landscape,
|
||||||
|
&.show-for-portrait { display: table; }
|
||||||
|
}
|
||||||
|
thead {
|
||||||
|
&.hide-for-landscape,
|
||||||
|
&.show-for-portrait { display: table-header-group !important; }
|
||||||
|
}
|
||||||
|
tbody {
|
||||||
|
&.hide-for-landscape,
|
||||||
|
&.show-for-portrait { display: table-row-group !important; }
|
||||||
|
}
|
||||||
|
tr {
|
||||||
|
&.hide-for-landscape,
|
||||||
|
&.show-for-portrait { display: table-row !important; }
|
||||||
|
}
|
||||||
|
td,
|
||||||
|
th {
|
||||||
|
&.hide-for-landscape,
|
||||||
|
&.show-for-portrait { display: table-cell !important; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@media #{$landscape} {
|
||||||
|
.show-for-landscape,
|
||||||
|
.hide-for-portrait { display: inherit !important; }
|
||||||
|
.hide-for-landscape,
|
||||||
|
.show-for-portrait { display: none !important; }
|
||||||
|
|
||||||
|
/* Specific visilbity for tables */
|
||||||
|
table {
|
||||||
|
&.show-for-landscape,
|
||||||
|
&.hide-for-portrait { display: table; }
|
||||||
|
}
|
||||||
|
thead {
|
||||||
|
&.show-for-landscape,
|
||||||
|
&.hide-for-portrait { display: table-header-group !important; }
|
||||||
|
}
|
||||||
|
tbody {
|
||||||
|
&.show-for-landscape,
|
||||||
|
&.hide-for-portrait { display: table-row-group !important; }
|
||||||
|
}
|
||||||
|
tr {
|
||||||
|
&.show-for-landscape,
|
||||||
|
&.hide-for-portrait { display: table-row !important; }
|
||||||
|
}
|
||||||
|
td,
|
||||||
|
th {
|
||||||
|
&.show-for-landscape,
|
||||||
|
&.hide-for-portrait { display: table-cell !important; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media #{$portrait} {
|
||||||
|
.show-for-portrait,
|
||||||
|
.hide-for-landscape { display: inherit !important; }
|
||||||
|
.hide-for-portrait,
|
||||||
|
.show-for-landscape { display: none !important; }
|
||||||
|
|
||||||
|
/* Specific visilbity for tables */
|
||||||
|
table {
|
||||||
|
&.show-for-portrait,
|
||||||
|
&.hide-for-landscape { display: table; }
|
||||||
|
}
|
||||||
|
thead {
|
||||||
|
&.show-for-portrait,
|
||||||
|
&.hide-for-landscape { display: table-header-group !important; }
|
||||||
|
}
|
||||||
|
tbody {
|
||||||
|
&.show-for-portrait,
|
||||||
|
&.hide-for-landscape { display: table-row-group !important; }
|
||||||
|
}
|
||||||
|
tr {
|
||||||
|
&.show-for-portrait,
|
||||||
|
&.hide-for-landscape { display: table-row !important; }
|
||||||
|
}
|
||||||
|
td,
|
||||||
|
th {
|
||||||
|
&.show-for-portrait,
|
||||||
|
&.hide-for-landscape { display: table-cell !important; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Touch-enabled device targeting */
|
||||||
|
.show-for-touch { display: none !important; }
|
||||||
|
.hide-for-touch { display: inherit !important; }
|
||||||
|
.touch .show-for-touch { display: inherit !important; }
|
||||||
|
.touch .hide-for-touch { display: none !important; }
|
||||||
|
|
||||||
|
/* Specific visilbity for tables */
|
||||||
|
table.hide-for-touch { display: table; }
|
||||||
|
.touch table.show-for-touch { display: table; }
|
||||||
|
thead.hide-for-touch { display: table-header-group !important; }
|
||||||
|
.touch thead.show-for-touch { display: table-header-group !important; }
|
||||||
|
tbody.hide-for-touch { display: table-row-group !important; }
|
||||||
|
.touch tbody.show-for-touch { display: table-row-group !important; }
|
||||||
|
tr.hide-for-touch { display: table-row !important; }
|
||||||
|
.touch tr.show-for-touch { display: table-row !important; }
|
||||||
|
td.hide-for-touch { display: table-cell !important; }
|
||||||
|
.touch td.show-for-touch { display: table-cell !important; }
|
||||||
|
th.hide-for-touch { display: table-cell !important; }
|
||||||
|
.touch th.show-for-touch { display: table-cell !important; }
|
||||||
|
|
||||||
|
}
|
396
content/css/zurb-foundation/normalize.scss
vendored
Normal file
|
@ -0,0 +1,396 @@
|
||||||
|
/*! normalize.css v2.1.0 | MIT License | git.io/normalize */
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
HTML5 display definitions
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Correct `block` display not defined in IE 8/9.
|
||||||
|
*/
|
||||||
|
|
||||||
|
article,
|
||||||
|
aside,
|
||||||
|
details,
|
||||||
|
figcaption,
|
||||||
|
figure,
|
||||||
|
footer,
|
||||||
|
header,
|
||||||
|
hgroup,
|
||||||
|
main,
|
||||||
|
nav,
|
||||||
|
section,
|
||||||
|
summary {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Correct `inline-block` display not defined in IE 8/9.
|
||||||
|
*/
|
||||||
|
|
||||||
|
audio,
|
||||||
|
canvas,
|
||||||
|
video {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Prevent modern browsers from displaying `audio` without controls.
|
||||||
|
* Remove excess height in iOS 5 devices.
|
||||||
|
*/
|
||||||
|
|
||||||
|
audio:not([controls]) {
|
||||||
|
display: none;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Address styling not present in IE 8/9.
|
||||||
|
*/
|
||||||
|
|
||||||
|
[hidden] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
Base
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Set default font family to sans-serif.
|
||||||
|
* 2. Prevent iOS text size adjust after orientation change, without disabling
|
||||||
|
* user zoom.
|
||||||
|
*/
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-family: sans-serif; /* 1 */
|
||||||
|
-webkit-text-size-adjust: 100%; /* 2 */
|
||||||
|
-ms-text-size-adjust: 100%; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove default margin.
|
||||||
|
*/
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
Links
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Address `outline` inconsistency between Chrome and other browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
a:focus {
|
||||||
|
outline: thin dotted;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Improve readability when focused and also mouse hovered in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
a:active,
|
||||||
|
a:hover {
|
||||||
|
outline: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
Typography
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Address variable `h1` font-size and margin within `section` and `article`
|
||||||
|
* contexts in Firefox 4+, Safari 5, and Chrome.
|
||||||
|
*/
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 2em;
|
||||||
|
margin: 0.67em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Address styling not present in IE 8/9, Safari 5, and Chrome.
|
||||||
|
*/
|
||||||
|
|
||||||
|
abbr[title] {
|
||||||
|
border-bottom: 1px dotted;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
|
||||||
|
*/
|
||||||
|
|
||||||
|
b,
|
||||||
|
strong {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Address styling not present in Safari 5 and Chrome.
|
||||||
|
*/
|
||||||
|
|
||||||
|
dfn {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Address differences between Firefox and other browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
hr {
|
||||||
|
-moz-box-sizing: content-box;
|
||||||
|
box-sizing: content-box;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Address styling not present in IE 8/9.
|
||||||
|
*/
|
||||||
|
|
||||||
|
mark {
|
||||||
|
background: #ff0;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Correct font family set oddly in Safari 5 and Chrome.
|
||||||
|
*/
|
||||||
|
|
||||||
|
code,
|
||||||
|
kbd,
|
||||||
|
pre,
|
||||||
|
samp {
|
||||||
|
font-family: monospace, serif;
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Improve readability of pre-formatted text in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
pre {
|
||||||
|
white-space: pre-wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Set consistent quote types.
|
||||||
|
*/
|
||||||
|
|
||||||
|
q {
|
||||||
|
quotes: "\201C" "\201D" "\2018" "\2019";
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Address inconsistent and variable font size in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
small {
|
||||||
|
font-size: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
sub,
|
||||||
|
sup {
|
||||||
|
font-size: 75%;
|
||||||
|
line-height: 0;
|
||||||
|
position: relative;
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
sup {
|
||||||
|
top: -0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
sub {
|
||||||
|
bottom: -0.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
Embedded content
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove border when inside `a` element in IE 8/9.
|
||||||
|
*/
|
||||||
|
|
||||||
|
img {
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Correct overflow displayed oddly in IE 9.
|
||||||
|
*/
|
||||||
|
|
||||||
|
svg:not(:root) {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
Figures
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Address margin not present in IE 8/9 and Safari 5.
|
||||||
|
*/
|
||||||
|
|
||||||
|
figure {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
Forms
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Define consistent border, margin, and padding.
|
||||||
|
*/
|
||||||
|
|
||||||
|
fieldset {
|
||||||
|
border: 1px solid #c0c0c0;
|
||||||
|
margin: 0 2px;
|
||||||
|
padding: 0.35em 0.625em 0.75em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Correct `color` not being inherited in IE 8/9.
|
||||||
|
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
|
||||||
|
*/
|
||||||
|
|
||||||
|
legend {
|
||||||
|
border: 0; /* 1 */
|
||||||
|
padding: 0; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Correct font family not being inherited in all browsers.
|
||||||
|
* 2. Correct font size not being inherited in all browsers.
|
||||||
|
* 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button,
|
||||||
|
input,
|
||||||
|
select,
|
||||||
|
textarea {
|
||||||
|
font-family: inherit; /* 1 */
|
||||||
|
font-size: 100%; /* 2 */
|
||||||
|
margin: 0; /* 3 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
|
||||||
|
* the UA stylesheet.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button,
|
||||||
|
input {
|
||||||
|
line-height: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Address inconsistent `text-transform` inheritance for `button` and `select`.
|
||||||
|
* All other form control elements do not inherit `text-transform` values.
|
||||||
|
* Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
|
||||||
|
* Correct `select` style inheritance in Firefox 4+ and Opera.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button,
|
||||||
|
select {
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
|
||||||
|
* and `video` controls.
|
||||||
|
* 2. Correct inability to style clickable `input` types in iOS.
|
||||||
|
* 3. Improve usability and consistency of cursor style between image-type
|
||||||
|
* `input` and others.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button,
|
||||||
|
html input[type="button"], /* 1 */
|
||||||
|
input[type="reset"],
|
||||||
|
input[type="submit"] {
|
||||||
|
-webkit-appearance: button; /* 2 */
|
||||||
|
cursor: pointer; /* 3 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Re-set default cursor for disabled elements.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button[disabled],
|
||||||
|
html input[disabled] {
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Address box sizing set to `content-box` in IE 8/9.
|
||||||
|
* 2. Remove excess padding in IE 8/9.
|
||||||
|
*/
|
||||||
|
|
||||||
|
input[type="checkbox"],
|
||||||
|
input[type="radio"] {
|
||||||
|
box-sizing: border-box; /* 1 */
|
||||||
|
padding: 0; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
|
||||||
|
* 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
|
||||||
|
* (include `-moz` to future-proof).
|
||||||
|
*/
|
||||||
|
|
||||||
|
input[type="search"] {
|
||||||
|
-webkit-appearance: textfield; /* 1 */
|
||||||
|
-moz-box-sizing: content-box;
|
||||||
|
-webkit-box-sizing: content-box; /* 2 */
|
||||||
|
box-sizing: content-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove inner padding and search cancel button in Safari 5 and Chrome
|
||||||
|
* on OS X.
|
||||||
|
*/
|
||||||
|
|
||||||
|
input[type="search"]::-webkit-search-cancel-button,
|
||||||
|
input[type="search"]::-webkit-search-decoration {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove inner padding and border in Firefox 4+.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button::-moz-focus-inner,
|
||||||
|
input::-moz-focus-inner {
|
||||||
|
border: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Remove default vertical scrollbar in IE 8/9.
|
||||||
|
* 2. Improve readability and alignment in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
overflow: auto; /* 1 */
|
||||||
|
vertical-align: top; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
Tables
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove most spacing between table cells.
|
||||||
|
*/
|
||||||
|
|
||||||
|
table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
border-spacing: 0;
|
||||||
|
}
|
BIN
content/fonts/slkscr-webfont-eot.eot
Executable file
130
content/fonts/slkscr-webfont-svg.svg
Executable file
|
@ -0,0 +1,130 @@
|
||||||
|
<?xml version="1.0" standalone="no"?>
|
||||||
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<metadata></metadata>
|
||||||
|
<defs>
|
||||||
|
<font id="silkscreennormal" horiz-adv-x="1462" >
|
||||||
|
<font-face units-per-em="2048" ascent="1638" descent="-410" />
|
||||||
|
<missing-glyph horiz-adv-x="975" />
|
||||||
|
<glyph horiz-adv-x="2048" />
|
||||||
|
<glyph horiz-adv-x="2048" />
|
||||||
|
<glyph unicode="
" horiz-adv-x="975" />
|
||||||
|
<glyph unicode=" " horiz-adv-x="975" />
|
||||||
|
<glyph unicode="	" horiz-adv-x="975" />
|
||||||
|
<glyph unicode=" " horiz-adv-x="975" />
|
||||||
|
<glyph unicode="!" horiz-adv-x="731" d="M244 0v244h244v-244h-244zM244 488v731h244v-731h-244z" />
|
||||||
|
<glyph unicode=""" horiz-adv-x="1219" d="M244 731v488h244v-488h-244zM731 731v488h244v-488h-244z" />
|
||||||
|
<glyph unicode="#" horiz-adv-x="1706" d="M244 244v244h244v-244h-244zM244 731v244h244v-244h-244zM488 0v1219h243v-1219h-243zM731 244v244h244v-244h-244zM731 731v244h244v-244h-244zM975 0v1219h244v-1219h-244zM1219 244v244h244v-244h-244zM1219 731v244h244v-244h-244z" />
|
||||||
|
<glyph unicode="$" d="M244 0v244h731v244h244v-488h-975zM244 731v244h244v-244h-244zM488 0h243v-244h-243v244zM488 488v243h487v-243h-487zM488 975v244h731v-244h-731zM731 1219v244h244v-244h-244z" />
|
||||||
|
<glyph unicode="%" horiz-adv-x="1706" d="M244 731v488h487v-488h-487zM488 0v488h243v-488h-243zM731 488v243h244v-243h-244zM975 0v488h488v-488h-488zM975 731v488h244v-488h-244z" />
|
||||||
|
<glyph unicode="&" d="M244 244v244h244v-244h-244zM244 731v244h244v-244h-244zM488 0v244h731v-244h-731zM488 488v243h487v-243h-487zM488 975v244h731v-244h-731zM731 0h244v-244h-244v244zM731 1219v244h244v-244h-244z" />
|
||||||
|
<glyph unicode="'" horiz-adv-x="731" d="M244 731v488h244v-488h-244z" />
|
||||||
|
<glyph unicode="(" horiz-adv-x="975" d="M244 244v731h244v-731h-244zM488 0v244h243v-244h-243zM488 0zM488 975v244h243v-244h-243z" />
|
||||||
|
<glyph unicode=")" horiz-adv-x="975" d="M244 0v244h244v-244h-244zM244 975v244h244v-244h-244zM488 0zM488 244v731h243v-731h-243z" />
|
||||||
|
<glyph unicode="*" horiz-adv-x="1706" d="M244 244v244h244v-244h-244zM244 731v244h244v-244h-244zM488 488v243h243v-243h-243zM731 0v1219h244v-1219h-244zM975 488v243h244v-243h-244zM1219 244v244h244v-244h-244zM1219 731v244h244v-244h-244z" />
|
||||||
|
<glyph unicode="+" horiz-adv-x="1706" d="M244 488h487v-488h244v488h488v243h-488v488h-244v-488h-487v-243z" />
|
||||||
|
<glyph unicode="," horiz-adv-x="731" d="M0 0h244v-244h-244v244zM244 0v244h244v-244h-244z" />
|
||||||
|
<glyph unicode="-" horiz-adv-x="1219" d="M244 488v243h731v-243h-731z" />
|
||||||
|
<glyph unicode="." horiz-adv-x="487" d="M0 0v244h244v-244h-244z" />
|
||||||
|
<glyph unicode="/" horiz-adv-x="1219" d="M244 0v488h244v-488h-244zM488 488v243h243v-243h-243zM731 731v488h244v-488h-244z" />
|
||||||
|
<glyph unicode="0" d="M244 244v731h244v-731h-244zM488 0v244h487v-244h-487zM488 0zM488 975v244h487v-244h-487zM975 244v731h244v-731h-244z" />
|
||||||
|
<glyph unicode="1" horiz-adv-x="1219" d="M244 0v244h244v731h-244v244h487v-975h244v-244h-731z" />
|
||||||
|
<glyph unicode="2" d="M244 0v488h244v-244h731v-244h-975zM244 975v244h731v-244h-731zM488 488v243h487v-243h-487zM975 731v244h244v-244h-244z" />
|
||||||
|
<glyph unicode="3" d="M244 0v244h731v-244h-731zM244 975v244h731v-244h-731zM488 488v243h487v-243h-487zM975 244v244h244v-244h-244zM975 731v244h244v-244h-244z" />
|
||||||
|
<glyph unicode="4" d="M244 244h487v-244h244v244h244v244h-244v731h-244v-731h-243v731h-244v-975z" />
|
||||||
|
<glyph unicode="5" d="M244 0v244h731v-244h-731zM244 488h731v243h-487v244h731v244h-975v-731zM975 244v244h244v-244h-244z" />
|
||||||
|
<glyph unicode="6" d="M244 244h244v244h487v243h-487v244h-244v-731zM488 0v244h487v-244h-487zM488 975v244h487v-244h-487zM975 244v244h244v-244h-244z" />
|
||||||
|
<glyph unicode="7" d="M244 975v244h975v-488h-244v244h-731zM488 0v488h243v-488h-243zM731 488v243h244v-243h-244z" />
|
||||||
|
<glyph unicode="8" d="M244 244v244h244v-244h-244zM244 731v244h244v-244h-244zM488 0v244h487v-244h-487zM488 488v243h487v-243h-487zM488 975v244h487v-244h-487zM975 244v244h244v-244h-244zM975 731v244h244v-244h-244z" />
|
||||||
|
<glyph unicode="9" d="M244 731v244h244v-244h-244zM488 0v244h487v-244h-487zM488 488h487v-244h244v731h-244v-244h-487v-243zM488 975v244h487v-244h-487z" />
|
||||||
|
<glyph unicode=":" horiz-adv-x="487" d="M0 244v244h244v-244h-244zM0 731v244h244v-244h-244z" />
|
||||||
|
<glyph unicode=";" horiz-adv-x="731" d="M0 0v244h244v-244h-244zM244 244v244h244v-244h-244zM244 731v244h244v-244h-244z" />
|
||||||
|
<glyph unicode="<" horiz-adv-x="1219" d="M244 488v243h244v-243h-244zM488 244v244h243v-244h-243zM488 731v244h243v-244h-243zM731 0v244h244v-244h-244zM731 975v244h244v-244h-244z" />
|
||||||
|
<glyph unicode="=" horiz-adv-x="1219" d="M244 244v244h731v-244h-731zM244 731v244h731v-244h-731z" />
|
||||||
|
<glyph unicode=">" horiz-adv-x="1219" d="M244 0v244h244v-244h-244zM244 975v244h244v-244h-244zM488 244v244h243v-244h-243zM488 731v244h243v-244h-243zM731 488v243h244v-243h-244z" />
|
||||||
|
<glyph unicode="?" d="M244 975v244h731v-244h-731zM488 0v244h243v-244h-243zM488 488v243h487v-243h-487zM975 731v244h244v-244h-244z" />
|
||||||
|
<glyph unicode="@" horiz-adv-x="1706" d="M244 244v731h244v-731h-244zM488 0v244h731v-244h-731zM488 0zM488 975h243v-487h488v243h-244v244h244v244h-731v-244zM1219 731v244h244v-244h-244z" />
|
||||||
|
<glyph unicode="A" d="M250 0v975h243v-244h488v244h244v-975h-244v488h-488v-488h-243zM493 975h488v244h-488v-244z" />
|
||||||
|
<glyph unicode="B" d="M244 0v1219h731v-244h-487v-244h487v-243h-487v-244h487v-244h-731zM975 244v244h244v-244h-244zM975 731v244h244v-244h-244z" />
|
||||||
|
<glyph unicode="C" d="M244 244v731h244v-731h-244zM488 0v244h487v-244h-487zM488 0zM488 975v244h487v-244h-487zM975 244v244h244v-244h-244zM975 488zM975 731v244h244v-244h-244z" />
|
||||||
|
<glyph unicode="D" d="M244 0v1219h731v-244h-487v-731h487v-244h-731zM975 244v731h244v-731h-244z" />
|
||||||
|
<glyph unicode="E" horiz-adv-x="1219" d="M244 0v1219h731v-244h-487v-244h487v-243h-487v-244h487v-244h-731z" />
|
||||||
|
<glyph unicode="F" horiz-adv-x="1219" d="M244 0v1219h731v-244h-487v-244h487v-243h-487v-488h-244z" />
|
||||||
|
<glyph unicode="G" d="M244 244v731h244v-731h-244zM488 0v244h487v-244h-487zM488 0zM488 975v244h731v-244h-731zM731 488v243h488v-487h-244v244h-244z" />
|
||||||
|
<glyph unicode="H" d="M244 0v1219h244v-488h487v488h244v-1219h-244v488h-487v-488h-244z" />
|
||||||
|
<glyph unicode="I" horiz-adv-x="731" d="M244 0v1219h244v-1219h-244z" />
|
||||||
|
<glyph unicode="J" d="M244 244v244h244v-244h-244zM488 0v244h487v-244h-487zM975 244v975h244v-975h-244z" />
|
||||||
|
<glyph unicode="K" d="M244 0v1219h244v-488h243v-243h-243v-488h-244zM731 244v244h244v-244h-244zM731 731v244h244v-244h-244zM975 0v244h244v-244h-244zM975 975v244h244v-244h-244z" />
|
||||||
|
<glyph unicode="L" horiz-adv-x="1219" d="M244 0v1219h244v-975h487v-244h-731z" />
|
||||||
|
<glyph unicode="M" horiz-adv-x="1706" d="M244 0v1219h244v-1219h-244zM488 731v244h243v-244h-243zM731 488v243h244v-243h-244zM975 731v244h244v-244h-244zM1219 0v1219h244v-1219h-244z" />
|
||||||
|
<glyph unicode="N" horiz-adv-x="1706" d="M244 0v1219h244v-1219h-244zM488 731v244h243v-244h-243zM731 488v243h244v-243h-244zM975 244v244h244v-244h-244zM1219 0v1219h244v-1219h-244z" />
|
||||||
|
<glyph unicode="O" d="M244 244v731h244v-731h-244zM488 0v244h487v-244h-487zM488 0zM488 975v244h487v-244h-487zM975 244v731h244v-731h-244z" />
|
||||||
|
<glyph unicode="P" d="M244 0v1219h731v-244h-487v-244h487v-243h-487v-488h-244zM975 731v244h244v-244h-244z" />
|
||||||
|
<glyph unicode="Q" d="M244 244v731h244v-731h-244zM488 0v244h487v-244h-487zM488 0zM488 975v244h487v-244h-487zM975 0h244v-244h-244v244zM975 244v731h244v-731h-244z" />
|
||||||
|
<glyph unicode="R" d="M244 0v1219h731v-244h-487v-244h487v-243h-487v-488h-244zM731 244v244h244v-244h-244zM975 0v244h244v-244h-244zM975 731v244h244v-244h-244z" />
|
||||||
|
<glyph unicode="S" d="M244 0v244h731v-244h-731zM244 731v244h244v-244h-244zM488 488h487v243h-487v-243zM488 975v244h731v-244h-731zM975 244v244h244v-244h-244z" />
|
||||||
|
<glyph unicode="T" horiz-adv-x="1219" d="M244 975v244h731v-244h-244v-975h-243v975h-244z" />
|
||||||
|
<glyph unicode="U" d="M244 244v975h244v-975h-244zM488 0v244h487v-244h-487zM975 244v975h244v-975h-244z" />
|
||||||
|
<glyph unicode="V" horiz-adv-x="1706" d="M244 731v488h244v-488h-244zM488 244v487h243v-487h-243zM731 0v244h244v-244h-244zM975 244v487h244v-487h-244zM1219 731v488h244v-488h-244z" />
|
||||||
|
<glyph unicode="W" horiz-adv-x="1706" d="M244 244v975h244v-975h-244zM488 0v244h243v-244h-243zM731 244v731h244v-731h-244zM975 0v244h244v-244h-244zM1219 244v975h244v-975h-244z" />
|
||||||
|
<glyph unicode="X" horiz-adv-x="1706" d="M244 0v244h244v-244h-244zM244 975v244h244v-244h-244zM488 244v244h243v-244h-243zM488 731v244h243v-244h-243zM731 488v243h244v-243h-244zM975 244v244h244v-244h-244zM975 731v244h244v-244h-244zM1219 0v244h244v-244h-244zM1219 975v244h244v-244h-244z" />
|
||||||
|
<glyph unicode="Y" horiz-adv-x="1706" d="M244 975v244h244v-244h-244zM488 731v244h243v-244h-243zM731 0v731h244v-731h-244zM975 731v244h244v-244h-244zM1219 975v244h244v-244h-244z" />
|
||||||
|
<glyph unicode="Z" horiz-adv-x="1219" d="M244 0v488h244v-244h487v-244h-731zM244 975v244h731v-488h-244v244h-487zM488 488v243h243v-243h-243z" />
|
||||||
|
<glyph unicode="[" horiz-adv-x="975" d="M244 0v1219h487v-244h-243v-731h243v-244h-487z" />
|
||||||
|
<glyph unicode="\" horiz-adv-x="1219" d="M244 731v488h244v-488h-244zM488 488v243h243v-243h-243zM731 0v488h244v-488h-244z" />
|
||||||
|
<glyph unicode="]" horiz-adv-x="975" d="M244 0v244h244v731h-244v244h487v-1219h-487z" />
|
||||||
|
<glyph unicode="^" horiz-adv-x="1219" d="M244 731v244h244v-244h-244zM488 975v244h243v-244h-243zM731 731v244h244v-244h-244z" />
|
||||||
|
<glyph unicode="_" d="M244 0h975v-244h-975v244z" />
|
||||||
|
<glyph unicode="`" horiz-adv-x="975" d="M244 975v244h244v-244h-244zM488 0zM488 731v244h243v-244h-243z" />
|
||||||
|
<glyph unicode="a" d="M250 0v975h243v-244h488v244h244v-975h-244v488h-488v-488h-243zM493 975h488v244h-488v-244z" />
|
||||||
|
<glyph unicode="b" d="M244 0v1219h731v-244h-487v-244h487v-243h-487v-244h487v-244h-731zM975 244v244h244v-244h-244zM975 731v244h244v-244h-244z" />
|
||||||
|
<glyph unicode="c" d="M244 244v731h244v-731h-244zM488 0v244h487v-244h-487zM488 0zM488 975v244h487v-244h-487zM975 244v244h244v-244h-244zM975 488zM975 731v244h244v-244h-244z" />
|
||||||
|
<glyph unicode="d" d="M244 0v1219h731v-244h-487v-731h487v-244h-731zM975 244v731h244v-731h-244z" />
|
||||||
|
<glyph unicode="e" horiz-adv-x="1219" d="M244 0v1219h731v-244h-487v-244h487v-243h-487v-244h487v-244h-731z" />
|
||||||
|
<glyph unicode="f" horiz-adv-x="1219" d="M244 0v1219h731v-244h-487v-244h487v-243h-487v-488h-244z" />
|
||||||
|
<glyph unicode="g" d="M244 244v731h244v-731h-244zM488 0v244h487v-244h-487zM488 0zM488 975v244h731v-244h-731zM731 488v243h488v-487h-244v244h-244z" />
|
||||||
|
<glyph unicode="h" d="M244 0v1219h244v-488h487v488h244v-1219h-244v488h-487v-488h-244z" />
|
||||||
|
<glyph unicode="i" horiz-adv-x="731" d="M244 0v1219h244v-1219h-244z" />
|
||||||
|
<glyph unicode="j" d="M244 244v244h244v-244h-244zM488 0v244h487v-244h-487zM975 244v975h244v-975h-244z" />
|
||||||
|
<glyph unicode="k" d="M244 0v1219h244v-488h243v-243h-243v-488h-244zM731 244v244h244v-244h-244zM731 731v244h244v-244h-244zM975 0v244h244v-244h-244zM975 975v244h244v-244h-244z" />
|
||||||
|
<glyph unicode="l" horiz-adv-x="1219" d="M244 0v1219h244v-975h487v-244h-731z" />
|
||||||
|
<glyph unicode="m" horiz-adv-x="1706" d="M244 0v1219h244v-1219h-244zM488 731v244h243v-244h-243zM731 488v243h244v-243h-244zM975 731v244h244v-244h-244zM1219 0v1219h244v-1219h-244z" />
|
||||||
|
<glyph unicode="n" horiz-adv-x="1706" d="M244 0v1219h244v-1219h-244zM488 731v244h243v-244h-243zM731 488v243h244v-243h-244zM975 244v244h244v-244h-244zM1219 0v1219h244v-1219h-244z" />
|
||||||
|
<glyph unicode="o" d="M244 244v731h244v-731h-244zM488 0v244h487v-244h-487zM488 0zM488 975v244h487v-244h-487zM975 244v731h244v-731h-244z" />
|
||||||
|
<glyph unicode="p" d="M244 0v1219h731v-244h-487v-244h487v-243h-487v-488h-244zM975 731v244h244v-244h-244z" />
|
||||||
|
<glyph unicode="q" d="M244 244v731h244v-731h-244zM488 0v244h487v-244h-487zM488 0zM488 975v244h487v-244h-487zM975 0h244v-244h-244v244zM975 244v731h244v-731h-244z" />
|
||||||
|
<glyph unicode="r" d="M244 0v1219h731v-244h-487v-244h487v-243h-487v-488h-244zM731 244v244h244v-244h-244zM975 0v244h244v-244h-244zM975 731v244h244v-244h-244z" />
|
||||||
|
<glyph unicode="s" d="M244 0v244h731v-244h-731zM244 731v244h244v-244h-244zM488 488h487v243h-487v-243zM488 975v244h731v-244h-731zM975 244v244h244v-244h-244z" />
|
||||||
|
<glyph unicode="t" horiz-adv-x="1219" d="M244 975v244h731v-244h-244v-975h-243v975h-244z" />
|
||||||
|
<glyph unicode="u" d="M244 244v975h244v-975h-244zM488 0v244h487v-244h-487zM975 244v975h244v-975h-244z" />
|
||||||
|
<glyph unicode="v" horiz-adv-x="1706" d="M244 731v488h244v-488h-244zM488 244v487h243v-487h-243zM731 0v244h244v-244h-244zM975 244v487h244v-487h-244zM1219 731v488h244v-488h-244z" />
|
||||||
|
<glyph unicode="w" horiz-adv-x="1706" d="M244 244v975h244v-975h-244zM488 0v244h243v-244h-243zM731 244v731h244v-731h-244zM975 0v244h244v-244h-244zM1219 244v975h244v-975h-244z" />
|
||||||
|
<glyph unicode="x" horiz-adv-x="1706" d="M244 0v244h244v-244h-244zM244 975v244h244v-244h-244zM488 244v244h243v-244h-243zM488 731v244h243v-244h-243zM731 488v243h244v-243h-244zM975 244v244h244v-244h-244zM975 731v244h244v-244h-244zM1219 0v244h244v-244h-244zM1219 975v244h244v-244h-244z" />
|
||||||
|
<glyph unicode="y" horiz-adv-x="1706" d="M244 975v244h244v-244h-244zM488 731v244h243v-244h-243zM731 0v731h244v-731h-244zM975 731v244h244v-244h-244zM1219 975v244h244v-244h-244z" />
|
||||||
|
<glyph unicode="z" horiz-adv-x="1219" d="M244 0v488h244v-244h487v-244h-731zM244 975v244h731v-488h-244v244h-487zM488 488v243h243v-243h-243z" />
|
||||||
|
<glyph unicode="{" horiz-adv-x="1219" d="M244 488v243h244v-243h-244zM488 0v488h243v-244h244v-244h-487zM488 731v488h487v-244h-244v-244h-243z" />
|
||||||
|
<glyph unicode="|" horiz-adv-x="731" d="M244 -244v1707h244v-1707h-244z" />
|
||||||
|
<glyph unicode="}" horiz-adv-x="1219" d="M244 0v244h244v244h243v-488h-487zM244 975v244h487v-488h-243v244h-244zM731 488v243h244v-243h-244z" />
|
||||||
|
<glyph unicode="~" d="M244 731v244h244v-244h-244zM488 975v244h243v-244h-243zM731 731v244h244v-244h-244zM975 975v244h244v-244h-244z" />
|
||||||
|
<glyph unicode="­" horiz-adv-x="1219" d="M244 488v243h731v-243h-731z" />
|
||||||
|
<glyph unicode=" " horiz-adv-x="731" />
|
||||||
|
<glyph unicode=" " horiz-adv-x="1463" />
|
||||||
|
<glyph unicode=" " horiz-adv-x="731" />
|
||||||
|
<glyph unicode=" " horiz-adv-x="1463" />
|
||||||
|
<glyph unicode=" " horiz-adv-x="487" />
|
||||||
|
<glyph unicode=" " horiz-adv-x="365" />
|
||||||
|
<glyph unicode=" " horiz-adv-x="243" />
|
||||||
|
<glyph unicode=" " horiz-adv-x="243" />
|
||||||
|
<glyph unicode=" " horiz-adv-x="182" />
|
||||||
|
<glyph unicode=" " horiz-adv-x="292" />
|
||||||
|
<glyph unicode=" " horiz-adv-x="81" />
|
||||||
|
<glyph unicode="‐" horiz-adv-x="1219" d="M244 488v243h731v-243h-731z" />
|
||||||
|
<glyph unicode="‑" horiz-adv-x="1219" d="M244 488v243h731v-243h-731z" />
|
||||||
|
<glyph unicode="‒" horiz-adv-x="1219" d="M244 488v243h731v-243h-731z" />
|
||||||
|
<glyph unicode="–" horiz-adv-x="1512" d="M244 488v243h1024v-243h-1024z" />
|
||||||
|
<glyph unicode="—" horiz-adv-x="2536" d="M244 488v243h2048v-243h-2048z" />
|
||||||
|
<glyph unicode=" " horiz-adv-x="292" />
|
||||||
|
<glyph unicode=" " horiz-adv-x="365" />
|
||||||
|
<glyph unicode="" horiz-adv-x="1219" d="M0 0v1219h1219v-1219h-1219z" />
|
||||||
|
</font>
|
||||||
|
</defs></svg>
|
After Width: | Height: | Size: 14 KiB |
BIN
content/fonts/slkscr-webfont-ttf.ttf
Executable file
BIN
content/fonts/slkscr-webfont-woff.woff
Executable file
BIN
content/img/appstore-badge.png
Normal file
After Width: | Height: | Size: 2.9 KiB |
BIN
content/img/appstore-badge@2x.png
Normal file
After Width: | Height: | Size: 6.0 KiB |
BIN
content/img/closelabel.png
Normal file
After Width: | Height: | Size: 168 B |
BIN
content/img/hero.png
Normal file
After Width: | Height: | Size: 1.2 KiB |
BIN
content/img/hero@2x.png
Normal file
After Width: | Height: | Size: 1.3 KiB |
BIN
content/img/loading.gif
Executable file
After Width: | Height: | Size: 2.7 KiB |
BIN
content/img/logo-alpha.png
Normal file
After Width: | Height: | Size: 1.5 KiB |
BIN
content/img/logo-alpha@2x.png
Normal file
After Width: | Height: | Size: 1.9 KiB |
BIN
content/img/logo.png
Normal file
After Width: | Height: | Size: 1.9 KiB |
BIN
content/img/logo@2x.png
Normal file
After Width: | Height: | Size: 2.9 KiB |
BIN
content/img/screenshot-binary-deep.png
Normal file
After Width: | Height: | Size: 284 KiB |
BIN
content/img/screenshot-binary-deep@2x.png
Normal file
After Width: | Height: | Size: 284 KiB |
|
@ -1,14 +1,14 @@
|
||||||
---
|
---
|
||||||
title: Ariejan's Blog
|
title: Ariejan's Blog
|
||||||
---
|
---
|
||||||
.content_wrap.nobg
|
.row
|
||||||
%section#middle_content
|
.large-8.push-2.columns
|
||||||
|
%section#posts
|
||||||
#posts
|
|
||||||
- articles_by_year(sorted_articles).each do |year, articles|
|
- articles_by_year(sorted_articles).each do |year, articles|
|
||||||
%ol.posts
|
%h2.year= year
|
||||||
- articles.each do |article|
|
- articles.each do |article|
|
||||||
%li
|
.post-listing
|
||||||
%span.date= get_short_date(article)
|
%h3.title= link_to article[:title], article.path, title: article[:title]
|
||||||
–
|
.summary
|
||||||
= link_to article[:title], article.path, title: article[:title]
|
%p Written by <strong>Ariejan de Vroom</strong> on #{get_pretty_date(article)}.
|
||||||
|
= article[:summary]
|
||||||
|
|
|
@ -1,8 +0,0 @@
|
||||||
/*
|
|
||||||
* jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/
|
|
||||||
*
|
|
||||||
* Open source under the BSD License.
|
|
||||||
* Copyright 2008 George McGinley Smith
|
|
||||||
*/
|
|
||||||
|
|
||||||
jQuery.easing["jswing"]=jQuery.easing["swing"];jQuery.extend(jQuery.easing,{def:"easeOutQuad",swing:function(a,b,c,d,e){return jQuery.easing[jQuery.easing.def](a,b,c,d,e)},easeInQuad:function(a,b,c,d,e){return d*(b/=e)*b+c},easeOutQuad:function(a,b,c,d,e){return-d*(b/=e)*(b-2)+c},easeInOutQuad:function(a,b,c,d,e){if((b/=e/2)<1)return d/2*b*b+c;return-d/2*(--b*(b-2)-1)+c},easeInCubic:function(a,b,c,d,e){return d*(b/=e)*b*b+c},easeOutCubic:function(a,b,c,d,e){return d*((b=b/e-1)*b*b+1)+c},easeInOutCubic:function(a,b,c,d,e){if((b/=e/2)<1)return d/2*b*b*b+c;return d/2*((b-=2)*b*b+2)+c},easeInQuart:function(a,b,c,d,e){return d*(b/=e)*b*b*b+c},easeOutQuart:function(a,b,c,d,e){return-d*((b=b/e-1)*b*b*b-1)+c},easeInOutQuart:function(a,b,c,d,e){if((b/=e/2)<1)return d/2*b*b*b*b+c;return-d/2*((b-=2)*b*b*b-2)+c},easeInQuint:function(a,b,c,d,e){return d*(b/=e)*b*b*b*b+c},easeOutQuint:function(a,b,c,d,e){return d*((b=b/e-1)*b*b*b*b+1)+c},easeInOutQuint:function(a,b,c,d,e){if((b/=e/2)<1)return d/2*b*b*b*b*b+c;return d/2*((b-=2)*b*b*b*b+2)+c},easeInSine:function(a,b,c,d,e){return-d*Math.cos(b/e*(Math.PI/2))+d+c},easeOutSine:function(a,b,c,d,e){return d*Math.sin(b/e*(Math.PI/2))+c},easeInOutSine:function(a,b,c,d,e){return-d/2*(Math.cos(Math.PI*b/e)-1)+c},easeInExpo:function(a,b,c,d,e){return b==0?c:d*Math.pow(2,10*(b/e-1))+c},easeOutExpo:function(a,b,c,d,e){return b==e?c+d:d*(-Math.pow(2,-10*b/e)+1)+c},easeInOutExpo:function(a,b,c,d,e){if(b==0)return c;if(b==e)return c+d;if((b/=e/2)<1)return d/2*Math.pow(2,10*(b-1))+c;return d/2*(-Math.pow(2,-10*--b)+2)+c},easeInCirc:function(a,b,c,d,e){return-d*(Math.sqrt(1-(b/=e)*b)-1)+c},easeOutCirc:function(a,b,c,d,e){return d*Math.sqrt(1-(b=b/e-1)*b)+c},easeInOutCirc:function(a,b,c,d,e){if((b/=e/2)<1)return-d/2*(Math.sqrt(1-b*b)-1)+c;return d/2*(Math.sqrt(1-(b-=2)*b)+1)+c},easeInElastic:function(a,b,c,d,e){var f=1.70158;var g=0;var h=d;if(b==0)return c;if((b/=e)==1)return c+d;if(!g)g=e*.3;if(h<Math.abs(d)){h=d;var f=g/4}else var f=g/(2*Math.PI)*Math.asin(d/h);return-(h*Math.pow(2,10*(b-=1))*Math.sin((b*e-f)*2*Math.PI/g))+c},easeOutElastic:function(a,b,c,d,e){var f=1.70158;var g=0;var h=d;if(b==0)return c;if((b/=e)==1)return c+d;if(!g)g=e*.3;if(h<Math.abs(d)){h=d;var f=g/4}else var f=g/(2*Math.PI)*Math.asin(d/h);return h*Math.pow(2,-10*b)*Math.sin((b*e-f)*2*Math.PI/g)+d+c},easeInOutElastic:function(a,b,c,d,e){var f=1.70158;var g=0;var h=d;if(b==0)return c;if((b/=e/2)==2)return c+d;if(!g)g=e*.3*1.5;if(h<Math.abs(d)){h=d;var f=g/4}else var f=g/(2*Math.PI)*Math.asin(d/h);if(b<1)return-.5*h*Math.pow(2,10*(b-=1))*Math.sin((b*e-f)*2*Math.PI/g)+c;return h*Math.pow(2,-10*(b-=1))*Math.sin((b*e-f)*2*Math.PI/g)*.5+d+c},easeInBack:function(a,b,c,d,e,f){if(f==undefined)f=1.70158;return d*(b/=e)*b*((f+1)*b-f)+c},easeOutBack:function(a,b,c,d,e,f){if(f==undefined)f=1.70158;return d*((b=b/e-1)*b*((f+1)*b+f)+1)+c},easeInOutBack:function(a,b,c,d,e,f){if(f==undefined)f=1.70158;if((b/=e/2)<1)return d/2*b*b*(((f*=1.525)+1)*b-f)+c;return d/2*((b-=2)*b*(((f*=1.525)+1)*b+f)+2)+c},easeInBounce:function(a,b,c,d,e){return d-jQuery.easing.easeOutBounce(a,e-b,0,d,e)+c},easeOutBounce:function(a,b,c,d,e){if((b/=e)<1/2.75){return d*7.5625*b*b+c}else if(b<2/2.75){return d*(7.5625*(b-=1.5/2.75)*b+.75)+c}else if(b<2.5/2.75){return d*(7.5625*(b-=2.25/2.75)*b+.9375)+c}else{return d*(7.5625*(b-=2.625/2.75)*b+.984375)+c}},easeInOutBounce:function(a,b,c,d,e){if(b<e/2)return jQuery.easing.easeInBounce(a,b*2,0,d,e)*.5+c;return jQuery.easing.easeOutBounce(a,b*2-e,0,d,e)*.5+d*.5+c}});
|
|
|
@ -1,3 +0,0 @@
|
||||||
|
|
||||||
/*! Respond.js v1.1.0: min/max-width media query polyfill. (c) Scott Jehl. MIT/GPLv2 Lic. j.mp/respondjs */
|
|
||||||
(function(e){e.respond={};respond.update=function(){};respond.mediaQueriesSupported=e.matchMedia&&e.matchMedia("only all").matches;if(respond.mediaQueriesSupported){return}var w=e.document,s=w.documentElement,i=[],k=[],q=[],o={},h=30,f=w.getElementsByTagName("head")[0]||s,g=w.getElementsByTagName("base")[0],b=f.getElementsByTagName("link"),d=[],a=function(){var D=b,y=D.length,B=0,A,z,C,x;for(;B<y;B++){A=D[B],z=A.href,C=A.media,x=A.rel&&A.rel.toLowerCase()==="stylesheet";if(!!z&&x&&!o[z]){if(A.styleSheet&&A.styleSheet.rawCssText){m(A.styleSheet.rawCssText,z,C);o[z]=true}else{if((!/^([a-zA-Z:]*\/\/)/.test(z)&&!g)||z.replace(RegExp.$1,"").split("/")[0]===e.location.host){d.push({href:z,media:C})}}}}u()},u=function(){if(d.length){var x=d.shift();n(x.href,function(y){m(y,x.href,x.media);o[x.href]=true;u()})}},m=function(I,x,z){var G=I.match(/@media[^\{]+\{([^\{\}]*\{[^\}\{]*\})+/gi),J=G&&G.length||0,x=x.substring(0,x.lastIndexOf("/")),y=function(K){return K.replace(/(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g,"$1"+x+"$2$3")},A=!J&&z,D=0,C,E,F,B,H;if(x.length){x+="/"}if(A){J=1}for(;D<J;D++){C=0;if(A){E=z;k.push(y(I))}else{E=G[D].match(/@media *([^\{]+)\{([\S\s]+?)$/)&&RegExp.$1;k.push(RegExp.$2&&y(RegExp.$2))}B=E.split(",");H=B.length;for(;C<H;C++){F=B[C];i.push({media:F.split("(")[0].match(/(only\s+)?([a-zA-Z]+)\s?/)&&RegExp.$2||"all",rules:k.length-1,hasquery:F.indexOf("(")>-1,minw:F.match(/\(min\-width:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/)&&parseFloat(RegExp.$1)+(RegExp.$2||""),maxw:F.match(/\(max\-width:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/)&&parseFloat(RegExp.$1)+(RegExp.$2||"")})}}j()},l,r,v=function(){var z,A=w.createElement("div"),x=w.body,y=false;A.style.cssText="position:absolute;font-size:1em;width:1em";if(!x){x=y=w.createElement("body");x.style.background="none"}x.appendChild(A);s.insertBefore(x,s.firstChild);z=A.offsetWidth;if(y){s.removeChild(x)}else{x.removeChild(A)}z=p=parseFloat(z);return z},p,j=function(I){var x="clientWidth",B=s[x],H=w.compatMode==="CSS1Compat"&&B||w.body[x]||B,D={},G=b[b.length-1],z=(new Date()).getTime();if(I&&l&&z-l<h){clearTimeout(r);r=setTimeout(j,h);return}else{l=z}for(var E in i){var K=i[E],C=K.minw,J=K.maxw,A=C===null,L=J===null,y="em";if(!!C){C=parseFloat(C)*(C.indexOf(y)>-1?(p||v()):1)}if(!!J){J=parseFloat(J)*(J.indexOf(y)>-1?(p||v()):1)}if(!K.hasquery||(!A||!L)&&(A||H>=C)&&(L||H<=J)){if(!D[K.media]){D[K.media]=[]}D[K.media].push(k[K.rules])}}for(var E in q){if(q[E]&&q[E].parentNode===f){f.removeChild(q[E])}}for(var E in D){var M=w.createElement("style"),F=D[E].join("\n");M.type="text/css";M.media=E;f.insertBefore(M,G.nextSibling);if(M.styleSheet){M.styleSheet.cssText=F}else{M.appendChild(w.createTextNode(F))}q.push(M)}},n=function(x,z){var y=c();if(!y){return}y.open("GET",x,true);y.onreadystatechange=function(){if(y.readyState!=4||y.status!=200&&y.status!=304){return}z(y.responseText)};if(y.readyState==4){return}y.send(null)},c=(function(){var x=false;try{x=new XMLHttpRequest()}catch(y){x=new ActiveXObject("Microsoft.XMLHTTP")}return function(){return x}})();a();respond.update=a;function t(){j(true)}if(e.addEventListener){e.addEventListener("resize",t,false)}else{if(e.attachEvent){e.attachEvent("onresize",t)}}})(this);
|
|
|
@ -1,6 +0,0 @@
|
||||||
//= require _modernizr.js
|
|
||||||
//= require _respond.js
|
|
||||||
//= require _jquery.js
|
|
||||||
//= require _jquery_easing.js
|
|
||||||
|
|
||||||
//= require _main.js
|
|
15
content/js/foundation.js
vendored
Normal file
6
content/js/jquery.js
vendored
Normal file
2
content/js/main.coffee
Normal file
|
@ -0,0 +1,2 @@
|
||||||
|
$ ->
|
||||||
|
|
|
@ -1,3 +0,0 @@
|
||||||
//= require _jquery_script.js
|
|
||||||
//= require _jquery_prettyphoto.js
|
|
||||||
//= require _jquery_tweetsanywhere.js
|
|
3
content/js/retina.js
Normal file
|
@ -0,0 +1,3 @@
|
||||||
|
// retina.js, a high-resolution image swapper (http://retinajs.com), v0.0.2
|
||||||
|
|
||||||
|
(function(){function t(e){this.path=e;var t=this.path.split("."),n=t.slice(0,t.length-1).join("."),r=t[t.length-1];this.at_2x_path=n+"@2x."+r}function n(e){this.el=e,this.path=new t(this.el.getAttribute("src"));var n=this;this.path.check_2x_variant(function(e){e&&n.swap()})}var e=typeof exports=="undefined"?window:exports;e.RetinaImagePath=t,t.confirmed_paths=[],t.prototype.is_external=function(){return!!this.path.match(/^https?\:/i)&&!this.path.match("//"+document.domain)},t.prototype.check_2x_variant=function(e){var n,r=this;if(this.is_external())return e(!1);if(this.at_2x_path in t.confirmed_paths)return e(!0);n=new XMLHttpRequest,n.open("HEAD",this.at_2x_path),n.onreadystatechange=function(){return n.readyState!=4?e(!1):n.status>=200&&n.status<=399?(t.confirmed_paths.push(r.at_2x_path),e(!0)):e(!1)},n.send()},e.RetinaImage=n,n.prototype.swap=function(e){function n(){t.el.complete?(t.el.setAttribute("width",t.el.offsetWidth),t.el.setAttribute("height",t.el.offsetHeight),t.el.setAttribute("src",e)):setTimeout(n,5)}typeof e=="undefined"&&(e=this.path.at_2x_path);var t=this;n()},e.devicePixelRatio>1&&(window.onload=function(){var e=document.getElementsByTagName("img"),t=[],r,i;for(r=0;r<e.length;r++)i=e[r],t.push(new n(i))})})();
|
|
@ -7,6 +7,9 @@ tags:
|
||||||
- git
|
- git
|
||||||
- github
|
- github
|
||||||
- hub
|
- hub
|
||||||
|
summary: |
|
||||||
|
A small shell trick to quickly see the commits that you'll
|
||||||
|
send out on a pull request from your console.
|
||||||
---
|
---
|
||||||
Github pull requests are awesome, but you can't use them all the time, mostly when working on code not hosted at github.
|
Github pull requests are awesome, but you can't use them all the time, mostly when working on code not hosted at github.
|
||||||
|
|
||||||
|
|
|
@ -7,6 +7,9 @@ tags:
|
||||||
- automation
|
- automation
|
||||||
- jenkins
|
- jenkins
|
||||||
- gitlab
|
- gitlab
|
||||||
|
summary: |
|
||||||
|
In my eternal quest to have a nice, fast and fun to use blogging platform for ariejan.net, I've
|
||||||
|
switched over to Nanoc – a static site generator in Ruby.
|
||||||
---
|
---
|
||||||
I've migrated _ariejan.net_ from a custom Ruby on Rails application to a statically generated site with Nanoc.
|
I've migrated _ariejan.net_ from a custom Ruby on Rails application to a statically generated site with Nanoc.
|
||||||
|
|
||||||
|
|
|
@ -6,6 +6,9 @@ tags:
|
||||||
- why
|
- why
|
||||||
- leadership
|
- leadership
|
||||||
- inspiration
|
- inspiration
|
||||||
|
summary: |
|
||||||
|
Asking for something is not easy, especially if the other party does not want to give it. I've learned that
|
||||||
|
there's a lot I could change about the way I ask people things.
|
||||||
---
|
---
|
||||||
|
|
||||||
When people make a request or proposal I often see them present their request and arguments using the following structure:
|
When people make a request or proposal I often see them present their request and arguments using the following structure:
|
||||||
|
|
|
@ -5,6 +5,9 @@ created_at: 2013-05-21
|
||||||
tags:
|
tags:
|
||||||
- productivity
|
- productivity
|
||||||
- life-hacks
|
- life-hacks
|
||||||
|
summary: |
|
||||||
|
From begin a lazy nerd to an early riser. This is how I broke my
|
||||||
|
sleeping habit to get things done in the early morning.
|
||||||
---
|
---
|
||||||
|
|
||||||
Over the years I've often found myself behind my computer at two in the morning trying to finish a feature for a side-project and trying to keep my eyes open and focussed.
|
Over the years I've often found myself behind my computer at two in the morning trying to finish a feature for a side-project and trying to keep my eyes open and focussed.
|
||||||
|
|
|
@ -5,6 +5,9 @@ created_at: 2013-05-23
|
||||||
tags:
|
tags:
|
||||||
- productivity
|
- productivity
|
||||||
- life-hacks
|
- life-hacks
|
||||||
|
summary: |
|
||||||
|
Getting up early and getting things done is one thing. As it
|
||||||
|
turns out, there is something more to it: <em>divide and conquer</em>.
|
||||||
---
|
---
|
||||||
|
|
||||||
A few days ago I wrote about getting up early and getting stuff done
|
A few days ago I wrote about getting up early and getting stuff done
|
||||||
|
|
|
@ -1,75 +1,75 @@
|
||||||
---
|
---
|
||||||
title: Projects
|
title: Projects
|
||||||
---
|
---
|
||||||
.content_wrap.nobg
|
.row
|
||||||
%section#middle_content
|
.large-6.columns
|
||||||
.two_third
|
:markdown
|
||||||
:markdown
|
### Open Source Projects
|
||||||
### Open Source Projects
|
|
||||||
|
|
||||||
This is an incomplete list of projects I've been working on in the recent pasts.
|
This is an incomplete list of projects I've been working on in the recent pasts.
|
||||||
There are several projects that I've worked on, but long since abandoned because
|
There are several projects that I've worked on, but long since abandoned because
|
||||||
they became obsolete and were superseded by other alternatives.
|
they became obsolete and were superseded by other alternatives.
|
||||||
|
|
||||||
#### Focal
|
#### Focal
|
||||||
|
|
||||||
Focal is a utility web application that creates sexy and informative burndowns
|
Focal is a utility web application that creates sexy and informative burndowns
|
||||||
for you and your team.
|
for you and your team.
|
||||||
|
|
||||||
Hooked up to the Pivotal Tracker API, Focal will gather information about the
|
Hooked up to the Pivotal Tracker API, Focal will gather information about the
|
||||||
current iteration on a daily basis and provide you and the team with valuable
|
current iteration on a daily basis and provide you and the team with valuable
|
||||||
progress information.
|
progress information.
|
||||||
|
|
||||||
_Focal is developed by Kabisa._
|
_Focal is developed by Kabisa._
|
||||||
|
|
||||||
* [Github](https://github.com/kabisaict/focal)
|
* [Github](https://github.com/kabisaict/focal)
|
||||||
|
|
||||||
### IMDB
|
### IMDB
|
||||||
|
|
||||||
The IMDB gem allows you to programatically access IMDB. Although IMDB does not
|
The IMDB gem allows you to programatically access IMDB. Although IMDB does not
|
||||||
officially expose an API you are able to look at what's on their public pages.
|
officially expose an API you are able to look at what's on their public pages.
|
||||||
|
|
||||||
* [Github](https://github.com/ariejan/imdb)
|
* [Github](https://github.com/ariejan/imdb)
|
||||||
|
|
||||||
#### Firefly
|
#### Firefly
|
||||||
|
|
||||||
At the height of 140 character limited tweets, URL shortners where the hippest
|
At the height of 140 character limited tweets, URL shortners where the hippest
|
||||||
thing around.
|
thing around.
|
||||||
|
|
||||||
Firefly provides you with a personal url shortner. It can be easily deployed to
|
Firefly provides you with a personal url shortner. It can be easily deployed to
|
||||||
Heroku and it has proven to be able to handle millions of shortened URLs.
|
Heroku and it has proven to be able to handle millions of shortened URLs.
|
||||||
|
|
||||||
* [Website](http://fireflyrb.com)
|
* [Website](http://fireflyrb.com)
|
||||||
* [Github](https://github.com/ariejan/firefly)
|
* [Github](https://github.com/ariejan/firefly)
|
||||||
|
|
||||||
#### PostcodeAPI
|
#### PostcodeAPI
|
||||||
|
|
||||||
A simple ruby wrapper around the [Postcode API service](http://www.postcodeapi.nu/).
|
A simple ruby wrapper around the [Postcode API service](http://www.postcodeapi.nu/).
|
||||||
|
|
||||||
* [Github](https://github.com/ariejan/postcodeapi)
|
* [Github](https://github.com/ariejan/postcodeapi)
|
||||||
|
|
||||||
#### elfproef
|
#### elfproef
|
||||||
|
|
||||||
The 11-check is a checksum algorithm used to validate Dutch bank account numbers and
|
The 11-check is a checksum algorithm used to validate Dutch bank account numbers and
|
||||||
social security numbers.
|
social security numbers.
|
||||||
|
|
||||||
This gem allows you to add validations to your Rails models for these kind of fields.
|
This gem allows you to add validations to your Rails models for these kind of fields.
|
||||||
|
|
||||||
* [Github](https://github.com/sytzeloor/elfproef)
|
* [Github](https://github.com/sytzeloor/elfproef)
|
||||||
|
|
||||||
.one-third.last
|
.large-6.columns
|
||||||
:markdown
|
:markdown
|
||||||
### Open Source contributions
|
### Open Source contributions
|
||||||
|
|
||||||
Besides doing my own projects, I've also contributed to a wide variety of open
|
Besides doing my own projects, I've also contributed to a wide variety of open
|
||||||
source projects. Mostly to scratch my own itch with that project.
|
source projects. Mostly to scratch my own itch with that project.
|
||||||
|
|
||||||
* Rails
|
* Rails
|
||||||
* Gitlab
|
* Gitlab
|
||||||
* rails-i18n
|
* rails-i18n
|
||||||
* elfproef
|
* elfproef
|
||||||
* rubber
|
* opensourcerails
|
||||||
* capistrano-resque
|
* rubber
|
||||||
|
* capistrano-resque
|
||||||
|
|
||||||
Check out my [github profile page](https://github.com/ariejan) for other projects
|
Check out my [github profile page](https://github.com/ariejan) for other projects
|
||||||
and specifics.
|
and specifics.
|
||||||
|
|
|
@ -1,36 +1,36 @@
|
||||||
---
|
---
|
||||||
title: Talks by Ariejan
|
title: Talks by Ariejan
|
||||||
---
|
---
|
||||||
.content_wrap.nobg
|
.row
|
||||||
%section#middle_content
|
.large-8.push-2.columns
|
||||||
:markdown
|
:markdown
|
||||||
|
# Talks
|
||||||
|
|
||||||
*I'm available for talks and presentations on software craftsmanship for
|
*I'm available for talks and presentations on software craftsmanship for
|
||||||
your company or event! If you are interested in having me, please
|
your company or event! If you are interested in having me, please
|
||||||
[contact me](/about) to discus details.*
|
[contact me](/about) to discus details.*
|
||||||
|
|
||||||
My talks are about software craftsmanship, Ruby on Rails or any other
|
I love giving talks to motivate and inspire others. My talks can be in-depth
|
||||||
subject that's relevant at the time.
|
technical or on a higher level about clean code and craftsmanship.
|
||||||
|
|
||||||
### Previous talks
|
## Previous talks
|
||||||
|
|
||||||
Since 2012 I'm keeping track of the talks I've given. You can find the slides to them below.
|
Since 2012 I'm keeping track of the talks I've given. You can find the slides to them below.
|
||||||
|
|
||||||
.one_third.talk
|
.row
|
||||||
:plain
|
.large-6.columns
|
||||||
<script async class="speakerdeck-embed" data-slide="16" data-id="4fcf866a4aab160369000dd1" data-ratio="1.77777777777778" src="//speakerdeck.com/assets/embed.js"></script>
|
%h4
|
||||||
.caption
|
Software Craftsmanship
|
||||||
Software Craftsmanship,
|
%p
|
||||||
%br
|
june 2012
|
||||||
june 2012
|
:plain
|
||||||
|
<script async class="speakerdeck-embed" data-slide="16" data-id="4fcf866a4aab160369000dd1" data-ratio="1.77777777777778" src="//speakerdeck.com/assets/embed.js"></script>
|
||||||
|
|
||||||
|
|
||||||
.one_third.talk
|
.large-6.columns
|
||||||
:plain
|
%h4
|
||||||
<script async class="speakerdeck-embed" data-id="4f7da2d94156d9001f032da4" data-ratio="1.77777777777778" src="//speakerdeck.com/assets/embed.js"></script>
|
Introducting Gitlab
|
||||||
.caption
|
%p
|
||||||
Introducting Gitlab, Lighting Talk,
|
Lighting Talk, april 2012
|
||||||
%br
|
:plain
|
||||||
april 2012
|
<script async class="speakerdeck-embed" data-id="4f7da2d94156d9001f032da4" data-ratio="1.77777777777778" src="//speakerdeck.com/assets/embed.js"></script>
|
||||||
|
|
||||||
.one_third.talk.last
|
|
||||||
= " "
|
|
||||||
|
|
|
@ -1,87 +1,52 @@
|
||||||
!!!
|
!!! 5
|
||||||
/[if lt IE 7] <html dir="ltr" lang="en-US" class="ie6">
|
%html(lang="en" dir="ltr" prefix="og: http://ogp.me/ns#")
|
||||||
/[if IE 7] <html dir="ltr" lang="en-US" class="ie7">
|
|
||||||
/[if IE 8] <html dir="ltr" lang="en-US" class="ie8">
|
|
||||||
/ [if gt IE 8]><!
|
|
||||||
%html{:dir => "ltr", :lang => "en-US"}
|
|
||||||
/ <![endif]
|
|
||||||
%head
|
%head
|
||||||
%meta{:charset => 'utf-8'}
|
%meta(charset="UTF-8")
|
||||||
%meta{:content => "text/html;charset=utf-8", "http-equiv" => "content-type"}
|
%meta(content="text/html;charset=utf-8" http-equiv="content-type")
|
||||||
%meta{:content => "a blog by ariejan de vroom about software engineering and craftsmanship.", :name => "description"}
|
%meta(http-equiv="X-UA-Compatible" content="IE=edge")
|
||||||
%meta{:content => "software engineering, programming, craftsmanship, devops, ruby, rubyonrails, rails, git, svn, postgres, postgresql, mysql, mac, ios, apple, web2.0, go, golang", :name => "keywords"}
|
%meta(name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no")
|
||||||
%meta{:content => "width=device-width, initial-scale=1, maximum-scale=1", :name => "viewport"}
|
%meta(name="author" content="Ariejan de Vroom")
|
||||||
%meta{:content => "3bgidck6YUMyx-kvL_a8E4ry0DJOAIOYaZkZxQ0kZw4", :name => "google-site-verification"}
|
|
||||||
|
%meta(name="description" content="a blog by ariejan de vroom about software engineering and craftsmanship.")
|
||||||
|
%meta(name="keywords" content="software engineering, programming, craftsmanship, devops, ruby, rubyonrails, rails, git, svn, postgres, postgresql, mysql, mac, ios, apple, web2.0, go, golang")
|
||||||
|
|
||||||
|
%meta(content="3bgidck6YUMyx-kvL_a8E4ry0DJOAIOYaZkZxQ0kZw4" name="google-site-verification")
|
||||||
|
|
||||||
%link(href='http://www.myopenid.com/server' rel='openid.server')
|
%link(href='http://www.myopenid.com/server' rel='openid.server')
|
||||||
%link(href='http://ariejan.myopenid.com/' rel='openid.delegate')
|
%link(href='http://ariejan.myopenid.com/' rel='openid.delegate')
|
||||||
|
|
||||||
%link{:href => "/images/favicon.ico", :rel => "shortcut icon", :type => "image/x-icon"}
|
%link(href="/images/favicon.ico" rel="shortcut icon" type="image/x-icon")
|
||||||
%link{:rel => "alternate", :type => "application/rss+xml", :title => "RSS", :href => "http://ariejan.net/rss.xml"}
|
%link(href="http://ariejan.net/rss.xml" rel="alternate" type="application/rss+xml" title="RSS")
|
||||||
%link{:href => "/css/style.css", :media => "screen", :rel => "stylesheet", :type => "text/css"}
|
|
||||||
|
|
||||||
%link{:href => "https://fonts.googleapis.com/css?family=Open+Sans:400,600,800,400italic", :rel => "stylesheet", :type => "text/css"}
|
%link(href="/css/screen.css" rel="stylesheet" type="text/css" media="screen")
|
||||||
|
|
||||||
/[if lt IE 9]
|
|
||||||
<link rel="stylesheet" href="/css/ie.css" type="text/css" />
|
|
||||||
<link rel="stylesheet" href="/css/ieCss3.css" type="text/css" media="screen" />
|
|
||||||
|
|
||||||
%script{:src => "/js/application.js", :type => "text/javascript"}
|
|
||||||
|
|
||||||
%title= "#{@item[:title]} — ariejan.net"
|
%title= "#{@item[:title]} — ariejan.net"
|
||||||
|
|
||||||
%body
|
%body
|
||||||
/ __________________________________________________ Start Page
|
%header#title
|
||||||
%section#page
|
%h1 ariejan.net
|
||||||
%a#slide_top{:href => "#"}
|
|
||||||
.container
|
|
||||||
/ __________________________________________________ Start Header
|
|
||||||
%header#header
|
|
||||||
.header_inner
|
|
||||||
%a.logo{:href => "/"}
|
|
||||||
%img{:alt => "", :width => 166, :height => 57, :src => "/images/logo.png"}/
|
|
||||||
.custom_html
|
|
||||||
%h3{:style => "color:#ffffff; margin:0; line-height:24px;"} May the Source be with you.
|
|
||||||
= render 'social_list'
|
|
||||||
|
|
||||||
.nav_wrap
|
%nav#primary
|
||||||
.nav_wrap_inner
|
%ol.interal
|
||||||
.responsibe_block
|
%li= link_to "Home", "/"
|
||||||
.responsibe_block_inner
|
%li= link_to "Projects", "/projects/"
|
||||||
%a.resp_navigation{:href => "#"}
|
%li= link_to "Craftsmanship", "/craftsmanship/"
|
||||||
= render 'social_list'
|
%li= link_to "Talks", "/talks/"
|
||||||
|
%li= link_to "About", "/about/"
|
||||||
|
|
||||||
= render "navigation"
|
#wrapper
|
||||||
.cl
|
= yield
|
||||||
/ __________________________________________________ Finish Header
|
|
||||||
/ __________________________________________________ Start Middle
|
|
||||||
%section#middle
|
|
||||||
.headline
|
|
||||||
.three_fourth
|
|
||||||
%h2= @item[:title]
|
|
||||||
|
|
||||||
.one_fourth.last
|
%footer
|
||||||
.search-box
|
.copyright
|
||||||
%form{action: "http://www.google.com/cse", id: "cse-search-box"}
|
|
||||||
%input{type: "hidden", name: "cx", value: "011455777682120765364:szqyrcy79dw"}
|
|
||||||
%input{type: "hidden", name: "ie", value: "UTF-8"}
|
|
||||||
%input#google-search-box{name: "q", placeholder: "Search site", type: "search"}/
|
|
||||||
.cl
|
|
||||||
|
|
||||||
= yield
|
|
||||||
/ __________________________________________________ Finish Middle
|
|
||||||
/ __________________________________________________ Finish Page
|
|
||||||
/ __________________________________________________ Start Footer
|
|
||||||
%footer#footer
|
|
||||||
.footer_inner
|
|
||||||
%p
|
%p
|
||||||
Copyright © 1999 - #{Time.now.year} Ariejan de Vroom
|
Copyright © 1999 - #{Time.now.year} Ariejan de Vroom
|
||||||
|
|
||||||
%ul.tla
|
%ul.tla
|
||||||
:plain
|
:plain
|
||||||
<li>Some messages from the Dark Side:</li>
|
<li>A message from the Dark Side:</li>
|
||||||
<li><a href="http://www.healthy-dietplans.com/coupons/medifast-promo-codes/">Medifast Coupon Code</a></li>
|
<li><a href="http://www.healthy-dietplans.com/coupons/medifast-promo-codes/">Medifast Coupon Code</a></li>
|
||||||
|
|
||||||
/ __________________________________________________ Finish Footer
|
|
||||||
%script{:src => "/js/plugins.js", :type => "text/javascript"}
|
%script{:src => "/js/plugins.js", :type => "text/javascript"}
|
||||||
:javascript
|
:javascript
|
||||||
var _gaq = _gaq || [];
|
var _gaq = _gaq || [];
|
||||||
|
|
4
layouts/page.haml
Normal file
|
@ -0,0 +1,4 @@
|
||||||
|
%section.page
|
||||||
|
#content
|
||||||
|
%article.page
|
||||||
|
= yield
|
|
@ -1,39 +1,37 @@
|
||||||
.content_wrap
|
%section.post
|
||||||
.post
|
%section#main
|
||||||
%section#content
|
#content
|
||||||
%article
|
%article.post
|
||||||
|
%h1= item[:title]
|
||||||
|
|
||||||
|
%p.meta
|
||||||
|
Written by <strong>Ariejan de Vroom</strong> on #{get_pretty_date(item)}.
|
||||||
|
|
||||||
= yield
|
= yield
|
||||||
|
|
||||||
#disqus_thread
|
%section#comments
|
||||||
|
#disqus_thread
|
||||||
|
|
||||||
%section#sidebar
|
:javascript
|
||||||
.fixed
|
var disqus_url = "#{url_for(item)}";
|
||||||
%aside.widget.widget_influads
|
(function() {
|
||||||
#influad
|
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
|
||||||
- if ENV['NANOC_ENV'] == "development"
|
dsq.src = 'http://ariejannet.disqus.com/embed.js';
|
||||||
.influads_block
|
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
|
||||||
.influads_img
|
})();
|
||||||
%img(src="http://placehold.it/130x100&text=Influad%20(130x100)" width="130" height="100")
|
|
||||||
.influads_text
|
|
||||||
= link_to "The exquisite, low-cost way to design, send, and track email.", "#"
|
|
||||||
.influads_powered_div
|
|
||||||
= link_to "Powered by InfluAds", "#"
|
|
||||||
- else
|
|
||||||
:plain
|
|
||||||
<div id='influads_block' class='influads_block'></div>
|
|
||||||
<script type='text/javascript'>(function(){var acc='acc_933d676_pub';var st='nocss';var or='130';var e=document.getElementsByTagName('script')[0];var d=document.createElement('script');d.src=('https:' == document.location.protocol ?'https://' : 'http://') +'engine.influads.com/show/'+or+'/'+st+'/'+acc;d.type='text/javascript';d.async=true;d.defer=true; e.parentNode.insertBefore(d,e);})();</script>
|
|
||||||
|
|
||||||
%aside.widget.widget_metadata
|
%section#sidebar
|
||||||
%h3.widgettitle About this post
|
%aside.influads
|
||||||
%p
|
#influad
|
||||||
This post was written by <em>Ariejan de Vroom</em> on
|
- if ENV['NANOC_ENV'] == "development"
|
||||||
<em>#{get_pretty_date(item)}</em> and
|
.influads_block
|
||||||
tagged with <em>#{get_tags(item)}</em>.
|
.influads_img
|
||||||
|
%img(src="http://placehold.it/130x100&text=Influad%20(130x100)" width="130" height="100")
|
||||||
:javascript
|
.influads_text
|
||||||
var disqus_url = "#{url_for(item)}";
|
= link_to "The exquisite, low-cost way to design, send, and track email.", "#"
|
||||||
(function() {
|
.influads_powered_div
|
||||||
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
|
= link_to "Powered by InfluAds", "#"
|
||||||
dsq.src = 'http://ariejannet.disqus.com/embed.js';
|
- else
|
||||||
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
|
:plain
|
||||||
})();
|
<div id='influads_block' class='influads_block'></div>
|
||||||
|
<script type='text/javascript'>(function(){var acc='acc_933d676_pub';var st='nocss';var or='130';var e=document.getElementsByTagName('script')[0];var d=document.createElement('script');d.src=('https:' == document.location.protocol ?'https://' : 'http://') +'engine.influads.com/show/'+or+'/'+st+'/'+acc;d.type='text/javascript';d.async=true;d.defer=true; e.parentNode.insertBefore(d,e);})();</script>
|
||||||
|
|
|
@ -8,12 +8,26 @@ module PostHelper
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
|
||||||
|
def get_summary(post, length = 200)
|
||||||
|
doc = Nokogiri.HTML(post.compiled_content)
|
||||||
|
|
||||||
|
summary = ""
|
||||||
|
paragraphs = doc.search("p")
|
||||||
|
|
||||||
|
paragraphs.each do |paragraph|
|
||||||
|
summary += paragraph.to_s
|
||||||
|
break if summary.size >= length
|
||||||
|
end
|
||||||
|
|
||||||
|
summary
|
||||||
|
end
|
||||||
|
|
||||||
def get_short_date(post)
|
def get_short_date(post)
|
||||||
attribute_to_time(post[:created_at]).strftime('%Y-%m-%d')
|
attribute_to_time(post[:created_at]).strftime('%Y-%m-%d')
|
||||||
end
|
end
|
||||||
|
|
||||||
def get_pretty_date(post)
|
def get_pretty_date(post)
|
||||||
attribute_to_time(post[:created_at]).strftime('%-d %B, %Y')
|
attribute_to_time(post[:created_at]).strftime('%-d %B %Y')
|
||||||
end
|
end
|
||||||
|
|
||||||
def get_tags(post)
|
def get_tags(post)
|
||||||
|
|