fix some shortcuts css

10 files changed, 686 insertions, 591 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;
+            }
+        }
+    }
+}
+
+ 
+
+
+
diff --git a/assets/sass/shortcodes/alert.scss b/assets/sass/shortcodes/alert.scss
index e0b66f6..cbbb2f3 100644
--- a/assets/sass/shortcodes/alert.scss
+++ b/assets/sass/shortcodes/alert.scss
@@ -1,50 +1,67 @@
-$color_primary : #007bff ;

-$color_secondary : #6c757d ;

-$color_success : #28a745 ;

-$color_danger : #dc3545 ;

-$color_warning : #ffc107 ;

-$color_info : #17a2b8 ;

-$color_light : #f8f9fa ;

-$color_dark : #343a40 ;

-$color_white : #fff ;

-$color_transparent : transparent ;

-

-div.alert{

-	padding: .75rem 1.25rem;

-	margin-bottom: 1rem;

-	border: 1px solid transparent;

-	border-radius: .25rem;

-	

-	&.primary{

-    	color: white;

-    	a{color: white; }

-    	background-color: $color_primary;

-    	border-color: $color_primary;   

-  	}

-	&.info{

-		color: white;

-		a{color: white;	}

-		background-color: $color_info;

-		border-color: $color_info;		

-	}

-	&.success{

-		color: white;

-		a{color: white;	}

-		background-color: $color_success;

-		border-color: $color_success;		

-	}

-	&.warning{

-		color: black;

-		a{color: black;	}

-		background-color: $color_warning;

-		border-color: $color_warning;		

-	}

-	&.danger{

-		color: white;

-		a{color: white;	}

-		background-color: $color_danger;

-		border-color: $color_danger;		

-	}

-	

-	

-}

+$color_primary : #007bff ;
+$color_secondary : #6c757d ;
+$color_success : #28a745 ;
+$color_danger : #dc3545 ;
+$color_warning : #ffc107 ;
+$color_info : #17a2b8 ;
+$color_light : #f8f9fa ;
+$color_dark : #343a40 ;
+$color_white : #fff ;
+$color_transparent : transparent ;
+
+div.alert{
+	padding: .75rem 1.25rem;
+	margin-bottom: 1rem;
+	border: 1px solid transparent;
+	border-radius: .25rem;
+	
+	a{color:inherit!important;}
+
+	&.primary{
+    	color: white;
+       	background-color: $color_primary;
+    	border-color: $color_primary;   
+  	}
+	&.info{
+		color: white;
+		background-color: $color_info;
+		border-color: $color_info;		
+	}
+	&.success{
+		color: white;
+		background-color: $color_success;
+		border-color: $color_success;		
+	}
+	&.warning{
+		color: black;
+		background-color: $color_warning;
+		border-color: $color_warning;		
+	}
+	&.danger{
+		color: white;
+		background-color: $color_danger;
+		border-color: $color_danger;		
+	}
+	&.danger{
+		color: white;
+		background-color: $color_danger;
+		border-color: $color_danger;		
+	}
+	&.secondary{
+		color: white;
+		background-color: $color_secondary;
+		border-color: $color_secondary;		
+	}
+	&.light{
+		color: black;
+		background-color: $color_light;
+		border-color: $color_light;		
+	}
+	&.dark{
+		color: white;
+		background-color: $color_dark;
+		border-color: $color_dark;		
+	}
+	
+	
+}
diff --git a/assets/sass/shortcodes/button.scss b/assets/sass/shortcodes/button.scss
index 6df1873..d82ffa5 100644
--- a/assets/sass/shortcodes/button.scss
+++ b/assets/sass/shortcodes/button.scss
@@ -22,28 +22,53 @@ button.btn{
 	background-color: #007bff;

 	border-color: #007bff;

 

+	a{color:inherit!important;}

+

+	&.primary{

+    	color: white;

+       	background-color: $color_primary;

+    	border-color: $color_primary;   

+  	}

 	&.info{

 		color: white;

-		a{color: white;	}

-		background-color: $color_primary;

-		border-color: $color_primary;		

+		background-color: $color_info;

+		border-color: $color_info;		

 	}

 	&.success{

 		color: white;

-		a{color: white;	}

 		background-color: $color_success;

 		border-color: $color_success;		

 	}

 	&.warning{

 		color: black;

-		a{color: black;	}

 		background-color: $color_warning;

 		border-color: $color_warning;		

 	}

 	&.danger{

 		color: white;

-		a{color: white;	}

 		background-color: $color_danger;

 		border-color: $color_danger;		

 	}

+	&.danger{

+		color: white;

+		background-color: $color_danger;

+		border-color: $color_danger;		

+	}

+	&.secondary{

+		color: white;

+		background-color: $color_secondary;

+		border-color: $color_secondary;		

+	}

+	&.light{

+		color: black;

+		background-color: $color_light;

+		border-color: $color_light;		

+	}

+	&.dark{

+		color: white;

+		background-color: $color_dark;

+		border-color: $color_dark;		

+	}

+	

+

 }
