feat(12): adding style guide to config

2023-06-28 08:55:01 +00:00 · 2023-06-28 08:55:01 +00:00 · 578c5d7d05
parent b8c5a0f19b
commit 578c5d7d05
3 changed files with 26 additions and 3 deletions
--- a/12-order-summary-component-thymeleaf/src/input.css
+++ b/12-order-summary-component-thymeleaf/src/input.css
@ -1,3 +1,7 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
+
+html {
+    font-size: 16px;
+}
--- a/12-order-summary-component-thymeleaf/src/main/resources/templates/index.html
+++ b/12-order-summary-component-thymeleaf/src/main/resources/templates/index.html
@ -6,6 +6,7 @@

  <link rel="icon" type="image/png" sizes="32x32" href="./public/images/favicon-32x32.png">
  <link href="/dist/output.css" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@500;700;900&display=swap" rel="stylesheet">

  <title>Frontend Mentor | Order summary card</title>

@ -15,8 +16,7 @@
    .attribution a { color: hsl(228, 45%, 44%); }
  </style>
 </head>
-<body
-  class="bg-blue-200" >
+<body>

  Order Summary

--- a/12-order-summary-component-thymeleaf/tailwind.config.js
+++ b/12-order-summary-component-thymeleaf/tailwind.config.js
@ -2,7 +2,26 @@
 module.exports = {
  content: ["./src/**/*.html"],
  theme: {
-    extend: {},
+    extend: {
+      colors: {
+        'pale-blue': 'hsl(225, 100%, 94%)',
+        'bright-blue': 'hsl(245, 75%, 52%)',
+        'very-pale-blue': 'hsl(225, 100%, 98%)',
+        'desaturated-blue': 'hsl(224, 23%, 55%)',
+        'dark-blue': 'hsl(223, 47%, 23%)',
+      },
+      fontFamily: {
+        'sans': ['Red Hat Display', 'sans-serif'], // This will set Roboto as the default sans font
+      },
+      fontWeight: {
+        'thin': 100,
+        'normal': 400,
+        'semibold': 600,
+        'bold': 700,
+        'extrabold': 900,
+      }
+
+    },
  },
  plugins: [],
 }