more tailwind

nginx/vue/src/assets/styles.css

@@ -47,13 +47,15 @@
     /* BACKGROUND COLORS */
     --bg_primary: #011;
     --bg_secondary: #000;
+    --link: #222;
+
+    --bdr: 2px;
 
-    --margin: 3px;
     --spacing: 3px;
 
     /* FONTS USED */
     --font_heading: big_noodle_titling;
-    --font_text: CreatoDisplay;
+    --font_default: CreatoDisplay;
 }
 
 @theme {
@@ -64,6 +66,10 @@
 
     --color-bg_primary: var(--bg_primary);
     --color-bg_secondary: var(--bg_secondary);
+    --color-link: var(--link);
+
+    --font-heading: var(--font_heading);
+    --default-font-family: var(--font_default);
 }
 /* END OF VARIABLES */
 
@@ -75,16 +81,8 @@ body {
     font-family: var(--font_text);
 }
 
-a > * {
-    color: var(--tertiary);
-}
-
-a {
-    color: var(--tertiary);
-    text-align: center;
-    text-decoration: none;
-    padding: 0px;
-    margin: 0px;
+input {
+    color: var(--primary);
 }
 
 small {
@@ -95,32 +93,27 @@ h1,
 h2,
 h3,
 h4 {
-    border-bottom: 1px solid var(--primary);
-    color: var(--primary);
-    font-family: var(--font_heading);
-    margin: var(--margin);
+    @apply m-1 border-primary border-b font-heading text-primary;
 }
 
 p {
-    color: var(--secondary);
-    margin: var(--margin);
+    @apply text-secondary;
 }
 
 button {
-    color: var(--secondary);
-    background-color: var(--bg_secondary);
-    margin: var(--margin);
+    @apply text-primary bg-link text-center;
+}
+
+a {
+    @apply text-primary bg-link text-center;
 }
 
 table {
-    border: 1px solid var(--primary);
-    border-collapse: collapse;
-    color: var(--secondary);
-    margin: var(--margin);
+    @apply border-primary border text-primary;
 }
 
 tr {
-    border-bottom: 1px solid var(--primary);
+    @apply border-primary border-b text-primary;
 }
 
 /* END OF ELEMENTS */
@@ -134,51 +127,49 @@ tr {
 
 /* BORDERS */
 .bdr-1 {
-    border: 30px solid;
+    @apply border-30;
     border-image: url("/img/borders/border1.gif") 30 round;
 }
 
 .bdr-1-inv {
-    border: 30px solid;
+    @apply border-30;
     border-image: url("/img/borders/border1inv.gif") 30 round;
 }
 
 .bdr-2 {
-    border: 7px solid;
+    @apply border-5;
     border-image: url("/img/borders/border4.gif") 7 round;
 }
 
 .bdr-cv {
-    border: 30px solid;
+    @apply border-30;
     border-image: url("/img/borders/bordercv.png") 30 round;
 }
 
 /* A5 Page */
 .a5page-landscape {
-    font-family: var(--font_text);
+    @apply m-0;
     height: 148mm;
     width: 210mm;
-    margin: 0px;
 }
 
 .a5page-portrait {
-    font-family: var(--font_text);
+    @apply m-0;
     width: 148mm;
     height: 210mm;
-    margin: 0px;
 }
 
 /* A4 Page */
 .a4page-portrait {
+    @apply m-0;
     width: 210mm;
     height: 297mm;
-    margin: 0px;
 }
 
 .a4page-landscape {
+    @apply m-0;
     height: 210mm;
     width: 297mm;
-    margin: 0 auto;
 }
 
 /* END OF CLASSES */