\ No newline at end of file
diff --git a/exampleSite/content/shortcodes/alert/_index.md b/exampleSite/content/shortcodes/alert/_index.md
index 91025ee..1a3e217 100644
--- a/exampleSite/content/shortcodes/alert/_index.md
+++ b/exampleSite/content/shortcodes/alert/_index.md
@@ -10,7 +10,7 @@ The `alert` shortcode allow you to highlight information in your page. They crea
 
 | Parameter | Default | Description |
 |:--|:--|:--|
-| theme | `info` | `success`, `info`,`warning`,`danger` |
+| theme | `info` | `primary`,`success`, `info`,`warning`,`danger`,`dark`,`light`,`secondary` |
 
 {{%alert info%}}
 **Tips :** setting only the theme as argument works too : 
@@ -20,12 +20,20 @@ The `alert` shortcode allow you to highlight information in your page. They crea
 ## Basic examples
 
 ```
+	{{%/* alert primary */%}}**this** is a primary{{%/* /alert */%}}
 	{{%/* alert theme="info" */%}}**this** is a text{{%/* /alert */%}}
 	{{%/* alert theme="success" */%}}**Yeahhh !** is a text{{%/* /alert */%}}
 	{{%/* alert theme="warning" */%}}**Be carefull** is a text{{%/* /alert */%}}
-	{{%/* alert theme="danger" */%}}**Beware !** is a text{{%/* /alert */%}}
+	{{%/* alert danger */%}}**Beware !** is a text{{%/* /alert */%}}
+	{{%/* alert dark */%}}**Dark !** is a dark{{%/* /alert */%}}
+	{{%/* alert light */%}}**oooh !** is a light{{%/* /alert */%}}
+	{{%/* alert secondary */%}}**Wait !** is a secondary{{%/* /alert */%}}
 ```
+{{% alert primary %}}**this** is an primary{{% /alert %}}
 {{% alert theme="info"%}}**this** is an info{{% /alert %}}
-{{% alert theme="success" %}}**Yeahhh !** is an success{{% /alert %}}
+{{% alert theme="success" %}}**Yeahhh !** is a success{{% /alert %}}
 {{% alert theme="warning" %}}**Be carefull** is a warning{{% /alert %}}
-{{% alert theme="danger" %}}**Beware !** is a danger{{% /alert %}}
\ No newline at end of file
+{{% alert danger %}}**Beware !** is a danger{{% /alert %}}
+{{% alert dark %}}**Dark !** is a dark{{% /alert %}}
+{{% alert light %}}**oooh !** is a light{{% /alert %}}
+{{% alert secondary %}}**Wait !** is a secondary{{% /alert %}}
\ No newline at end of file
diff --git a/exampleSite/content/shortcodes/button/_index.md b/exampleSite/content/shortcodes/button/_index.md
index 5ed2cc2..2d781cd 100644
--- a/exampleSite/content/shortcodes/button/_index.md
+++ b/exampleSite/content/shortcodes/button/_index.md
@@ -24,7 +24,9 @@ The inner text you place in short code will be displayed as the _button text_
 	{{</* button href="https://google.com" theme="info" */>}} Info {{</* /button */>}}
 	{{</* button href="https://google.com" theme="warning" */>}} Warning {{</* /button */>}}
 	{{</* button href="https://google.com" theme="danger" */>}} Danger ! {{</* /button */>}}
