modify bootstrap variables instead of hard coded styles

app/src/scss/_variables.scss

@@ -16,7 +16,8 @@
 // For exemple, turning rounding of elements off, the bases colors, etc.
 // $enable-rounded: false;
 
-$alert-padding-x: 1rem;
+$font-size-base: 1rem;
+$font-weight-bold: 500;
 
 $blue:   #2f7ed2;
 $purple: #9932cc;
@@ -38,6 +39,15 @@ $lead-font-weight: 200;
 $font-family-sans-serif: 'FiraGO', 'Fira Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' !default;
 $font-family-monospace: 'Fira Code', SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace !default;
 
+$h2-font-size: $font-size-base * 1.5;
+$h3-font-size: $font-size-base * 1.4;
+$h4-font-size: $font-size-base * 1.25;
+$h5-font-size: $font-size-base * 1.1;
+
+$alert-padding-x: 1rem;
+
+$card-spacer-y: .6rem;
+$card-spacer-x: 1rem;
 
 @import '~bootstrap/scss/functions.scss';
 @import '~bootstrap/scss/variables';

app/src/scss/main.scss

@@ -92,36 +92,10 @@ body {
   margin-top: 0;
 }
 
-.card-header {
-  padding: 0.6rem 1rem;
-}
-
 .card {
   h1, h2, h3, h4, h5, h6 {
     margin: 0;
   }
-
-  h2 {
-    font-size: 1.5rem;
-  }
-
-  h3 {
-    font-size: 1.4rem;
-  }
-
-  h4 {
-    font-size: 1.25rem;
-  }
-
-  h5 {
-    font-size: 1.1rem;
-  }
-
-
-}
-
-.card-body {
-  padding: 1rem;
 }
 
 // collapse icon
@@ -146,12 +120,12 @@ body {
   }
 }
 
+code {
+  background: ghostwhite;
+}
+
 .log {
   margin-bottom: 0;
   padding: 1rem;
   background-color: $light;
 }
-
-code {
-    background: ghostwhite;
-}

app/src/views/domain/DomainInfo.vue

@@ -20,14 +20,14 @@
 
       <!-- DNS CONFIG -->
       <p>{{ $t('domain_dns_longdesc') }}</p>
-      <b-button variant="light" class="btn-outline-dark" :to="{ name: 'domain-dns', param: { name } }">
+      <b-button variant="outline-dark" :to="{ name: 'domain-dns', param: { name } }">
         <icon iname="globe" /> {{ $t('domain_dns_config') }}
       </b-button>
       <hr>
 
       <!-- SSL CERTIFICATE -->
       <p>{{ $t('certificate_manage') }}</p>
-      <b-button variant="light" class="btn-outline-dark" :to="{ name: 'domain-cert', param: { name } }">
+      <b-button variant="outline-dark" :to="{ name: 'domain-cert', param: { name } }">
         <icon iname="lock" /> {{ $t('ssl_certificate') }}
       </b-button>
       <hr>