mirror of https://github.com/lukechilds/docs.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
470 lines
11 KiB
470 lines
11 KiB
|
|
|
|
@mixin hook-heading-hero(){
|
|
font-weight: bold;
|
|
}
|
|
|
|
@mixin hook-navbar(){
|
|
font-weight: 500;
|
|
.uk-drop {
|
|
width: 360px;
|
|
}
|
|
.uk-search-navbar .uk-search-input {
|
|
height: 50px;
|
|
font-size: 1.0625rem;
|
|
padding-left: 1.1875rem;
|
|
background: #fff;
|
|
}
|
|
}
|
|
@mixin hook-button(){
|
|
border-radius: 5px;
|
|
}
|
|
|
|
// Doc navigation
|
|
$docs-sidebar-width: 260px;
|
|
$docs-sidebar-width-l: 360px;
|
|
.sidebar-fixed-width {
|
|
width: $docs-sidebar-width;
|
|
}
|
|
.sidebar-docs {
|
|
width: $docs-sidebar-width - $global-medium-gutter;
|
|
padding-right: $global-medium-gutter;
|
|
top: 112px;
|
|
bottom: 70px;
|
|
overflow-y: scroll;
|
|
overflow-x: hidden;
|
|
> h5 {
|
|
margin: 15px 0 0;
|
|
&:first-child {
|
|
margin-top: 17px
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (min-width: $breakpoint-large) {
|
|
.sidebar-fixed-width {
|
|
width: $docs-sidebar-width-l;
|
|
}
|
|
.sidebar-docs {
|
|
width: $docs-sidebar-width-l - $global-large-gutter;
|
|
padding-right: $global-large-gutter;
|
|
}
|
|
}
|
|
ul.doc-nav {
|
|
padding-left: 14px;
|
|
margin-top: 5px;
|
|
}
|
|
.doc-nav > li.uk-active > a {
|
|
position: relative;
|
|
&:before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 15px;
|
|
left: -14px;
|
|
width: 7px;
|
|
border-top: 1px solid $global-primary-background;
|
|
}
|
|
}
|
|
|
|
// Home page hero
|
|
.hero-image img {
|
|
max-width: 200px;
|
|
max-height: 75px;
|
|
}
|
|
.button-cta:nth-child(2n), .button-cta:nth-child(3n) {
|
|
margin-top: $global-margin;
|
|
}
|
|
.heading-hero-2 {
|
|
font-size: 1.875rem
|
|
}
|
|
@media (min-width: $breakpoint-small) {
|
|
.heading-hero-2 {
|
|
// font-size: 2.375rem;
|
|
font-size: 1.375rem;
|
|
}
|
|
}
|
|
@media (min-width: $breakpoint-medium) {
|
|
.heading-hero-2 {
|
|
// font-size: 2.75rem;
|
|
font-size: 1.75rem;
|
|
}
|
|
}
|
|
@mixin hook-card-title(){
|
|
font-size: 1.125rem;
|
|
}
|
|
|
|
|
|
|
|
.list-featured>li:first-child {
|
|
margin-top: $list-large-margin-top;
|
|
}
|
|
|
|
|
|
@mixin hook-base-body(){
|
|
//filter: blur(7px);
|
|
-moz-osx-font-smoothing: grayscale;
|
|
-webkit-font-smoothing: antialiased;
|
|
|
|
}
|
|
@mixin hook-base-misc(){
|
|
input[type="submit" i]{
|
|
-webkit-appearance:none;
|
|
}
|
|
}
|
|
@mixin hook-card(){
|
|
border: solid 1px lighten($global-border, 10%);
|
|
&:hover {
|
|
border-color: darken($global-border, 10%);
|
|
}
|
|
}
|
|
@mixin hook-card-body(){
|
|
> p {
|
|
font-size: $global-small-font-size;
|
|
}
|
|
> span {
|
|
color: $global-primary-background;
|
|
}
|
|
}
|
|
|
|
@mixin hook-card-misc(){
|
|
.uk-position-cover {
|
|
z-index: 1;
|
|
}
|
|
.card-category {
|
|
h3:nth-child(2n) {
|
|
margin-top: 0 !important;
|
|
}
|
|
}
|
|
.card-post {
|
|
.uk-card-header{
|
|
padding-top: $global-medium-margin;
|
|
padding-bottom: 0;
|
|
}
|
|
.uk-card-body{
|
|
padding-top: $global-medium-margin / 2;
|
|
padding-bottom: $global-medium-margin / 2;
|
|
}
|
|
.uk-card-footer{
|
|
padding-bottom: $global-medium-margin * 0.8;
|
|
padding-top: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin hook-form(){
|
|
border: solid 1px $global-border;
|
|
}
|
|
|
|
@mixin hook-offcanvas-bar(){
|
|
font-weight: 500;
|
|
}
|
|
|
|
@mixin hook-list-misc(){
|
|
.uk-list {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
@mixin hook-article(){
|
|
.share {
|
|
}
|
|
figure, .uk-slideshow {
|
|
margin-top: $global-medium-margin * 1.1;
|
|
margin-bottom: $global-medium-margin * 1.5;
|
|
}
|
|
figure {
|
|
img + div .uk-overlay-icon {
|
|
color: rgba(255, 255, 255, 0);
|
|
}
|
|
img:hover + div .uk-overlay-icon {
|
|
color: rgba(255, 255, 255, 1);
|
|
}
|
|
figcaption {
|
|
margin-left: 0;
|
|
span {
|
|
padding-right: 20px;
|
|
margin-bottom: -43px;
|
|
margin-top: 20px;
|
|
border-right: solid 2px $global-muted-color;
|
|
font-style: italic;
|
|
font-size: 0.8rem;
|
|
line-height: 1.8;
|
|
}
|
|
}
|
|
}
|
|
blockquote {
|
|
border-left: solid 2px $global-muted-color;
|
|
padding-left: $base-margin-vertical;
|
|
line-height: 1.7;
|
|
margin-top: $global-medium-margin;
|
|
margin-bottom: $global-medium-margin;
|
|
}
|
|
.highlight,
|
|
.highlighter-rouge {
|
|
margin-top: $global-medium-margin;
|
|
margin-bottom: $global-medium-margin;
|
|
}
|
|
}
|
|
@mixin hook-article-title(){
|
|
margin-bottom: $global-margin;
|
|
}
|
|
@mixin hook-article-meta(){
|
|
a {
|
|
color: $article-meta-color;
|
|
&:hover {
|
|
color: $global-primary-background;
|
|
}
|
|
}
|
|
.avatar {
|
|
margin-right: 10px;
|
|
float: left;
|
|
}
|
|
}
|
|
@mixin hook-article-misc(){
|
|
.article-content {
|
|
line-height: 1.8;
|
|
}
|
|
.avatar {
|
|
border-radius: 50%;
|
|
}
|
|
.paginate-post .uk-text-small {
|
|
line-height: 1.75;
|
|
}
|
|
}
|
|
|
|
//
|
|
// Utility
|
|
//
|
|
// ========================================================================
|
|
@mixin hook-utility-misc(){
|
|
.remove-underline, .remove-underline:hover{
|
|
text-decoration: none;
|
|
}
|
|
.link-dark {
|
|
color: $color-main !important;
|
|
}
|
|
.uk-container.uk-container-xsmall {
|
|
max-width: 700px;
|
|
}
|
|
.hvr-forward {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
-webkit-transform: perspective(1px) translateZ(0);
|
|
transform: perspective(1px) translateZ(0);
|
|
box-shadow: 0 0 1px transparent;
|
|
-webkit-transition-duration: 0.3s;
|
|
transition-duration: 0.3s;
|
|
-webkit-transition-property: transform;
|
|
transition-property: transform;
|
|
}
|
|
.hvr-forward:active,
|
|
.hvr-forward:focus,
|
|
.hvr-forward:hover {
|
|
-webkit-transform: translateX(6px);
|
|
transform: translateX(6px);
|
|
}
|
|
.hvr-back {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
-webkit-transform: perspective(1px) translateZ(0);
|
|
transform: perspective(1px) translateZ(0);
|
|
box-shadow: 0 0 1px transparent;
|
|
-webkit-transition-duration: 0.3s;
|
|
transition-duration: 0.3s;
|
|
-webkit-transition-property: transform;
|
|
transition-property: transform;
|
|
}
|
|
.hvr-back:hover,
|
|
.hvr-back:focus,
|
|
.hvr-back:active {
|
|
-webkit-transform: translateX(-6px);
|
|
transform: translateX(-6px);
|
|
}
|
|
.social-networks {
|
|
margin-top: $global-large-margin;
|
|
}
|
|
header {
|
|
.uk-logo {
|
|
color: $global-primary-background;
|
|
&:hover {
|
|
color: $global-primary-background;
|
|
}
|
|
}
|
|
}
|
|
.section-title {
|
|
margin-bottom: $global-medium-margin;
|
|
~ .section-title {
|
|
margin-top: $global-medium-margin;
|
|
}
|
|
}
|
|
@media (min-width: $breakpoint-medium) {
|
|
.section-title {
|
|
~ .section-title {
|
|
margin-top: $global-large-margin;
|
|
}
|
|
}
|
|
}
|
|
.section-hero {
|
|
.searchBox {
|
|
max-width: 550px;
|
|
margin: 60px auto 0 auto;
|
|
.uk-search-input {
|
|
height: 50px;
|
|
border-radius: 50px;
|
|
color: $global-muted-color;
|
|
font-style: normal;
|
|
&:focus {
|
|
background: #ffffff;
|
|
}
|
|
}
|
|
.uk-search-icon {
|
|
width: 50px;
|
|
color: $global-muted-color;
|
|
}
|
|
|
|
}
|
|
}
|
|
footer {
|
|
.uk-subnav>.uk-active>a {
|
|
color: $global-muted-color;
|
|
}
|
|
}
|
|
#markdown-toc {
|
|
padding: 0 0 0 $global-margin;
|
|
border-left: solid 2px $global-muted-color;
|
|
list-style: none;
|
|
margin-bottom: $global-medium-margin;
|
|
> li > :last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
ul {
|
|
margin: 0;
|
|
padding-left: $global-margin;
|
|
list-style: none;
|
|
}
|
|
>li:nth-child(n+2), >li>ul {
|
|
margin-top: 5px;
|
|
}
|
|
a {
|
|
color: $global-muted-color;
|
|
}
|
|
|
|
}
|
|
.uk-article-content .no_toc {
|
|
margin-top: $global-medium-margin;
|
|
margin-bottom: $global-medium-margin;
|
|
}
|
|
#searchBox-results, #searchBox-results {
|
|
margin: 10px 0 0 0;
|
|
z-index: 1;
|
|
li {
|
|
margin: 0;
|
|
padding: 20px 25px 0;
|
|
background: #fff;
|
|
line-height: 1.4;
|
|
border-left: solid 1px $global-border;
|
|
border-right: solid 1px $global-border;
|
|
&:first-child {
|
|
border-top-left-radius: 5px;
|
|
border-top-right-radius: 5px;
|
|
border-top: solid 1px $global-border;
|
|
}
|
|
&:last-child {
|
|
border-bottom-left-radius: 5px;
|
|
border-bottom-right-radius: 5px;
|
|
padding-bottom: 25px;
|
|
border-bottom: solid 1px $global-border;
|
|
}
|
|
a:hover {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
|
|
$tm-timeline-border-width: 4px;
|
|
$tm-timeline-dot-diameter: 20px;
|
|
|
|
@media (min-width: $breakpoint-small) {
|
|
.tm-timeline {
|
|
box-sizing: border-box;
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
position: relative;
|
|
|
|
&:before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: calc(30% - 2px);
|
|
bottom: 0;
|
|
width: $tm-timeline-border-width;
|
|
background: $color-main;
|
|
}
|
|
|
|
&:after {
|
|
content: "";
|
|
display: table;
|
|
clear: both;
|
|
}
|
|
}
|
|
|
|
.tm-timeline-entry {
|
|
+ .tm-timeline-entry{
|
|
margin-top: $global-large-margin;
|
|
}
|
|
clear: both;
|
|
text-align: left;
|
|
position: relative;
|
|
|
|
&:after {
|
|
display: block;
|
|
content: "";
|
|
clear: both;
|
|
}
|
|
|
|
.tm-timeline-time {
|
|
float: left;
|
|
width: 30%;
|
|
padding-right: $global-large-margin;
|
|
text-align: right;
|
|
position: relative;
|
|
|
|
&:before {
|
|
content: '';
|
|
position: absolute;
|
|
width: $tm-timeline-dot-diameter;
|
|
height: $tm-timeline-dot-diameter;
|
|
border: $tm-timeline-border-width solid $color-main;
|
|
background-color: #fff;
|
|
border-radius: 100%;
|
|
top: 0;
|
|
right: - 14px;
|
|
z-index: 99;
|
|
}
|
|
|
|
h5 {
|
|
margin: 3px 0 0;
|
|
}
|
|
}
|
|
|
|
.tm-timeline-body {
|
|
float: right;
|
|
width: 70%;
|
|
padding-left: $global-large-margin;
|
|
margin-top: -2px;
|
|
h3 {
|
|
margin: 0 0 15px;
|
|
span {
|
|
font-size: .7rem;
|
|
margin-bottom: 4px;
|
|
padding: 0 5px;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
|