-	{{</* button href="https://google.com" theme="default" */>}} Danger ! {{</* /button */>}}
+	{{</* button href="https://google.com" theme="dark" */>}} Dark ! {{</* /button */>}}
+	{{</* button href="https://google.com" theme="light" */>}} Light ! {{</* /button */>}}
+	{{</* button href="https://google.com" theme="secondary" */>}} Secondary{{</*/button*/>}}
 ``` 
 
 {{<button href="https://google.com" >}} go to google {{< /button >}}
@@ -32,7 +34,11 @@ The inner text you place in short code will be displayed as the _button text_
 {{<button href="https://google.com" theme="info">}} Info {{< /button >}}
 {{<button href="https://google.com" theme="warning">}} Warning {{< /button >}}
 {{<button href="https://google.com" theme="danger">}} Danger ! {{< /button >}}
-{{<button href="https://google.com" theme="default">}} Danger ! {{< /button >}}
+
+{{<button href="https://google.com" theme="dark">}} Dark ! {{< /button >}}
+{{<button href="https://google.com" theme="light">}} Light ! {{< /button >}}
+{{<button href="https://google.com" theme="secondary">}} Secondary ! {{< /button >}}
+
 
 
 
diff --git a/exampleSite/content/shortcodes/notice/_index.md b/exampleSite/content/shortcodes/notice/_index.md
index 89f85bd..bca8795 100644
--- a/exampleSite/content/shortcodes/notice/_index.md
+++ b/exampleSite/content/shortcodes/notice/_index.md
@@ -22,16 +22,18 @@ You may add a label to your notice which will be displayed on top of it.
 ## Examples
 
 {{% notice success %}}Lorem ipsum dolor sit amet, consectetur.{{% /notice %}}
-{{% notice %}}Lorem ipsum dolor sit amet, consectetur.{{% /notice %}}
-{{% notice warning %}}Lorem ipsum dolor sit amet, consectetur{{% /notice %}}
-{{% notice danger Attention %}}Lorem ipsum dolor sit amet, consectetur{{% /notice %}}
+{{% notice %}}**Lorem !**\
+ ipsum dolor sit amet, consectetur.{{% /notice %}}
+{{% notice warning %}}**Lorem** ipsum dolor sit amet, consectetur{{% /notice %}}
+{{% notice danger Attention %}}ipsum dolor sit amet{{% /notice %}}
 
 {{% expand "Show shortcode markups..." %}}
 ```
 	{{%/* notice success %}}Lorem ipsum dolor sit amet, consectetur{{% /notice %}}
-	{{% notice  %}}Lorem ipsum dolor sit amet, consectetur{{% /notice %}}
-	{{% notice warning %}}Lorem ipsum dolor sit amet, consectetur{{% /notice %}}
-	{{% notice danger Attention %}}Lorem ipsum dolor sit amet, consectetur{{% /notice */%}}
+	{{% notice  %}}**Lorem !**\
+ ipsum dolor sit amet, consectetur.{{% /notice %}}
+	{{% notice warning Warning%}}**Lorem** ipsum dolor sit amet, consectetur{{% /notice %}}
+	{{% notice danger Attention %}}ipsum dolor sit amet{{% /notice{{% /notice */%}}
 ```
 {{% /expand %}}
 
@@ -56,7 +58,7 @@ You may add a label to your notice which will be displayed on top of it.
 | Type | code |
 |:--|--:|
 | {{% notice primary %}}This is a notice without label.{{% /notice %}} | <small>{{%/* notice primary %}}This is a notice without label.{{% /notice */%}}</small> |
-| {{% notice primary toto %}}This is a notice with "toto" label.{{% /notice %}} | <small>{{%/* notice primary toto %}}This is a notice with "toto" label.{{% /notice */%}}</small> |
-| {{% notice primary "my label" %}}This is a with "my label".{{% /notice %}} | <small>{{%/* notice primary "my label" %}}This is a with "my label".{{% /notice */%}}</small> |
+| {{% notice primary toto %}}This is a notice with "toto" label.{{% /notice %}} | <small>{{%/* notice primary **toto** %}}This is a notice with "toto" label.{{% /notice */%}}</small> |
+| {{% notice primary "my label" %}}This is a with "my label".{{% /notice %}} | <small>{{%/* notice primary **"my label"** %}}This is a with "my label".{{% /notice */%}}</small> |
 
 
diff --git a/exampleSite/resources/_gen/assets/scss/sass/main.scss_9fd32d87d247ca96761d3cae485087fe.content b/exampleSite/resources/_gen/assets/scss/sass/main.scss_9fd32d87d247ca96761d3cae485087fe.content
index 8966181..f27e0d3 100644
--- a/exampleSite/resources/_gen/assets/scss/sass/main.scss_9fd32d87d247ca96761d3cae485087fe.content
+++ b/exampleSite/resources/_gen/assets/scss/sass/main.scss_9fd32d87d247ca96761d3cae485087fe.content
@@ -281,6 +281,10 @@ article section.page div.content {
       display: inline !important;
       vertical-align: bottom; }
   article section.page div.content 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; }
@@ -288,6 +292,8 @@ article section.page div.content {
     display: block;
     white-space: pre-wrap; }
     article section.page div.content div.highlight pre code {
+      color: inherit !important;
+      font-size: 75%;
       display: block;
       margin-left: -1.5rem;
       margin-right: -1.5rem;
diff --git a/exampleSite/resources/_gen/assets/scss/sass/shortcodes/alert.scss_f300667da4f5b5f84e1a9e0702b2fdde.content b/exampleSite/resources/_gen/assets/scss/sass/shortcodes/alert.scss_f300667da4f5b5f84e1a9e0702b2fdde.content
index 0e9ed3b..8b2a934 100644
--- a/exampleSite/resources/_gen/assets/scss/sass/shortcodes/alert.scss_f300667da4f5b5f84e1a9e0702b2fdde.content
+++ b/exampleSite/resources/_gen/assets/scss/sass/shortcodes/alert.scss_f300667da4f5b5f84e1a9e0702b2fdde.content
@@ -3,33 +3,41 @@ div.alert {
   margin-bottom: 1rem;
   border: 1px solid transparent;
   border-radius: .25rem; }
+  div.alert a {
+    color: inherit !important; }
   div.alert.primary {
     color: white;
     background-color: #007bff;
     border-color: #007bff; }
-    div.alert.primary a {
-      color: white; }
   div.alert.info {
     color: white;
     background-color: #17a2b8;
     border-color: #17a2b8; }
-    div.alert.info a {
-      color: white; }
   div.alert.success {
     color: white;
     background-color: #28a745;
     border-color: #28a745; }
-    div.alert.success a {
-      color: white; }
   div.alert.warning {
     color: black;
     background-color: #ffc107;
     border-color: #ffc107; }
-    div.alert.warning a {
-      color: black; }
   div.alert.danger {
     color: white;
     background-color: #dc3545;
     border-color: #dc3545; }
-    div.alert.danger a {
-      color: white; }
+  div.alert.danger {
+    color: white;
+    background-color: #dc3545;
+    border-color: #dc3545; }
+  div.alert.secondary {
+    color: white;
+    background-color: #6c757d;
+    border-color: #6c757d; }
+  div.alert.light {
+    color: black;
+    background-color: #f8f9fa;
+    border-color: #f8f9fa; }
+  div.alert.dark {
+    color: white;
+    background-color: #343a40;
+    border-color: #343a40; }
diff --git a/exampleSite/resources/_gen/assets/scss/sass/shortcodes/button.scss_f300667da4f5b5f84e1a9e0702b2fdde.content b/exampleSite/resources/_gen/assets/scss/sass/shortcodes/button.scss_f300667da4f5b5f84e1a9e0702b2fdde.content
index 735f34b..b1d0537 100644
--- a/exampleSite/resources/_gen/assets/scss/sass/shortcodes/button.scss_f300667da4f5b5f84e1a9e0702b2fdde.content
+++ b/exampleSite/resources/_gen/assets/scss/sass/shortcodes/button.scss_f300667da4f5b5f84e1a9e0702b2fdde.content
@@ -8,27 +8,41 @@ button.btn {
   color: #fff;
   background-color: #007bff;
   border-color: #007bff; }
-  button.btn.info {
+  button.btn a {
+    color: inherit !important; }
+  button.btn.primary {
     color: white;
     background-color: #007bff;
     border-color: #007bff; }
-    button.btn.info a {
-      color: white; }
+  button.btn.info {
+    color: white;
+    background-color: #17a2b8;
+    border-color: #17a2b8; }
   button.btn.success {
     color: white;
     background-color: #28a745;
     border-color: #28a745; }
-    button.btn.success a {
-      color: white; }
   button.btn.warning {
     color: black;
     background-color: #ffc107;
     border-color: #ffc107; }
-    button.btn.warning a {
-      color: black; }
   button.btn.danger {
     color: white;
     background-color: #dc3545;
     border-color: #dc3545; }
-    button.btn.danger a {
-      color: white; }
+  button.btn.danger {
+    color: white;
+    background-color: #dc3545;
+    border-color: #dc3545; }
+  button.btn.secondary {
+    color: white;
+    background-color: #6c757d;
+    border-color: #6c757d; }
+  button.btn.light {
+    color: black;
+    background-color: #f8f9fa;
+    border-color: #f8f9fa; }
+  button.btn.dark {
+    color: white;
+    background-color: #343a40;
+    border-color: #343a40; }
diff --git a/layouts/partials/html-head.html b/layouts/partials/html-head.html
index a82981c..e2c46bf 100644
--- a/layouts/partials/html-head.html
+++ b/layouts/partials/html-head.html
@@ -19,6 +19,8 @@
 <link rel="stylesheet" href='{{ (resources.Get "sass/menu.scss" | resources.ExecuteAsTemplate "style.menu.scss" . | toCSS).Permalink }}'>
 
 
+<!-- <link rel="stylesheet" type="text/css" href='{{ (resources.Get "sass/shortcodes/button.scss" | toCSS).Permalink }}'> -->
+
 <!-- <link rel="stylesheet" href='{{"vendor/bootstrap/bootstrap-4.5.0-dist/css/bootstrap.min.css" | relURL}}'  crossorigin="anonymous"> -->
 
 <!-- <link href='{{"vendor/FontAwesome/fontawesome-free-5.13.1-web/css/all.css" | relURL}}' rel="stylesheet">  -->