add blog

styles/main.css

@@ -19,6 +19,7 @@ html {
 
 :root {
     --main-color: #1668e4;
+    --main-color-lighter: #5698fc;
     --dark-color: #201e1e;
     --sec-color-3: #688e26;
     --sec-color-4: #adb2d3;
@@ -83,6 +84,25 @@ h1 {
     margin-bottom: 10px;
 }
 
+/* * */
+/* * */
+/* * */
+/* * */
+/* * */
+/* * */
+/* * */
+
+p a,
+span a {
+    color: var(--main-color-lighter);
+    /* border-bottom: 1px solid var(--main-color-lighter); */
+}
+
+p a:hover,
+span a:hover {
+    color: var(--main-color);
+}
+
 /* ################################################# -- Sliders */
 aside,
 .side-nav-block {
@@ -330,6 +350,24 @@ textarea {
     margin-bottom: 20px;
 }
 
+/* * */
+/* * */
+/* * */
+/* * */
+/* * */
+/* * */
+/* * */
+/* * */
+
+/* .transition-fade {
+    transition: 0.4s;
+    opacity: 1;
+}
+
+html.is-animating .transition-fade {
+    opacity: 0;
+} */
+
 /* ###############################################################################################
 ##################################################################################################
 ##################################################################################################

styles/tw_main.css

@@ -59,6 +59,10 @@
   z-index: -10
 }
 
+.m-0 {
+  margin: 0px
+}
+
 .mt-4 {
   margin-top: 1rem
 }
@@ -71,6 +75,26 @@
   margin-bottom: 0.25rem
 }
 
+.mb-4 {
+  margin-bottom: 1rem
+}
+
+.mb-8 {
+  margin-bottom: 2rem
+}
+
+.mb-0 {
+  margin-bottom: 0px
+}
+
+.mb-3 {
+  margin-bottom: 0.75rem
+}
+
+.mb-2 {
+  margin-bottom: 0.5rem
+}
+
 .flex {
   display: flex
 }
@@ -79,37 +103,86 @@
   height: 1.5rem
 }
 
-.h-screen {
-  height: 100vh
-}
-
 .w-full {
   width: 100%
 }
 
-.w-screen {
-  width: 100vw
+.max-w-xl {
+  max-width: 36rem
+}
+
+.max-w-2xl {
+  max-width: 42rem
+}
+
+.max-w-3xl {
+  max-width: 48rem
+}
+
+.max-w-4xl {
+  max-width: 56rem
 }
 
 .flex-col {
   flex-direction: column
 }
 
-.items-center {
-  align-items: center
+.items-start {
+  align-items: flex-start
 }
 
-.justify-center {
-  justify-content: center
+.gap-2 {
+  gap: 0.5rem
+}
+
+.gap-4 {
+  gap: 1rem
 }
 
 .border {
   border-width: 1px
 }
 
-.bg-black {
+.border-2 {
+  border-width: 2px
+}
+
+.border-solid {
+  border-style: solid
+}
+
+.border-blue-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(59 130 246 / var(--tw-border-opacity))
+}
+
+.border-white\/40 {
+  border-color: rgb(255 255 255 / 0.4)
+}
+
+.border-white\/20 {
+  border-color: rgb(255 255 255 / 0.2)
+}
+
+.border-white\/50 {
+  border-color: rgb(255 255 255 / 0.5)
+}
+
+.bg-blue-600 {
   --tw-bg-opacity: 1;
-  background-color: rgb(0 0 0 / var(--tw-bg-opacity))
+  background-color: rgb(37 99 235 / var(--tw-bg-opacity))
+}
+
+.bg-transparent {
+  background-color: transparent
+}
+
+.p-4 {
+  padding: 1rem
+}
+
+.p-8 {
+  padding: 2rem
 }
 
 .text-xl {
@@ -122,10 +195,29 @@
   line-height: 1.25rem
 }
 
+.text-lg {
+  font-size: 1.125rem;
+  line-height: 1.75rem
+}
+
+.text-base {
+  font-size: 1rem;
+  line-height: 1.5rem
+}
+
 .font-bold {
   font-weight: 700
 }
 
+.text-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity))
+}
+
+.text-white\/50 {
+  color: rgb(255 255 255 / 0.5)
+}
+
 .opacity-50 {
   opacity: 0.5
 }
@@ -133,3 +225,46 @@
 .opacity-40 {
   opacity: 0.4
 }
+
+.opacity-90 {
+  opacity: 0.9
+}
+
+.opacity-60 {
+  opacity: 0.6
+}
+
+.opacity-20 {
+  opacity: 0.2
+}
+
+.opacity-30 {
+  opacity: 0.3
+}
+
+.opacity-70 {
+  opacity: 0.7
+}
+
+.opacity-80 {
+  opacity: 0.8
+}
+
+.outline {
+  outline-style: solid
+}
+
+.filter {
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
+}
+
+.transition-all {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms
+}
+
+.hover\:bg-blue-600:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(37 99 235 / var(--tw-bg-opacity))
+}