From 860128823050c4ef5c0d13fed88d0fc9ea83b87a Mon Sep 17 00:00:00 2001
From: efim <efim666@bk.ru>
Date: Tue, 12 Mar 2024 09:00:57 +0000
Subject: [PATCH] feat(18): colors and fonts to tailwind

---
 18-expenses-chart/Makefile              |  2 +-
 18-expenses-chart/input.css             |  4 +++
 18-expenses-chart/main.go               |  2 +-
 18-expenses-chart/notes.org             | 22 +++++++++++++
 18-expenses-chart/tailwind.config.js    | 24 ++++++++++++--
 18-expenses-chart/templates/hello.templ | 16 ---------
 18-expenses-chart/templates/index.html  | 43 -------------------------
 18-expenses-chart/templates/index.templ | 39 ++++++++++++++++++++++
 8 files changed, 89 insertions(+), 63 deletions(-)
 delete mode 100644 18-expenses-chart/templates/hello.templ
 delete mode 100644 18-expenses-chart/templates/index.html
 create mode 100644 18-expenses-chart/templates/index.templ

diff --git a/18-expenses-chart/Makefile b/18-expenses-chart/Makefile
index cc8de80..ba21c60 100644
--- a/18-expenses-chart/Makefile
+++ b/18-expenses-chart/Makefile
@@ -25,4 +25,4 @@ run: $(GENERATED_FILES) $(OUTPUT_CSS)
 # and then do `go run .` to rebuild all else
 .PHONY: run/live
 run/live:
-	wgo -verbose -file=.go -file=.templ make run
+	wgo -verbose -file=.go -file=.templ -file=$(INPUT_CSS) -file=$(TAILWIND_CONFIG) make run
diff --git a/18-expenses-chart/input.css b/18-expenses-chart/input.css
index b5c61c9..475f6a7 100644
--- a/18-expenses-chart/input.css
+++ b/18-expenses-chart/input.css
@@ -1,3 +1,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+html {
+    font-size: 18px;
+}
diff --git a/18-expenses-chart/main.go b/18-expenses-chart/main.go
index 602ddc4..e006c91 100644
--- a/18-expenses-chart/main.go
+++ b/18-expenses-chart/main.go
@@ -9,7 +9,7 @@ import (
 )
 
 func main() {
-	component := templates.Hello("some name")
+	component := templates.IndexPage()
 		
 	http.Handle("/", templ.Handler(component))
 
diff --git a/18-expenses-chart/notes.org b/18-expenses-chart/notes.org
index be3e33b..5ff4e67 100644
--- a/18-expenses-chart/notes.org
+++ b/18-expenses-chart/notes.org
@@ -34,3 +34,25 @@ how would i commit to subtree upstream if there are conflicting changes?
 maybe i'll just get denied, as simple as that.
 
 allright! let's add exercise specific data (again)
+
+* so, starting dev
+
+old process:
+1. open second browser and open png with style
+   first mobile
+2. enable view C-S-m in firefox
+   the responsive mode
+
+i suppose next is adding colors to tailwind configuration?
+from the styleguide file
+
+also
+3. check desktop style, whether any big rearrangements are required
+   so that i'd start mobile with way to rearrange things
+
+do i have a separate note with all of these things?
+i've also used some commands to vertically center my stuff
+
+** TODO allright, tailwind config go
+font, size, colors
+
diff --git a/18-expenses-chart/tailwind.config.js b/18-expenses-chart/tailwind.config.js
index 6eb134e..286cd0a 100644
--- a/18-expenses-chart/tailwind.config.js
+++ b/18-expenses-chart/tailwind.config.js
@@ -1,8 +1,28 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ["./**/*.templ"],
+  content: ["./templates/index.templ"],
   theme: {
-    extend: {},
+    extend: {
+      fontFamily: {
+        'sans': ['DM Sans', 'sans-serif'], 
+      },
+      fontWeight: {
+        'normal': 400,
+        'bold': 700,
+      }
+    },
+    colors: {
+      primary: {
+        'soft-red': 'hsl(10, 79%, 65%)',
+        cyan: 'hsl(186, 34%, 60%)',
+      },
+      neutral: {
+        'dark-brown': 'hsl(25, 47%, 15%)',
+        'medum-brown': 'hsl(28, 10%, 53%)',
+        cream: 'hsl(27, 66%, 92%)',
+        'very-pale-orange': 'hsl(33, 100%, 98%)',
+      },
+    }
   },
   plugins: [],
 }
diff --git a/18-expenses-chart/templates/hello.templ b/18-expenses-chart/templates/hello.templ
deleted file mode 100644
index 9338eaf..0000000
--- a/18-expenses-chart/templates/hello.templ
+++ /dev/null
@@ -1,16 +0,0 @@
-package templates
-
-var myVar string = "some string, changed. and more"
-var anotherVar string = "hoho, cool"
-
-templ Hello(name string) {
-	<html>
-		<head>
-			<title>This is the title of the the webpage!</title>
-			  <link href="/static/output.css" rel="stylesheet"/>
-		</head>
-		<body class="bg-blue-100 text-xl">
-			<p class="text-purple-700">This is an example paragraph. Anything in the <strong>body</strong> tag will appear on the page, just like this <strong>p</strong> tag and its contents.</p>
-		</body>
-	</html>
-}
diff --git a/18-expenses-chart/templates/index.html b/18-expenses-chart/templates/index.html
deleted file mode 100644
index 6177a84..0000000
--- a/18-expenses-chart/templates/index.html
+++ /dev/null
@@ -1,43 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
-
-  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
-  
-  <title>Frontend Mentor | Expenses chart component</title>
-
-  <!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
-  <style>
-    .attribution { font-size: 11px; text-align: center; }
-    .attribution a { color: hsl(228, 45%, 44%); }
-  </style>
-</head>
-<body>
-
-  My balance
-  $921.48
-
-  Spending - Last 7 days
-
-  mon
-  tue
-  wed
-  thu
-  fri
-  sat
-  sun
-
-  Total this month
-  $478.33
-
-  +2.4%
-  from last month
-  
-  <div class="attribution">
-    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
-    Coded by <a href="#">Your Name Here</a>.
-  </div>
-</body>
-</html>
\ No newline at end of file
diff --git a/18-expenses-chart/templates/index.templ b/18-expenses-chart/templates/index.templ
new file mode 100644
index 0000000..cf64f2d
--- /dev/null
+++ b/18-expenses-chart/templates/index.templ
@@ -0,0 +1,39 @@
+package templates
+
+templ IndexPage() {
+	<html lang="en">
+		<head>
+			<link href="https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@400,700&display=swap" rel="stylesheet"/>
+			<link href="/static/output.css" rel="stylesheet"/>
+			<meta charset="UTF-8"/>
+			<meta name="viewport" content="width=device-width, initial-scale=1.0"/> <!-- displays site properly based on user's device -->
+			<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png"/>
+			<title>Frontend Mentor | Expenses chart component</title>
+			<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
+			<style>
+    .attribution { font-size: 11px; text-align: center; }
+    .attribution a { color: hsl(228, 45%, 44%); }
+  </style>
+		</head>
+		<body class="bg-neutral-very-pale-orange">
+			My balance
+			Spending - Last 7 days
+			$921.48
+			mon
+			tue
+			wed
+			thu
+			fri
+			sat
+			sun
+			Total this month
+			$478.33
+			+2.4%
+			from last month
+			<div class="attribution">
+				Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
+				Coded by <a href="#">Your Name Here</a>.
+			</div>
+		</body>
+	</html>
+}