From 9dceae06a797c33f0108cf29146988df3627e0fb Mon Sep 17 00:00:00 2001
From: Balakrishnan Balasubramanian <git.user@balki.me>
Date: Tue, 5 Sep 2023 09:04:54 -0400
Subject: [PATCH] Move css to seperate file and add no-cache for dev assets

---
 main.go        |  5 ++-
 web/index.css  | 83 ++++++++++++++++++++++++++++++++++++++++++++++++
 web/index.html | 86 +-------------------------------------------------
 3 files changed, 88 insertions(+), 86 deletions(-)
 create mode 100644 web/index.css

diff --git a/main.go b/main.go
index ab40a46..3b8cebe 100644
--- a/main.go
+++ b/main.go
@@ -53,7 +53,10 @@ func main() {
 
 	if localAssets {
 		httpFileServer := http.FileServer(http.Dir("web"))
-		http.Handle("/", httpFileServer)
+		http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
+			w.Header().Add("Cache-Control", "no-cache")
+			httpFileServer.ServeHTTP(w, r)
+		})
 	} else {
 		fs, err := fs.Sub(webFS, "web")
 
diff --git a/web/index.css b/web/index.css
new file mode 100644
index 0000000..8bae6b0
--- /dev/null
+++ b/web/index.css
@@ -0,0 +1,83 @@
+.container {
+    display: flex;
+    background-color: lightyellow;
+    height: calc(100vh - 20px);
+}
+.controls {
+    background-color: lightgrey;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 30%;
+}
+.imagebox {
+    padding: 2rem;
+    flex: 70%;
+}
+.image-surface {
+    overflow: hidden;
+    margin: auto;
+    border: 1px solid;
+    height: 100%;
+    width: 100%;
+}
+.showbuton {
+    font-size: 2rem;
+}
+
+// paper sizes
+.letter-portrait {
+    aspect-ratio: 85 / 110;
+}
+.letter-landscape {
+    aspect-ratio: 110 / 85;
+}
+.fiveseven-portrait {
+    aspect-ratio: 5 / 7;
+}
+.fiveseven-landscape {
+    aspect-ratio: 7 / 5;
+}
+.foursix-portrait {
+    aspect-ratio: 4 / 6;
+}
+.foursix-landscape {
+    aspect-ratio: 6 / 4;
+}
+
+.half-landscape {
+    display:flex;
+}
+
+.half-landscape .collage-img {
+    flex: 50%;
+}
+
+.one-two {
+    display: grid;
+    grid-template-areas: 
+    "one two"
+    "one three";
+}
+.one-two .img1{
+    grid-area: one;
+}
+
+.letter-portrait .collage-img {
+    height: 50%;
+}
+.letter-landscape-2 {
+    display:flex;
+    // width: 80vh;
+    height: 100%;
+    // margin: auto;
+    aspect-ratio: 110 / 85;
+    // aspect-ratio: 7 / 5;
+    gap: 1rem;
+}
+.letter-landscape-2 .img1 {
+    flex: 60%;
+}
+.letter-landscape-2 .img2 {
+    flex: 40%;
+}
diff --git a/web/index.html b/web/index.html
index ae05372..0fc3c2e 100644
--- a/web/index.html
+++ b/web/index.html
@@ -6,97 +6,13 @@
         <script src="http://localhost:35729/livereload.js"></script>
         <script src="croppie.js"></script>
         <script src="index.js"></script>
+        <link rel="stylesheet" href="index.css" />
         <!--
             width: 3264px;
             height: 4224px;
             width: 8.5in;
             height: 11in;
         -->
-        <style>
-            .container {
-                display: flex;
-                background-color: lightyellow;
-                height: calc(100vh - 20px);
-            }
-            .controls {
-                background-color: lightgrey;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                flex: 30%;
-            }
-            .imagebox {
-                padding: 2rem;
-                flex: 70%;
-            }
-            .image-surface {
-                overflow: hidden;
-                margin: auto;
-                border: 2px solid;
-                height: 100%;
-                width: 100%;
-            }
-            .showbuton {
-                font-size: 2rem;
-            }
-            
-            // paper sizes
-            .letter-portrait {
-                aspect-ratio: 85 / 110;
-            }
-            .letter-landscape {
-                aspect-ratio: 110 / 85;
-            }
-            .fiveseven-portrait {
-                aspect-ratio: 5 / 7;
-            }
-            .fiveseven-landscape {
-                aspect-ratio: 7 / 5;
-            }
-            .foursix-portrait {
-                aspect-ratio: 4 / 6;
-            }
-            .foursix-landscape {
-                aspect-ratio: 6 / 4;
-            }
-
-            .half-landscape {
-                display:flex;
-            }
-
-            .half-landscape .collage-img {
-                flex: 50%;
-            }
-
-            .one-two {
-                display: grid;
-                grid-template-areas: 
-                    "one two"
-                    "one three";
-            }
-            .one-two .img1{
-                grid-area: one;
-            }
-
-            .letter-portrait .collage-img {
-                height: 50%;
-            }
-            .letter-landscape-2 {
-                display:flex;
-                // width: 80vh;
-                height: 100%;
-                // margin: auto;
-                aspect-ratio: 110 / 85;
-                // aspect-ratio: 7 / 5;
-                gap: 1rem;
-            }
-            .letter-landscape-2 .img1 {
-                flex: 60%;
-            }
-            .letter-landscape-2 .img2 {
-                flex: 40%;
-            }
-        </style>
     </head>
     <body onload="main()">
         <div class="container">