Add style for info, warning and note blocks

styles/main.scss

@@ -124,6 +124,7 @@ header {
 
   #content {
     width: calc(80% - 20px);
+    padding-bottom: 100px;
 
     @media screen and (max-width: $small) {
       width: 100%;
@@ -143,6 +144,7 @@ header {
     #tags {
       display: flex;
       flex-wrap: wrap;
+      gap: 5px;
       
       a {
 	@extend .tag;
@@ -158,11 +160,12 @@ header {
   h1, h2 {
     margin-top: 10px;
   }
-  
+
-  .highlight {
+  .highlight {    
     pre {
       padding: 10px;
       overflow-x: scroll;
+      border-radius: 5px;
     }
   }
 }
@@ -217,3 +220,66 @@ header {
 
 
 // --------------------------------------------------
+
+.info-block, .warning-block, .success-block, .note-block {
+  border-radius: 5px;
+  padding: 2px 5px;
+  box-shadow: 2px 2px 2px rgba(0, 0, 0, .1);
+  margin: 10px 0;
+}
+
+
+.info-block {
+  background: #BBDEFB;
+  color: #0D47A1;
+
+  p::before {
+    content: "ℹ️ "
+  }
+}
+
+.warning-block {
+  background: #FFE0B2;
+  color: #E65100;
+
+  p::before {
+    content: "⚠️ ";
+  }
+}
+
+.success-block {
+  background: #C8E6C9;
+  color: #1B5E20;
+
+  p::before {
+    content: "✅ ";
+  }
+}
+
+.note-block {
+  background: #D7CCC8;
+  color: #3E2723;
+
+  p::before {
+    content: "📝 ";
+  }
+}
+
+// --------------------------------------------------
+
+table {
+  thead {
+    background-color: $primary-light;
+  }
+
+  tr {
+    border-bottom: 1px solid red;
+  }
+}
+
+
+dt {
+  &::before {
+    content: "-";
+  }
+}