+ add training page (add admonition shortcode)

+ Finish translation
+ clean unused asset

themes/tse/assets/css/_index.scss

@@ -12,3 +12,5 @@
 
 // Custom CSS
 @import "./custom.scss";
+
+@import "./admonition.scss";

themes/tse/assets/css/admonition.scss

@@ -0,0 +1,70 @@
+.admonition {
+  position: relative;
+  margin: 1rem 0;
+  padding: 0 0.75rem;
+  background-color: map-get($admonition-background-color-map, "note");
+  border-left: 0.25rem solid map-get($admonition-color-map, "note");
+  overflow: auto;
+
+  .admonition-title {
+    font-weight: bold;
+    margin: 0 -0.75rem;
+    padding: 0.25rem 1.8rem;
+    border-bottom: 1px solid map-get($admonition-background-color-map, "note");
+    background-color: opacify(
+      map-get($admonition-background-color-map, "note"),
+      0.15
+    );
+  }
+
+  &.open .admonition-title {
+    background-color: map-get($admonition-background-color-map, "note");
+  }
+
+  .admonition-content {
+    padding: 0.5rem 0;
+  }
+
+  span.icon > svg {
+    font-size: 0.85rem;
+    color: map-get($admonition-color-map, "note");
+    position: absolute;
+    top: 0.6rem;
+    left: 0.4rem;
+  }
+
+  span.details-icon > svg {
+    position: absolute;
+    top: 0.6rem;
+    right: 0.3rem;
+  }
+
+  @each $type, $color in $admonition-color-map {
+    &.#{$type} {
+      border-left-color: $color;
+
+      span.icon > svg {
+        color: $color;
+      }
+    }
+  }
+
+  @each $type, $color in $admonition-background-color-map {
+    &.#{$type} {
+      background-color: $color;
+
+      .admonition-title {
+        border-bottom-color: $color;
+        background-color: opacify($color, 0.15);
+      }
+
+      &.open .admonition-title {
+        background-color: $color;
+      }
+    }
+  }
+
+  &:last-child {
+    margin-bottom: 0.75rem;
+  }
+}

themes/tse/assets/css/theme.scss

@@ -18,12 +18,16 @@ body {
   vertical-align: middle;  
 }
 
+#site-page-head {
+  height: 0%;
+}
+
 #site-head.withCenteredImage{
   /* can't be used together with video */
   background: var(--section-light-bg-color) no-repeat center center;
 }
 
-#site-head, #site-head.withCenteredImage {
+#site-head, #site-head.withCenteredImage, #site-page-head  {
   // position: relative;
   display: table;
   width: 100%;
@@ -131,7 +135,6 @@ body {
     }
   }
 
-
   #site-head-content {
     
     // position: absolute;

themes/tse/assets/css/variables.scss

@@ -53,3 +53,39 @@
     /* define list element for unnumbered lists, leave empty for default list element */
     --ul-li-icon: fa-asterisk;
 }
+// ========== Admonition ========== //
+// Color map of the admonition
+$admonition-color-map: (
+  "note": #448aff,
+  "abstract": #00b0ff,
+  "info": #00b8d4,
+  "tip": #00bfa5,
+  "success": #00c853,
+  "question": #64dd17,
+  "warning": #ff9100,
+  "failure": #ff5252,
+  "danger": #ff1744,
+  "bug": #f50057,
+  "example": #651fff,
+  "quote": #9e9e9e,
+  "important": #8957e5,
+  "caution": #da3633,
+) !default;
+
+// Color map of the admonition background
+$admonition-background-color-map: (
+  "note": rgba(68, 138, 255, 0.1),
+  "abstract": rgba(0, 176, 255, 0.1),
+  "info": rgba(0, 184, 212, 0.1),
+  "tip": rgba(0, 191, 165, 0.1),
+  "success": rgba(0, 200, 83, 0.1),
+  "question": rgba(100, 221, 23, 0.1),
+  "warning": rgba(255, 145, 0, 0.1),
+  "failure": rgba(255, 82, 82, 0.1),
+  "danger": rgba(255, 23, 68, 0.1),
+  "bug": rgba(245, 0, 87, 0.1),
+  "example": rgba(101, 31, 255, 0.1),
+  "quote": rgba(159, 159, 159, 0.1),
+  "important": rgba(137, 87, 229, 0.1),
+  "caution": rgba(218, 54, 51, 0.1),
+) !default;