mirror of
https://github.com/inspec/inspec
synced 2025-02-17 06:28:40 +00:00
Cross-browser support for Moz, safari, google
To do: Media Queries Highlight state when on page
This commit is contained in:
Hannah Maddy
Christoph Hartmann
parent
7fff31a5f4
commit
d8590b6d9c
26 changed files with 852 additions and 585 deletions
|
|
@ -7,7 +7,7 @@ sidebar_links:
|
|||
- title: Get InSpec
|
||||
link: "https://downloads.chef.io/inspec"
|
||||
- title: Tutorials
|
||||
link: "/docs/tutorials.html"
|
||||
link: "/tutorials"
|
||||
- title: InSpec and friends
|
||||
link: "/docs/reference/inspec_and_friends.html"
|
||||
- title: Reference
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ module SidebarHelpers
|
|||
end
|
||||
|
||||
def link_classes(current_url, item_link)
|
||||
'is-active' if same_link?(current_url, item_link.link)
|
||||
't-purple' if same_link?(current_url, item_link.link)
|
||||
end
|
||||
|
||||
def print_sub_links?(current_url, item_link)
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ description: This is where you interact with the InSpec open source community -
|
|||
.section.purp-shade
|
||||
#particles-second
|
||||
canvas.particles-js-canvas-el
|
||||
.row
|
||||
.row.relative-top
|
||||
.large-6.medium-6.strict-center.column.margin-top-xl.margin-under
|
||||
.box-white.shadow
|
||||
img.icon-art src="/images/community/contribute.svg" /
|
||||
|
|
|
|||
|
|
@ -1,23 +1,63 @@
|
|||
h1 InSpec Documentation
|
||||
|
||||
p Welcome to the InSpec documentation! This is a reference guide for all available features and options.
|
||||
|
||||
p In the navigation, you will see 2 sections. The first provides a few links to get started and context around InSpec. The second section contains references to all elements of InSpec: The DSL, CLI, profiles, resources, and matchers.
|
||||
/! animated banner
|
||||
header.child-h.blue-gradient
|
||||
#particles-second
|
||||
canvas.particles-js-canvas-el /
|
||||
.purp-shade
|
||||
.row.relative-top.searchbar
|
||||
column.columns.large-11.medium-11
|
||||
form.main-sidebar--search action="/docs/search/" method="get"
|
||||
input type="text" placeholder="Search Documentation" name="q"
|
||||
column.columns.large-1.medium-1
|
||||
.search.shadow
|
||||
img src="/images/community/search.svg" /
|
||||
|
||||
h2 Are you new to InSpec?
|
||||
.row.margin-both
|
||||
|
||||
p If you're just getting started and want a quick introduction, then we recommend you start with the following items in the order listed.
|
||||
column.columns.large-3.medium-3#sidebar
|
||||
- if locals[:sidebar_layout] == 'docs'
|
||||
ul.main-sidebar--links
|
||||
- sidebar_data(sidebar_layout).each do |item|
|
||||
li.main-sidebar--link
|
||||
small = item.title
|
||||
ul.main-sidebar--list.no-bullet
|
||||
- item.links.each do |item_link|
|
||||
li.main-sidebar--list--item class=link_classes(current_resource.url, item_link)
|
||||
= link_to item_link.title, item_link.link
|
||||
- if print_sub_links?(current_resource.url, item_link)
|
||||
ul.main-sidebar--list--item--dropdown.no-bullet
|
||||
- item_link.sub_links.each do |sub_link|
|
||||
li.main-sidebar--list--item class=link_classes(current_resource.url, sub_link)
|
||||
= link_to sub_link.title, sub_link.link
|
||||
|
||||
.row
|
||||
.columns.medium-6.center
|
||||
a.button.try-demo href="#" Try InSpec demo
|
||||
p Complete a short interactive demo
|
||||
.columns.medium-6.center
|
||||
a.button.try-demo href="tutorials" Tutorials
|
||||
p Get your first hands-on experience
|
||||
column.columns.large-9.medium-9
|
||||
|
||||
h2 Contributing
|
||||
h2.margin-under-xs InSpec Documentation
|
||||
|
||||
p This documentation is automatically generated from the InSpec repository and source code.
|
||||
p Welcome to the InSpec documentation! This is a reference guide for all available features and options.
|
||||
|
||||
p To contribute, please have a look at the <a href="https://github.com/chef/inspec/tree/master/docs">docs</a> folder of the project.
|
||||
p In the navigation, you will see 2 sections. The first provides a few links to get started and context around InSpec. The second section contains references to all elements of InSpec: The DSL, CLI, profiles, resources, and matchers.
|
||||
|
||||
h3.margin-top-xs Are you new to InSpec?
|
||||
|
||||
hr.strict-left
|
||||
br
|
||||
|
||||
p If you're just getting started and want a quick introduction, then we recommend you start with the following items in the order listed.
|
||||
|
||||
.row
|
||||
.columns.medium-6
|
||||
.box-white-brdr.strict-center
|
||||
p Complete a short interactive demo
|
||||
a.btn.try-demo href="#" Try the Demo
|
||||
.columns.medium-6
|
||||
.box-white-brdr.strict-center
|
||||
p Get your first hands-on experience
|
||||
a.btn href="tutorials" Tutorials
|
||||
|
||||
h3.margin-top-xs Contributing
|
||||
hr.strict-left
|
||||
br
|
||||
p.clear This documentation is automatically generated from the InSpec repository and source code.
|
||||
p To contribute, please have a look at the <a href="https://github.com/chef/inspec/tree/master/docs">docs</a> folder of the project.
|
||||
|
|
|
|||
|
|
@ -2,18 +2,19 @@
|
|||
title: Search InSpec Docs
|
||||
---
|
||||
|
||||
h2 Search the InSpec Documentation
|
||||
.row.margin-both-offset
|
||||
h2.margin-under-xs- Search the InSpec Documentation
|
||||
|
||||
javascript:
|
||||
// TODO: add the inspec search here
|
||||
(function() {
|
||||
var cx = '014746884379529974319:rvxyzhpu2us';
|
||||
var gcse = document.createElement('script');
|
||||
gcse.type = 'text/javascript';
|
||||
gcse.async = true;
|
||||
gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
|
||||
var s = document.getElementsByTagName('script')[0];
|
||||
s.parentNode.insertBefore(gcse, s);
|
||||
})();
|
||||
javascript:
|
||||
// TODO: add the inspec search here
|
||||
(function() {
|
||||
var cx = '014746884379529974319:rvxyzhpu2us';
|
||||
var gcse = document.createElement('script');
|
||||
gcse.type = 'text/javascript';
|
||||
gcse.async = true;
|
||||
gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
|
||||
var s = document.getElementsByTagName('script')[0];
|
||||
s.parentNode.insertBefore(gcse, s);
|
||||
})();
|
||||
|
||||
<gcse:search webSearchResultSetSize="20"></gcse:search>
|
||||
<gcse:search webSearchResultSetSize="20"></gcse:search>
|
||||
|
|
|
|||
1
www/source/images/community/search.svg
Normal file
1
www/source/images/community/search.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 29.6 30"><defs><style>.cls-1{fill:url(#linear-gradient);}</style><linearGradient id="linear-gradient" x1="14.8" x2="14.8" y2="30" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#955af2"/><stop offset="0.2" stop-color="#8966ed"/><stop offset="0.57" stop-color="#6886e0"/><stop offset="1" stop-color="#3ab3ce"/></linearGradient></defs><title>search</title><g id="Layer_2" data-name="Layer 2"><g id="polys"><path class="cls-1" d="M29.6,28l-2.25,2c-2.49-2.5-5.11-5-7.62-7.68a1.78,1.78,0,0,0-2.64-.42A11.53,11.53,0,0,1,.95,16.22,11.65,11.65,0,1,1,23,8.84,11.48,11.48,0,0,1,20.6,19.12ZM11.7,1.38A10.17,10.17,0,0,0,1.35,11.58,10.24,10.24,0,0,0,11.68,22a10.17,10.17,0,0,0,10.25-10.3A10.11,10.11,0,0,0,11.7,1.38Z"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 829 B |
|
|
@ -9,19 +9,21 @@ header.blue-gradient
|
|||
img.grid-animate.strict-center style="opacity:0.8" src="/images/home/web.svg" /
|
||||
/! diamond image
|
||||
img.strict-center.bright-animate.3d-animate data-enllax-ratio=".3" data-enllax-type="foreground" src="/images/home/diamond.png" /
|
||||
/! Blue gradient and canvas elements
|
||||
/! style for callout icons
|
||||
/! canvas elements
|
||||
#particles-js
|
||||
canvas.particles-js-canvas-el /
|
||||
/! style for callout icons
|
||||
.row
|
||||
.icon.shadow
|
||||
img src="/images/circ-arrow.svg" /
|
||||
|
||||
/! Second Content
|
||||
.row.margin-both
|
||||
.large-8.columns data-enllax-direction="horizontal" data-enllax-ratio=".1" data-enllax-type="foreground"
|
||||
.large-8.medium-8.columns data-enllax-direction="horizontal" data-enllax-ratio=".1" data-enllax-type="foreground"
|
||||
h2 Automated testing, codified
|
||||
h4#icon-trigger
|
||||
| InSpec is an open-source testing framework for infrastructure with a human-readable language for specifying compliance, security and other policy requirements. Easily integrate automated tests that check for adherence to policy into any stage of your deployment pipeline.
|
||||
|
||||
/! Third Content
|
||||
#icon-trigger.row.strict-center.margin-under-xs
|
||||
.large-12.columns
|
||||
|
|
@ -51,6 +53,7 @@ header.blue-gradient
|
|||
h3 Extensible language
|
||||
p
|
||||
| Easily extend the InSpec language to cover new operating systems, devices, or applications.
|
||||
|
||||
/! Fourth Content
|
||||
/! style for callout icons
|
||||
.row
|
||||
|
|
@ -58,7 +61,7 @@ header.blue-gradient
|
|||
img src="/images/circ-arrow.svg" /
|
||||
.block-angl.blue-gradient
|
||||
.section.purp-shade
|
||||
.row.triangle-shade
|
||||
.row.relative-top
|
||||
.large-7.medium-7.columns.margin-top-xl.margin-under-xs data-enllax-ratio=".1" data-enllax-type="foreground"
|
||||
small.t-dk Inspec for compliance
|
||||
h2.t-white
|
||||
|
|
@ -83,7 +86,7 @@ header.blue-gradient
|
|||
p.t-white
|
||||
| Combine profiles and customize them with overlays. Pick controls and define exceptions as code.
|
||||
/! code
|
||||
.large-6.medium-6.columns.code-example.shadow
|
||||
.large-6.medium-6.columns.code-example.shadow.relative-top
|
||||
code.code-demo
|
||||
span.code-attribute control
|
||||
| 'sshd-21'
|
||||
|
|
@ -140,9 +143,9 @@ header.blue-gradient
|
|||
p.t-white
|
||||
| Easily create custom resources and share them.
|
||||
/! code
|
||||
.large-6.medium-6.columns.code-example.shadow
|
||||
.large-6.medium-6.columns.code-example.shadow.relative-top
|
||||
code.code-demo
|
||||
span.code-attribute describe
|
||||
span.code-attribute describe
|
||||
| file('/etc/myap.conf')
|
||||
span.code-attribute do
|
||||
br/
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
//= require vendor/jquery.min
|
||||
//= require vendor/foundation.min
|
||||
//= require nav
|
||||
//= require jquery.enllax.min
|
||||
//= require jquery.sticky
|
||||
//= require nav
|
||||
//= require particles
|
||||
//= require app
|
||||
//= require slackform
|
||||
|
|
|
|||
|
|
@ -185,7 +185,7 @@ particlesJS('particles-js',
|
|||
"enable": false,
|
||||
"distance": 150,
|
||||
"color": "#ffffff",
|
||||
"opacity": 0.4,
|
||||
"opacity": 0.3,
|
||||
"width": 1
|
||||
},
|
||||
"move": {
|
||||
|
|
|
|||
9
www/source/javascripts/jquery.sticky.js
Executable file
9
www/source/javascripts/jquery.sticky.js
Executable file
|
|
@ -0,0 +1,9 @@
|
|||
/*
|
||||
Sticky-kit v1.1.2 | WTFPL | Leaf Corcoran 2015 | http://leafo.net
|
||||
*/
|
||||
(function(){var b,f;b=this.jQuery||window.jQuery;f=b(window);b.fn.stick_in_parent=function(d){var A,w,J,n,B,K,p,q,k,E,t;null==d&&(d={});t=d.sticky_class;B=d.inner_scrolling;E=d.recalc_every;k=d.parent;q=d.offset_top;p=d.spacer;w=d.bottoming;null==q&&(q=0);null==k&&(k=void 0);null==B&&(B=!0);null==t&&(t="is_stuck");A=b(document);null==w&&(w=!0);J=function(a,d,n,C,F,u,r,G){var v,H,m,D,I,c,g,x,y,z,h,l;if(!a.data("sticky_kit")){a.data("sticky_kit",!0);I=A.height();g=a.parent();null!=k&&(g=g.closest(k));
|
||||
if(!g.length)throw"failed to find stick parent";v=m=!1;(h=null!=p?p&&a.closest(p):b("<div />"))&&h.css("position",a.css("position"));x=function(){var c,f,e;if(!G&&(I=A.height(),c=parseInt(g.css("border-top-width"),10),f=parseInt(g.css("padding-top"),10),d=parseInt(g.css("padding-bottom"),10),n=g.offset().top+c+f,C=g.height(),m&&(v=m=!1,null==p&&(a.insertAfter(h),h.detach()),a.css({position:"",top:"",width:"",bottom:""}).removeClass(t),e=!0),F=a.offset().top-(parseInt(a.css("margin-top"),100)||0)-q,
|
||||
u=a.outerHeight(!0),r=a.css("float"),h&&h.css({width:a.outerWidth(!0),height:u,display:a.css("display"),"vertical-align":a.css("vertical-align"),"float":r}),e))return l()};x();if(u!==C)return D=void 0,c=q,z=E,l=function(){var b,l,e,k;if(!G&&(e=!1,null!=z&&(--z,0>=z&&(z=E,x(),e=!0)),e||A.height()===I||x(),e=f.scrollTop(),null!=D&&(l=e-D),D=e,m?(w&&(k=e+u+c>C+n,v&&!k&&(v=!1,a.css({position:"fixed",bottom:"",top:c}).trigger("sticky_kit:unbottom"))),e<F&&(m=!1,c=q,null==p&&("left"!==r&&"right"!==r||a.insertAfter(h),
|
||||
h.detach()),b={position:"",width:"",top:""},a.css(b).removeClass(t).trigger("sticky_kit:unstick")),B&&(b=f.height(),u+q>b&&!v&&(c-=l,c=Math.max(b-u,c),c=Math.min(q,c),m&&a.css({top:c+"100px"})))):e>F&&(m=!0,b={position:"fixed",top:c},b.width="border-box"===a.css("box-sizing")?a.outerWidth()+"px":a.width()+"px",a.css(b).addClass(t),null==p&&(a.after(h),"left"!==r&&"right"!==r||h.append(a)),a.trigger("sticky_kit:stick")),m&&w&&(null==k&&(k=e+u+c>C+n),!v&&k)))return v=!0,"static"===g.css("position")&&g.css({position:"relative"}),
|
||||
a.css({position:"absolute",bottom:d,top:"auto"}).trigger("sticky_kit:bottom")},y=function(){x();return l()},H=function(){G=!0;f.off("touchmove",l);f.off("scroll",l);f.off("resize",y);b(document.body).off("sticky_kit:recalc",y);a.off("sticky_kit:detach",H);a.removeData("sticky_kit");a.css({position:"",bottom:"",top:"",width:""});g.position("position","");if(m)return null==p&&("left"!==r&&"right"!==r||a.insertAfter(h),h.remove()),a.removeClass(t)},f.on("touchmove",l),f.on("scroll",l),f.on("resize",
|
||||
y),b(document.body).on("sticky_kit:recalc",y),a.on("sticky_kit:detach",H),setTimeout(l,0)}};n=0;for(K=this.length;n<K;n++)d=this[n],J(b(d));return this}}).call(this);
|
||||
|
|
@ -37,39 +37,42 @@ $(window).scroll(function() {
|
|||
toggleFixedNavPosition();
|
||||
});
|
||||
|
||||
//
|
||||
|
||||
|
||||
// handle nav when global message exists
|
||||
// gm_session_id is set on at template level
|
||||
var globalMessageHeight;
|
||||
const $globalMessage = $("#global-message");
|
||||
//var globalMessageHeight;
|
||||
//const $globalMessage = $("#global-message");
|
||||
|
||||
function adjustNavPosition() {
|
||||
globalMessageHeight = $globalMessage.outerHeight();
|
||||
//function adjustNavPosition() {
|
||||
// globalMessageHeight = $globalMessage.outerHeight();
|
||||
|
||||
if ($globalMessage.is(":visible")) {
|
||||
$mainNav.css('top', globalMessageHeight);
|
||||
$mainNavCtas.css('top', globalMessageHeight);
|
||||
$mainContent.css('margin-top', globalMessageHeight + 100);
|
||||
}
|
||||
}
|
||||
// if ($globalMessage.is(":visible")) {
|
||||
// $mainNav.css('top', globalMessageHeight);
|
||||
// $mainNavCtas.css('top', globalMessageHeight);
|
||||
// $mainContent.css('margin-top', globalMessageHeight + 100);
|
||||
// }
|
||||
//}
|
||||
|
||||
if(!localStorage.getItem(gm_session_id)) {
|
||||
$globalMessage.addClass('is-visible');
|
||||
adjustNavPosition();
|
||||
}
|
||||
//if(!localStorage.getItem(gm_session_id)) {
|
||||
// $globalMessage.addClass('is-visible');
|
||||
// adjustNavPosition();
|
||||
//}
|
||||
|
||||
$(document).ready(function() {
|
||||
$("#global-message .dismiss-button").click(function(e) {
|
||||
$globalMessage.removeClass('is-visible')
|
||||
$mainNav.css('top', '');
|
||||
$mainNavCtas.css('top', '');
|
||||
$mainContent.css('margin-top', 100);
|
||||
localStorage.setItem(gm_session_id, "true");
|
||||
return false;
|
||||
});
|
||||
});
|
||||
//$(document).ready(function() {
|
||||
// $("#global-message .dismiss-button").click(function(e) {
|
||||
// $globalMessage.removeClass('is-visible')
|
||||
// $mainNav.css('top', '');
|
||||
// $mainNavCtas.css('top', '');
|
||||
// $mainContent.css('margin-top', 100);
|
||||
// localStorage.setItem(gm_session_id, "true");
|
||||
// return false;
|
||||
// });
|
||||
//});
|
||||
|
||||
$(window).resize(function() {
|
||||
if(!localStorage.getItem(gm_session_id)) {
|
||||
adjustNavPosition();
|
||||
}
|
||||
});
|
||||
//$(window).resize(function() {
|
||||
// if(!localStorage.getItem(gm_session_id)) {
|
||||
// adjustNavPosition();
|
||||
// }
|
||||
//});
|
||||
|
|
|
|||
|
|
@ -2,27 +2,6 @@ nav#main-nav class="sidebar-layout-#{locals[:sidebar_layout]}"
|
|||
|
||||
= partial "layouts/svg/nav-icon.svg"
|
||||
|
||||
ul.main-nav--links
|
||||
li.main-nav--link-ctas
|
||||
a.button href="/"
|
||||
span.main-nav--link-text Overview
|
||||
a href="/tutorials"
|
||||
span.main-nav--link-text Tutorials
|
||||
a href="/docs"
|
||||
span.main-nav--link-text Docs
|
||||
a href="/community"
|
||||
span.main-nav--link-text Community
|
||||
a href="https://downloads.chef.io/inspec"
|
||||
span.main-nav--link-text Downloads
|
||||
a href="https://github.com/chef/inspec"
|
||||
i.main-nav--link-icon.fa.fa-github
|
||||
span.main-nav--link-text Github Project
|
||||
a href="https://github.com/chef/inspec/blob/master/CONTRIBUTING.md"
|
||||
i.main-nav--link-icon.fa.fa-code-fork
|
||||
span.main-nav--link-text Contribute
|
||||
a.btn.try-demo href="#" Try the Demo
|
||||
a.btn href="https://downloads.chef.io/inspec" Download
|
||||
|
||||
- if locals[:sidebar_layout] == 'docs'
|
||||
li.main-nav--sidebar
|
||||
= partial "layouts/sidebar"
|
||||
|
|
|
|||
|
|
@ -1,16 +0,0 @@
|
|||
- if locals[:sidebar_layout] == 'docs'
|
||||
form.main-sidebar--search action="/docs/search/" method="get"
|
||||
input type="text" placeholder="Search Documentation" name="q"
|
||||
ul.main-sidebar--links
|
||||
- sidebar_data(sidebar_layout).each do |item|
|
||||
li.main-sidebar--link
|
||||
h6 = item.title
|
||||
ul.main-sidebar--list.no-bullet
|
||||
- item.links.each do |item_link|
|
||||
li.main-sidebar--list--item class=link_classes(current_resource.url, item_link)
|
||||
= link_to item_link.title, item_link.link
|
||||
- if print_sub_links?(current_resource.url, item_link)
|
||||
ul.main-sidebar--list--item--dropdown.no-bullet
|
||||
- item_link.sub_links.each do |sub_link|
|
||||
li.main-sidebar--list--item class=link_classes(current_resource.url, sub_link)
|
||||
= link_to sub_link.title, sub_link.link
|
||||
|
|
@ -35,6 +35,10 @@ html
|
|||
|
||||
== javascript_include_tag "all"
|
||||
|
||||
javascript:
|
||||
//initiate sticky sidebar
|
||||
$('#sidebar').stick_in_parent();
|
||||
|
||||
javascript:
|
||||
//Initiate parallax library
|
||||
$(window).enllax();
|
||||
|
|
@ -105,6 +109,30 @@ html
|
|||
}
|
||||
});
|
||||
|
||||
javascript:
|
||||
$(document).ready(function() {
|
||||
|
||||
var stickyNavTop = $('.stickhere').offset().top;
|
||||
|
||||
var stickyNav = function(){
|
||||
var scrollTop = $(window).scrollTop();
|
||||
|
||||
if (scrollTop > stickyNavTop)
|
||||
{
|
||||
$('.stickhere').addClass('sticky');
|
||||
}
|
||||
else
|
||||
{
|
||||
$('.stickhere').removeClass('sticky');
|
||||
}
|
||||
};
|
||||
|
||||
stickyNav();
|
||||
|
||||
$(window).scroll(function() {
|
||||
stickyNav();
|
||||
});
|
||||
});
|
||||
|
||||
javascript:
|
||||
$(document).foundation();
|
||||
|
|
|
|||
|
|
@ -1,53 +1,66 @@
|
|||
//Normal Links
|
||||
// Normal Links
|
||||
|
||||
a {
|
||||
font-family: $heading-font;
|
||||
color: $color_link;
|
||||
@extend %transition;
|
||||
@extend %transition;
|
||||
color : $color_link;
|
||||
font-family : $heading-font;
|
||||
}
|
||||
|
||||
//All CTA's
|
||||
// All CTA's
|
||||
|
||||
.btn {
|
||||
@extend %transition;
|
||||
background: transparent;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px;
|
||||
color: $color_purple;
|
||||
padding: 0.6rem 1.25rem;
|
||||
border-left: 1px solid $color_purple;
|
||||
border-right: 1px solid $color_link;
|
||||
box-sizing: border-box;
|
||||
background-position: 0 0, 0 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 1px;
|
||||
background-image: linear-gradient(to right, $color_purple 0, $color_link 100%), linear-gradient(to right, $color_purple 0, $color_link 100%);
|
||||
@extend %transition;
|
||||
box-sizing : border-box;
|
||||
padding : 0.6rem 1.25rem;
|
||||
color : $color_purple;
|
||||
border : 1px solid transparent;
|
||||
border-right : 1px solid $color_link;
|
||||
border-left : 1px solid $color_purple;
|
||||
border-radius : 4px;
|
||||
background : transparent;
|
||||
background-image : linear-gradient(
|
||||
to right,
|
||||
$color_purple 0,
|
||||
$color_link 100%
|
||||
),
|
||||
linear-gradient(
|
||||
to right,
|
||||
$color_purple 0,
|
||||
$color_link 100%
|
||||
);
|
||||
background-repeat : no-repeat;
|
||||
background-position : 0 0,
|
||||
0 100%;
|
||||
background-size : 100% 1px;
|
||||
|
||||
&:hover {
|
||||
background-color: $color_purple;
|
||||
color: $color_white;
|
||||
border-color: $color_purple;
|
||||
background-image: initial;
|
||||
color : $color_white;
|
||||
border-color : $color_purple;
|
||||
background-image : initial;
|
||||
background-color : $color_purple;
|
||||
}
|
||||
|
||||
&.btn-inverse {
|
||||
color: $color_purple;
|
||||
color : $color_purple;
|
||||
|
||||
&:hover {
|
||||
background-color: $color_purple;
|
||||
color: $color_white;
|
||||
color : $color_white;
|
||||
background-color : $color_purple;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//Form Buttons
|
||||
// Form Buttons
|
||||
|
||||
button {
|
||||
@extend %transition;
|
||||
background: $color_purple;
|
||||
border: 2px $color-purple;
|
||||
border-radius: 4px;
|
||||
color: $color_white;
|
||||
padding: 0.6rem 1.25rem;
|
||||
@extend %transition;
|
||||
padding : 0.6rem 1.25rem;
|
||||
color : $color_white;
|
||||
border : 2px $color-purple;
|
||||
border-radius : 4px;
|
||||
background : $color_purple;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
opacity:0.8;
|
||||
opacity : 0.8;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,36 +1,39 @@
|
|||
|
||||
.code-example {
|
||||
border-radius: 7px;
|
||||
padding: $percent_sm;
|
||||
background: $color_heading;
|
||||
padding : $percent_sm;
|
||||
border-radius : 7px;
|
||||
background : $color_heading;
|
||||
}
|
||||
|
||||
code {
|
||||
border-radius: 7px;
|
||||
padding: $percent_sm;
|
||||
background: $color_heading;
|
||||
color:$color_white;
|
||||
padding : 2%;
|
||||
color : $color_white;
|
||||
border-radius : 7px;
|
||||
background : $color_heading;
|
||||
}
|
||||
|
||||
// Code Font Colors
|
||||
|
||||
.code-demo {
|
||||
color: $color_white;
|
||||
border: 0;
|
||||
background-color: initial;
|
||||
}
|
||||
.code-attribute {
|
||||
color: $color_purple;
|
||||
}
|
||||
.code-token {
|
||||
color: $color_code_token;
|
||||
}
|
||||
.code-comment {
|
||||
opacity: 0.6;
|
||||
color : $color_white;
|
||||
border : 0;
|
||||
background-color : initial;
|
||||
}
|
||||
|
||||
//Indentation
|
||||
.indent {
|
||||
padding-left: 1em;
|
||||
word-wrap: normal;
|
||||
.code-attribute {
|
||||
color : $color_purple;
|
||||
}
|
||||
|
||||
.code-token {
|
||||
color : $color_code_token;
|
||||
}
|
||||
|
||||
.code-comment {
|
||||
opacity : 0.6;
|
||||
}
|
||||
|
||||
// Indentation
|
||||
|
||||
.indent {
|
||||
padding-left : 1em;
|
||||
word-wrap : normal;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
@import "https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css";
|
||||
@import "http://allfont.net/allfont.css?fonts=montserrat-hairline";
|
||||
@import "http://allfont.net/allfont.css?fonts=montserrat-light";
|
||||
@import "https://fonts.googleapis.com/css?family=Roboto:300,400";
|
||||
@import "https://allfont.net/allfont.css?fonts=source-sans-pro";
|
||||
|
|
|
|||
|
|
@ -1,68 +1,72 @@
|
|||
//Not Styled Yet
|
||||
|
||||
#main-footer {
|
||||
background: $color_heading;
|
||||
padding-left: 40px; //Same margins as nav
|
||||
padding-right: 40px;
|
||||
padding-right : 40px;
|
||||
padding-left : 40px;
|
||||
background : $color_heading;
|
||||
// Same margins as nav
|
||||
}
|
||||
|
||||
#main-footer > .row {
|
||||
max-width: 100%;
|
||||
vertical-align: middle;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
display : flex;
|
||||
max-width : 100%;
|
||||
vertical-align : middle;
|
||||
align-items : center;
|
||||
}
|
||||
|
||||
footer > #dlmsg { //Download Message
|
||||
padding-top: $percent_md;
|
||||
padding-bottom: $percent_md;
|
||||
footer > #dlmsg {
|
||||
// Download Message
|
||||
padding-top : $percent_md;
|
||||
padding-bottom : $percent_md;
|
||||
}
|
||||
|
||||
footer a.btn:last-child {
|
||||
margin-left: 1.6em;
|
||||
margin-left : 1.6em;
|
||||
}
|
||||
|
||||
footer span {
|
||||
margin-left: 6px; //Icon
|
||||
margin-left : 6px;
|
||||
// Icon
|
||||
}
|
||||
|
||||
.footer--logo {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
filter: brightness(0) invert(1);
|
||||
display : inline-block;
|
||||
filter : brightness(0) invert(1);
|
||||
vertical-align : middle;
|
||||
|
||||
&.chef {
|
||||
width: 80px;
|
||||
border-left: 1px solid $color_white;
|
||||
padding-left:1.6em;
|
||||
&.chef {
|
||||
width : 80px;
|
||||
padding-left : 1.6em;
|
||||
border-left : 1px solid $color_white;
|
||||
}
|
||||
|
||||
&.inspec {
|
||||
width: 130px;
|
||||
padding-right:1.6em;
|
||||
width : 130px;
|
||||
padding-right : 1.6em;
|
||||
}
|
||||
}
|
||||
|
||||
.footer--links {
|
||||
margin-left: auto;
|
||||
display: inline-flex;
|
||||
@extend .no-bullet;
|
||||
@extend .no-bullet;
|
||||
display : inline-flex;
|
||||
margin-left : auto;
|
||||
}
|
||||
|
||||
.footer--link {
|
||||
color: $color_gray;
|
||||
font-family: $heading-font;
|
||||
&:hover,
|
||||
color : $color_gray;
|
||||
font-family : $heading-font;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: $color_purple;
|
||||
&:hover {
|
||||
color : $color_purple;
|
||||
}
|
||||
}
|
||||
//Hex Animation
|
||||
|
||||
// Hex Animation
|
||||
|
||||
img#hex {
|
||||
width: 25px;
|
||||
-webkit-animation: spin 2s linear infinite both;
|
||||
animation: spin 2s linear infinite both;
|
||||
-moz-animation: spin 2s linear infinite both;
|
||||
width : 25px;
|
||||
-moz-animation : spin 2s linear infinite both;
|
||||
-webkit-animation : spin 2s linear infinite both;
|
||||
animation : spin 2s linear infinite both;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,140 +1,241 @@
|
|||
|
||||
//Hero Banner - Home Page
|
||||
// Hero Banner - Home Page
|
||||
|
||||
header {
|
||||
height: 440px;
|
||||
}
|
||||
height : 440px;
|
||||
}
|
||||
|
||||
#particles-js { //Animated dot particles
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
background-color: transparent;
|
||||
margin-top: -500px;
|
||||
z-index: 20;
|
||||
}
|
||||
#particles-second{ //Animated line particles
|
||||
width:100%;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
background-color: transparent;
|
||||
height:100%;
|
||||
z-index: -1;
|
||||
}
|
||||
#particles-js {
|
||||
// Animated dot particles
|
||||
z-index : 20;
|
||||
position : absolute;
|
||||
width : 100%;
|
||||
height : 500px;
|
||||
margin-top : -500px;
|
||||
overflow : hidden;
|
||||
background-color : transparent;
|
||||
}
|
||||
|
||||
#particles-second {
|
||||
// Animated line particles
|
||||
position : absolute;
|
||||
width : 100%;
|
||||
max-width : 100%;
|
||||
height : 100%;
|
||||
overflow : hidden;
|
||||
background-color : transparent;
|
||||
}
|
||||
|
||||
.h-top {
|
||||
// Container for homepage header art
|
||||
height : 440px;
|
||||
|
||||
.h-top { //Container for homepage header art
|
||||
height: 440px;
|
||||
img {
|
||||
&:first-of-type { //Grid Art
|
||||
height: 420px;
|
||||
position: absolute;
|
||||
top:70px;
|
||||
z-index: 10;
|
||||
&:first-of-type {
|
||||
// Grid Art
|
||||
z-index : 10;
|
||||
position : absolute;
|
||||
top : 70px;
|
||||
height : 420px;
|
||||
}
|
||||
&:nth-child(3) { //Diamond
|
||||
height: 230px;
|
||||
margin-top: 128px;
|
||||
|
||||
&:nth-child(3) {
|
||||
// Diamond
|
||||
height : 220px;
|
||||
margin-top : 132px;
|
||||
}
|
||||
}
|
||||
h1 { //Heading
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
margin-top: 358px;
|
||||
|
||||
h1 {
|
||||
// Heading
|
||||
z-index : 10;
|
||||
position : absolute;
|
||||
margin-top : 358px;
|
||||
}
|
||||
}
|
||||
|
||||
//Hero illustration for Community
|
||||
// Hero illustration for Community
|
||||
|
||||
img.grid {
|
||||
margin-top: -80px;
|
||||
z-index: -1;
|
||||
}
|
||||
z-index : -1;
|
||||
margin-top : -80px;
|
||||
}
|
||||
|
||||
img.ball {
|
||||
position: absolute;
|
||||
width: 35px;
|
||||
margin-left: 240px;
|
||||
margin-top: 20px;
|
||||
-webkit-animation: spin 2s linear infinite both;
|
||||
animation: spin 2s linear infinite both;
|
||||
-moz-animation: spin 2s linear infinite both;
|
||||
}
|
||||
position : absolute;
|
||||
width : 35px;
|
||||
margin-top : 20px;
|
||||
margin-left : 240px;
|
||||
-moz-animation : spin 2s linear infinite both;
|
||||
-webkit-animation : spin 2s linear infinite both;
|
||||
animation : spin 2s linear infinite both;
|
||||
}
|
||||
|
||||
img.ball:nth-child(2){
|
||||
width: 55px;
|
||||
margin-left: 150px;
|
||||
margin-top: 110px;
|
||||
}
|
||||
img.ball:nth-child(2) {
|
||||
width : 55px;
|
||||
margin-top : 110px;
|
||||
margin-left : 150px;
|
||||
}
|
||||
|
||||
img.ball:nth-child(3){
|
||||
width: 75px;
|
||||
margin-left: 290px;
|
||||
margin-top: 130px;
|
||||
}
|
||||
img.ball:nth-child(3) {
|
||||
width : 75px;
|
||||
margin-top : 130px;
|
||||
margin-left : 290px;
|
||||
}
|
||||
|
||||
// Children page Headers
|
||||
|
||||
.child-h {
|
||||
height: 180px;
|
||||
margin-top: 81px; //plus header height
|
||||
}
|
||||
height : 180px;
|
||||
margin-top : 81px;
|
||||
// plus header height
|
||||
}
|
||||
|
||||
.child-h .purp-shade, .child-h #particles-second {
|
||||
height: 180px;
|
||||
}
|
||||
.child-h #particles-second,
|
||||
.child-h .purp-shade {
|
||||
height : 180px;
|
||||
}
|
||||
|
||||
.child-h .row {
|
||||
position: relative;
|
||||
top: 50%; //vertically align content inside parent
|
||||
-webkit-transform: translateY(-50%); //vertically align content inside parent
|
||||
-ms-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
position : relative;
|
||||
top : 50%;
|
||||
-ms-transform : translateY(-50%);
|
||||
-webkit-transform : translateY(-50%);
|
||||
transform : translateY(-50%);
|
||||
// vertically align content inside parent
|
||||
// vertically align content inside parent
|
||||
}
|
||||
|
||||
.child-h #particles-second {
|
||||
z-index: 1;
|
||||
}
|
||||
z-index : 1;
|
||||
}
|
||||
|
||||
// Animation for Home Page
|
||||
|
||||
//Reflecting Diamond
|
||||
// Reflecting Diamond
|
||||
|
||||
.bright-animate{
|
||||
animation: brightness 6s infinite;
|
||||
-webkit-animation: brightness 6s infinite;
|
||||
-moz-animation: brightness 6s infinite;
|
||||
}
|
||||
@-webkit-keyframes brightness { 0%, 100% { -webkit-filter: brightness(none); filter: brightness(none); } 50% { -webkit-filter: brightness(1.2); filter: brightness(1.2); } }
|
||||
@keyframes brightness { 0%, 100% { -moz-filter: brightness(none); filter: brightness(none); } 50% { -moz-filter: brightness(1.2); filter: brightness(1.2); } }
|
||||
.bright-animate {
|
||||
-moz-animation : brightness 6s infinite;
|
||||
-webkit-animation : brightness 6s infinite;
|
||||
animation : brightness 6s infinite;
|
||||
}
|
||||
|
||||
//Warping Grid Animation//
|
||||
@-webkit-keyframes brightness {
|
||||
0%,
|
||||
100% {}
|
||||
|
||||
.grid-animate{
|
||||
-webkit-animation: g-animate 5s linear infinite both;
|
||||
animation: g-animate 5s linear infinite both;
|
||||
-moz-animation: g-animate 5s linear infinite both;
|
||||
50% {}
|
||||
}
|
||||
|
||||
@keyframes brightness {
|
||||
0%,
|
||||
100% {}
|
||||
|
||||
50% {}
|
||||
}
|
||||
|
||||
// Warping Grid Animation//
|
||||
|
||||
.grid-animate {
|
||||
-moz-animation : g-animate 5s linear infinite both;
|
||||
-webkit-animation : g-animate 5s linear infinite both;
|
||||
animation : g-animate 5s linear infinite both;
|
||||
}
|
||||
|
||||
@-webkit-keyframes g-animate {
|
||||
25% {
|
||||
-webkit-transform : rotateZ(10deg) scale3d(0.7, 1, 1.2);
|
||||
transform : rotateZ(10deg) scale3d(0.7, 1, 1.2);
|
||||
}
|
||||
|
||||
@-webkit-keyframes g-animate { 25% { -webkit-transform: rotateZ(10deg) scale3d(0.7, 1, 1.2); transform: rotateZ(10deg) scale3d(0.7, 1, 1.2); } 50% {-webkit-transform: scale3d(1.2, 0.7, 1); transform: scale3d(1.2, 0.7, 1); } 75% {-webkit-transform: rotateZ(10deg) scale3d(0.7, 1.2, 0.5); transform: rotateZ(10deg) scale3d(0.7, 1.2, 0.5); } }
|
||||
@keyframes g-animate { 25% { -moz-transform: rotateZ(10deg) scale3d(0.7, 1, 1.2); transform: rotateZ(10deg) scale3d(0.7, 1, 1.2); } 50% {-moz-transform: scale3d(1.2, 0.7, 1); transform: scale3d(1.2, 0.7, 1); } 75% {-moz-transform: rotateZ(10deg) scale3d(0.7, 1.2, 0.5); transform: rotateZ(10deg) scale3d(0.7, 1.2, 0.5); } }
|
||||
|
||||
//Growing HR
|
||||
|
||||
hr.first {
|
||||
width: 0px; //Apply to animated HR, JS calls this
|
||||
50% {
|
||||
-webkit-transform : scale3d(1.2, 0.7, 1);
|
||||
transform : scale3d(1.2, 0.7, 1);
|
||||
}
|
||||
.stretch{
|
||||
-webkit-animation: grow 0.6s linear 1 both;
|
||||
animation: grow 0.6s linear 1 both;
|
||||
-moz-animation: grow 0.6s linear 1 both;
|
||||
|
||||
75% {
|
||||
-webkit-transform : rotateZ(10deg) scale3d(0.7, 1.2, 0.5);
|
||||
transform : rotateZ(10deg) scale3d(0.7, 1.2, 0.5);
|
||||
}
|
||||
@-webkit-keyframes grow { from { width:0px;} to {width:150px;} }
|
||||
@keyframes grow { from { width:0px;} to {width:150px;} }
|
||||
}
|
||||
|
||||
//Spin Animation Keyframes
|
||||
@keyframes g-animate {
|
||||
25% {
|
||||
-moz-transform : rotateZ(10deg) scale3d(0.7, 1, 1.2);
|
||||
transform : rotateZ(10deg) scale3d(0.7, 1, 1.2);
|
||||
}
|
||||
|
||||
@-moz-keyframes spin { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(360deg); } }
|
||||
@-webkit-keyframes spin { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } }
|
||||
@keyframes spin { from {transform:rotate(0deg);} to {transform:rotate(360deg);} }
|
||||
50% {
|
||||
-moz-transform : scale3d(1.2, 0.7, 1);
|
||||
transform : scale3d(1.2, 0.7, 1);
|
||||
}
|
||||
|
||||
75% {
|
||||
-moz-transform : rotateZ(10deg) scale3d(0.7, 1.2, 0.5);
|
||||
transform : rotateZ(10deg) scale3d(0.7, 1.2, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
// Growing HR
|
||||
|
||||
hr.first {
|
||||
width : 0px;
|
||||
// Apply to animated HR, JS calls this
|
||||
}
|
||||
|
||||
.stretch {
|
||||
-moz-animation : grow 0.6s linear 1 both;
|
||||
-webkit-animation : grow 0.6s linear 1 both;
|
||||
animation : grow 0.6s linear 1 both;
|
||||
}
|
||||
|
||||
@-webkit-keyframes grow {
|
||||
from {
|
||||
width : 0px;
|
||||
}
|
||||
|
||||
to {
|
||||
width : 150px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes grow {
|
||||
from {
|
||||
width : 0px;
|
||||
}
|
||||
|
||||
to {
|
||||
width : 150px;
|
||||
}
|
||||
}
|
||||
|
||||
// Spin Animation Keyframes
|
||||
|
||||
@-moz-keyframes spin {
|
||||
from {
|
||||
-moz-transform : rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
-moz-transform : rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes spin {
|
||||
from {
|
||||
-webkit-transform : rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
-webkit-transform : rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform : rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform : rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,237 +1,355 @@
|
|||
|
||||
//Alignment
|
||||
// Alignment
|
||||
|
||||
.strict-center {
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
right : 0;
|
||||
left : 0;
|
||||
margin : auto;
|
||||
text-align : center;
|
||||
}
|
||||
|
||||
.strict-right {
|
||||
float: right;
|
||||
text-align: right;
|
||||
float : right;
|
||||
text-align : right;
|
||||
}
|
||||
|
||||
.strict-left {
|
||||
text-align: left;
|
||||
float: left;
|
||||
float : left;
|
||||
text-align : left;
|
||||
}
|
||||
|
||||
.clear {
|
||||
clear: both;
|
||||
clear : both;
|
||||
}
|
||||
|
||||
.relative {
|
||||
position: relative;
|
||||
position : relative;
|
||||
}
|
||||
|
||||
//margins
|
||||
.relative-top {
|
||||
z-index : 10;
|
||||
position : relative;
|
||||
}
|
||||
|
||||
// margins
|
||||
|
||||
// xl
|
||||
|
||||
//xl
|
||||
.margin-both-xl {
|
||||
margin-top: $percent_lg;
|
||||
margin-bottom: $percent_lg;
|
||||
margin-top : $percent_lg;
|
||||
margin-bottom : $percent_lg;
|
||||
}
|
||||
|
||||
.margin-top-xl {
|
||||
margin-top: $percent_lg;
|
||||
margin-top : $percent_lg;
|
||||
}
|
||||
|
||||
.margin-under-xl {
|
||||
margin-bottom: $percent_lg;
|
||||
margin-bottom : $percent_lg;
|
||||
}
|
||||
//default
|
||||
|
||||
// default
|
||||
|
||||
.margin-both {
|
||||
margin-top: $percent_md;
|
||||
margin-bottom: $percent_md;
|
||||
margin-top : $percent_md;
|
||||
margin-bottom : $percent_md;
|
||||
}
|
||||
|
||||
.pad-both {
|
||||
padding-top: $percent_md;
|
||||
padding-bottom: $percent_md;
|
||||
padding-top : $percent_md;
|
||||
padding-bottom : $percent_md;
|
||||
}
|
||||
|
||||
.margin-both-offset {
|
||||
margin-top: $percent_md+80px; //add header height
|
||||
margin-bottom: $percent_md;
|
||||
margin-top : $percent_md+80px;
|
||||
margin-bottom : $percent_md;
|
||||
// add header height
|
||||
}
|
||||
|
||||
.margin-top-offset {
|
||||
margin-top : $percent_md+80px;
|
||||
// add header height
|
||||
}
|
||||
|
||||
.margin-top {
|
||||
margin-top: $percent_md;
|
||||
margin-top : $percent_md;
|
||||
}
|
||||
|
||||
.margin-under {
|
||||
margin-bottom: $percent_md;
|
||||
margin-bottom : $percent_md;
|
||||
}
|
||||
//small
|
||||
|
||||
// small
|
||||
|
||||
.margin-both-xs {
|
||||
margin-top: $percent_sm;
|
||||
margin-bottom: $percent_sm;
|
||||
margin-top : $percent_sm;
|
||||
margin-bottom : $percent_sm;
|
||||
}
|
||||
|
||||
.margin-top-xs {
|
||||
margin-top: $percent_sm;
|
||||
margin-top : $percent_sm;
|
||||
}
|
||||
|
||||
.margin-under-xs {
|
||||
margin-bottom: $percent_sm;
|
||||
margin-bottom : $percent_sm;
|
||||
}
|
||||
|
||||
//White Box
|
||||
// White Box
|
||||
|
||||
.box-white{
|
||||
border-radius: 7px;
|
||||
padding: 2em;
|
||||
background-color: white;
|
||||
.box-white {
|
||||
padding : 2em;
|
||||
border-radius : 7px;
|
||||
background-color : white;
|
||||
}
|
||||
|
||||
//Art
|
||||
// White Box with border
|
||||
|
||||
.icon-art { //Illustrations with content underneath
|
||||
height: 100px;
|
||||
margin-bottom: 15px;
|
||||
margin-top: 15px;
|
||||
.box-white-brdr {
|
||||
padding : 2em;
|
||||
border : 1px solid #d3e2e2;
|
||||
border-radius : 7px;
|
||||
}
|
||||
.icon { //gradient arrows with white box
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid $color_white;
|
||||
overflow: hidden;
|
||||
background: $color_white;
|
||||
margin-top: -35px;
|
||||
z-index: 50;
|
||||
position: absolute;
|
||||
|
||||
// Art
|
||||
|
||||
.icon-art {
|
||||
// Illustrations with content underneath
|
||||
height : 100px;
|
||||
margin-top : 15px;
|
||||
margin-bottom : 15px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
// gradient arrows with white box
|
||||
z-index : 50;
|
||||
position : absolute;
|
||||
width : 70px;
|
||||
height : 70px;
|
||||
margin-top : -35px;
|
||||
overflow : hidden;
|
||||
border : 2px solid $color_white;
|
||||
border-radius : 50%;
|
||||
background : $color_white;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
padding: 30%;
|
||||
height: auto;
|
||||
display : block;
|
||||
height : auto;
|
||||
padding : 30%;
|
||||
}
|
||||
}
|
||||
|
||||
.shadow { //dropshadow
|
||||
box-shadow: 0 0 25px $color_shadow;
|
||||
.shadow {
|
||||
// dropshadow
|
||||
box-shadow : 0 0 25px $color_shadow;
|
||||
}
|
||||
|
||||
.block-angl { //Angled Background
|
||||
background: $color_triangle_block;
|
||||
clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 100%);
|
||||
.block-angl {
|
||||
// Angled Background
|
||||
background : $color_triangle_block;
|
||||
-webkit-clip-path: polygon(0 0, 100% 7%, 100% 100%, 0 100%);
|
||||
clip-path: polygon(0 0, 100% 7%, 100% 100%, 0 100%);
|
||||
}
|
||||
|
||||
.purp-shade { //Purple radial gradient applied over blue-gradient
|
||||
background: -moz-radial-gradient(center, ellipse cover, rgba(151,110,229,0.4) 0%, rgba(151,110,229,0.2) 50%, rgba(151,110,229,0) 100%);
|
||||
background: -webkit-radial-gradient(center, ellipse cover, rgba(151,110,229,0.4) 0%,rgba(151,110,229,0.2) 50%,rgba(151,110,229,0) 100%);
|
||||
background: radial-gradient(ellipse at center, rgba(151,110,229,0.4) 0%,rgba(151,110,229,0.2) 50%,rgba(151,110,229,0) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#66976ee5', endColorstr='#00976ee5',GradientType=1 );
|
||||
.purp-shade {
|
||||
// Purple radial gradient applied over blue-gradient
|
||||
background : -moz-radial-gradient(
|
||||
center,
|
||||
ellipse cover,
|
||||
rgba(151,110,229,0.4) 0%,
|
||||
rgba(151,110,229,0.2) 50%,
|
||||
rgba(151,110,229,0) 100%
|
||||
);
|
||||
background : -webkit-radial-gradient(
|
||||
center,
|
||||
ellipse cover,
|
||||
rgba(151,110,229,0.4) 0%,
|
||||
rgba(151,110,229,0.2) 50%,
|
||||
rgba(151,110,229,0) 100%
|
||||
);
|
||||
background : radial-gradient(
|
||||
ellipse at center,
|
||||
rgba(151,110,229,0.4) 0%,
|
||||
rgba(151,110,229,0.2) 50%,
|
||||
rgba(151,110,229,0) 100%
|
||||
);
|
||||
filter : progid:DXImageTransform.Microsoft.gradient( startColorstr='#66976ee5', endColorstr='#00976ee5',GradientType=1 );
|
||||
}
|
||||
|
||||
.dark-bg {
|
||||
background-color: $color_heading;
|
||||
.dark-bg {
|
||||
background-color : $color_heading;
|
||||
}
|
||||
|
||||
.blue-gradient { //Default Blue Gradient
|
||||
background: -moz-linear-gradient(100% -14.24% -80deg,rgba(99, 206, 153, 1) 0%,rgba(91, 201, 163, 1) 8.33%,rgba(67, 185, 194, 1) 36.64%,rgba(58, 179, 206, 1) 52.48%,rgba(58, 175, 206, 1) 67.93%,rgba(58, 162, 206, 1) 83.94%,rgba(58, 142, 206, 1) 100%);
|
||||
background: -webkit-linear-gradient(-80deg, rgba(99, 206, 153, 1) 0%, rgba(91, 201, 163, 1) 8.33%, rgba(67, 185, 194, 1) 36.64%, rgba(58, 179, 206, 1) 52.48%, rgba(58, 175, 206, 1) 67.93%, rgba(58, 162, 206, 1) 83.94%, rgba(58, 142, 206, 1) 100%);
|
||||
background: -webkit-gradient(linear,100% -14.24% ,56.15% 114.24% ,color-stop(0,rgba(99, 206, 153, 1) ),color-stop(0.0833,rgba(91, 201, 163, 1) ),color-stop(0.3664,rgba(67, 185, 194, 1) ),color-stop(0.5248,rgba(58, 179, 206, 1) ),color-stop(0.6793,rgba(58, 175, 206, 1) ),color-stop(0.8394,rgba(58, 162, 206, 1) ),color-stop(1,rgba(58, 142, 206, 1) ));
|
||||
background: -o-linear-gradient(-80deg, rgba(99, 206, 153, 1) 0%, rgba(91, 201, 163, 1) 8.33%, rgba(67, 185, 194, 1) 36.64%, rgba(58, 179, 206, 1) 52.48%, rgba(58, 175, 206, 1) 67.93%, rgba(58, 162, 206, 1) 83.94%, rgba(58, 142, 206, 1) 100%);
|
||||
background: -ms-linear-gradient(-80deg, rgba(99, 206, 153, 1) 0%, rgba(91, 201, 163, 1) 8.33%, rgba(67, 185, 194, 1) 36.64%, rgba(58, 179, 206, 1) 52.48%, rgba(58, 175, 206, 1) 67.93%, rgba(58, 162, 206, 1) 83.94%, rgba(58, 142, 206, 1) 100%);
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#63CE99', endColorstr='#3A8ECE' ,GradientType=0)";
|
||||
background: linear-gradient(170deg, rgba(99, 206, 153, 1) 0%, rgba(91, 201, 163, 1) 8.33%, rgba(67, 185, 194, 1) 36.64%, rgba(58, 179, 206, 1) 52.48%, rgba(58, 175, 206, 1) 67.93%, rgba(58, 162, 206, 1) 83.94%, rgba(58, 142, 206, 1) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#63CE99',endColorstr='#3A8ECE' , GradientType=1);
|
||||
}
|
||||
.blue-gradient {
|
||||
// Default Blue Gradient
|
||||
background : -moz-linear-gradient(
|
||||
100% -14.24% -80deg,
|
||||
rgba(99, 206, 153, 1) 0%,
|
||||
rgba(91, 201, 163, 1) 8.33%,
|
||||
rgba(67, 185, 194, 1) 36.64%,
|
||||
rgba(58, 179, 206, 1) 52.48%,
|
||||
rgba(58, 175, 206, 1) 67.93%,
|
||||
rgba(58, 162, 206, 1) 83.94%,
|
||||
rgba(58, 142, 206, 1) 100%
|
||||
);
|
||||
background : -ms-linear-gradient(
|
||||
-80deg,
|
||||
rgba(99, 206, 153, 1) 0%,
|
||||
rgba(91, 201, 163, 1) 8.33%,
|
||||
rgba(67, 185, 194, 1) 36.64%,
|
||||
rgba(58, 179, 206, 1) 52.48%,
|
||||
rgba(58, 175, 206, 1) 67.93%,
|
||||
rgba(58, 162, 206, 1) 83.94%,
|
||||
rgba(58, 142, 206, 1) 100%
|
||||
);
|
||||
background : -o-linear-gradient(
|
||||
-80deg,
|
||||
rgba(99, 206, 153, 1) 0%,
|
||||
rgba(91, 201, 163, 1) 8.33%,
|
||||
rgba(67, 185, 194, 1) 36.64%,
|
||||
rgba(58, 179, 206, 1) 52.48%,
|
||||
rgba(58, 175, 206, 1) 67.93%,
|
||||
rgba(58, 162, 206, 1) 83.94%,
|
||||
rgba(58, 142, 206, 1) 100%
|
||||
);
|
||||
background : -webkit-gradient(linear,100% -14.24% ,56.15% 114.24% ,color-stop(0,rgba(99, 206, 153, 1) ),color-stop(0.0833,rgba(91, 201, 163, 1) ),color-stop(0.3664,rgba(67, 185, 194, 1) ),color-stop(0.5248,rgba(58, 179, 206, 1) ),color-stop(0.6793,rgba(58, 175, 206, 1) ),color-stop(0.8394,rgba(58, 162, 206, 1) ),color-stop(1,rgba(58, 142, 206, 1) ));
|
||||
background : -webkit-linear-gradient(
|
||||
-80deg,
|
||||
rgba(99, 206, 153, 1) 0%,
|
||||
rgba(91, 201, 163, 1) 8.33%,
|
||||
rgba(67, 185, 194, 1) 36.64%,
|
||||
rgba(58, 179, 206, 1) 52.48%,
|
||||
rgba(58, 175, 206, 1) 67.93%,
|
||||
rgba(58, 162, 206, 1) 83.94%,
|
||||
rgba(58, 142, 206, 1) 100%
|
||||
);
|
||||
}
|
||||
|
||||
//form
|
||||
// form
|
||||
|
||||
input.form-item {
|
||||
width: 60%;
|
||||
display: inline;
|
||||
display : inline;
|
||||
width : 60%;
|
||||
}
|
||||
|
||||
form > button {
|
||||
margin-left: 1em;
|
||||
margin-left : 1em;
|
||||
}
|
||||
|
||||
form > button > i {
|
||||
margin-right: 6px;
|
||||
margin-right : 6px;
|
||||
}
|
||||
|
||||
input[type="email"] {
|
||||
border: 1px solid #d3e2e2;
|
||||
-webkit-box-shadow: 0 0 2px $color_shadow;
|
||||
box-shadow: 0 0 2px $color_shadow;
|
||||
font-family: $main-font;
|
||||
font-weight: 300;
|
||||
color: $color_heading;
|
||||
input[type="email"], input[type="text"] {
|
||||
color : $color_heading;
|
||||
border : 1px solid #d3e2e2;
|
||||
-webkit-box-shadow : 0 0 2px $color_shadow;
|
||||
box-shadow : 0 0 2px $color_shadow;
|
||||
font-family : $main-font;
|
||||
font-weight : 300;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
input[type="email"]:hover, input[type="email"]:focus {
|
||||
border: 1px solid $color_purple;
|
||||
-webkit-box-shadow: 0 0 5px $color_shadow;
|
||||
box-shadow: 0 0 5px $color_shadow;
|
||||
input[type="text"]:focus,
|
||||
input[type="text"]:hover,
|
||||
input[type="email"]:focus,
|
||||
input[type="email"]:hover {
|
||||
border : 1px solid $color_purple;
|
||||
-webkit-box-shadow : 0 0 5px $color_shadow;
|
||||
box-shadow : 0 0 5px $color_shadow;
|
||||
}
|
||||
|
||||
input::-webkit-input-placeholder,
|
||||
textarea::-webkit-input-placeholder {
|
||||
font-family: $main-font;
|
||||
color: $color_gray;
|
||||
color : $color_gray;
|
||||
font-family : $main-font;
|
||||
}
|
||||
|
||||
input:-moz-placeholder,
|
||||
textarea:-moz-placeholder {
|
||||
font-family: $main-font;
|
||||
color: $color_gray;
|
||||
}
|
||||
|
||||
input::-moz-placeholder,
|
||||
textarea::-moz-placeholder {
|
||||
font-family: $main-font;
|
||||
color: $color_gray;
|
||||
color : $color_gray;
|
||||
font-family : $main-font;
|
||||
}
|
||||
|
||||
input:-ms-input-placeholder,
|
||||
textarea:-ms-input-placeholder {
|
||||
font-family: $main-font;
|
||||
color: $color_gray;
|
||||
color : $color_gray;
|
||||
font-family : $main-font;
|
||||
}
|
||||
|
||||
input::placeholder,
|
||||
textarea::placeholder {
|
||||
font-family: $main-font;
|
||||
color: $color_gray;
|
||||
color : $color_gray;
|
||||
font-family : $main-font;
|
||||
}
|
||||
|
||||
//Progress bar
|
||||
// Progress bar
|
||||
|
||||
progress {
|
||||
/* Positioning */
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
||||
/* Dimensions */
|
||||
width: 100%;
|
||||
height: 1.6px;
|
||||
|
||||
/* Reset the appearance */
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
|
||||
/* Get rid of the default border in Firefox/Opera. */
|
||||
border: none;
|
||||
|
||||
/* Progress bar container for Firefox/IE10+ */
|
||||
background-color: transparent;
|
||||
|
||||
/* Progress bar value for IE10+ */
|
||||
color: $color_link;
|
||||
progress {
|
||||
/* Positioning */
|
||||
-moz-appearance : none;
|
||||
-webkit-appearance : none;
|
||||
appearance : none;
|
||||
position : fixed;
|
||||
top : 0;
|
||||
left : 0;
|
||||
width : 100%;
|
||||
height : 1.6px;
|
||||
color : $color_link;
|
||||
border : none;
|
||||
background-color : transparent;
|
||||
/* Dimensions */
|
||||
/* Reset the appearance */
|
||||
/* Get rid of the default border in Firefox/Opera. */
|
||||
/* Progress bar container for Firefox/IE10+ */
|
||||
/* Progress bar value for IE10+ */
|
||||
}
|
||||
|
||||
progress[value]::-webkit-progress-bar {
|
||||
background-color: white;
|
||||
background-color : white;
|
||||
}
|
||||
|
||||
progress[value]::-webkit-progress-value {
|
||||
background-color:$color_link;
|
||||
background-color : $color_link;
|
||||
}
|
||||
|
||||
progress[value]::-moz-progress-bar {
|
||||
background-color: white;
|
||||
background-color : white;
|
||||
}
|
||||
|
||||
progress[value]::-moz-progress-value {
|
||||
background-color:$color_link;
|
||||
background-color : $color_link;
|
||||
}
|
||||
|
||||
progress[value]::progress-bar {
|
||||
background-color : white;
|
||||
}
|
||||
|
||||
progress[value]::progress-value {
|
||||
background-color : $color_link;
|
||||
}
|
||||
|
||||
|
||||
//search bar
|
||||
.searchbar{
|
||||
display:flex;
|
||||
align-items: center
|
||||
}
|
||||
|
||||
//Search button
|
||||
|
||||
.search {
|
||||
// search icon
|
||||
width : 70px;
|
||||
height : 70px;
|
||||
overflow : hidden;
|
||||
border : 2px solid $color_white;
|
||||
border-radius : 50%;
|
||||
background : $color_white;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
z-index: 50;
|
||||
|
||||
img {
|
||||
display : block;
|
||||
height : auto;
|
||||
padding : 30%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
//Not Styled Yet
|
||||
|
||||
$side-nav-width: 200px;
|
||||
$top-nav-height: 100px;
|
||||
|
|
|
|||
|
|
@ -1,44 +1,39 @@
|
|||
//Hide the global message
|
||||
#global-message {
|
||||
display: none;
|
||||
}
|
||||
$color_heading : #2c2e30;
|
||||
$color_paragraph : #69787f;
|
||||
$color_gray : #b0bebf;
|
||||
$color_white : white;
|
||||
$color_link : #3ab3ce;
|
||||
$color_purple : #8d66d8;
|
||||
$color_code_token : #3bc5cc;
|
||||
$color_hr : rgba(99,206,153,1);
|
||||
$color_shadow : rgba(151,110,229,0.2);
|
||||
$color_triangle_block : #41ade5;
|
||||
$color_purple_shade : rgba(151,110,229,0.4);
|
||||
$color_blue_shade : rgba(91, 201, 163, 1);
|
||||
$color_blue_shade_2 : rgba(58, 142, 206, 1);
|
||||
|
||||
//colors
|
||||
$color_heading: #2c2e30;
|
||||
$color_paragraph: #69787f;
|
||||
$color_gray: #b0bebf;
|
||||
$color_white: white;
|
||||
$color_link: #3ab3ce;
|
||||
$color_purple: #8d66d8;
|
||||
$color_code_token: #3bc5cc;
|
||||
$color_hr: rgba(99,206,153,1);
|
||||
$color_shadow: rgba(151,110,229,0.2);
|
||||
$color_triangle_block: #41ade5;
|
||||
$color_purple_shade: rgba(151,110,229,0.4);
|
||||
$color_blue_shade: rgba(91, 201, 163, 1);
|
||||
$color_blue_shade_2: rgba(58, 142, 206, 1);
|
||||
//fonts
|
||||
$heading-font : 'Roboto', sans-serif;
|
||||
$main-font : 'source sans pro light', Helvetica, Arial, sans-serif;
|
||||
|
||||
//Font
|
||||
|
||||
$heading-font:'Roboto', sans-serif;
|
||||
$main-font: 'source sans pro light', Helvetica, Arial, sans-serif;
|
||||
|
||||
//Margin Sizes
|
||||
|
||||
$percent_lg: 12%;
|
||||
$percent_md: 100px;
|
||||
$percent_sm: 40px;
|
||||
|
||||
//Shared Styles
|
||||
//margins
|
||||
$percent_lg : 12%;
|
||||
$percent_md : 100px;
|
||||
$percent_sm : 40px;
|
||||
|
||||
//shared styles
|
||||
%uppercase {
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
font-weight: bold;
|
||||
text-transform : uppercase;
|
||||
font-weight : bold;
|
||||
letter-spacing : 0.1em;
|
||||
}
|
||||
|
||||
%transition {
|
||||
-moz-transition: all .2s;
|
||||
-webkit-transition: all .2s;
|
||||
transition: all .2s;
|
||||
-moz-transition : all .2s;
|
||||
-webkit-transition : all .2s;
|
||||
transition : all .2s;
|
||||
}
|
||||
|
||||
#global-message {
|
||||
display : none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,87 +1,55 @@
|
|||
// THIS IS STILL OLD STUFF //
|
||||
|
||||
.sidebar-layout-docs {
|
||||
.main-nav--links {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.main-nav--link-ctas {
|
||||
border-bottom: none;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
//stickjs - subtract header height
|
||||
.is_stuck {
|
||||
margin-top: $percent_md;
|
||||
}
|
||||
|
||||
.main-nav--sidebar {
|
||||
padding: 0 $side-nav-padding-small;
|
||||
//overwriting default ul li styles for side bar
|
||||
|
||||
@include nav-large {
|
||||
padding: 0 $side-nav-padding-large;
|
||||
}
|
||||
ul.main-sidebar--links {
|
||||
list-style-type: none;
|
||||
margin-bottom: $percent_sm!important;
|
||||
}
|
||||
|
||||
.main-sidebar--links {
|
||||
list-style: none;
|
||||
margin-left: 0.5rem;
|
||||
|
||||
ul {
|
||||
margin-left: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
ul.main-sidebar--links li {
|
||||
margin-left: 0em;
|
||||
}
|
||||
ul.main-sidebar--links li:last-child {
|
||||
margin-bottom: $percent_sm!important;
|
||||
}
|
||||
|
||||
.main-sidebar--link h6 {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.main-sidebar--list--item {
|
||||
position: relative;
|
||||
padding: 3px 0;
|
||||
text-transform: uppercase;
|
||||
font-size: 14px;
|
||||
|
||||
& > a {
|
||||
color: $inspec-grey;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: darken($inspec-grey, 15%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.gsc-adBlock, .gcsc-branding {
|
||||
display: none !important;
|
||||
// THIS IS STILL OLD STUFF - don't know what it is - hannah//
|
||||
.gcsc-branding,
|
||||
.gsc-adBlock {
|
||||
display : none !important;
|
||||
}
|
||||
|
||||
.gsc-control-cse {
|
||||
padding: 0 !important;
|
||||
padding : 0 !important;
|
||||
|
||||
tbody {
|
||||
border: none;
|
||||
background: none;
|
||||
border : none;
|
||||
background : none;
|
||||
}
|
||||
|
||||
.gsc-input-box {
|
||||
height: 3rem;
|
||||
height : 3rem;
|
||||
|
||||
table {
|
||||
margin-bottom: 0;
|
||||
margin-bottom : 0;
|
||||
}
|
||||
}
|
||||
|
||||
.gsc-input input {
|
||||
box-shadow: none !important;
|
||||
box-shadow : none !important;
|
||||
}
|
||||
|
||||
.gsc-search-button {
|
||||
font-family: inherit;
|
||||
font-size: 11px;
|
||||
padding: 5px 18px;
|
||||
height: 27px;
|
||||
min-width: 54px;
|
||||
min-width : 54px;
|
||||
height : 27px;
|
||||
padding : 5px 18px;
|
||||
font-family : inherit;
|
||||
font-size : 11px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,21 +1,20 @@
|
|||
.tutorials--subhead {
|
||||
font-family: $heading-font;
|
||||
color: $color_link;
|
||||
color : $color_link;
|
||||
font-family : $heading-font;
|
||||
}
|
||||
|
||||
.tutorials--links {
|
||||
|
||||
& > li {
|
||||
margin-bottom: 4px;
|
||||
margin-bottom : 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.tutorials--link {
|
||||
font-family: $heading-font;
|
||||
font-family : $heading-font;
|
||||
|
||||
& > span {
|
||||
text-transform: none;
|
||||
font-family: $main-font;
|
||||
color: $color_paragraph;
|
||||
color : $color_paragraph;
|
||||
text-transform : none;
|
||||
font-family : $main-font;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,68 +1,86 @@
|
|||
h1 {
|
||||
font-family: $heading-font;
|
||||
font-size: 36px;
|
||||
color: $color_heading;
|
||||
font-weight: 300;
|
||||
color : $color_heading;
|
||||
font-family : $heading-font;
|
||||
font-size : 2.25em;
|
||||
font-weight : 300;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: $heading-font;
|
||||
font-size: 30px;
|
||||
color: $color_heading;
|
||||
font-weight: 300;
|
||||
color : $color_heading;
|
||||
font-family : $heading-font;
|
||||
font-size : 1.75em;
|
||||
font-weight : 300;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-family: $heading-font;
|
||||
font-size: 20px;
|
||||
color: $color_heading;
|
||||
font-weight: 300;
|
||||
color : $color_heading;
|
||||
font-family : $heading-font;
|
||||
font-size : 1.25em;
|
||||
font-weight : 300;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-family: $heading-font;
|
||||
font-size: 20px;
|
||||
color: $color_paragraph;
|
||||
line-height: 1.4em;
|
||||
font-weight: 300;
|
||||
color : $color_paragraph;
|
||||
font-family : $heading-font;
|
||||
font-size : 1.25em;
|
||||
font-weight : 300;
|
||||
line-height : 1.4em;
|
||||
}
|
||||
p, ol, ul, li {
|
||||
font-family: $main-font;
|
||||
color: $color_paragraph;
|
||||
font-weight: 300;
|
||||
|
||||
li,
|
||||
ol,
|
||||
p,
|
||||
ul {
|
||||
color : $color_paragraph;
|
||||
font-family : $main-font;
|
||||
font-weight : 300;
|
||||
}
|
||||
|
||||
small {
|
||||
font-family: $main-font;
|
||||
font-size: 65%;
|
||||
color: $color_gray;
|
||||
@extend %uppercase;
|
||||
@extend %uppercase;
|
||||
color : $color_gray;
|
||||
font-family : $main-font;
|
||||
font-size : 65%;
|
||||
}
|
||||
|
||||
li { //indent for li
|
||||
margin-left: 1.6em;
|
||||
li {
|
||||
// indent for li
|
||||
margin-left : 1.6em;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin-top: 6px;
|
||||
margin-bottom: 6px;
|
||||
width: 150px;
|
||||
border: 0;
|
||||
height: 1px;
|
||||
background-color: $color_hr;
|
||||
background: linear-gradient(to right, $color_hr 0, $color_link 100%);
|
||||
filter: progid:dximagetransform.microsoft.gradient(startcolorstr='$color_hr', endcolorstr='$color_link', gradienttype=1 );
|
||||
width : 150px;
|
||||
height : 1px;
|
||||
margin-top : 6px;
|
||||
margin-bottom : 6px;
|
||||
border : 0;
|
||||
background : linear-gradient(
|
||||
to right,
|
||||
$color_hr 0,
|
||||
$color_link 100%
|
||||
);
|
||||
background-color : $color_hr;
|
||||
filter : progid:dximagetransform.microsoft.gradient(startcolorstr='$color_hr', endcolorstr='$color_link', gradienttype=1 );
|
||||
}
|
||||
|
||||
//Font Colors//
|
||||
// Font Colors//
|
||||
|
||||
.t-dk {
|
||||
color: $color_heading;
|
||||
color : $color_heading;
|
||||
}
|
||||
|
||||
.t-white {
|
||||
color: $color_white;
|
||||
color : $color_white;
|
||||
}
|
||||
|
||||
.t-blue {
|
||||
color: $color_link;
|
||||
color : $color_link;
|
||||
}
|
||||
|
||||
.t-transparent {
|
||||
opacity: 0.6;
|
||||
opacity : 0.6;
|
||||
}
|
||||
|
||||
.t-purple {
|
||||
color: $color_purple;
|
||||
color : $color_purple;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
@import "buttons";
|
||||
@import "nav";
|
||||
//@import "global-message";
|
||||
//@import "sidebar";
|
||||
@import "sidebar";
|
||||
@import "footer";
|
||||
@import "layout";
|
||||
@import "typography";
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue