mirror of
https://github.com/MinimalBible/MinimalBible.github.io
synced 2025-11-03 18:10:31 -05:00
Engage!
This commit is contained in:
Michael Rose
66
assets/less/coderay.less
Normal file
66
assets/less/coderay.less
Normal file
@ -0,0 +1,66 @@
|
||||
.CodeRay {
|
||||
font-family: @code-font;
|
||||
.font(12);
|
||||
color: #d0d0d0;
|
||||
margin-bottom: 1.5em;
|
||||
.rounded(3px);
|
||||
}
|
||||
|
||||
.CodeRay .code pre {
|
||||
margin: 0;
|
||||
padding: 1em;
|
||||
background-color: #272822;
|
||||
border: 1px solid darken(@body-color, 5);
|
||||
}
|
||||
|
||||
div.CodeRay { }
|
||||
span.CodeRay { white-space: pre; border: 0px; padding: 2px }
|
||||
|
||||
table.CodeRay { border-collapse: collapse; width: 100%; padding: 2px }
|
||||
table.CodeRay td {
|
||||
padding: 1em 0.5em;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.CodeRay .line-numbers, .CodeRay .no {
|
||||
color: #8f908a;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.CodeRay .line-numbers a {
|
||||
color: #8f908a;
|
||||
}
|
||||
|
||||
.CodeRay .line-numbers tt { font-weight: bold }
|
||||
.CodeRay .line-numbers .highlighted { color: red }
|
||||
.CodeRay .line { display: block; float: left; width: 100%; }
|
||||
.CodeRay span.line-numbers { padding: 0 24px 0 4px; }
|
||||
.CodeRay .code { width: 100% }
|
||||
|
||||
ol.CodeRay { font-size: 10pt }
|
||||
ol.CodeRay li { white-space: pre }
|
||||
|
||||
.CodeRay .code pre { overflow: auto }
|
||||
.CodeRay .debug { color:white ! important; background:blue ! important; }
|
||||
|
||||
.CodeRay .doctype,
|
||||
.CodeRay .key,
|
||||
.CodeRay .instance-variable { color: #f8f8f2; }
|
||||
.CodeRay .attribute-name { color: #a6e22e;}
|
||||
.CodeRay .symbol,
|
||||
.CodeRay .integer,
|
||||
.CodeRay .float { color: #ff658b; }
|
||||
.CodeRay .string { color: #2dc900; }
|
||||
.CodeRay .keyword { color: #66d9ef; }
|
||||
.CodeRay .function,
|
||||
.CodeRay .class { color: #a6e22e; }
|
||||
.CodeRay .regexp,
|
||||
.CodeRay .constant,
|
||||
.CodeRay .tag { color: #f92672; }
|
||||
.CodeRay .modifier,
|
||||
.CodeRay .predefined-constant { color: #ff84e4; }
|
||||
.CodeRay .comment { color: #75715e; }
|
||||
.CodeRay .error { color: #ecc; }
|
||||
.CodeRay .content { color: #e6db74; }
|
||||
.CodeRay .delimiter { color: #e6db74; }
|
||||
.CodeRay .inline { color: #e6db74; }
|
||||
345
assets/less/dl-menu.less
Normal file
345
assets/less/dl-menu.less
Normal file
@ -0,0 +1,345 @@
|
||||
.dl-menuwrapper {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
-webkit-perspective: 1000px;
|
||||
-moz-perspective: 1000px;
|
||||
perspective: 1000px;
|
||||
-webkit-perspective-origin: 50% 200%;
|
||||
-moz-perspective-origin: 50% 200%;
|
||||
perspective-origin: 50% 200%;
|
||||
@media @medium {
|
||||
position: fixed;
|
||||
max-width: 175px;
|
||||
top: 25px;
|
||||
left: 25px;
|
||||
}
|
||||
button {
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: @comp-color;
|
||||
border: none;
|
||||
width: 48px;
|
||||
height: 45px;
|
||||
text-indent: -900em;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
.border-radius(0,3px,0,0);
|
||||
box-shadow: 0 12px 24px fade(@black,35);
|
||||
@media @medium {
|
||||
.border-radius(3px,3px,3px,3px);
|
||||
}
|
||||
}
|
||||
button:hover,
|
||||
button.dl-active,
|
||||
ul {
|
||||
background: #aaa;
|
||||
}
|
||||
button:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 68%;
|
||||
height: 5px;
|
||||
background: @white;
|
||||
top: 10px;
|
||||
left: 16%;
|
||||
box-shadow:
|
||||
0 10px 0 @white,
|
||||
0 20px 0 @white;
|
||||
}
|
||||
button.dl-active {
|
||||
display: none;
|
||||
}
|
||||
ul {
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
-webkit-transform-style: preserve-3d;
|
||||
-moz-transform-style: preserve-3d;
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
li {
|
||||
position: relative;
|
||||
h4 {
|
||||
margin:0;
|
||||
padding: 15px 20px 0;
|
||||
color: fade(@white,90);
|
||||
}
|
||||
p {
|
||||
margin: 0;
|
||||
padding: 15px 20px;
|
||||
.font-rem(12);
|
||||
color: fade(@white,80);
|
||||
a {
|
||||
display: inline;
|
||||
padding: 0;
|
||||
.font-rem(12);
|
||||
}
|
||||
}
|
||||
i {
|
||||
display: inline-block;
|
||||
width: 2em;
|
||||
}
|
||||
a {
|
||||
display: block;
|
||||
position: relative;
|
||||
padding: 15px 20px;
|
||||
.font-rem(14);
|
||||
line-height: 20px;
|
||||
font-weight: 300;
|
||||
color: @white;
|
||||
outline: none;
|
||||
}
|
||||
.dl-back > a {
|
||||
padding-left: 30px;
|
||||
background: rgba(0,0,0,0.2);
|
||||
}
|
||||
.dl-back:after,
|
||||
> a:not(:only-child):after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
line-height: 50px;
|
||||
font-family: 'fontawesome';
|
||||
color: @white;
|
||||
speak: none;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
content: "\f105";
|
||||
}
|
||||
.dl-back:after {
|
||||
left: 10px;
|
||||
color: rgba(212,204,198,0.5);
|
||||
-webkit-transform: rotate(180deg);
|
||||
-moz-transform: rotate(180deg);
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
> a:after {
|
||||
right: 10px;
|
||||
color: rgba(0,0,0,0.15);
|
||||
}
|
||||
}
|
||||
.dl-menu {
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
box-shadow: 0 12px 24px fade(@black,35);
|
||||
-webkit-transform: translateY(10px);
|
||||
-moz-transform: translateY(10px);
|
||||
transform: translateY(10px);
|
||||
-webkit-backface-visibility: hidden;
|
||||
-moz-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
@media @medium {
|
||||
.border-radius(3px,3px,3px,3px);
|
||||
}
|
||||
}
|
||||
.dl-menu.dl-menu-toggle {
|
||||
-webkit-transition: all 0.3s ease;
|
||||
-moz-transition: all 0.3s ease;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.dl-menu.dl-menuopen {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
-webkit-transform: translateY(0px);
|
||||
-moz-transform: translateY(0px);
|
||||
transform: translateY(0px);
|
||||
}
|
||||
.dl-submenu {
|
||||
.rounded(3px);
|
||||
box-shadow: 0 12px 24px fade(@black,35);
|
||||
}
|
||||
/* Hide the inner submenus */
|
||||
li .dl-submenu {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
/*
|
||||
When a submenu is openend, we will hide all li siblings.
|
||||
For that we give a class to the parent menu called "dl-subview".
|
||||
We also hide the submenu link.
|
||||
The opened submenu will get the class "dl-subviewopen".
|
||||
All this is done for any sub-level being entered.
|
||||
*/
|
||||
.dl-menu.dl-subview li,
|
||||
.dl-menu.dl-subview li.dl-subviewopen > a,
|
||||
.dl-menu.dl-subview li.dl-subview > a {
|
||||
display: none;
|
||||
}
|
||||
.dl-menu.dl-subview li.dl-subview,
|
||||
.dl-menu.dl-subview li.dl-subview .dl-submenu,
|
||||
.dl-menu.dl-subview li.dl-subviewopen,
|
||||
.dl-menu.dl-subview li.dl-subviewopen > .dl-submenu,
|
||||
.dl-menu.dl-subview li.dl-subviewopen > .dl-submenu > li {
|
||||
display: block;
|
||||
}
|
||||
/* Animation classes for moving out and in */
|
||||
.dl-menu.dl-animate-out {
|
||||
-webkit-animation: MenuAnimOut 0.4s ease;
|
||||
-moz-animation: MenuAnimOut 0.4s ease;
|
||||
animation: MenuAnimOut 0.4s ease;
|
||||
}
|
||||
@-webkit-keyframes MenuAnimOut {
|
||||
100% {
|
||||
-webkit-transform: translateZ(300px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@-moz-keyframes MenuAnimOut {
|
||||
100% {
|
||||
-moz-transform: translateZ(300px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@keyframes MenuAnimOut {
|
||||
100% {
|
||||
transform: translateZ(300px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
.dl-menu.dl-animate-in {
|
||||
-webkit-animation: MenuAnimIn 0.4s ease;
|
||||
-moz-animation: MenuAnimIn 0.4s ease;
|
||||
animation: MenuAnimIn 0.4s ease;
|
||||
}
|
||||
@-webkit-keyframes MenuAnimIn {
|
||||
0% {
|
||||
-webkit-transform: translateZ(300px);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: translateZ(0px);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@-moz-keyframes MenuAnimIn {
|
||||
0% {
|
||||
-moz-transform: translateZ(300px);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
-moz-transform: translateZ(0px);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes MenuAnimIn {
|
||||
0% {
|
||||
transform: translateZ(300px);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translateZ(0px);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.dl-menuwrapper > .dl-submenu.dl-animate-in {
|
||||
-webkit-animation: SubMenuAnimIn 0.4s ease;
|
||||
-moz-animation: SubMenuAnimIn 0.4s ease;
|
||||
animation: SubMenuAnimIn 0.4s ease;
|
||||
}
|
||||
@-webkit-keyframes SubMenuAnimIn {
|
||||
0% {
|
||||
-webkit-transform: translateZ(-300px);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: translateZ(0px);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@-moz-keyframes SubMenuAnimIn {
|
||||
0% {
|
||||
-moz-transform: translateZ(-300px);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
-moz-transform: translateZ(0px);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes SubMenuAnimIn {
|
||||
0% {
|
||||
transform: translateZ(-300px);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translateZ(0px);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.dl-menuwrapper > .dl-submenu.dl-animate-out {
|
||||
-webkit-animation: SubMenuAnimOut 0.4s ease;
|
||||
-moz-animation: SubMenuAnimOut 0.4s ease;
|
||||
animation: SubMenuAnimOut 0.4s ease;
|
||||
}
|
||||
@-webkit-keyframes SubMenuAnimOut {
|
||||
0% {
|
||||
-webkit-transform: translateZ(0px);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: translateZ(-300px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@-moz-keyframes SubMenuAnimOut {
|
||||
0% {
|
||||
-moz-transform: translateZ(0px);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
-moz-transform: translateZ(-300px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@keyframes SubMenuAnimOut {
|
||||
0% {
|
||||
transform: translateZ(0px);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translateZ(-300px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
/* No Touch Fallback */
|
||||
.no-touch .dl-menuwrapper li a:hover {
|
||||
background: rgba(255,248,213,0.1);
|
||||
}
|
||||
/* No JS Fallback */
|
||||
.no-js {
|
||||
.dl-trigger {
|
||||
display: none;
|
||||
}
|
||||
.dl-menuwrapper .dl-menu {
|
||||
position: relative;
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
-webkit-transform: none;
|
||||
-moz-transform: none;
|
||||
transform: none;
|
||||
}
|
||||
.dl-menuwrapper li .dl-submenu {
|
||||
display: block;
|
||||
}
|
||||
.dl-menuwrapper li.dl-back {
|
||||
display: none;
|
||||
}
|
||||
.dl-menuwrapper li > a:not(:only-child) {
|
||||
background: rgba(0,0,0,0.1);
|
||||
}
|
||||
.dl-menuwrapper li > a:not(:only-child):after {
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
// Menu Color
|
||||
.dl-menuwrapper button:hover,
|
||||
.dl-menuwrapper button.dl-active,
|
||||
.dl-menuwrapper ul {
|
||||
background: @comp-color;
|
||||
}
|
||||
485
assets/less/elements.less
Normal file
485
assets/less/elements.less
Normal file
@ -0,0 +1,485 @@
|
||||
hr {
|
||||
display: block;
|
||||
margin: 1em 0;
|
||||
padding: 0;
|
||||
height: 1px;
|
||||
border: 0;
|
||||
border-top: 1px solid #ccc;
|
||||
border-bottom: 1px solid #fff;
|
||||
}
|
||||
|
||||
// Figures and images
|
||||
// --------------------------------------------------
|
||||
figure {
|
||||
margin: 0;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
.clearfix();
|
||||
img {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
a {
|
||||
img {
|
||||
.translate(0, 0);
|
||||
-webkit-transition-duration: 0.25s;
|
||||
-moz-transition-duration: 0.25s;
|
||||
-o-transition-duration: 0.25s;
|
||||
&:hover {
|
||||
.translate(0, -5px);
|
||||
.box-shadow(0 0 10px fade(@base-color, 20));
|
||||
}
|
||||
}
|
||||
}
|
||||
&.half {
|
||||
@media @large {
|
||||
img {
|
||||
width: 310px;
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
}
|
||||
figcaption {
|
||||
clear: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.third {
|
||||
@media @large {
|
||||
img {
|
||||
width: 200px;
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
}
|
||||
figcaption {
|
||||
clear: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// Buttons
|
||||
// --------------------------------------------------
|
||||
.btn {
|
||||
display: inline-block;
|
||||
margin-bottom: 20px;
|
||||
padding: 8px 20px;
|
||||
.font-rem(14);
|
||||
background-color: @primary;
|
||||
color: @white;
|
||||
border-width: 2px !important;
|
||||
border-style: solid !important;
|
||||
border-color: @primary;
|
||||
.rounded(3px);
|
||||
&:visited {
|
||||
color: @white;
|
||||
}
|
||||
&:hover {
|
||||
background-color: @white;
|
||||
color: @primary;
|
||||
}
|
||||
}
|
||||
.btn-success {
|
||||
background-color: @success;
|
||||
color: @white;
|
||||
border-color: @success;
|
||||
&:visited {
|
||||
color: @white;
|
||||
}
|
||||
&:hover {
|
||||
background-color: @white;
|
||||
color: @success;
|
||||
}
|
||||
}
|
||||
.btn-warning {
|
||||
background-color: @warning;
|
||||
color: @white;
|
||||
border-color: @warning;
|
||||
&:visited {
|
||||
color: @white;
|
||||
}
|
||||
&:hover {
|
||||
background-color: @white;
|
||||
color: @warning;
|
||||
}
|
||||
}
|
||||
.btn-danger {
|
||||
background-color: @danger;
|
||||
color: @white;
|
||||
border-color: @danger;
|
||||
&:visited {
|
||||
color: @white;
|
||||
}
|
||||
&:hover {
|
||||
background-color: @white;
|
||||
color: @danger;
|
||||
}
|
||||
}
|
||||
.btn-info {
|
||||
background-color: @info;
|
||||
color: @white;
|
||||
border-color: @info;
|
||||
&:visited {
|
||||
color: @white;
|
||||
}
|
||||
&:hover {
|
||||
background-color: @white;
|
||||
color: @info;
|
||||
}
|
||||
}
|
||||
|
||||
// Well
|
||||
// --------------------------------------------------
|
||||
.well {
|
||||
padding: 20px;
|
||||
border: 1px solid @comp-color;
|
||||
.rounded(4px);
|
||||
}
|
||||
|
||||
// Animations
|
||||
// --------------------------------------------------
|
||||
.animated{-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;}.animated.hinge{-webkit-animation-duration:2s;-moz-animation-duration:2s;-ms-animation-duration:2s;-o-animation-duration:2s;animation-duration:2s;}@-webkit-keyframes fadeIn {
|
||||
0% {opacity: 0;} 100% {opacity: 1;}
|
||||
}
|
||||
|
||||
@-moz-keyframes fadeIn {
|
||||
0% {opacity: 0;}
|
||||
100% {opacity: 1;}
|
||||
}
|
||||
|
||||
@-o-keyframes fadeIn {
|
||||
0% {opacity: 0;}
|
||||
100% {opacity: 1;}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
0% {opacity: 0;}
|
||||
100% {opacity: 1;}
|
||||
}
|
||||
|
||||
.fadeIn {
|
||||
-webkit-animation-name: fadeIn;
|
||||
-moz-animation-name: fadeIn;
|
||||
-o-animation-name: fadeIn;
|
||||
animation-name: fadeIn;
|
||||
}
|
||||
@-webkit-keyframes fadeInDown {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateY(-20px);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes fadeInDown {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-moz-transform: translateY(-20px);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
-moz-transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@-o-keyframes fadeInDown {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-o-transform: translateY(-20px);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
-o-transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInDown {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.fadeInDown {
|
||||
-webkit-animation-name: fadeInDown;
|
||||
-moz-animation-name: fadeInDown;
|
||||
-o-animation-name: fadeInDown;
|
||||
animation-name: fadeInDown;
|
||||
}
|
||||
@-webkit-keyframes fadeInDownBig {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateY(-2000px);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes fadeInDownBig {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-moz-transform: translateY(-2000px);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
-moz-transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@-o-keyframes fadeInDownBig {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-o-transform: translateY(-2000px);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
-o-transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInDownBig {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-2000px);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.fadeInDownBig {
|
||||
-webkit-animation-name: fadeInDownBig;
|
||||
-moz-animation-name: fadeInDownBig;
|
||||
-o-animation-name: fadeInDownBig;
|
||||
animation-name: fadeInDownBig;
|
||||
}
|
||||
@-webkit-keyframes bounceIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: scale(.3);
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 1;
|
||||
-webkit-transform: scale(1.05);
|
||||
}
|
||||
|
||||
70% {
|
||||
-webkit-transform: scale(.9);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes bounceIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-moz-transform: scale(.3);
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 1;
|
||||
-moz-transform: scale(1.05);
|
||||
}
|
||||
|
||||
70% {
|
||||
-moz-transform: scale(.9);
|
||||
}
|
||||
|
||||
100% {
|
||||
-moz-transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@-o-keyframes bounceIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-o-transform: scale(.3);
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 1;
|
||||
-o-transform: scale(1.05);
|
||||
}
|
||||
|
||||
70% {
|
||||
-o-transform: scale(.9);
|
||||
}
|
||||
|
||||
100% {
|
||||
-o-transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bounceIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(.3);
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
70% {
|
||||
transform: scale(.9);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.bounceIn {
|
||||
-webkit-animation-name: bounceIn;
|
||||
-moz-animation-name: bounceIn;
|
||||
-o-animation-name: bounceIn;
|
||||
animation-name: bounceIn;
|
||||
}
|
||||
@-webkit-keyframes bounceInDown {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateY(-2000px);
|
||||
}
|
||||
|
||||
60% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateY(30px);
|
||||
}
|
||||
|
||||
80% {
|
||||
-webkit-transform: translateY(-10px);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes bounceInDown {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-moz-transform: translateY(-2000px);
|
||||
}
|
||||
|
||||
60% {
|
||||
opacity: 1;
|
||||
-moz-transform: translateY(30px);
|
||||
}
|
||||
|
||||
80% {
|
||||
-moz-transform: translateY(-10px);
|
||||
}
|
||||
|
||||
100% {
|
||||
-moz-transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@-o-keyframes bounceInDown {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-o-transform: translateY(-2000px);
|
||||
}
|
||||
|
||||
60% {
|
||||
opacity: 1;
|
||||
-o-transform: translateY(30px);
|
||||
}
|
||||
|
||||
80% {
|
||||
-o-transform: translateY(-10px);
|
||||
}
|
||||
|
||||
100% {
|
||||
-o-transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bounceInDown {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-2000px);
|
||||
}
|
||||
|
||||
60% {
|
||||
opacity: 1;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.bounceInDown {
|
||||
-webkit-animation-name: bounceInDown;
|
||||
-moz-animation-name: bounceInDown;
|
||||
-o-animation-name: bounceInDown;
|
||||
animation-name: bounceInDown;
|
||||
}
|
||||
|
||||
@-webkit-keyframes drop {
|
||||
0% {
|
||||
-webkit-transform: translateY(-500px);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: translateY(0);
|
||||
}
|
||||
}
|
||||
@-moz-keyframes drop {
|
||||
0% {
|
||||
-moz-transform: translateY(-500px);
|
||||
}
|
||||
100% {
|
||||
-moz-transform: translateY(0);
|
||||
}
|
||||
}
|
||||
@-o-keyframes drop {
|
||||
0% {
|
||||
-o-transform: translateY(-500px);
|
||||
}
|
||||
100% {
|
||||
-o-transform: translateY(0);
|
||||
}
|
||||
}
|
||||
@keyframes drop {
|
||||
0% {
|
||||
transform: translateY(-500px);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
.drop {
|
||||
-webkit-animation-name: drop;
|
||||
-moz-animation-name: drop;
|
||||
-o-animation-name: drop;
|
||||
animation-name: drop;
|
||||
}
|
||||
1471
assets/less/font-awesome.less
vendored
Normal file
1471
assets/less/font-awesome.less
vendored
Normal file
File diff suppressed because it is too large
Load Diff
47
assets/less/grid.less
Normal file
47
assets/less/grid.less
Normal file
@ -0,0 +1,47 @@
|
||||
// Defining number of columns in the grid.
|
||||
// Common Values would be 12, 16 or 24
|
||||
@width: 100%;
|
||||
@def_grid: 12;
|
||||
@margin: 0;
|
||||
|
||||
.container(){
|
||||
margin:0 auto;
|
||||
width:@width;
|
||||
}
|
||||
|
||||
// Works out the width of elements based
|
||||
// on total number of columns and width
|
||||
// number of columns being displayed.
|
||||
// Removes 20px for margins
|
||||
.grid(@grid:@def_grid,@cols:'',@float:left,@display:inline){
|
||||
display:@display;
|
||||
float:@float;
|
||||
width:(100%/@grid * @cols) - (@margin * 2);
|
||||
}
|
||||
|
||||
// Allows for padding before element
|
||||
.prefix(@grid:@def_grid,@cols:''){
|
||||
margin-left:(100%/@grid * @cols);
|
||||
}
|
||||
// Allows for padding after element
|
||||
.suffix(@grid:@def_grid,@cols:''){
|
||||
margin-right:(100%/@grid * @cols);
|
||||
}
|
||||
// Removes left margin
|
||||
.first(){
|
||||
margin-left:0;
|
||||
}
|
||||
// Removes right margin
|
||||
.last(){
|
||||
margin-right:0;
|
||||
}
|
||||
|
||||
.push(@grid:@def_grid,@move:'') {
|
||||
position:relative;
|
||||
left:(100%/@grid * @move);
|
||||
}
|
||||
|
||||
.pull(@grid:@def_grid,@move:''){
|
||||
position:relative;
|
||||
left:(100%/@grid * @move) * -1;
|
||||
}
|
||||
30
assets/less/main.less
Normal file
30
assets/less/main.less
Normal file
@ -0,0 +1,30 @@
|
||||
// ===========================================================
|
||||
// HPSTR Jekyll Theme
|
||||
// By: Michael Rose
|
||||
// ===========================================================
|
||||
|
||||
// ROOT =======================================================
|
||||
// CSS Reset ==================================================
|
||||
@import "reset.less";
|
||||
// Variables and mixins =======================================
|
||||
@import "variables.less";
|
||||
// Site wide styles (html, body, global classes) ==============
|
||||
@import "site.less";
|
||||
// TYPOGRAPHY =================================================
|
||||
@import "typography.less";
|
||||
// Pygments Syntax highlighting ===============================
|
||||
@import "pygments.less";
|
||||
// Coderay Syntax highlighting ===============================
|
||||
@import "coderay.less";
|
||||
// MIXINS =====================================================
|
||||
@import "mixins.less";
|
||||
@import "grid.less";
|
||||
// ELEMENTS ===================================================
|
||||
// Figures, images, social media, other elements ==============
|
||||
@import "elements.less";
|
||||
@import "dl-menu.less";
|
||||
// Font Awesome webfont icons =================================
|
||||
@import "font-awesome.less";
|
||||
// LAYOUT =====================================================
|
||||
// Page level layout styles ===================================
|
||||
@import "page.less";
|
||||
305
assets/less/mixins.less
Normal file
305
assets/less/mixins.less
Normal file
@ -0,0 +1,305 @@
|
||||
// UTILITY MIXINS
|
||||
// --------------------------------------------------
|
||||
|
||||
// Clearfix
|
||||
// --------------------
|
||||
// For clearing floats like a boss h5bp.com/q
|
||||
.clearfix {
|
||||
*zoom: 1;
|
||||
&:before,
|
||||
&:after {
|
||||
display: table;
|
||||
content: "";
|
||||
// Fixes Opera/contenteditable bug:
|
||||
// http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
|
||||
line-height: 0;
|
||||
}
|
||||
&:after {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
// Webkit-style focus
|
||||
// --------------------
|
||||
.tab-focus() {
|
||||
// Default
|
||||
outline: thin dotted #333;
|
||||
// Webkit
|
||||
outline: 5px auto -webkit-focus-ring-color;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
// Center-align a block level element
|
||||
// ----------------------------------
|
||||
.center-block() {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
// TYPOGRAPHY
|
||||
// --------------------------------------------------
|
||||
|
||||
// Full-fat vertical rhythm
|
||||
// ------------------------
|
||||
.font-size(@size) {
|
||||
font-size: 0px + @size;
|
||||
font-size: 0rem + @size / @doc-font-size;
|
||||
line-height: 0 + round(@doc-line-height / @size*10000) / 10000;
|
||||
margin-bottom: 0px + @doc-line-height;
|
||||
margin-bottom: 0rem + (@doc-line-height / @doc-font-size);
|
||||
}
|
||||
|
||||
// Just the REMs
|
||||
// -------------
|
||||
.font-rem(@size) {
|
||||
font-size: 0px + @size;
|
||||
font-size: 0rem + @size / @doc-font-size;
|
||||
}
|
||||
|
||||
// Just font-size and line-height
|
||||
// ------------------------------
|
||||
.font(@size) {
|
||||
font-size: 0px + @size;
|
||||
font-size: 0rem + @size / @doc-font-size;
|
||||
line-height: 0 + round(@doc-line-height / @size*10000) / 10000;
|
||||
}
|
||||
|
||||
.text-overflow() {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap; }
|
||||
|
||||
// GRADIENTS
|
||||
// --------------------------------------------------
|
||||
|
||||
.horizontal(@startColor : @white, @endColor : @lightergrey) {
|
||||
background-color: @endColor;
|
||||
background-image : -webkit-gradient(linear, 0 0, 100% 0, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
|
||||
background-image : -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
|
||||
background-image : -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+
|
||||
background-image : -ms-linear-gradient(left, @startColor, @endColor); // IE10
|
||||
background-image : -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
|
||||
background-image : linear-gradient(left, @startColor, @endColor); // W3C
|
||||
background-repeat : repeat-x; }
|
||||
|
||||
.vertical(@startColor : @white, @endColor: @lightergrey) {
|
||||
background-image : -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
|
||||
background-image : -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
|
||||
background-color : @endColor;
|
||||
background-image : -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
|
||||
background-image : -ms-linear-gradient(top, @startColor, @endColor); // IE10
|
||||
background-image : -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
|
||||
background-image : linear-gradient(top, @startColor, @endColor); // W3C
|
||||
background-repeat : repeat-x; }
|
||||
|
||||
.directional(@startColor : @white, @endColor : @lightergrey, @deg : 45deg) {
|
||||
background-color : @endColor;
|
||||
background-image : -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+
|
||||
background-image : -ms-linear-gradient(@deg, @startColor, @endColor); // IE10
|
||||
background-image : -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+
|
||||
background-image : -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10
|
||||
background-image : linear-gradient(@deg, @startColor, @endColor); // W3C
|
||||
background-repeat : repeat-x; }
|
||||
|
||||
// .bordered(COLOR, COLOR, COLOR, COLOR);
|
||||
.bordered(@top-color: #eee, @right-color: #eee, @bottom-color: #eee, @left-color: #eee) {
|
||||
border-top : solid 1px @top-color;
|
||||
border-left : solid 1px @left-color;
|
||||
border-right : solid 1px @right-color;
|
||||
border-bottom : solid 1px @bottom-color; }
|
||||
|
||||
// ROUND CORNERS
|
||||
// --------------------------------------------------
|
||||
|
||||
// .rounded(VALUE);
|
||||
.rounded(@radius:4px) {
|
||||
-webkit-border-radius : @radius;
|
||||
-moz-border-radius : @radius;
|
||||
border-radius : @radius; }
|
||||
|
||||
// .border-radius(VALUE,VALUE,VALUE,VALUE);
|
||||
.border-radius(@topright: 0, @bottomright: 0, @bottomleft: 0, @topleft: 0) {
|
||||
-webkit-border-top-right-radius : @topright;
|
||||
-webkit-border-bottom-right-radius : @bottomright;
|
||||
-webkit-border-bottom-left-radius : @bottomleft;
|
||||
-webkit-border-top-left-radius : @topleft;
|
||||
-moz-border-radius-topright : @topright;
|
||||
-moz-border-radius-bottomright : @bottomright;
|
||||
-moz-border-radius-bottomleft : @bottomleft;
|
||||
-moz-border-radius-topleft : @topleft;
|
||||
border-top-right-radius : @topright;
|
||||
border-bottom-right-radius : @bottomright;
|
||||
border-bottom-left-radius : @bottomleft;
|
||||
border-top-left-radius : @topleft;
|
||||
-webkit-background-clip : padding-box;
|
||||
-moz-background-clip : padding;
|
||||
background-clip : padding-box; }
|
||||
|
||||
// .box-shadow(HORIZONTAL VERTICAL BLUR COLOR))
|
||||
.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
|
||||
-webkit-box-shadow : @shadow;
|
||||
-moz-box-shadow : @shadow;
|
||||
box-shadow : @shadow; }
|
||||
|
||||
// .drop-shadow(HORIZONTAL, VERTICAL, BLUR, ALPHA);
|
||||
.drop-shadow(@x-axis: 0, @y-axis: 1px, @blur: 2px, @alpha: 0.1) {
|
||||
-webkit-box-shadow : @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
|
||||
-moz-box-shadow : @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
|
||||
box-shadow : @x-axis @y-axis @blur rgba(0, 0, 0, @alpha); }
|
||||
|
||||
// .text-shadow();
|
||||
.text-shadow(@shadow: 0 2px 3px rgba(0,0,0,.25)) {
|
||||
text-shadow : @shadow; }
|
||||
|
||||
// .opacity(VALUE);
|
||||
.opacity(@opacity : .5) {
|
||||
-webkit-opacity : @opacity;
|
||||
-moz-opacity : @opacity;
|
||||
opacity : @opacity; }
|
||||
|
||||
// TRANSFORMATIONS
|
||||
// --------------------------------------------------
|
||||
|
||||
// .rotate(VALUEdeg);
|
||||
.rotate(@deg) {
|
||||
-webkit-transform : rotate(@deg);
|
||||
-moz-transform : rotate(@deg);
|
||||
-ms-transform : rotate(@deg);
|
||||
-o-transform : rotate(@deg);
|
||||
transform : rotate(@deg); }
|
||||
|
||||
// .scale(VALUE);
|
||||
.scale(@ratio) {
|
||||
-webkit-transform : scale(@ratio);
|
||||
-moz-transform : scale(@ratio);
|
||||
-ms-transform : scale(@ratio);
|
||||
-o-transform : scale(@ratio);
|
||||
transform : scale(@ratio); }
|
||||
|
||||
// .skew(VALUE, VALUE);
|
||||
.skew(@x: 0, @y: 0) {
|
||||
-webkit-transform : skew(@x, @y);
|
||||
-moz-transform : skew(@x, @y);
|
||||
-ms-transform : skew(@x, @y);
|
||||
-o-transform : skew(@x, @y);
|
||||
transform : skew(@x, @y); }
|
||||
|
||||
// .transition(PROPERTY DURATION DELAY(OPTIONAL) TIMING-FINCTION);
|
||||
.transition(@transition) {
|
||||
-webkit-transition : @transition;
|
||||
-moz-transition : @transition;
|
||||
-ms-transition : @transition;
|
||||
-o-transition : @transition;
|
||||
transition : @transition; }
|
||||
|
||||
// .translate(VALUE, VALUE)
|
||||
.translate(@x: 0, @y: 0) {
|
||||
-webkit-transform : translate(@x, @y);
|
||||
-moz-transform : translate(@x, @y);
|
||||
-ms-transform : translate(@x, @y);
|
||||
-o-transform : translate(@x, @y);
|
||||
transform : translate(@x, @y); }
|
||||
|
||||
.translate3d(@x: 0, @y: 0, @z: 0) {
|
||||
-webkit-transform : translate(@x, @y, @z);
|
||||
-moz-transform : translate(@x, @y, @z);
|
||||
-ms-transform : translate(@x, @y, @z);
|
||||
-o-transform : translate(@x, @y, @z);
|
||||
transform : translate(@x, @y, @z); }
|
||||
|
||||
.animation(@name, @duration: 300ms, @delay: 0, @ease: ease) {
|
||||
-webkit-animation: @name @duration @delay @ease;
|
||||
-moz-animation: @name @duration @delay @ease;
|
||||
-ms-animation: @name @duration @delay @ease;
|
||||
}
|
||||
|
||||
// BACKGROUND
|
||||
// --------------------------------------------------
|
||||
|
||||
// .background-alpha(VALUE VALUE);
|
||||
.background-alpha(@color: @white, @alpha: 1) {
|
||||
background-color : hsla(hue(@color), saturation(@color), lightness(@color), @alpha); }
|
||||
|
||||
// .background-size(VALUE VALUE);
|
||||
.background-size(@size){
|
||||
-webkit-background-size : @size;
|
||||
-moz-background-size : @size;
|
||||
-o-background-size : @size;
|
||||
background-size : @size; }
|
||||
|
||||
// .background-clip(VALUE); (border-box, padding-box, content-box)
|
||||
.background-clip(@clip) {
|
||||
-webkit-background-clip : @clip;
|
||||
-moz-background-clip : @clip;
|
||||
background-clip : @clip; }
|
||||
|
||||
// .box-sizing(VALUE); (border-box, padding-box, content-box)
|
||||
.box-sizing(@boxsize: border-box) {
|
||||
-webkit-box-sizing : @boxsize;
|
||||
-moz-box-sizing : @boxsize;
|
||||
-ms-box-sizing : @boxsize;
|
||||
box-sizing : @boxsize; }
|
||||
|
||||
// For image replacement
|
||||
.hide-text() {
|
||||
text-indent : 100%;
|
||||
white-space : nowrap;
|
||||
overflow : hidden; }
|
||||
|
||||
// Hide from visual and speaking browsers
|
||||
.hidden() {
|
||||
display : none !important;
|
||||
visibility : hidden; }
|
||||
.hidden {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
// Hide but maintain layout
|
||||
.invisible() {
|
||||
visibility : hidden; }
|
||||
|
||||
// .resize(VALUE) (none, both, horizontal, vertical, inherit)
|
||||
.resize(@direction: both) {
|
||||
resize : @direction;
|
||||
overflow : auto; }
|
||||
|
||||
// .userselect(VALUE) (all, element, none, text)
|
||||
.user-select(@select) {
|
||||
-webkit-user-select : @select;
|
||||
-moz-user-select : @select;
|
||||
-o-user-select : @select;
|
||||
user-select : @select; }
|
||||
|
||||
// Hidden but available to speaking browsers
|
||||
.visuallyhidden() {
|
||||
overflow : hidden;
|
||||
position : absolute;
|
||||
clip : rect(0 0 0 0);
|
||||
height : 1px;
|
||||
width : 1px;
|
||||
margin : -1px;
|
||||
padding : 0;
|
||||
border : 0; }
|
||||
|
||||
// Make visuallyhidden focusable with a keyboard
|
||||
.visuallyhidden.focusable:active,
|
||||
.visuallyhidden.focusable:focus {
|
||||
position : static;
|
||||
clip : auto;
|
||||
height : auto;
|
||||
width : auto;
|
||||
margin : 0;
|
||||
overflow: visible; }
|
||||
|
||||
// MEDIA QUERIES
|
||||
// --------------------------------------------------
|
||||
|
||||
@small: ~"only screen and (min-width: 30em)";
|
||||
@medium: ~"only screen and (min-width: 48em)";
|
||||
@large: ~"only screen and (min-width: 62.5em)";
|
||||
@highdensity: ~"only screen and (-webkit-min-device-pixel-ratio: 1.5)",
|
||||
~"only screen and (-o-min-device-pixel-ratio: 3/2)",
|
||||
~"only screen and (min-resolution: 144dpi)",
|
||||
~"only screen and (min-resolution: 1.5dppx)";
|
||||
357
assets/less/page.less
Normal file
357
assets/less/page.less
Normal file
@ -0,0 +1,357 @@
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
background-color: @body-color;
|
||||
}
|
||||
|
||||
// Main
|
||||
// --------------------------------------------------
|
||||
.entry,
|
||||
.hentry {
|
||||
.clearfix();
|
||||
}
|
||||
.entry-content {
|
||||
.font-size(16);
|
||||
// Dotted line underlines for links
|
||||
p > a,
|
||||
li > a {
|
||||
border-bottom: 1px dotted lighten(@link-color, 50);
|
||||
&:hover {
|
||||
border-bottom-style: solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Entry Header
|
||||
// --------------------------------------------------
|
||||
.entry-header {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.header-title {
|
||||
text-align: center;
|
||||
margin: 30px 0 0;
|
||||
padding: 0 20px;
|
||||
h1 {
|
||||
margin: 10px 20px;
|
||||
font-weight: 700;
|
||||
.font-rem(28);
|
||||
color: lighten(@base-color,20);
|
||||
@media @medium {
|
||||
.font-rem(48);
|
||||
}
|
||||
@media @large {
|
||||
.font-rem(80);
|
||||
}
|
||||
}
|
||||
h2 {
|
||||
margin: 0;
|
||||
.font-rem(18);
|
||||
text-transform: uppercase;
|
||||
color: lighten(@base-color,40);
|
||||
@media @medium {
|
||||
.font-rem(32);
|
||||
}
|
||||
}
|
||||
}
|
||||
.feature .header-title {
|
||||
@media @medium {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
display: table;
|
||||
margin-top: 0;
|
||||
width: 100%;
|
||||
height: 440px;
|
||||
overflow: hidden;
|
||||
.header-title-wrap {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
h1 {
|
||||
margin: 10px 60px;
|
||||
font-weight: 700;
|
||||
@media @medium {
|
||||
color: @white;
|
||||
.font-rem(60);
|
||||
text-shadow: 1px 1px 4px fade(@base-color,60);
|
||||
a {
|
||||
color: @white;
|
||||
}
|
||||
}
|
||||
@media @large {
|
||||
.font-rem(100);
|
||||
}
|
||||
}
|
||||
h2 {
|
||||
margin: 0;
|
||||
.font-rem(18);
|
||||
text-transform: uppercase;
|
||||
@media @medium {
|
||||
.font-rem(30);
|
||||
color: @white;
|
||||
a {
|
||||
color: @white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.entry-image {
|
||||
position: relative;
|
||||
width: auto;
|
||||
height: 100%;
|
||||
max-height: 440px;
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: fade(@base-color,30);
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.image-credit {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
padding: 10px 15px;
|
||||
color: @white;
|
||||
background-color: fade(@base-color,50);
|
||||
.font-rem(12);
|
||||
text-align: right;
|
||||
.border-radius(3px,0,0,3px);
|
||||
z-index: 10;
|
||||
a {
|
||||
color: @white;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Single Post and Page
|
||||
// --------------------------------------------------
|
||||
.entry-meta {
|
||||
.font-rem(12);
|
||||
text-transform: uppercase;
|
||||
color: lighten(@base-color,60);
|
||||
a {
|
||||
color: lighten(@base-color,60);
|
||||
}
|
||||
.vcard {
|
||||
&:before {
|
||||
content: " by ";
|
||||
}
|
||||
}
|
||||
.tag {
|
||||
display: inline-block;
|
||||
margin: 4px;
|
||||
padding: 2px 6px;
|
||||
background-color: lighten(@base-color,60);
|
||||
color: @white;
|
||||
.rounded(3px);
|
||||
color: @white;
|
||||
span {
|
||||
vertical-align: super;
|
||||
.font-rem(10);
|
||||
}
|
||||
&:hover {
|
||||
background-color: lighten(@base-color,50);
|
||||
}
|
||||
&:active {
|
||||
.translate(0, 1px);
|
||||
.box-shadow(0 0 1px fade(@base-color, 20));
|
||||
}
|
||||
}
|
||||
}
|
||||
#post,
|
||||
#page {
|
||||
.entry-content {
|
||||
margin: 40px 10px 20px 10px;
|
||||
padding: 20px 30px;
|
||||
background-color: @white;
|
||||
box-shadow: 0 0 0 1px fade(@border-color,10), 0 6px 12px fade(@black,10);
|
||||
.rounded(3px);
|
||||
|
||||
@media @large {
|
||||
max-width: 800px;
|
||||
padding: 50px 80px;
|
||||
margin: 50px auto 30px auto;
|
||||
> p:first-child {
|
||||
.font-size(20);
|
||||
}
|
||||
}
|
||||
}
|
||||
#disqus_thread {
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
margin-bottom: 20px;
|
||||
padding: 25px 40px;
|
||||
background-color: @white;
|
||||
box-shadow: 0 0 0 1px fade(@border-color,10), 0 6px 12px fade(@black,10);
|
||||
.rounded(3px);
|
||||
@media @large {
|
||||
max-width: 800px;
|
||||
padding: 50px 80px;
|
||||
margin: 0 auto 30px auto;
|
||||
}
|
||||
}
|
||||
.entry-meta {
|
||||
margin: 50px 30px 30px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.entry-tags {
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
// Post Pagination Module
|
||||
.pagination {
|
||||
margin: 20px 10px;
|
||||
text-align: center;
|
||||
ul {
|
||||
display: inline;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
li {
|
||||
padding-left: 4px;
|
||||
padding-right: 4px;
|
||||
}
|
||||
.current-page {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
// Read More Module
|
||||
.read-more {
|
||||
position: relative;
|
||||
margin: 50px 10px 20px 10px;
|
||||
padding: 50px 40px 25px;
|
||||
background-color: @white;
|
||||
box-shadow: 0 0 0 1px fade(@border-color,10), 0 6px 12px fade(@black,10);
|
||||
.rounded(3px);
|
||||
@media @large {
|
||||
max-width: 800px;
|
||||
padding: 50px 80px;
|
||||
margin: 60px auto;
|
||||
}
|
||||
text-align: center;
|
||||
.clearfix();
|
||||
}
|
||||
.read-more-header {
|
||||
position: absolute;
|
||||
top: -20px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 35px;
|
||||
a {
|
||||
.btn();
|
||||
}
|
||||
}
|
||||
.read-more-content {
|
||||
.font-size(16);
|
||||
// Dotted line underlines for links
|
||||
p > a,
|
||||
li > a {
|
||||
border-bottom: 1px dotted lighten(@link-color, 50);
|
||||
&:hover {
|
||||
border-bottom-style: solid;
|
||||
}
|
||||
}
|
||||
h3 {
|
||||
margin: 0;
|
||||
.font-rem(28);
|
||||
a {
|
||||
color: @primary;
|
||||
}
|
||||
@media @medium {
|
||||
.font-rem(36);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Post Index
|
||||
// --------------------------------------------------
|
||||
#post-index {
|
||||
#main {
|
||||
margin-top: 40px;
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
@media @large {
|
||||
max-width: 800px;
|
||||
margin-top: 50px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
article {
|
||||
background-color: @white;
|
||||
box-shadow: 0 0 0 1px fade(@base-color,10), 0 6px 12px fade(@base-color,10);
|
||||
.rounded(3px);
|
||||
margin-bottom: 20px;
|
||||
padding: 25px 40px;
|
||||
@media @large {
|
||||
margin-bottom: 30px;
|
||||
padding: 50px 80px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Footer
|
||||
// --------------------------------------------------
|
||||
.footer-wrapper {
|
||||
.clearfix();
|
||||
margin: 2em auto;
|
||||
text-align: center;
|
||||
color: lighten(@text-color,20);
|
||||
a {
|
||||
color: lighten(@text-color,20);
|
||||
}
|
||||
}
|
||||
|
||||
// Social Icons
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
// Browser Upgrade
|
||||
// --------------------------------------------------
|
||||
.upgrade {
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// Google Search
|
||||
// --------------------------------------------------
|
||||
#goog-fixurl {
|
||||
ul {
|
||||
list-style: none;
|
||||
margin-left: 0;
|
||||
padding-left: 0;
|
||||
li {
|
||||
list-style-type: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
#goog-wm-qt {
|
||||
width: auto;
|
||||
margin-right: 10px;
|
||||
margin-bottom: 20px;
|
||||
padding: 8px 20px;
|
||||
display: inline-block;
|
||||
.font-rem(14);
|
||||
background-color: @white;
|
||||
color: @primary;
|
||||
border-width: 2px !important;
|
||||
border-style: solid !important;
|
||||
border-color: lighten(@primary,50);
|
||||
.rounded(3px);
|
||||
}
|
||||
#goog-wm-sb {
|
||||
.btn();
|
||||
}
|
||||
73
assets/less/pygments.less
Normal file
73
assets/less/pygments.less
Normal file
@ -0,0 +1,73 @@
|
||||
.highlight {
|
||||
margin-bottom: 1.5em;
|
||||
.font(12);
|
||||
color: #d0d0d0;
|
||||
border: 1px solid darken(@body-color, 5);
|
||||
background-color: #272822;
|
||||
.rounded(3px);
|
||||
pre {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 1em;
|
||||
}
|
||||
.lineno { padding-right: 24px; color: #8f908a;}
|
||||
.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 */
|
||||
}
|
||||
207
assets/less/reset.less
Normal file
207
assets/less/reset.less
Normal file
@ -0,0 +1,207 @@
|
||||
//
|
||||
// Reset CSS
|
||||
// Adapted from http://github.com/necolas/normalize.css
|
||||
// --------------------------------------------------
|
||||
|
||||
*, *:after, *:before {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
// Display in IE6-9 and FF3
|
||||
// -------------------------
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
nav,
|
||||
section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Display block in IE6-9 and FF3
|
||||
// -------------------------
|
||||
audio,
|
||||
canvas,
|
||||
video {
|
||||
display: inline-block;
|
||||
*display: inline;
|
||||
*zoom: 1;
|
||||
}
|
||||
|
||||
// Prevents modern browsers from displaying 'audio' without controls
|
||||
// -------------------------
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Base settings
|
||||
// -------------------------
|
||||
html {
|
||||
font-size: 100%;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-ms-text-size-adjust: 100%;
|
||||
}
|
||||
// Focus states
|
||||
a:focus {
|
||||
.tab-focus();
|
||||
}
|
||||
// Hover & Active
|
||||
a:hover,
|
||||
a:active {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
// Prevents sub and sup affecting line-height in all browsers
|
||||
// -------------------------
|
||||
sub,
|
||||
sup {
|
||||
position: relative;
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
// Blockquote
|
||||
// -------------------------
|
||||
blockquote {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// Img border in a's and image quality
|
||||
// -------------------------
|
||||
img {
|
||||
/* Responsive images (ensure images don't scale beyond their parents) */
|
||||
max-width: 100%; /* Part 1: Set a maxium relative to the parent */
|
||||
width: auto\9; /* IE7-8 need help adjusting responsive images */
|
||||
height: auto; /* Part 2: Scale the height according to the width, otherwise you get stretching */
|
||||
|
||||
vertical-align: middle;
|
||||
border: 0;
|
||||
-ms-interpolation-mode: bicubic;
|
||||
}
|
||||
|
||||
// Prevent max-width from affecting Google Maps
|
||||
#map_canvas img,
|
||||
.google-maps img {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
// Forms
|
||||
// -------------------------
|
||||
// Font size in all browsers, margin changes, misc consistency
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
margin: 0;
|
||||
font-size: 100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
button,
|
||||
input {
|
||||
*overflow: visible; // Inner spacing ie IE6/7
|
||||
line-height: normal; // FF3/4 have !important on line-height in UA stylesheet
|
||||
}
|
||||
button::-moz-focus-inner,
|
||||
input::-moz-focus-inner { // Inner padding and border oddities in FF3/4
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
button,
|
||||
html input[type="button"], // Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` and `video` controls.
|
||||
input[type="reset"],
|
||||
input[type="submit"] {
|
||||
-webkit-appearance: button; // Corrects inability to style clickable `input` types in iOS.
|
||||
cursor: pointer; // Improves usability and consistency of cursor style between image-type `input` and others.
|
||||
}
|
||||
label,
|
||||
select,
|
||||
button,
|
||||
input[type="button"],
|
||||
input[type="reset"],
|
||||
input[type="submit"],
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
cursor: pointer; // Improves usability and consistency of cursor style between image-type `input` and others.
|
||||
}
|
||||
input[type="search"] { // Appearance in Safari/Chrome
|
||||
.box-sizing(content-box);
|
||||
-webkit-appearance: textfield;
|
||||
}
|
||||
input[type="search"]::-webkit-search-decoration,
|
||||
input[type="search"]::-webkit-search-cancel-button {
|
||||
-webkit-appearance: none; // Inner-padding issues in Chrome OSX, Safari 5
|
||||
}
|
||||
textarea {
|
||||
overflow: auto; // Remove vertical scrollbar in IE6-9
|
||||
vertical-align: top; // Readability and alignment cross-browser
|
||||
}
|
||||
|
||||
// Printing
|
||||
// -------------------------
|
||||
// Source: https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css
|
||||
@media print {
|
||||
|
||||
* {
|
||||
text-shadow: none !important;
|
||||
color: #000 !important; // Black prints faster: h5bp.com/s
|
||||
background: transparent !important;
|
||||
box-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;
|
||||
}
|
||||
}
|
||||
50
assets/less/site.less
Normal file
50
assets/less/site.less
Normal file
@ -0,0 +1,50 @@
|
||||
// Selection
|
||||
// --------------------------------------------------
|
||||
::-moz-selection {
|
||||
background-color: lighten(@base-color, 65%);
|
||||
color: @base-color;
|
||||
text-shadow: none;
|
||||
}
|
||||
::selection {
|
||||
background-color: lighten(@base-color, 65%);
|
||||
color: @base-color;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
// Global Classes
|
||||
// --------------------------------------------------
|
||||
.wrap {
|
||||
margin: 0 auto;
|
||||
}
|
||||
.all-caps {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.pull-left {
|
||||
float: left;
|
||||
}
|
||||
.pull-right {
|
||||
float:right;
|
||||
}
|
||||
.unstyled-list {
|
||||
list-style: none;
|
||||
margin-left: 0;
|
||||
padding-left: 0;
|
||||
li {
|
||||
list-style-type: none;
|
||||
}
|
||||
}
|
||||
.inline-list {
|
||||
list-style: none;
|
||||
margin-left: 0;
|
||||
padding-left: 0;
|
||||
li {
|
||||
list-style-type: none;
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
// Global Transition
|
||||
// ---------------------------------------------------
|
||||
b, i, strong, em, blockquote, p, q, span, figure, img, h1, h2, header, input, a {
|
||||
.transition(all .2s ease);
|
||||
}
|
||||
132
assets/less/typography.less
Normal file
132
assets/less/typography.less
Normal file
@ -0,0 +1,132 @@
|
||||
// Body
|
||||
// --------------------------------------------------
|
||||
body {
|
||||
font-family: @base-font;
|
||||
color: @text-color;
|
||||
}
|
||||
|
||||
// Headings
|
||||
// --------------------------------------------------
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: @heading-font;
|
||||
}
|
||||
h1 {
|
||||
.font-rem(32);
|
||||
}
|
||||
|
||||
// Links
|
||||
// --------------------------------------------------
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: @link-color;
|
||||
&:visited {
|
||||
color: lighten(@link-color, 20);
|
||||
}
|
||||
&:hover {
|
||||
color: darken(@link-color, 20);
|
||||
}
|
||||
&:focus {
|
||||
outline: thin dotted;
|
||||
color: darken(@link-color, 20);
|
||||
}
|
||||
&:hover,
|
||||
&:active {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.link-arrow {
|
||||
font-weight: 100;
|
||||
text-decoration: underline;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
// Figures
|
||||
// --------------------------------------------------
|
||||
figcaption {
|
||||
padding-top: 10px;
|
||||
.font(14);
|
||||
line-height: 1.3;
|
||||
color: lighten(@text-color, 10);
|
||||
}
|
||||
|
||||
// Feature Image Caption
|
||||
// --------------------------------------------------
|
||||
.image-credit {
|
||||
margin: 0 auto;
|
||||
max-width: 440px;
|
||||
padding-top: 5px;
|
||||
padding-right: 20px;
|
||||
padding-left: 20px;
|
||||
text-align: right;
|
||||
.font(14);
|
||||
line-height: 1.3;
|
||||
color: lighten(@text-color, 30);
|
||||
.clearfix();
|
||||
@media @medium {
|
||||
max-width: 760px;
|
||||
padding-right: 60px;
|
||||
padding-left: 60px;
|
||||
}
|
||||
@media @large {
|
||||
max-width: 960px;
|
||||
}
|
||||
a {
|
||||
color: lighten(@text-color, 30);
|
||||
}
|
||||
}
|
||||
|
||||
// Note text
|
||||
// --------------------------------------------------
|
||||
.notice {
|
||||
margin-top: 1.5em;
|
||||
padding: .5em 1em;
|
||||
text-indent: 0;
|
||||
.font-rem(14);
|
||||
background-color: @body-color;
|
||||
border: 1px solid darken(@body-color,20);
|
||||
.rounded(3px);
|
||||
}
|
||||
|
||||
// Blockquotes
|
||||
// --------------------------------------------------
|
||||
blockquote {
|
||||
margin-left: -28px;
|
||||
padding-left: 20px;
|
||||
border-left: 8px solid @border-color;
|
||||
font-family: @alt-font;
|
||||
font-style: italic;
|
||||
.font-rem(24);
|
||||
}
|
||||
|
||||
// Footnotes
|
||||
// --------------------------------------------------
|
||||
.entry-content .footnotes {
|
||||
ol, li, p {
|
||||
.font-size(14);
|
||||
}
|
||||
}
|
||||
|
||||
// Code
|
||||
// --------------------------------------------------
|
||||
tt, code, kbd, samp, pre {
|
||||
font-family: @code-font;
|
||||
}
|
||||
p,
|
||||
li {
|
||||
code {
|
||||
.font-rem(12);
|
||||
line-height: 1.5;
|
||||
white-space: nowrap;
|
||||
margin: 0 2px;
|
||||
padding: 0 5px;
|
||||
border: 1px solid lighten(@black, 90);
|
||||
background-color: lighten(@black, 95);
|
||||
.rounded(3px);
|
||||
}
|
||||
}
|
||||
pre {
|
||||
.font-rem(12);
|
||||
line-height: 1.5;
|
||||
overflow-x: auto;
|
||||
}
|
||||
35
assets/less/variables.less
Normal file
35
assets/less/variables.less
Normal file
@ -0,0 +1,35 @@
|
||||
// Typography
|
||||
// --------------------------------------------------
|
||||
|
||||
@base-font: 'Lato', Calibri, Arial, sans-serif;
|
||||
@heading-font: @base-font;
|
||||
@caption-font: @base-font;
|
||||
@code-font: monospace;
|
||||
@alt-font: serif;
|
||||
|
||||
@doc-font-size: 16;
|
||||
@doc-line-height: 26;
|
||||
|
||||
|
||||
// set-up the body font-size / line-height
|
||||
body {
|
||||
margin-top: 0px + @doc-line-height;
|
||||
font-size: 0px + @doc-font-size;
|
||||
}
|
||||
|
||||
// Colors
|
||||
// --------------------------------------------------
|
||||
@base-color : #222;
|
||||
@body-color : #e8e8e8;
|
||||
@text-color : #222;
|
||||
@comp-color : spin(@base-color, 180);
|
||||
@border-color : lighten(@base-color,60);
|
||||
@white : #fff;
|
||||
@black : #000;
|
||||
@link-color : #222;
|
||||
|
||||
@primary : @base-color;
|
||||
@success : #5cb85c;
|
||||
@warning : #dd8338;
|
||||
@danger : #C64537;
|
||||
@info : #308cbc;
|
||||
Reference in New Issue
Block a user