client(Inputs): added two more input fields for the ont-weight and for the ont size query params

Author: 0l1v3rr

README.md

@@ -53,15 +53,15 @@ With this site, you can customize your card.
 ## 🔧 Query parameters
 | Parameter | Example | Default value | Description|
 |---------- |---------|---------------|------------|
-| **title** | `?title=My%20Custom%20Title` | My Tech Stack | The title of the card. %20 can be used as a space. |
+| **title** | `?title=My%20Title` | My Tech Stack | The title of the card. %20 can be used as a space. |
 | **theme** | `?theme=github_dark` | github | The theme of the card. You can browse between the themes [here](#-themes). |
 | **align** | `?align=center` | left | The alignment of the badges. (`left`, `center`, `right`) |
 | **showBorder** | `?showBorder=false` | true | Display the border around the card or not. (`true`, `false`) |
 | **borderRadius** | `?borderRadius=12.5` | 4.5 | Value between 0 and 50. |
 | **fontSize** | `?fontSize=20` | 18 | The size of the title. Accepts a value between 15 and 30. |
 | **fontWeight** | `?fontWeight=normal` | semibold | The thickness of the title. (`thin`, `normal`, `semibold`, `bold`) |
 | **lineCount** | `?lineCount=2` | 1 | The number of lines you want to add to your card. |
-| **line{n}** | `?line1=typescript,typescript,2D79C7` | - | The current line of the badge, where {n} is a number. *`(1 <= n <= lineCount)`* |
+| **line{n}** | `?line1=html5,html5,auto` | - | The current line of the badge, where {n} is a number. *`(1 <= n <= lineCount)`* |
 
 <hr>
 

client/build/asset-manifest.json

@@ -35,3 +35,13 @@ export const borderRadiusState = atom({
   key: "borderRadius",
   default: "4.5",
 });
+
+export const fontSizeState = atom({
+  key: "fontSize",
+  default: "18",
+});
+
+export const fontWeightState = atom({
+  key: "fontWeight",
+  default: "semibold",
+});

client/build/index.html

@@ -22,9 +22,10 @@ const TrueFalseInput: FC<TrueFalseInputProps> = (props) => {
         <div
           onClick={() => props.setValue(true)}
           className={`py-1 px-4 border border-solid border-gh-border rounded-md 
-            cursor-pointer transition-all duration-150 hover:text-green-400 
-            hover:border-gh-button-border-active hover:bg-gh-button ${
-              props.value ? "text-green-400 bg-gh-button" : ""
+            cursor-pointer transition-all duration-150 hover:text-green-400 hover:bg-gh-button ${
+              props.value
+                ? "text-green-400 bg-gh-button"
+                : "hover:border-gh-button-border-active"
             }`}
         >
           True
@@ -33,9 +34,10 @@ const TrueFalseInput: FC<TrueFalseInputProps> = (props) => {
         <div
           onClick={() => props.setValue(false)}
           className={`py-1 px-4 border border-solid border-gh-border rounded-md 
-            cursor-pointer transition-all duration-150 hover:text-red-400 
-            hover:border-gh-button-border-active hover:bg-gh-button ${
-              !props.value ? "text-red-400 bg-gh-button" : ""
+            cursor-pointer transition-all duration-150 hover:text-red-400 hover:bg-gh-button ${
+              !props.value
+                ? "text-red-400 bg-gh-button"
+                : "hover:border-gh-button-border-active"
             }`}
         >
           False