fix some shortcuts css

1 files changed, 509 insertions, 502 deletions

diff --git a/assets/sass/main.scss b/assets/sass/main.scss
index 3b52b44..1560dc1 100644
--- a/assets/sass/main.scss
+++ b/assets/sass/main.scss
@@ -1,502 +1,509 @@
-{{if .Site.Params.color_main}}

-$color_main : {{ .Site.Params.color_main  }}  ;

-{{else}}

-$color_main : hsl(random(360)-1, random(100)-1%, random(100)-1%);

-{{end}}

-

-{{if .Site.Params.color_second}}

-$color_second : {{ .Site.Params.color_second  }}  ;

-{{else}}

-$color_second : saturate($color_main, 0%);  

-{{end}}

-

-$c_light1 : lighten($color_main, 15%);  

-$c_light2 : lighten($color_main, 45%);  

-$c_light3 : lighten($color_main, 50%);  

-$c_light4 : lighten($color_main, 80%);  

-

-

-$c_dark1 : darken($color_main, 15%);  

-$c_dark2 : darken($color_main, 25%);  

-$c_dark3 : darken($color_main, 45%);  

-$c_dark4 : darken($color_main, 50%);  

-

-

-

-$c_saturate1 : $color_second;  

-$c_saturate2 : saturate($color_second, 30%);  

-$c_saturate3 : saturate($color_second, 40%);  

-$c_saturate4 : saturate($color_second, 50%);  

-$c_saturate5 : saturate($color_second, 60%);  

-$c_saturate6 : saturate($color_second, 75%);  

-$c_saturate7 : saturate($color_second, 90%);  

-  

-body:not(.render_raw){

-	font-family:"Montserrat",sans-serif;

-

-

-    font-weight: 400;

-    line-height: 1.5;

-    color: $c_dark3;

-    

-    a{

-        color: $c_dark4;

-        text-decoration: none;

-        background-color: transparent;

-    }

-    

-

-    header {

-        background-color: $c_dark2;    

-

-        border-bottom: 2px solid gray ;

-        box-shadow: 0 0 0.2rem rgba(0,0,0,.1), 0 0.2rem 0.4rem rgba(0,0,0,.2);

-        

-        justify-content: space-between;

-        align-items: stretch ;

-

-        color:($c_light2);

-        a {

-            color:invert($c_dark2);

-        }

-        > div {

-            display: flex; 

-            flex-direction: row;

-            flex-wrap: nowrap;

-            justify-content: space-between;

-            align-items: stretch ;

-

-            white-space: nowrap;

-            

-

-            img {

-                height: 32px;

-                margin-right: 0.5rem;

-            }

-            .burger {

-                margin-right: 1rem; 

-            }

-

-        }

-

-

-

-

-        nav.shortcuts {

-            margin-left: auto;

-            position: relative;

-

-            display: flex;

-            justify-content: flex-start;

-            list-style-type: none;

-            flex-direction: row;

-            flex-wrap: nowrap;

-

-            li {

-

-                margin: 0px;

-                .fa {

-                    font-size: 1.5rem;

-                    margin-right: 0.5rem

-                }

-

-                a {

-                    color:lighten(invert($c_dark2),4%);

-                    padding: 0 1rem;

-                    font-weight: bold;

-                    font-size: 90%;

-                }

-            }

-        }

-    

-

-    }

-

-

-    article {

-        background-color: $c_light4 ;

-        aside {

-            #close_menu{

-                display: none;

-                float:right;

-                margin-right: 2rem;

-            }

-

-            &.responsive{

-                #close_menu{

-                    display: block;

-                }

-            }

-        }

-

-        section.right-menu {

-            padding: 3.5rem 0 3.5rem 0;

-            font-size:14px;

-            line-height:20px;

-            padding-left:2px;

-

-            .TableOfContents {

-                

-                > *{

-                    margin-left:5px;

-                }

-                label{

-                    font-weight:700;

-                    letter-spacing: -1px;

-                    display: block;

-                    margin-bottom: 14px;

-                    border-bottom: 1px dotted $c_light1;

-                    color:$c_dark2;

-                    font-variant: small-caps;

-                }  

-                nav>ul{

-                    padding: 0px 0px 0px 0px;

-                    margin:  0px 0px 0px 0px;

-                    ul{

-                        padding: 0px 0px 0px 14px;

-                        margin:  0px 0px 0px 0px;

-                        border-left: 1px solid $c_light2;

-                        li{

-                            font-size: 90%;

-                        }

-                    }

-                }

-

-                ul{

-                    list-style-type: none;

-                }

-                li{

-                    padding: 8px 0px 8px 0px;

-                    a {

-                        font-weight:300;

-                        /*padding-left: 2px;*/

-                        &.active{

-                            font-weight:500;

-                        }

-                    }

-                    

-                }

-                

-            }

-        }

-

-    }

-

-    footer {

-        background-color: $c_dark2;    

-        color:invert($c_dark2);

-        a{

-            color:invert($c_dark2);

-        }

-        padding: 3rem;

-    }

-

-}

-

-

-article section.page {

-    background-color: inherit;

-    #breadcrumb{

-        display: block;

-        font-size: 1rem;

-        line-height: 1.5;

-        letter-spacing: -.01em;

-        font-weight: 500;

-

-        ol{

-            padding: 0px;

-            display: flex;

-            flex-wrap: wrap;

-            list-style: none;

-            li{

-                display: list-item;

-                &:after{

-                    display: inline-block;

-                    padding-right: .5rem;

-                    padding-left: .5rem;

-                    color: $c_dark3;

-                    content: "⊸";

-                }

-                a {

-                    color: $c_dark3;

-                    border-bottom: 1px dotted $c_saturate1;

-                    padding-bottom: 4px;

-                    padding-right: 0px;

-                }

-

-                &.active{

-                    &:after{

-                        display: inline-block;

-                        padding-left: .75rem;

-                        content: "";

-                    }

-                }

-            }

-            

-        }

-

-    }

-

-    nav.subpages{

-        margin-right: -1.5rem;

-        margin-left: -1.5rem;

-        padding-left: 1.5em;

-        

-        position: -webkit-sticky;

-        position: sticky;

-        overflow-y: auto;

-        top: 45px;

-        background-color: inherit;

-        

-        

-

-        flex: 1;

-        display: flex;

-        justify-content: flex-start;

-        list-style-type: none;

-        li {

-            white-space: nowrap;

-            overflow: hidden;

-            text-overflow: ellipsis;

-            margin: 0px;

-            padding-right: .75rem;

-            min-width: 50px;

-            

-            a {

-                font-size: 90%;

-                color: $c_saturate4;

-            }

-            &:not(:first-child):before{

-                        display: inline-block;

-                        padding-right: .75rem;

-                        color: $c_saturate2;

-                        content: "|";

-            }

-            &.active{

-                font-weight: bold;

-            }

-        }

-        li:first-child:before{

-            content : "└ ";

-            color: $c_saturate2;

-        }

-    }

-

-

-    div.jump-to-section{

-        font-size: smaller;

-        color:$c_dark2;

-        ul{

-            li a{

-                color:$c_saturate3;

-            }

-        }

-

-        nav{

-            background-color: white;

-        }

-    }

-            

-            

-

-

-    div.chevrons {

-        margin-top: 3rem;

-        border-top: 1px solid $c_light2;

-        border-bottom: 1px solid $c_light2;

-        padding: 1rem 0rem;

-        display: flex;

-        flex-direction: row;

-        align-items: stretch;

-        -webkit-box-pack: end!important;

-        justify-content: flex-end!important;

-

-        a{

-            display: flex;

-            align-items: center!important;

-            -webkit-box-align: center!important;

-            justify-content: flex-end!important;

-            

-            max-width: 70%;

-            

-            padding: 24px;

-            

-            &.prev{

-                display: none

-            }

-            &.next div{

-                text-align: right;

-                justify-content: flex-end;

-                padding: 20px;

-            }

-

-            label{

-                font-size: 24px;    

-                font-weight: 700;

-                cursor: pointer;

-            }

-            p{

-                font-size: 15px;

-                padding: 0px;

-                margin: 0px;

-                text-align: left;

-            }

-            

-        }

-

-        

-    }

-}

-article section.page {

-     line-height:24px;

-

-     h1:first-of-type {

-        font-size: 2.6rem;

-        margin-top: 1.5rem!important;

-        color:$c_dark2;

-        margin-bottom: 0px;

-        line-height: 1.05;

-        letter-spacing: -.05em;

-        font-weight: 800;

-        span{

-            font-size: 90%;

-            font-weight: 500;

-            &:before{

-                padding-left: .75rem;

-                padding-right: .75rem;

-                color: $c_dark2;

-                content: "⊷";   

-            }

-                ;

-        }

-    }

-}

-article section.page div.content{

-    margin-top: 2.5rem;

-

-    a.anchor {

-        display: block;

-        position: relative;

-        top: -7rem;

-        visibility: hidden;

-    }

-

-    a{

-        color:$c_saturate7;

-        font-weight: 500;

-        text-decoration: underline;

-    }

-

-    h1 {

-        color:$c_dark1;

-        font-size:30px;

-        font-variant-ligatures:none;

-        font-weight:700;

-        height:88px;

-        letter-spacing:-0.75px;

-        line-height:32px;

-   }

-

-    h2 {

-        

-    } // TABLE

-    table {

-        width: 100%;

-        margin-bottom: 2em;

-

-        border-collapse: collapse;

-        border-spacing: 0;

-        border: 1px solid #e6e6e6;

-

-

-

-        th,

-        td {

-            padding: .25rem .75rem

-        }

-

-        th {

-            padding: 0.5rem;

-            text-transform: uppercase;

-            vertical-align: middle;

-            text-align: center;

-            font-weight: 800;

-            background: #f6f6f6;

-            color: black;

-            border-bottom: 2px solid #e5e5e5;

-        }

-

-        td {

-            padding: 0.5rem;

-            vertical-align: middle;

-            border-bottom: 1px solid #e5e5e5;

-            border: 1px solid #e6e6e6;

-            color: #323232;

-        }

-

-        td:first-child {

-            code {

-                background-color: transparent;

-                padding: 0

-            }

-        }

-    }

-    // IMAGES

-    img {

-        border: 0;

-        max-width: 100%;

-        margin: 1.5rem auto;

-        display: block;

-        text-align: center;

-        

-        

-

-        &.border {

-            border: 2px solid #e6e6e6 !important;

-            padding: 2px;

-        }

-

-        &.shadow {

-            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);

-        }

-

-        &.inline {

-            display: inline !important;

-         

-            vertical-align: bottom;

-        }

-

-        &.inline {

-            display: inline !important;

-         

-            vertical-align: bottom;

-        }

-    }

-

-    code  {

-        

-        padding: 0.5px;

-        font-weight: 600;

-        white-space: pre-wrap;

-    }

-    div.highlight{

-        pre{

-            display:block; 

-            white-space: pre-wrap;

-            code{

-                display: block;

-                margin-left:-1.5rem;

-                margin-right:-1.5rem;

-                padding: 10px;

-                border:0px;

-                font-weight: inherit;

-                background-color: inherit;

-            }

-        }

-    }

-}

-

- 

-

-

-

+{{if .Site.Params.color_main}}
+$color_main : {{ .Site.Params.color_main  }}  ;
+{{else}}
+$color_main : hsl(random(360)-1, random(100)-1%, random(100)-1%);
+{{end}}
+
+{{if .Site.Params.color_second}}
+$color_second : {{ .Site.Params.color_second  }}  ;
+{{else}}
+$color_second : saturate($color_main, 0%);  
+{{end}}
+
+$c_light1 : lighten($color_main, 15%);  
+$c_light2 : lighten($color_main, 45%);  
+$c_light3 : lighten($color_main, 50%);  
+$c_light4 : lighten($color_main, 80%);  
+
+
+$c_dark1 : darken($color_main, 15%);  
+$c_dark2 : darken($color_main, 25%);  
+$c_dark3 : darken($color_main, 45%);  
+$c_dark4 : darken($color_main, 50%);  
+
+
+
+$c_saturate1 : $color_second;  
+$c_saturate2 : saturate($color_second, 30%);  
+$c_saturate3 : saturate($color_second, 40%);  
+$c_saturate4 : saturate($color_second, 50%);  
+$c_saturate5 : saturate($color_second, 60%);  
+$c_saturate6 : saturate($color_second, 75%);  
+$c_saturate7 : saturate($color_second, 90%);  
+  
+body:not(.render_raw){
+	font-family:"Montserrat",sans-serif;
+
+
+    font-weight: 400;
+    line-height: 1.5;
+    color: $c_dark3;
+    
+    a{
+        color: $c_dark4;
+        text-decoration: none;
+        background-color: transparent;
+    }
+    
+
+    header {
+        background-color: $c_dark2;    
+
+        border-bottom: 2px solid gray ;
+        box-shadow: 0 0 0.2rem rgba(0,0,0,.1), 0 0.2rem 0.4rem rgba(0,0,0,.2);
+        
+        justify-content: space-between;
+        align-items: stretch ;
+
+        color:($c_light2);
+        a {
+            color:invert($c_dark2);
+        }
+        > div {
+            display: flex; 
+            flex-direction: row;
+            flex-wrap: nowrap;
+            justify-content: space-between;
+            align-items: stretch ;
+
+            white-space: nowrap;
+            
+
+            img {
+                height: 32px;
+                margin-right: 0.5rem;
+            }
+            .burger {
+                margin-right: 1rem; 
+            }
+
+        }
+
+
+
+
+        nav.shortcuts {
+            margin-left: auto;
+            position: relative;
+
+            display: flex;
+            justify-content: flex-start;
+            list-style-type: none;
+            flex-direction: row;
+            flex-wrap: nowrap;
+
+            li {
+
+                margin: 0px;
+                .fa {
+                    font-size: 1.5rem;
+                    margin-right: 0.5rem
+                }
+
+                a {
+                    color:lighten(invert($c_dark2),4%);
+                    padding: 0 1rem;
+                    font-weight: bold;
+                    font-size: 90%;
+                }
+            }
+        }
+    
+
+    }
+
+
+    article {
+        background-color: $c_light4 ;
+        aside {
+            #close_menu{
+                display: none;
+                float:right;
+                margin-right: 2rem;
+            }
+
+            &.responsive{
+                #close_menu{
+                    display: block;
+                }
+            }
+        }
+
+        section.right-menu {
+            padding: 3.5rem 0 3.5rem 0;
+            font-size:14px;
+            line-height:20px;
+            padding-left:2px;
+
+            .TableOfContents {
+                
+                > *{
+                    margin-left:5px;
+                }
+                label{
+                    font-weight:700;
+                    letter-spacing: -1px;
+                    display: block;
+                    margin-bottom: 14px;
+                    border-bottom: 1px dotted $c_light1;
+                    color:$c_dark2;
+                    font-variant: small-caps;
+                }  
+                nav>ul{
+                    padding: 0px 0px 0px 0px;
+                    margin:  0px 0px 0px 0px;
+                    ul{
+                        padding: 0px 0px 0px 14px;
+                        margin:  0px 0px 0px 0px;
+                        border-left: 1px solid $c_light2;
+                        li{
+                            font-size: 90%;
+                        }
+                    }
+                }
+
+                ul{
+                    list-style-type: none;
+                }
+                li{
+                    padding: 8px 0px 8px 0px;
+                    a {
+                        font-weight:300;
+                        /*padding-left: 2px;*/
+                        &.active{
+                            font-weight:500;
+                        }
+                    }
+                    
+                }
+                
+            }
+        }
+
+    }
+
+    footer {
+        background-color: $c_dark2;    
+        color:invert($c_dark2);
+        a{
+            color:invert($c_dark2);
+        }
+        padding: 3rem;
+    }
+
+}
+
+
+article section.page {
+    background-color: inherit;
+    #breadcrumb{
+        display: block;
+        font-size: 1rem;
+        line-height: 1.5;
+        letter-spacing: -.01em;
+        font-weight: 500;
+
+        ol{
+            padding: 0px;
+            display: flex;
+            flex-wrap: wrap;
+            list-style: none;
+            li{
+                display: list-item;
+                &:after{
+                    display: inline-block;
+                    padding-right: .5rem;
+                    padding-left: .5rem;
+                    color: $c_dark3;
+                    content: "⊸";
+                }
+                a {
+                    color: $c_dark3;
+                    border-bottom: 1px dotted $c_saturate1;
+                    padding-bottom: 4px;
+                    padding-right: 0px;
+                }
+
+                &.active{
+                    &:after{
+                        display: inline-block;
+                        padding-left: .75rem;
+                        content: "";
+                    }
+                }
+            }
+            
+        }
+
+    }
+
+    nav.subpages{
+        margin-right: -1.5rem;
+        margin-left: -1.5rem;
+        padding-left: 1.5em;
+        
+        position: -webkit-sticky;
+        position: sticky;
+        overflow-y: auto;
+        top: 45px;
+        background-color: inherit;
+        
+        
+
+        flex: 1;
+        display: flex;
+        justify-content: flex-start;
+        list-style-type: none;
+        li {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            margin: 0px;
+            padding-right: .75rem;
+            min-width: 50px;
+            
+            a {
+                font-size: 90%;
+                color: $c_saturate4;
+            }
+            &:not(:first-child):before{
+                        display: inline-block;
+                        padding-right: .75rem;
+                        color: $c_saturate2;
+                        content: "|";
+            }
+            &.active{
+                font-weight: bold;
+            }
+        }
+        li:first-child:before{
+            content : "└ ";
+            color: $c_saturate2;
+        }
+    }
+
+
+    div.jump-to-section{
+        font-size: smaller;
+        color:$c_dark2;
+        ul{
+            li a{
+                color:$c_saturate3;
+            }
+        }
+
+        nav{
+            background-color: white;
+        }
+    }
+            
+            
+
+
+    div.chevrons {
+        margin-top: 3rem;
+        border-top: 1px solid $c_light2;
+        border-bottom: 1px solid $c_light2;
+        padding: 1rem 0rem;
+        display: flex;
+        flex-direction: row;
+        align-items: stretch;
+        -webkit-box-pack: end!important;
+        justify-content: flex-end!important;
+
+        a{
+            display: flex;
+            align-items: center!important;
+            -webkit-box-align: center!important;
+            justify-content: flex-end!important;
+            
+            max-width: 70%;
+            
+            padding: 24px;
+            
+            &.prev{
+                display: none
+            }
+            &.next div{
+                text-align: right;
+                justify-content: flex-end;
+                padding: 20px;
+            }
+
+            label{
+                font-size: 24px;    
+                font-weight: 700;
+                cursor: pointer;
+            }
+            p{
+                font-size: 15px;
+                padding: 0px;
+                margin: 0px;
+                text-align: left;
+            }
+            
+        }
+
+        
+    }
+}
+article section.page {
+     line-height:24px;
+
+     h1:first-of-type {
+        font-size: 2.6rem;
+        margin-top: 1.5rem!important;
+        color:$c_dark2;
+        margin-bottom: 0px;
+        line-height: 1.05;
+        letter-spacing: -.05em;
+        font-weight: 800;
+        span{
+            font-size: 90%;
+            font-weight: 500;
+            &:before{
+                padding-left: .75rem;
+                padding-right: .75rem;
+                color: $c_dark2;
+                content: "⊷";   
+            }
+                ;
+        }
+    }
+}
+article section.page div.content{
+    margin-top: 2.5rem;
+
+    a.anchor {
+        display: block;
+        position: relative;
+        top: -7rem;
+        visibility: hidden;
+    }
+
+    a{
+        color:$c_saturate7;
+        font-weight: 500;
+        text-decoration: underline;
+    }
+
+    h1 {
+        color:$c_dark1;
+        font-size:30px;
+        font-variant-ligatures:none;
+        font-weight:700;
+        height:88px;
+        letter-spacing:-0.75px;
+        line-height:32px;
+   }
+
+    h2 {
+        
+    } // TABLE
+    table {
+        width: 100%;
+        margin-bottom: 2em;
+
+        border-collapse: collapse;
+        border-spacing: 0;
+        border: 1px solid #e6e6e6;
+
+
+
+        th,
+        td {
+            padding: .25rem .75rem
+        }
+
+        th {
+            padding: 0.5rem;
+            text-transform: uppercase;
+            vertical-align: middle;
+            text-align: center;
+            font-weight: 800;
+            background: #f6f6f6;
+            color: black;
+            border-bottom: 2px solid #e5e5e5;
+        }
+
+        td {
+            padding: 0.5rem;
+            vertical-align: middle;
+            border-bottom: 1px solid #e5e5e5;
+            border: 1px solid #e6e6e6;
+            color: #323232;
+        }
+
+        td:first-child {
+            code {
+                background-color: transparent;
+                padding: 0
+            }
+        }
+    }
+    // IMAGES
+    img {
+        border: 0;
+        max-width: 100%;
+        margin: 1.5rem auto;
+        display: block;
+        text-align: center;
+        
+        
+
+        &.border {
+            border: 2px solid #e6e6e6 !important;
+            padding: 2px;
+        }
+
+        &.shadow {
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+        }
+
+        &.inline {
+            display: inline !important;
+         
+            vertical-align: bottom;
+        }
+
+        &.inline {
+            display: inline !important;
+         
+            vertical-align: bottom;
+        }
+    }
+
+    code  {
+        font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
+        font-size: 85%;
+        color: #e83e8c;
+        word-wrap: break-word;
+
+        padding: 0.5px;
+        font-weight: 600;
+        white-space: pre-wrap;
+    }
+
+    div.highlight{
+        pre{
+            display:block; 
+            white-space: pre-wrap;
+            code{
+                color:inherit!important;
+                font-size: 75%;
+                display: block;
+                margin-left:-1.5rem;
+                margin-right:-1.5rem;
+                padding: 10px;
+                border:0px;
+                font-weight: inherit;
+                background-color: inherit;
+            }
+        }
+    }
+}
+
+ 
+
+
+