Merge branch 'flatui'
This commit is contained in:
Ariejan de Vroom
commit
0585c7995b
4
Gemfile
4
Gemfile
|
|
@ -16,6 +16,8 @@ gem 'typogruby'
|
|||
gem 'nanoc-cachebuster'
|
||||
gem 'nanoc-javascript-concatenator'
|
||||
|
||||
gem 'coffee-script'
|
||||
|
||||
gem 'uglifier'
|
||||
gem 'multi_json', '~> 1.3' # needed by uglifier
|
||||
|
||||
|
|
@ -35,4 +37,4 @@ gem 'systemu'
|
|||
|
||||
# needed to run validations
|
||||
gem 'w3c_validators'
|
||||
gem 'nokogiri'
|
||||
gem 'nokogiri'
|
||||
|
|
|
|||
|
|
@ -5,6 +5,10 @@ GEM
|
|||
rack (>= 1.0.0)
|
||||
builder (3.2.0)
|
||||
chunky_png (1.2.7)
|
||||
coffee-script (2.2.0)
|
||||
coffee-script-source
|
||||
execjs
|
||||
coffee-script-source (1.6.2)
|
||||
colored (1.2)
|
||||
compass (0.12.2)
|
||||
chunky_png (~> 1.2)
|
||||
|
|
@ -55,6 +59,7 @@ PLATFORMS
|
|||
DEPENDENCIES
|
||||
adsf
|
||||
builder
|
||||
coffee-script
|
||||
compass
|
||||
haml
|
||||
i18n
|
||||
|
|
|
|||
32
Rules
32
Rules
|
|
@ -23,16 +23,32 @@ compile '/sitemap/', :rep => 'gzip' do
|
|||
filter :shellcmd, :cmd => 'gzip'
|
||||
end
|
||||
|
||||
compile '/css/*/' do
|
||||
# filter :sass, syntax: :scss, load_paths: SASS_LOAD_PATHS
|
||||
filter :sass, Compass.sass_engine_options
|
||||
# Use screen.scss as the single entry point for styles, ignore everything else in /assets/css
|
||||
|
||||
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
|
||||
|
||||
compile '/js/*/' do
|
||||
filter :coffeescript if @item[:extension] == 'coffee'
|
||||
|
||||
filter :concat_js
|
||||
filter :uglify_js
|
||||
end
|
||||
|
||||
route '/js/*/' do
|
||||
fp = fingerprint(item[:filename])
|
||||
item.identifier.chop + fp + '.js'
|
||||
end
|
||||
|
||||
compile '/rss/' do
|
||||
filter :erb
|
||||
end
|
||||
|
|
@ -67,6 +83,7 @@ compile '*' do
|
|||
end
|
||||
|
||||
if %w(html haml md).include?(item[:extension])
|
||||
layout 'page'
|
||||
layout 'default'
|
||||
filter :cache_buster
|
||||
end
|
||||
|
|
@ -86,15 +103,6 @@ route %r{^/(assets/.*|sitemap|robots|atom)/$} do
|
|||
item.identifier.chop + fp + '.' + ext
|
||||
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
|
||||
'/rss.xml'
|
||||
|
|
|
|||
|
|
@ -1,86 +1,71 @@
|
|||
---
|
||||
title: About Ariejan
|
||||
---
|
||||
.content_wrap.nobg
|
||||
%section#middle_content
|
||||
.one_half
|
||||
%img.gravatar(width="120" height="120" src="//www.gravatar.com/avatar/a9bfdd0cc75c857b669c37548b8bfdf9?s=240")
|
||||
.row
|
||||
.large-8.columns
|
||||
:markdown
|
||||
## Hi, I'm Ariejan de Vroom
|
||||
|
||||
:markdown
|
||||
### Hi, I'm Ariejan de Vroom
|
||||
Hi! I'm Ariejan de Vroom, a thirty-two year old Ruby on Rails developer and Software
|
||||
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
|
||||
Craftsman. I live in [Breugel, the Netherlands][1] with my fiancée [Laura][2]
|
||||
and work full-time at [Kabisa ICT][3].
|
||||
I started programming in the mid-nineties with [GW-BASIC][9] and [QBasic][10]. Soon
|
||||
thereafter I discovered [Turbo Pascal][11] and then made the jump to [Delphi][12].
|
||||
|
||||
I started programming in the mid-nineties with [GW-BASIC][9] and [QBasic][10]. Soon
|
||||
thereafter I discovered [Turbo Pascal][11] and then made the jump to [Delphi][12].
|
||||
At this point I started playing with lots of different languages and platforms. Then,
|
||||
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,
|
||||
almost naturally I made the switch to the web and started developing in [PHP][13].
|
||||
Not satisfied with the often messy code from the PHP community I discovered [Ruby on Rails][14]
|
||||
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]
|
||||
somewhere in 2005. I've been writing Ruby ever since.
|
||||
### Find out more about me
|
||||
|
||||
#### 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]
|
||||
or [send an email directly][8].
|
||||
[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
|
||||
[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
|
||||
[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
|
||||
.large-4.columns
|
||||
.avatar
|
||||
|
||||
.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
|
||||
%li#foli1.notranslate
|
||||
%label.desc#title1(for="Field1")
|
||||
Message
|
||||
%span#req_1.req *
|
||||
%div
|
||||
%textarea#Field1.field.textarea.medium(name="Field1" spellcheck="true" rows="10" cols="50" tabindex="1" onkeyup="" required)
|
||||
%ul
|
||||
%li
|
||||
%div
|
||||
%textarea.field.textarea.medium(name="Field1" spellcheck="true" rows="10" cols="50" tabindex="1" placeholder="How can I be of help?" 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
|
||||
%label.desc#title4(for="Field4")
|
||||
Your name
|
||||
%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
|
||||
%div
|
||||
%input(id="Field2" name="Field2" type="email" spellcheck="false" class="field text large" value="" maxlength="255" tabindex="3" required placeholder="Your email address")
|
||||
|
||||
%li#foli2.notranslate
|
||||
%label.desc#title2(for="Field2")
|
||||
Email Address
|
||||
%span#req_2.req *
|
||||
%div
|
||||
%input(id="Field2" name="Field2" type="email" spellcheck="false" class="field text large" value="" maxlength="255" tabindex="3" required)
|
||||
%li.buttons
|
||||
%div
|
||||
%a.button(href="javascript:{}" onclick="document.getElementById('form1').submit();")
|
||||
%span Send message
|
||||
|
||||
%p.instruct#instruct2
|
||||
%small We won't share this with strangers.
|
||||
|
||||
%li.buttons
|
||||
%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=")
|
||||
%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
|
||||
---
|
||||
.content_wrap.nobg
|
||||
%section#middle_content
|
||||
.row
|
||||
.large-8.push-2.columns
|
||||
: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.
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -58,4 +58,4 @@
|
|||
.vc { color: #008080 } /* Name.Variable.Class */
|
||||
.vg { color: #008080 } /* Name.Variable.Global */
|
||||
.vi { color: #008080 } /* Name.Variable.Instance */
|
||||
.il { color: #009999 } /* Literal.Number.Integer.Long */
|
||||
.il { color: #009999 } /* Literal.Number.Integer.Long */
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
534
content/css/font-awesome/font-awesome.scss
vendored
Normal file
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
BIN
content/fonts/slkscr-webfont-eot.eot
Executable file
Binary file not shown.
130
content/fonts/slkscr-webfont-svg.svg
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-ttf.ttf
Executable file
Binary file not shown.
BIN
content/fonts/slkscr-webfont-woff.woff
Executable file
BIN
content/fonts/slkscr-webfont-woff.woff
Executable file
Binary file not shown.
BIN
content/img/appstore-badge.png
Normal file
BIN
content/img/appstore-badge.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
BIN
content/img/appstore-badge@2x.png
Normal file
BIN
content/img/appstore-badge@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.0 KiB |
BIN
content/img/closelabel.png
Normal file
BIN
content/img/closelabel.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 168 B |
BIN
content/img/hero.png
Normal file
BIN
content/img/hero.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
content/img/hero@2x.png
Normal file
BIN
content/img/hero@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
content/img/loading.gif
Executable file
BIN
content/img/loading.gif
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
BIN
content/img/logo-alpha.png
Normal file
BIN
content/img/logo-alpha.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
content/img/logo-alpha@2x.png
Normal file
BIN
content/img/logo-alpha@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
BIN
content/img/logo.png
Normal file
BIN
content/img/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
BIN
content/img/logo@2x.png
Normal file
BIN
content/img/logo@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
BIN
content/img/screenshot-binary-deep.png
Normal file
BIN
content/img/screenshot-binary-deep.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 284 KiB |
BIN
content/img/screenshot-binary-deep@2x.png
Normal file
BIN
content/img/screenshot-binary-deep@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 284 KiB |
|
|
@ -1,14 +1,14 @@
|
|||
---
|
||||
title: Ariejan's Blog
|
||||
---
|
||||
.content_wrap.nobg
|
||||
%section#middle_content
|
||||
|
||||
#posts
|
||||
.row
|
||||
.large-8.push-2.columns
|
||||
%section#posts
|
||||
- articles_by_year(sorted_articles).each do |year, articles|
|
||||
%ol.posts
|
||||
- articles.each do |article|
|
||||
%li
|
||||
%span.date= get_short_date(article)
|
||||
–
|
||||
= link_to article[:title], article.path, title: article[:title]
|
||||
%h2.year= year
|
||||
- articles.each do |article|
|
||||
.post-listing
|
||||
%h3.title= link_to article[:title], article.path, title: article[:title]
|
||||
.summary
|
||||
%p Written by <strong>Ariejan de Vroom</strong> on #{get_pretty_date(article)}.
|
||||
= article[:summary]
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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}});
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
|
@ -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
15
content/js/foundation.js
vendored
Normal file
File diff suppressed because one or more lines are too long
6
content/js/jquery.js
vendored
Normal file
6
content/js/jquery.js
vendored
Normal file
File diff suppressed because one or more lines are too long
2
content/js/main.coffee
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
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
|
||||
- github
|
||||
- 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.
|
||||
|
||||
|
|
@ -39,4 +42,4 @@ After reviewing the commits in your feature branch with `gpr`, use [`hub`][hub]
|
|||
:::bash
|
||||
hub pull-request -i 42 -h ariejan:feature-branch -b you:develop
|
||||
|
||||
[hub]: http://defunkt.io/hub/
|
||||
[hub]: http://defunkt.io/hub/
|
||||
|
|
|
|||
|
|
@ -7,6 +7,9 @@ tags:
|
|||
- automation
|
||||
- jenkins
|
||||
- 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.
|
||||
|
||||
|
|
@ -53,4 +56,4 @@ This allows me to quickly edit a file, commit it and Gitlab en Jenkins will make
|
|||
|
||||
## Where to go from here
|
||||
|
||||
For now, this setup suffices for me. I keep all my posts in version control, and backupped to S3 (by backing up my gitlab repositories). Adding a new story to git is sufficient for it to be published automatically on _ariejan.net_ and in the event something goes wrong with compilation, Jenkins will notify me of the build failure.
|
||||
For now, this setup suffices for me. I keep all my posts in version control, and backupped to S3 (by backing up my gitlab repositories). Adding a new story to git is sufficient for it to be published automatically on _ariejan.net_ and in the event something goes wrong with compilation, Jenkins will notify me of the build failure.
|
||||
|
|
|
|||
|
|
@ -6,6 +6,9 @@ tags:
|
|||
- why
|
||||
- leadership
|
||||
- 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:
|
||||
|
|
@ -34,4 +37,4 @@ Here you start with me agreeing on spending time together and it becomes easier
|
|||
|
||||
You start with the _why_ and then continue to the _what_.
|
||||
|
||||
In addition to this article, please watch [Simon Sinek's TED Talk](http://www.ted.com/talks/simon_sinek_how_great_leaders_inspire_action.html) [18m05] How great leaders inspire action.
|
||||
In addition to this article, please watch [Simon Sinek's TED Talk](http://www.ted.com/talks/simon_sinek_how_great_leaders_inspire_action.html) [18m05] How great leaders inspire action.
|
||||
|
|
|
|||
|
|
@ -5,6 +5,9 @@ created_at: 2013-05-21
|
|||
tags:
|
||||
- productivity
|
||||
- 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.
|
||||
|
|
|
|||
|
|
@ -5,6 +5,9 @@ created_at: 2013-05-23
|
|||
tags:
|
||||
- productivity
|
||||
- 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
|
||||
|
|
|
|||
|
|
@ -1,75 +1,75 @@
|
|||
---
|
||||
title: Projects
|
||||
---
|
||||
.content_wrap.nobg
|
||||
%section#middle_content
|
||||
.two_third
|
||||
:markdown
|
||||
### Open Source Projects
|
||||
.row
|
||||
.large-6.columns
|
||||
:markdown
|
||||
### Open Source Projects
|
||||
|
||||
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
|
||||
they became obsolete and were superseded by other alternatives.
|
||||
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
|
||||
they became obsolete and were superseded by other alternatives.
|
||||
|
||||
#### Focal
|
||||
#### Focal
|
||||
|
||||
Focal is a utility web application that creates sexy and informative burndowns
|
||||
for you and your team.
|
||||
Focal is a utility web application that creates sexy and informative burndowns
|
||||
for you and your team.
|
||||
|
||||
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
|
||||
progress information.
|
||||
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
|
||||
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
|
||||
officially expose an API you are able to look at what's on their public pages.
|
||||
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.
|
||||
|
||||
* [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
|
||||
thing around.
|
||||
At the height of 140 character limited tweets, URL shortners where the hippest
|
||||
thing around.
|
||||
|
||||
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.
|
||||
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.
|
||||
|
||||
* [Website](http://fireflyrb.com)
|
||||
* [Github](https://github.com/ariejan/firefly)
|
||||
* [Website](http://fireflyrb.com)
|
||||
* [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
|
||||
social security numbers.
|
||||
The 11-check is a checksum algorithm used to validate Dutch bank account numbers and
|
||||
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
|
||||
:markdown
|
||||
### Open Source contributions
|
||||
.large-6.columns
|
||||
:markdown
|
||||
### Open Source contributions
|
||||
|
||||
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.
|
||||
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.
|
||||
|
||||
* Rails
|
||||
* Gitlab
|
||||
* rails-i18n
|
||||
* elfproef
|
||||
* rubber
|
||||
* capistrano-resque
|
||||
* Rails
|
||||
* Gitlab
|
||||
* rails-i18n
|
||||
* elfproef
|
||||
* opensourcerails
|
||||
* rubber
|
||||
* capistrano-resque
|
||||
|
||||
Check out my [github profile page](https://github.com/ariejan) for other projects
|
||||
and specifics.
|
||||
Check out my [github profile page](https://github.com/ariejan) for other projects
|
||||
and specifics.
|
||||
|
|
|
|||
|
|
@ -1,36 +1,36 @@
|
|||
---
|
||||
title: Talks by Ariejan
|
||||
---
|
||||
.content_wrap.nobg
|
||||
%section#middle_content
|
||||
.row
|
||||
.large-8.push-2.columns
|
||||
:markdown
|
||||
# Talks
|
||||
|
||||
*I'm available for talks and presentations on software craftsmanship for
|
||||
your company or event! If you are interested in having me, please
|
||||
[contact me](/about) to discus details.*
|
||||
|
||||
My talks are about software craftsmanship, Ruby on Rails or any other
|
||||
subject that's relevant at the time.
|
||||
I love giving talks to motivate and inspire others. My talks can be in-depth
|
||||
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.
|
||||
|
||||
.one_third.talk
|
||||
:plain
|
||||
<script async class="speakerdeck-embed" data-slide="16" data-id="4fcf866a4aab160369000dd1" data-ratio="1.77777777777778" src="//speakerdeck.com/assets/embed.js"></script>
|
||||
.caption
|
||||
Software Craftsmanship,
|
||||
%br
|
||||
june 2012
|
||||
.row
|
||||
.large-6.columns
|
||||
%h4
|
||||
Software Craftsmanship
|
||||
%p
|
||||
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
|
||||
:plain
|
||||
<script async class="speakerdeck-embed" data-id="4f7da2d94156d9001f032da4" data-ratio="1.77777777777778" src="//speakerdeck.com/assets/embed.js"></script>
|
||||
.caption
|
||||
Introducting Gitlab, Lighting Talk,
|
||||
%br
|
||||
april 2012
|
||||
|
||||
.one_third.talk.last
|
||||
= " "
|
||||
.large-6.columns
|
||||
%h4
|
||||
Introducting Gitlab
|
||||
%p
|
||||
Lighting Talk, april 2012
|
||||
:plain
|
||||
<script async class="speakerdeck-embed" data-id="4f7da2d94156d9001f032da4" data-ratio="1.77777777777778" src="//speakerdeck.com/assets/embed.js"></script>
|
||||
|
|
|
|||
|
|
@ -1,87 +1,52 @@
|
|||
!!!
|
||||
/[if lt IE 7] <html dir="ltr" lang="en-US" class="ie6">
|
||||
/[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]
|
||||
!!! 5
|
||||
%html(lang="en" dir="ltr" prefix="og: http://ogp.me/ns#")
|
||||
%head
|
||||
%meta{:charset => 'utf-8'}
|
||||
%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{:content => "software engineering, programming, craftsmanship, devops, ruby, rubyonrails, rails, git, svn, postgres, postgresql, mysql, mac, ios, apple, web2.0, go, golang", :name => "keywords"}
|
||||
%meta{:content => "width=device-width, initial-scale=1, maximum-scale=1", :name => "viewport"}
|
||||
%meta{:content => "3bgidck6YUMyx-kvL_a8E4ry0DJOAIOYaZkZxQ0kZw4", :name => "google-site-verification"}
|
||||
%meta(charset="UTF-8")
|
||||
%meta(content="text/html;charset=utf-8" http-equiv="content-type")
|
||||
%meta(http-equiv="X-UA-Compatible" content="IE=edge")
|
||||
%meta(name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no")
|
||||
%meta(name="author" content="Ariejan de Vroom")
|
||||
|
||||
%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://ariejan.myopenid.com/' rel='openid.delegate')
|
||||
|
||||
%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 => "/css/style.css", :media => "screen", :rel => "stylesheet", :type => "text/css"}
|
||||
%link(href="/images/favicon.ico" rel="shortcut icon" type="image/x-icon")
|
||||
%link(href="http://ariejan.net/rss.xml" rel="alternate" type="application/rss+xml" title="RSS")
|
||||
|
||||
%link{:href => "https://fonts.googleapis.com/css?family=Open+Sans:400,600,800,400italic", :rel => "stylesheet", :type => "text/css"}
|
||||
|
||||
/[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"}
|
||||
%link(href="/css/screen.css" rel="stylesheet" type="text/css" media="screen")
|
||||
|
||||
%title= "#{@item[:title]} — ariejan.net"
|
||||
|
||||
%body
|
||||
/ __________________________________________________ Start Page
|
||||
%section#page
|
||||
%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'
|
||||
%header#title
|
||||
%h1 ariejan.net
|
||||
|
||||
.nav_wrap
|
||||
.nav_wrap_inner
|
||||
.responsibe_block
|
||||
.responsibe_block_inner
|
||||
%a.resp_navigation{:href => "#"}
|
||||
= render 'social_list'
|
||||
%nav#primary
|
||||
%ol.interal
|
||||
%li= link_to "Home", "/"
|
||||
%li= link_to "Projects", "/projects/"
|
||||
%li= link_to "Craftsmanship", "/craftsmanship/"
|
||||
%li= link_to "Talks", "/talks/"
|
||||
%li= link_to "About", "/about/"
|
||||
|
||||
= render "navigation"
|
||||
.cl
|
||||
/ __________________________________________________ Finish Header
|
||||
/ __________________________________________________ Start Middle
|
||||
%section#middle
|
||||
.headline
|
||||
.three_fourth
|
||||
%h2= @item[:title]
|
||||
#wrapper
|
||||
= yield
|
||||
|
||||
.one_fourth.last
|
||||
.search-box
|
||||
%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
|
||||
%footer
|
||||
.copyright
|
||||
%p
|
||||
Copyright © 1999 - #{Time.now.year} Ariejan de Vroom
|
||||
|
||||
%ul.tla
|
||||
: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>
|
||||
|
||||
/ __________________________________________________ Finish Footer
|
||||
%script{:src => "/js/plugins.js", :type => "text/javascript"}
|
||||
:javascript
|
||||
var _gaq = _gaq || [];
|
||||
|
|
|
|||
4
layouts/page.haml
Normal file
4
layouts/page.haml
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
%section.page
|
||||
#content
|
||||
%article.page
|
||||
= yield
|
||||
|
|
@ -1,39 +1,37 @@
|
|||
.content_wrap
|
||||
.post
|
||||
%section#content
|
||||
%article
|
||||
%section.post
|
||||
%section#main
|
||||
#content
|
||||
%article.post
|
||||
%h1= item[:title]
|
||||
|
||||
%p.meta
|
||||
Written by <strong>Ariejan de Vroom</strong> on #{get_pretty_date(item)}.
|
||||
|
||||
= yield
|
||||
|
||||
#disqus_thread
|
||||
%section#comments
|
||||
#disqus_thread
|
||||
|
||||
%section#sidebar
|
||||
.fixed
|
||||
%aside.widget.widget_influads
|
||||
#influad
|
||||
- if ENV['NANOC_ENV'] == "development"
|
||||
.influads_block
|
||||
.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>
|
||||
:javascript
|
||||
var disqus_url = "#{url_for(item)}";
|
||||
(function() {
|
||||
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
|
||||
dsq.src = 'http://ariejannet.disqus.com/embed.js';
|
||||
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
|
||||
})();
|
||||
|
||||
%aside.widget.widget_metadata
|
||||
%h3.widgettitle About this post
|
||||
%p
|
||||
This post was written by <em>Ariejan de Vroom</em> on
|
||||
<em>#{get_pretty_date(item)}</em> and
|
||||
tagged with <em>#{get_tags(item)}</em>.
|
||||
|
||||
:javascript
|
||||
var disqus_url = "#{url_for(item)}";
|
||||
(function() {
|
||||
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
|
||||
dsq.src = 'http://ariejannet.disqus.com/embed.js';
|
||||
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
|
||||
})();
|
||||
%section#sidebar
|
||||
%aside.influads
|
||||
#influad
|
||||
- if ENV['NANOC_ENV'] == "development"
|
||||
.influads_block
|
||||
.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>
|
||||
|
|
|
|||
|
|
@ -8,12 +8,26 @@ module PostHelper
|
|||
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)
|
||||
attribute_to_time(post[:created_at]).strftime('%Y-%m-%d')
|
||||
end
|
||||
|
||||
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
|
||||
|
||||
def get_tags(post)
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user