mirror of
https://github.com/VSCodium/vscodium.github.io.git
synced 2025-12-11 19:44:53 -06:00
952 lines
24 KiB
CSS
952 lines
24 KiB
CSS
/*
|
|
* Skeleton V1.2
|
|
* Copyright 2011, Dave Gamache
|
|
* www.getskeleton.com
|
|
* Free to use under the MIT license.
|
|
* http://www.opensource.org/licenses/mit-license.php
|
|
* 6/20/2012
|
|
*/
|
|
|
|
|
|
/* Table of Content
|
|
==================================================
|
|
#Reset & Basics
|
|
#Basic Styles
|
|
#Site Styles
|
|
#Typography
|
|
#Links
|
|
#Lists
|
|
#Images
|
|
#Buttons
|
|
#Forms
|
|
#Misc */
|
|
|
|
|
|
/* #Reset & Basics (Inspired by E. Meyers)
|
|
================================================== */
|
|
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 0;
|
|
font-size: 100%;
|
|
font: inherit;
|
|
vertical-align: baseline; }
|
|
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
|
|
display: block; }
|
|
body {
|
|
line-height: 1; }
|
|
ol, ul {
|
|
list-style: none; }
|
|
blockquote, q {
|
|
quotes: none; }
|
|
blockquote:before, blockquote:after,
|
|
q:before, q:after {
|
|
content: '';
|
|
content: none; }
|
|
table {
|
|
border-collapse: collapse;
|
|
border-spacing: 0; }
|
|
|
|
|
|
/* #Basic Styles
|
|
================================================== */
|
|
body {
|
|
background: #fff;
|
|
font: 14px/21px "Raleway", "HelveticaNeue-Light", Arial, sans-serif;
|
|
color: #444;
|
|
-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
|
|
-webkit-text-size-adjust: 100%;
|
|
}
|
|
|
|
|
|
/* #Typography
|
|
================================================== */
|
|
h1, h2, h3, h4, h5, h6 {
|
|
font-weight: 300; }
|
|
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
|
|
h1 { font-size: 46px; line-height: 50px; margin-bottom: 14px;}
|
|
h2 { font-size: 35px; line-height: 40px; margin-bottom: 10px; }
|
|
h3 { font-size: 28px; line-height: 34px; margin-bottom: 8px; }
|
|
h4 { font-size: 21px; line-height: 30px; margin-bottom: 4px; }
|
|
h5 { font-size: 17px; line-height: 24px; }
|
|
h6 { font-size: 14px; line-height: 21px; }
|
|
.subheader { color: #777; }
|
|
|
|
p { margin: 0 0 20px 0; }
|
|
p img { margin: 0; }
|
|
p.lead { font-size: 21px; line-height: 27px; color: #777; }
|
|
|
|
em { font-style: italic; }
|
|
strong { font-weight: bold; }
|
|
small { font-size: 80%; }
|
|
|
|
/* Blockquotes */
|
|
blockquote, blockquote p { font-size: 17px; line-height: 24px; color: #777; font-style: italic; }
|
|
blockquote { margin: 0 0 20px; padding: 9px 20px 0 19px; border-left: 1px solid #ddd; }
|
|
blockquote cite { display: block; font-size: 12px; color: #555; }
|
|
blockquote cite:before { content: "\2014 \0020"; }
|
|
blockquote cite a, blockquote cite a:visited, blockquote cite a:visited { color: #555; }
|
|
|
|
hr { border: solid #ddd; border-width: 1px 0 0; clear: both; margin: 10px 0 30px; height: 0; }
|
|
|
|
|
|
/* #Links
|
|
================================================== */
|
|
a, a:visited { text-decoration: underline; outline: 0; }
|
|
a:hover, a:focus { }
|
|
p a, p a:visited { line-height: inherit; }
|
|
|
|
|
|
/* #Lists
|
|
================================================== */
|
|
ul, ol { margin-bottom: 20px; }
|
|
ul { list-style: none outside; }
|
|
ol { list-style: decimal; }
|
|
ul, ul.square { list-style: square outside; }
|
|
ul ul, ul.circle { list-style: circle outside; }
|
|
ul ul ul, ul.disc { list-style: disc outside; }
|
|
ul ul li, ul ol li,
|
|
ol ol li, ol ul li { margin-bottom: 6px; }
|
|
li { line-height: 18px; margin-bottom: 12px; }
|
|
ul.large li { line-height: 21px; }
|
|
li p { line-height: 21px; }
|
|
|
|
/* #Images
|
|
================================================== */
|
|
|
|
img.scale-with-grid {
|
|
max-width: 100%;
|
|
height: auto; }
|
|
|
|
|
|
/* #Buttons
|
|
================================================== */
|
|
|
|
.button,
|
|
button,
|
|
input[type="submit"],
|
|
input[type="reset"],
|
|
input[type="button"] {
|
|
background: #eee; /* Old browsers */
|
|
background: #eee -moz-linear-gradient(top, rgba(255,255,255,.2) 0%, rgba(0,0,0,.2) 100%); /* FF3.6+ */
|
|
background: #eee -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.2)), color-stop(100%,rgba(0,0,0,.2))); /* Chrome,Safari4+ */
|
|
background: #eee -webkit-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* Chrome10+,Safari5.1+ */
|
|
background: #eee -o-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* Opera11.10+ */
|
|
background: #eee -ms-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* IE10+ */
|
|
background: #eee linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* W3C */
|
|
border: 1px solid #aaa;
|
|
border-top: 1px solid #ccc;
|
|
border-left: 1px solid #ccc;
|
|
-moz-border-radius: 3px;
|
|
-webkit-border-radius: 3px;
|
|
border-radius: 3px;
|
|
color: #444;
|
|
display: inline-block;
|
|
font-size: 11px;
|
|
font-weight: bold;
|
|
text-decoration: none;
|
|
text-shadow: 0 1px rgba(255, 255, 255, .75);
|
|
cursor: pointer;
|
|
margin-bottom: 20px;
|
|
line-height: normal;
|
|
padding: 8px 10px;
|
|
font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; }
|
|
|
|
.button:hover,
|
|
button:hover,
|
|
input[type="submit"]:hover,
|
|
input[type="reset"]:hover,
|
|
input[type="button"]:hover {
|
|
color: #222;
|
|
background: #ddd; /* Old browsers */
|
|
background: #ddd -moz-linear-gradient(top, rgba(255,255,255,.3) 0%, rgba(0,0,0,.3) 100%); /* FF3.6+ */
|
|
background: #ddd -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.3)), color-stop(100%,rgba(0,0,0,.3))); /* Chrome,Safari4+ */
|
|
background: #ddd -webkit-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* Chrome10+,Safari5.1+ */
|
|
background: #ddd -o-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* Opera11.10+ */
|
|
background: #ddd -ms-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* IE10+ */
|
|
background: #ddd linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* W3C */
|
|
border: 1px solid #888;
|
|
border-top: 1px solid #aaa;
|
|
border-left: 1px solid #aaa; }
|
|
|
|
.button:active,
|
|
button:active,
|
|
input[type="submit"]:active,
|
|
input[type="reset"]:active,
|
|
input[type="button"]:active {
|
|
border: 1px solid #666;
|
|
background: #ccc; /* Old browsers */
|
|
background: #ccc -moz-linear-gradient(top, rgba(255,255,255,.35) 0%, rgba(10,10,10,.4) 100%); /* FF3.6+ */
|
|
background: #ccc -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.35)), color-stop(100%,rgba(10,10,10,.4))); /* Chrome,Safari4+ */
|
|
background: #ccc -webkit-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* Chrome10+,Safari5.1+ */
|
|
background: #ccc -o-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* Opera11.10+ */
|
|
background: #ccc -ms-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* IE10+ */
|
|
background: #ccc linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* W3C */ }
|
|
|
|
.button.full-width,
|
|
button.full-width,
|
|
input[type="submit"].full-width,
|
|
input[type="reset"].full-width,
|
|
input[type="button"].full-width {
|
|
width: 100%;
|
|
padding-left: 0 !important;
|
|
padding-right: 0 !important;
|
|
text-align: center; }
|
|
|
|
/* Fix for odd Mozilla border & padding issues */
|
|
button::-moz-focus-inner,
|
|
input::-moz-focus-inner {
|
|
border: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
|
|
/* #Forms
|
|
================================================== */
|
|
|
|
form {
|
|
margin-bottom: 20px; }
|
|
fieldset {
|
|
margin-bottom: 20px; }
|
|
input[type="text"],
|
|
input[type="password"],
|
|
input[type="email"],
|
|
textarea,
|
|
select {
|
|
border: 1px solid #ccc;
|
|
padding: 6px 4px;
|
|
outline: none;
|
|
-moz-border-radius: 2px;
|
|
-webkit-border-radius: 2px;
|
|
border-radius: 2px;
|
|
font: 13px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
color: #777;
|
|
margin: 0;
|
|
width: 210px;
|
|
max-width: 100%;
|
|
display: block;
|
|
margin-bottom: 20px;
|
|
background: #fff; }
|
|
select {
|
|
padding: 0; }
|
|
input[type="text"]:focus,
|
|
input[type="password"]:focus,
|
|
input[type="email"]:focus,
|
|
textarea:focus {
|
|
border: 1px solid #aaa;
|
|
color: #444;
|
|
-moz-box-shadow: 0 0 3px rgba(0,0,0,.2);
|
|
-webkit-box-shadow: 0 0 3px rgba(0,0,0,.2);
|
|
box-shadow: 0 0 3px rgba(0,0,0,.2); }
|
|
textarea {
|
|
min-height: 60px; }
|
|
label,
|
|
legend {
|
|
display: block;
|
|
font-weight: bold;
|
|
font-size: 13px; }
|
|
select {
|
|
width: 220px; }
|
|
input[type="checkbox"] {
|
|
display: inline; }
|
|
label span,
|
|
legend span {
|
|
font-weight: normal;
|
|
font-size: 13px;
|
|
color: #444; }
|
|
|
|
/* #Misc
|
|
================================================== */
|
|
.remove-bottom { margin-bottom: 0 !important; }
|
|
.half-bottom { margin-bottom: 10px !important; }
|
|
.add-bottom { margin-bottom: 20px !important; }
|
|
|
|
|
|
|
|
/* #Syntax highlighting
|
|
================================================== */
|
|
|
|
|
|
.highlight {
|
|
color: #f8f8f2;
|
|
table-layout: fixed;
|
|
white-space: nowrap;
|
|
width:90%;
|
|
}
|
|
|
|
.highlight pre, .highlight code { display:block; margin:0; padding:0; background: none; overflow:auto; word-wrap: normal; }
|
|
|
|
.highlight, .linenodiv {
|
|
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQIHWPQ1dU1BgABzQC7XXMTYQAAAABJRU5ErkJggg==);
|
|
display:block;
|
|
padding: 10px;
|
|
margin-bottom:20px;
|
|
}
|
|
.gutter, .lineno { color: #ccc; }
|
|
|
|
td.gl { width: 40px; }
|
|
|
|
.gutter {
|
|
border-right: none;
|
|
padding: 10px;
|
|
text-align: right;
|
|
}
|
|
span.lineno {
|
|
display: block;
|
|
float: left;
|
|
width: 40px;
|
|
padding-right: 8px;
|
|
text-align: right;
|
|
}
|
|
|
|
|
|
.hll { background-color: #49483e }
|
|
.c { color: #75715e } /* Comment */
|
|
.err { color: #960050; background-color: #1e0010 } /* Error */
|
|
.k { color: #66d9ef } /* Keyword */
|
|
.l { color: #ae81ff } /* Literal */
|
|
.n { color: #f8f8f2 } /* Name */
|
|
.o { color: #f92672 } /* Operator */
|
|
.p { color: #f8f8f2 } /* Punctuation */
|
|
.cm { color: #75715e } /* Comment.Multiline */
|
|
.cp { color: #75715e } /* Comment.Preproc */
|
|
.c1 { color: #75715e } /* Comment.Single */
|
|
.cs { color: #75715e } /* Comment.Special */
|
|
.ge { font-style: italic } /* Generic.Emph */
|
|
.gs { font-weight: bold } /* Generic.Strong */
|
|
.kc { color: #66d9ef } /* Keyword.Constant */
|
|
.kd { color: #66d9ef } /* Keyword.Declaration */
|
|
.kn { color: #f92672 } /* Keyword.Namespace */
|
|
.kp { color: #66d9ef } /* Keyword.Pseudo */
|
|
.kr { color: #66d9ef } /* Keyword.Reserved */
|
|
.kt { color: #66d9ef } /* Keyword.Type */
|
|
.ld { color: #e6db74 } /* Literal.Date */
|
|
.m { color: #ae81ff } /* Literal.Number */
|
|
.s { color: #e6db74 } /* Literal.String */
|
|
.na { color: #a6e22e } /* Name.Attribute */
|
|
.nb { color: #f8f8f2 } /* Name.Builtin */
|
|
.nc { color: #a6e22e } /* Name.Class */
|
|
.no { color: #66d9ef } /* Name.Constant */
|
|
.nd { color: #a6e22e } /* Name.Decorator */
|
|
.ni { color: #f8f8f2 } /* Name.Entity */
|
|
.ne { color: #a6e22e } /* Name.Exception */
|
|
.nf { color: #a6e22e } /* Name.Function */
|
|
.nl { color: #f8f8f2 } /* Name.Label */
|
|
.nn { color: #f8f8f2 } /* Name.Namespace */
|
|
.nx { color: #a6e22e } /* Name.Other */
|
|
.py { color: #f8f8f2 } /* Name.Property */
|
|
.nt { color: #f92672 } /* Name.Tag */
|
|
.nv { color: #f8f8f2 } /* Name.Variable */
|
|
.ow { color: #f92672 } /* Operator.Word */
|
|
.w { color: #f8f8f2 } /* Text.Whitespace */
|
|
.mf { color: #ae81ff } /* Literal.Number.Float */
|
|
.mh { color: #ae81ff } /* Literal.Number.Hex */
|
|
.mi { color: #ae81ff } /* Literal.Number.Integer */
|
|
.mo { color: #ae81ff } /* Literal.Number.Oct */
|
|
.sb { color: #e6db74 } /* Literal.String.Backtick */
|
|
.sc { color: #e6db74 } /* Literal.String.Char */
|
|
.sd { color: #e6db74 } /* Literal.String.Doc */
|
|
.s2 { color: #e6db74 } /* Literal.String.Double */
|
|
.se { color: #ae81ff } /* Literal.String.Escape */
|
|
.sh { color: #e6db74 } /* Literal.String.Heredoc */
|
|
.si { color: #e6db74 } /* Literal.String.Interpol */
|
|
.sx { color: #e6db74 } /* Literal.String.Other */
|
|
.sr { color: #e6db74 } /* Literal.String.Regex */
|
|
.s1 { color: #e6db74 } /* Literal.String.Single */
|
|
.ss { color: #e6db74 } /* Literal.String.Symbol */
|
|
.bp { color: #f8f8f2 } /* Name.Builtin.Pseudo */
|
|
.vc { color: #f8f8f2 } /* Name.Variable.Class */
|
|
.vg { color: #f8f8f2 } /* Name.Variable.Global */
|
|
.vi { color: #f8f8f2 } /* Name.Variable.Instance */
|
|
.il { color: #ae81ff } /* Literal.Number.Integer.Long */
|
|
|
|
.gh { } /* Generic Heading & Diff Header */
|
|
.gu { color: #75715e; } /* Generic.Subheading & Diff Unified/Comment? */
|
|
.gd { color: #f92672; } /* Generic.Deleted & Diff Deleted */
|
|
.gi { color: #a6e22e; } /* Generic.Inserted & Diff Inserted */
|
|
|
|
|
|
/* -----------------------------------*/
|
|
/* ----- 960px wide fancy grid! ----- */
|
|
/* -----------------------------------*/
|
|
|
|
/* by tim o'brien, t413.com
|
|
* based on getskeleton.com
|
|
*/
|
|
|
|
|
|
/* ----- base grid----- */
|
|
|
|
.container { position: relative; width: 960px; margin: 0 auto; padding: 0; }
|
|
.container .column { float: left; display: inline; margin-left: 10px; margin-right: 10px; }
|
|
.row { margin-bottom: 20px; }
|
|
|
|
.container .small.column { width: 300px; }
|
|
.container .half.column { width: 460px; }
|
|
.container .big.column { width: 620px; }
|
|
.container .full.column { width: 940px; }
|
|
|
|
|
|
/* ----- Tablet (Portrait) -- 768px ----- */
|
|
@media only screen and (min-width: 768px) and (max-width: 959px) {
|
|
.container { width: 768px; }
|
|
|
|
.container .small.column { width: 236px; }
|
|
.container .half.column { width: 364px; }
|
|
.container .big.column { width: 488px; }
|
|
.container .full.column { width: 748px; }
|
|
}
|
|
|
|
|
|
/* ----- Mobile (Portrait) ----- */
|
|
@media only screen and (max-width: 767px) {
|
|
.container { width: 96%; }
|
|
.container .column { margin: 1%; }
|
|
|
|
.container .small.column { width: 48%; }
|
|
.container .half.column { width: 48%; }
|
|
.container .big.column { width: 98%; }
|
|
.container .full.column { width: 98%; }
|
|
}
|
|
|
|
|
|
/* ----- Mobile (Landscape) -- 480px ----- */
|
|
@media only screen and (min-width: 480px) and (max-width: 767px) {
|
|
.container { width: 92%; }
|
|
.container .column { margin: 2%; }
|
|
|
|
.container .small.column { width: 46%; }
|
|
.container .half.column { width: 46%; }
|
|
.container .big.column { width: 96%; }
|
|
.container .full.column { width: 96%; }
|
|
}
|
|
|
|
|
|
|
|
/* ----- Clearing ----- */
|
|
|
|
/* Self Clearing Goodness */
|
|
.container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }
|
|
|
|
/* Use clearfix class on parent to clear nested columns,
|
|
or wrap each row of columns in a <div class="row"> */
|
|
.clearfix:before,
|
|
.clearfix:after,
|
|
.row:before,
|
|
.row:after {
|
|
content: '\0020';
|
|
display: block;
|
|
overflow: hidden;
|
|
visibility: hidden;
|
|
width: 0;
|
|
height: 0; }
|
|
.row:after,
|
|
.clearfix:after {
|
|
clear: both; }
|
|
.row,
|
|
.clearfix {
|
|
zoom: 1; }
|
|
|
|
/* You can also use a <br class="clear" /> to clear columns */
|
|
.clear {
|
|
clear: both;
|
|
display: block;
|
|
overflow: hidden;
|
|
visibility: hidden;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
html { box-sizing: border-box; }
|
|
*, *:before, *:after { box-sizing: inherit; }
|
|
|
|
/* ---------------------------*/
|
|
/* ----- Special Styles ----- */
|
|
/* ---------------------------*/
|
|
|
|
/* ----- colors (autogenerated from _config.yml)----- */
|
|
|
|
|
|
.border-black { border-color: #111111 !important; }
|
|
.text-black { color: #111111; }
|
|
.text-black a { color: #111111; }
|
|
.bg-black { background-color: #111111 !important; }
|
|
|
|
.border-white { border-color: #f8f8f8 !important; }
|
|
.text-white { color: #f8f8f8; }
|
|
.text-white a { color: #f8f8f8; }
|
|
.bg-white { background-color: #f8f8f8 !important; }
|
|
|
|
.border-blue { border-color: #49a7e9 !important; }
|
|
.text-blue { color: #49a7e9; }
|
|
.text-blue a { color: #49a7e9; }
|
|
.bg-blue { background-color: #49a7e9 !important; }
|
|
|
|
.border-green { border-color: #9bcf2f !important; }
|
|
.text-green { color: #9bcf2f; }
|
|
.text-green a { color: #9bcf2f; }
|
|
.bg-green { background-color: #9bcf2f !important; }
|
|
|
|
.border-purple { border-color: #c869bf !important; }
|
|
.text-purple { color: #c869bf; }
|
|
.text-purple a { color: #c869bf; }
|
|
.bg-purple { background-color: #c869bf !important; }
|
|
|
|
.border-orange { border-color: #fab125 !important; }
|
|
.text-orange { color: #fab125; }
|
|
.text-orange a { color: #fab125; }
|
|
.bg-orange { background-color: #fab125 !important; }
|
|
|
|
.border-turquoise { border-color: #0fbfcf !important; }
|
|
.text-turquoise { color: #0fbfcf; }
|
|
.text-turquoise a { color: #0fbfcf; }
|
|
.bg-turquoise { background-color: #0fbfcf !important; }
|
|
|
|
|
|
/* ----- per-post colors! ----- */
|
|
|
|
|
|
|
|
|
|
nav .p-migrate { border-color: #f8f8f8; }
|
|
#migrate { background-color: #f8f8f8 !important; color: #111111; }
|
|
#migrate a { color: #111111; }
|
|
#migrate .sectiondivider { color: #f8f8f8; }
|
|
|
|
|
|
|
|
|
|
nav .p-install { border-color: #49a7e9; }
|
|
#install { background-color: #49a7e9 !important; color: #111111; }
|
|
#install a { color: #111111; }
|
|
#install .sectiondivider { color: #49a7e9; }
|
|
|
|
|
|
|
|
|
|
nav .p-why { border-color: #f8f8f8; }
|
|
#why { background-color: #f8f8f8 !important; color: #111111; }
|
|
#why a { color: #111111; }
|
|
#why .sectiondivider { color: #f8f8f8; }
|
|
|
|
|
|
|
|
|
|
nav .p-features { border-color: #49a7e9; }
|
|
#features { background-color: #49a7e9 !important; color: #f8f8f8; }
|
|
#features a { color: #f8f8f8; }
|
|
#features .sectiondivider { color: #49a7e9; }
|
|
|
|
|
|
|
|
|
|
nav .p-platforms { border-color: #fab125; }
|
|
#platforms { background-color: #fab125 !important; color: #111111; }
|
|
#platforms a { color: #111111; }
|
|
#platforms .sectiondivider { color: #fab125; }
|
|
|
|
|
|
|
|
|
|
nav .p-intro { border-color: #f8f8f8; }
|
|
#intro { background-color: #f8f8f8 !important; color: #111111; }
|
|
#intro a { color: #111111; }
|
|
#intro .sectiondivider { color: #f8f8f8; }
|
|
|
|
|
|
|
|
/* ----- code, syntax highlighting, etc ----- */
|
|
|
|
code, pre { font-family: Monaco, Menlo, Consolas, "Courier New", monospace; }
|
|
|
|
/* spesifically inline code */
|
|
code, pre {
|
|
background: rgba(255,255,255,0.2);
|
|
display: inline;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
/* block code */
|
|
pre code { background: none; display: block; }
|
|
pre {
|
|
display: block;
|
|
margin: 20px 5%;
|
|
padding: 4px 8px;
|
|
background: rgba(255,255,255,0.1);
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
.highlight { margin:20px 5%; }
|
|
|
|
|
|
/* ----- base elements ----- */
|
|
|
|
img {
|
|
max-width:100%!important;
|
|
height:auto;
|
|
vertical-align:middle;
|
|
}
|
|
|
|
hr {
|
|
margin:60px auto;
|
|
width:50%;
|
|
border-color: #111111;
|
|
}
|
|
|
|
.container { word-wrap: break-word; }
|
|
.center { text-align: center; }
|
|
.left, .container .left { text-align: left; }
|
|
|
|
.container h1, .container h2, .container h3, .container h4 {
|
|
margin-bottom: 20px;
|
|
text-align: center;
|
|
padding: 0 4%;
|
|
}
|
|
.container p, .container ol, .container ul {
|
|
font-size: 17px;
|
|
padding: 0 5%;
|
|
}
|
|
.container ol, .container ul { padding: 0 8%; }
|
|
.container p:first-of-type {
|
|
margin-top: 40px;
|
|
}
|
|
|
|
/* keep embedded videos fluid! */
|
|
.icontain {
|
|
position: relative;
|
|
height: 0;
|
|
overflow: hidden;
|
|
padding-bottom: 56.25%; /* keep 16x9 Aspect Ratio */
|
|
}
|
|
.i4x3 { padding-bottom: 75.00%; } /* keep 4x3 Aspect Ratio */
|
|
.icontain iframe {
|
|
position: absolute;
|
|
top:0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.inlineblock {
|
|
display:-moz-inline-stack;
|
|
display:inline-block;
|
|
zoom:1;
|
|
*display:inline;
|
|
}
|
|
|
|
/* ---------------------------*/
|
|
/* ----- Main Structure ----- */
|
|
/* ---------------------------*/
|
|
|
|
/* ----- top menu ----- */
|
|
|
|
|
|
|
|
|
|
nav {
|
|
font-size:15px;
|
|
width:100%;
|
|
position:fixed;
|
|
z-index:100;
|
|
top:0;
|
|
left:0;
|
|
background:#2e2e2e;
|
|
}
|
|
|
|
nav ul {
|
|
list-style:none;
|
|
text-align:center;
|
|
padding:0;
|
|
margin:0;
|
|
letter-spacing:-4px;
|
|
}
|
|
|
|
nav ul li {
|
|
display:inline-block;
|
|
border-top:3px solid;
|
|
padding: 3px;
|
|
*display:inline;
|
|
zoom:1;
|
|
line-height:normal;
|
|
letter-spacing:normal;
|
|
text-transform:uppercase;
|
|
min-width:110px;
|
|
line-height:60px;
|
|
margin:0;
|
|
}
|
|
|
|
nav ul li a, nav ul li a:visited {
|
|
display:block;
|
|
color:#fff;
|
|
text-decoration:none;
|
|
font-weight:600;
|
|
opacity:.75;
|
|
}
|
|
|
|
nav ul li a:hover {
|
|
opacity:1
|
|
}
|
|
nav ul li:hover, nav ul li.active {
|
|
border-top-width: 6px;
|
|
padding-top: 0;
|
|
}
|
|
|
|
|
|
/* ----- sections/articles ----- */
|
|
|
|
.section {
|
|
position:relative;
|
|
display:block;
|
|
width:100%;
|
|
min-height:300px;
|
|
padding:210px 0;
|
|
background:url(img/bgnoise.png);
|
|
/* generated noise from noisetexturegenerator.com */
|
|
}
|
|
|
|
.section:first-of-type {
|
|
padding-top: 140px;
|
|
}
|
|
|
|
|
|
#footer {
|
|
padding: 8px 0;
|
|
min-height:0;
|
|
text-align:center;
|
|
background-color:#2e2e2e;
|
|
background-image:none;
|
|
}
|
|
#footer .container p { font-size:13px; margin:0; }
|
|
|
|
.subtlecircle {
|
|
text-align:center;
|
|
z-index:3;
|
|
border-radius:50%;
|
|
-moz-border-radius:50%;
|
|
-webkit-border-radius:50%;
|
|
box-shadow: 0px 1px 15px rgba(0,0,0,0.05);
|
|
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAF0lEQVQIHWP8//+/MQMaYELjg7kUCgIASm8DOqGzfp8AAAAASUVORK5CYII=);
|
|
}
|
|
|
|
.sectiondivider {
|
|
width:270px;
|
|
height:270px;
|
|
padding:15px;
|
|
position:absolute;
|
|
top:-135px;
|
|
left:50%;
|
|
margin-left:-135px;
|
|
}
|
|
|
|
.sectiondivider img {
|
|
width:240px;
|
|
height:240px;
|
|
position: static;
|
|
}
|
|
|
|
.sectiondivider .fa-stack {
|
|
font-size: 130px;
|
|
position: static;
|
|
margin-top: -8px;
|
|
}
|
|
.sectiondivider .fa-circle { color: #fff; }
|
|
|
|
.sectiondivider h5 {
|
|
font-size:15px;
|
|
font-weight: 500;
|
|
text-transform:uppercase;
|
|
position:absolute;
|
|
bottom:40px;
|
|
left:auto;
|
|
text-align:center;
|
|
display:block;
|
|
z-index:6;
|
|
width:240px;
|
|
color:#000;
|
|
}
|
|
|
|
.sectiondivider.imaged {
|
|
text-shadow: 1px 1px 3px #333;
|
|
}
|
|
|
|
|
|
.columned {
|
|
-webkit-column-count: 3;
|
|
-moz-column-count: 3;
|
|
column-count: 3;
|
|
|
|
-webkit-column-gap: 40px;
|
|
-moz-column-gap: 40px;
|
|
column-gap: 40px;
|
|
|
|
-webkit-column-rule: 1px outset rgba(255,255,255,0.5);
|
|
-moz-column-rule: 1px outset rgba(255,255,255,0.5);
|
|
column-rule: 1px outset rgba(255,255,255,0.5);
|
|
}
|
|
.longlist { font-size: 14px !important; }
|
|
.longlist li { margin-bottom: 3px; }
|
|
|
|
|
|
|
|
/* ----- fork on github banner ----- */
|
|
#forkongithub a {
|
|
color:#fff;
|
|
text-decoration:none;
|
|
font-family:arial,sans-serif;
|
|
text-align:center;
|
|
font-weight:700;
|
|
font-size:1rem;
|
|
line-height:2rem;
|
|
position:relative;
|
|
transition:.5s;
|
|
padding:5px 40px;
|
|
}
|
|
#forkongithub a::before, #forkongithub a::after {
|
|
content:""; width:100%; display:block; position:absolute;
|
|
top:1px; left:0; height:1px; background:#fff;
|
|
}
|
|
#forkongithub a::after { bottom:1px; top:auto; }
|
|
@media screen and (min-width:800px) {
|
|
#forkongithub {
|
|
position:fixed;
|
|
display:block;
|
|
top:0;
|
|
right:0;
|
|
width:200px;
|
|
overflow:hidden;
|
|
height:200px;
|
|
z-index:9999;
|
|
}
|
|
#forkongithub a {
|
|
width:200px;
|
|
position:absolute;
|
|
top:60px;
|
|
right:-60px;
|
|
transform:rotate(45deg);
|
|
-webkit-transform:rotate(45deg);
|
|
-ms-transform:rotate(45deg);
|
|
-moz-transform:rotate(45deg);
|
|
-o-transform:rotate(45deg);
|
|
box-shadow:4px 4px 10px rgba(0,0,0,0.8);
|
|
box-sizing: content-box;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/* mid size (tablets, landscapes) */
|
|
@media only screen and (max-width: 679px) {
|
|
nav { font-size:11px; }
|
|
nav ul li {
|
|
min-width:60px;
|
|
line-height:40px;
|
|
}
|
|
}
|
|
|
|
/* tiny size (phones) */
|
|
@media only screen and (max-width: 380px) {
|
|
nav ul li { min-width:90px; line-height:20px; }
|
|
}
|
|
|
|
/* anything not desktop */
|
|
@media only screen and (max-width: 767px) {
|
|
.container h1 { font-size: 30px; }
|
|
.container h2 { font-size: 24px; }
|
|
.container h3 { font-size: 20px; }
|
|
.container h4 { font-size: 18px; }
|
|
|
|
|
|
.section { padding:130px 0; }
|
|
.sectiondivider {
|
|
width:200px;
|
|
height:200px;
|
|
padding:15px;
|
|
top:-100px;
|
|
margin-left:-100px;
|
|
}
|
|
.sectiondivider img {
|
|
width:170px;
|
|
height:170px;
|
|
}
|
|
.sectiondivider .fa-stack {
|
|
font-size: 100px;
|
|
margin-top: -14px;
|
|
}
|
|
.sectiondivider h5 {
|
|
font-size:15px;
|
|
bottom:30px;
|
|
width:240px
|
|
}
|
|
|
|
.section-icon {
|
|
width: 170px;
|
|
height: 170px;
|
|
}
|
|
|
|
.columned {
|
|
-webkit-column-count: 2;
|
|
-moz-column-count: 2;
|
|
column-count: 2;
|
|
}
|
|
}
|
|
|
|
.intro-text {
|
|
margin: 0 0 10px;
|
|
font-family: "Segoe UI","Helvetica Neue","Helvetica",Arial,sans-serif;
|
|
line-height: 1.6;
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
color: #444;
|
|
text-rendering: optimizeLegibility;
|
|
}
|
|
|
|
button {
|
|
border: none;
|
|
-webkit-appearance: button;
|
|
-moz-appearance: button;
|
|
}
|
|
|
|
.section-icon {
|
|
width: 240px;
|
|
height: 240px;
|
|
}
|
|
|
|
.link-button {
|
|
color: white;
|
|
margin: 20px 0 5px;
|
|
padding: 10px 0;
|
|
font-size: 1.8rem;
|
|
text-align: center;
|
|
width: 400px;
|
|
background-color: #373277;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.feature-props {
|
|
background-image: url("/img/valueprops-top-sprite.svg");
|
|
background-repeat: no-repeat;
|
|
width: 5rem;
|
|
height: 5rem;
|
|
background-size: 20rem 10rem;
|
|
margin: auto;
|
|
margin-bottom: auto;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.feature-intellisense {
|
|
background-position: 0 100%;
|
|
}
|
|
|
|
.feature-debugging {
|
|
background-position: 33.3% 0%;
|
|
}
|
|
|
|
.feature-git {
|
|
background-position: 67% 100%;
|
|
}
|
|
|
|
.feature-extensions {
|
|
background-position: 101% 100%;
|
|
}
|