added more customization to bootstrap

meowfu0 · Sep 27, 2024 · e8b0c35 · e8b0c35
1 parent 303228a
commit e8b0c35
Show file tree

Hide file tree

Showing 8 changed files with 133 additions and 42 deletions.
diff --git a/database/seeders/DatabaseSeeder.php b/database/seeders/DatabaseSeeder.php
@@ -14,5 +14,7 @@ class DatabaseSeeder extends Seeder
     public function run()
     {
         // \App\Models\User::factory(10)->create();
+        $this->call(CoursesTableSeeder::class);
+
     }
 }
diff --git a/public/css/app.css b/public/css/app.css
@@ -1,4 +1,4 @@
-@import url(https://fonts.googleapis.com/css?family=Nunito);
+@import url(https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap);
 @charset "UTF-8";
 /*!
  * Bootstrap  v5.3.3 (https://getbootstrap.com/)
@@ -77,7 +77,7 @@
   --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
   --bs-body-font-family: var(--bs-font-sans-serif);
   --bs-body-font-size: 0.9rem;
-  --bs-body-font-weight: 500;
+  --bs-body-font-weight: 400;
   --bs-body-line-height: 1.6;
   --bs-body-color: #212529;
   --bs-body-color-rgb: 33, 37, 41;
@@ -320,7 +320,7 @@ blockquote {
 
 b,
 strong {
-  font-weight: 900;
+  font-weight: 800;
 }
 
 small, .small {
@@ -2115,7 +2115,7 @@ progress {
   width: 100%;
   padding: 0.375rem 0.75rem;
   font-size: 0.9rem;
-  font-weight: 500;
+  font-weight: 400;
   line-height: 1.6;
   color: var(--bs-body-color);
   -webkit-appearance: none;
@@ -2271,7 +2271,7 @@ textarea.form-control-lg {
   width: 100%;
   padding: 0.375rem 2.25rem 0.375rem 0.75rem;
   font-size: 0.9rem;
-  font-weight: 500;
+  font-weight: 400;
   line-height: 1.6;
   color: var(--bs-body-color);
   -webkit-appearance: none;
@@ -2693,7 +2693,7 @@ textarea.form-control-lg {
   align-items: center;
   padding: 0.375rem 0.75rem;
   font-size: 0.9rem;
-  font-weight: 500;
+  font-weight: 400;
   line-height: 1.6;
   color: var(--bs-body-color);
   text-align: center;
@@ -2936,7 +2936,7 @@ textarea.form-control-lg {
   --bs-btn-padding-y: 0.375rem;
   --bs-btn-font-family: ;
   --bs-btn-font-size: 0.9rem;
-  --bs-btn-font-weight: 500;
+  --bs-btn-font-weight: 400;
   --bs-btn-line-height: 1.6;
   --bs-btn-color: var(--bs-body-color);
   --bs-btn-bg: transparent;
@@ -3285,7 +3285,7 @@ textarea.form-control-lg {
 }
 
 .btn-link {
-  --bs-btn-font-weight: 500;
+  --bs-btn-font-weight: 400;
   --bs-btn-color: var(--bs-link-color);
   --bs-btn-bg: transparent;
   --bs-btn-border-color: transparent;
@@ -3616,7 +3616,7 @@ textarea.form-control-lg {
   width: 100%;
   padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);
   clear: both;
-  font-weight: 500;
+  font-weight: 400;
   color: var(--bs-dropdown-link-color);
   text-align: inherit;
   text-decoration: none;
@@ -5736,7 +5736,7 @@ textarea.form-control-lg {
   margin: var(--bs-tooltip-margin);
   font-family: var(--bs-font-sans-serif);
   font-style: normal;
-  font-weight: 500;
+  font-weight: 400;
   line-height: 1.6;
   text-align: left;
   text-align: start;
@@ -5846,7 +5846,7 @@ textarea.form-control-lg {
   max-width: var(--bs-popover-max-width);
   font-family: var(--bs-font-sans-serif);
   font-style: normal;
-  font-weight: 500;
+  font-weight: 400;
   line-height: 1.6;
   text-align: left;
   text-align: start;
@@ -8297,27 +8297,63 @@ textarea.form-control-lg {
 }
 
 .fs-1 {
-  font-size: calc(1.35rem + 1.2vw) !important;
+  font-size: 0.625rem !important;
 }
 
 .fs-2 {
-  font-size: calc(1.305rem + 0.66vw) !important;
+  font-size: 0.75rem !important;
 }
 
 .fs-3 {
-  font-size: calc(1.2825rem + 0.39vw) !important;
+  font-size: 0.875rem !important;
 }
 
 .fs-4 {
-  font-size: calc(1.26rem + 0.12vw) !important;
+  font-size: 1rem !important;
 }
 
 .fs-5 {
-  font-size: 1.125rem !important;
+  font-size: 1.25rem !important;
 }
 
 .fs-6 {
-  font-size: 0.9rem !important;
+  font-size: calc(1.275rem + 0.3vw) !important;
+}
+
+.fs-7 {
+  font-size: calc(1.3rem + 0.6vw) !important;
+}
+
+.fs-8 {
+  font-size: calc(1.325rem + 0.9vw) !important;
+}
+
+.fs-9 {
+  font-size: calc(1.35rem + 1.2vw) !important;
+}
+
+.fs-10 {
+  font-size: calc(1.375rem + 1.5vw) !important;
+}
+
+.fs-11 {
+  font-size: calc(1.425rem + 2.1vw) !important;
+}
+
+.fs-12 {
+  font-size: calc(1.45rem + 2.4vw) !important;
+}
+
+.fs-13 {
+  font-size: calc(1.5rem + 3vw) !important;
+}
+
+.fs-14 {
+  font-size: calc(1.575rem + 3.9vw) !important;
+}
+
+.fs-15 {
+  font-size: calc(1.625rem + 4.5vw) !important;
 }
 
 .fst-italic {
@@ -8329,15 +8365,15 @@ textarea.form-control-lg {
 }
 
 .fw-lighter {
-  font-weight: 300 !important;
+  font-weight: 200 !important;
 }
 
 .fw-light {
-  font-weight: 400 !important;
+  font-weight: 300 !important;
 }
 
 .fw-normal {
-  font-weight: 500 !important;
+  font-weight: 400 !important;
 }
 
 .fw-medium {
@@ -8353,7 +8389,7 @@ textarea.form-control-lg {
 }
 
 .fw-bolder {
-  font-weight: 900 !important;
+  font-weight: 800 !important;
 }
 
 .lh-1 {
@@ -11920,17 +11956,35 @@ textarea.form-control-lg {
   }
 }
 @media (min-width: 1200px) {
-  .fs-1 {
+  .fs-6 {
+    font-size: 1.5rem !important;
+  }
+  .fs-7 {
+    font-size: 1.75rem !important;
+  }
+  .fs-8 {
+    font-size: 2rem !important;
+  }
+  .fs-9 {
     font-size: 2.25rem !important;
   }
-  .fs-2 {
-    font-size: 1.8rem !important;
+  .fs-10 {
+    font-size: 2.5rem !important;
+  }
+  .fs-11 {
+    font-size: 3rem !important;
+  }
+  .fs-12 {
+    font-size: 3.25rem !important;
+  }
+  .fs-13 {
+    font-size: 3.75rem !important;
   }
-  .fs-3 {
-    font-size: 1.575rem !important;
+  .fs-14 {
+    font-size: 4.5rem !important;
   }
-  .fs-4 {
-    font-size: 1.35rem !important;
+  .fs-15 {
+    font-size: 5rem !important;
   }
 }
 @media print {

diff --git a/resources/sass/_variables.scss b/resources/sass/_variables.scss
@@ -21,12 +21,31 @@ $display-font-sizes: (
 
 );
 
+$font-sizes: (
+  1: 10px,
+  2: 12px,
+  3: 14px,
+  4: 16px,
+  5: 20px,
+  6: 24px,
+  7: 28px,
+  8: 32px,
+  9: 36px,
+  10: 40px,
+  11: 48px,
+  12: 52px,
+  13: 60px,
+  14: 72px,
+  15: 80px,
+);
 
-$font-weight-lighter:         300;
-$font-weight-light:           400;
-$font-weight-normal:          500;
+$font-weight-lighter:         200;
+$font-weight-light:           300;
+$font-weight-normal:          400;
+$font-weight-medium:          500;
+$font-weight-semibold:        600;
 $font-weight-bold:            700;
-$font-weight-bolder:          900;
+$font-weight-bolder:          800;
 
 // Typography
 $font-family-sans-serif: 'Inter', sans-serif;

diff --git a/resources/sass/app.scss b/resources/sass/app.scss
@@ -1,5 +1,5 @@
 // Fonts
-@import url('https://fonts.googleapis.com/css?family=Nunito');
+@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
 
 // Variables
 @import 'variables';

diff --git a/resources/views/components/footer.blade.php b/resources/views/components/footer.blade.php
@@ -1,4 +1,4 @@
-<footer class="mt-auto sticky-bottom ">
+<footer class="mt-auto">
     <div class="container d-flex justify-content-center border-top py-4">
         <p>&copy; SiyenShop 2024</p>
     </div>

diff --git a/resources/views/components/navbar.blade.php b/resources/views/components/navbar.blade.php
@@ -16,13 +16,13 @@
 
             <ul class="navbar-nav al justify-content-center flex-grow-1">
                 <li class="nav-item ">
-                    <a class="nav-link font-weight-bold text-primary fw-normal" href="#">Home</a>
+                    <a class="nav-link font-weight-bold text-primary fw-medium" href="#">Home</a>
                 </li>
                 <li class="nav-item">
-                    <a class="nav-link text-primary fw-normal" href="#">Products</a>
+                    <a class="nav-link text-primary fw-medium" href="#">Products</a>
                 </li>
                 <li class="nav-item">
-                    <a class="nav-link text-primary fw-normal" href="{{ url('/faq') }}">FAQs</a>
+                    <a class="nav-link text-primary fw-medium" href="{{ url('/faq') }}">FAQs</a>
                 </li>
             </ul>
 
@@ -39,7 +39,7 @@
                 @guest
                     @if (Route::has('login'))
                         <li class="nav-item me-3">
-                            <a class="text-white bg-secondary btn fw-bold ms-2 px-4 py-0 py-md-2" href="{{ route('login') }}">{{ __('Login') }}</a>
+                            <a class="text-white bg-secondary btn fw-medium ms-2 px-4 py-0 py-md-2" href="{{ route('login') }}">{{ __('Login') }}</a>
                         </li>
                     @endif
                 @endguest

diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
@@ -7,7 +7,7 @@
     <!-- CSRF Token -->
     <meta name="csrf-token" content="{{ csrf_token() }}">
 
-    <title>{{ config('app.name', 'Laravel') }}</title>
+    <title>{{ config('app.name') }}</title>
 
     <!-- Scripts -->
     <script src="{{ asset('js/app.js') }}" defer></script>

diff --git a/resources/views/welcome.blade.php b/resources/views/welcome.blade.php
@@ -3,16 +3,32 @@
     <head>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link rel="icon" href="{{ asset('images/logo.png') }}">
 
-        <title>Laravel</title>
+        <title>{{ config('app.name') }}</title>
 
-        <!-- Fonts -->
-        <link rel="stylesheet" href="../../public/css/app.css"> 
         <link href="{{ asset('css/app.css') }}" rel="stylesheet">
         <link href="{{ asset('css/custom.css') }}" rel="stylesheet">
     </head>
     <body class="antialiased">
         @include('components.navbar')
 
+        <p class="fs-1 ">hello world</p>
+        <p class="fs-2">hello world</p>
+        <p class="fs-3">hello world</p>
+        <p class="fs-4">hello world</p>
+        <p class="fs-5">hello world</p>
+        <p class="fs-6">hello world</p>
+        <p class="fs-7">hello world</p>
+        <p class="fs-8 fw-semibold">hello world</p>
+        <p class="fs-9 fw-bolder">hello world</p>
+        <p class="fs-10 fw-bold">hello world</p>
+        <p class="fs-11 fw-medium">hello world</p>
+        <p class="fs-12">hello world</p>
+        <p class="fs-13">hello world</p>
+        <p class="fs-14">hello world</p>
+        <p class="fs-15">hello world</p>
+
+
     </body>
 </html>