From e6a05f21d1956f6ccc12c45a67e094093b1541d6 Mon Sep 17 00:00:00 2001
From: Juan Massuelles <jbmassuelles@solocal.com>
Date: Wed, 30 Aug 2023 11:01:41 +0200
Subject: [PATCH] [HTML/CSS] pure css pie charts

 - adding new ref
 - cleaner scss structure
---
 pies/_global.scss                                    | 13 +++++++++++++
 .../{_pie-charts.scss => _pie-charts-multipart.scss} | 15 ---------------
 pies/index.html                                      |  4 ++++
 pies/pie-charts.css                                  | 20 ++++++++++----------
 pies/pie-charts.css.map                              |  4 ++--
 pies/style.scss                                      |  2 ++
 6 files changed, 31 insertions(+), 27 deletions(-)
 create mode 100644 pies/_global.scss
 rename pies/{_pie-charts.scss => _pie-charts-multipart.scss} (74%)
 create mode 100644 pies/style.scss

diff --git a/pies/_global.scss b/pies/_global.scss
new file mode 100644
index 0000000..5a9a26f
--- /dev/null
+++ b/pies/_global.scss
@@ -0,0 +1,13 @@
+.references {
+  position:fixed;
+  bottom:5px;
+  right:5px;
+  border-radius:5px;
+  padding:10px;
+  background-color:lightblue;
+  a {
+    &[href],&:link,&:hover,&:focus,&:active {
+      color:darkblue;
+    }
+  }
+}
diff --git a/pies/_pie-charts.scss b/pies/_pie-charts-multipart.scss
similarity index 74%
rename from pies/_pie-charts.scss
rename to pies/_pie-charts-multipart.scss
index e17763f..c223944 100644
--- a/pies/_pie-charts.scss
+++ b/pies/_pie-charts-multipart.scss
@@ -35,18 +35,3 @@ $segment-border-width:1px;
   width:  ($pie-size + $border-width * 2);
   background-color:$line-color;
 }
-
-.references {
-  position:fixed;
-  bottom:5px;
-  right:5px;
-  border-radius:5px;
-  padding:10px;
-  background-color:lightblue;
-  a {
-    &[href],&:link,&:hover,&:focus,&:active {
-      color:darkblue;
-    }
-  }
-}
-
diff --git a/pies/index.html b/pies/index.html
index 0ceae2c..9949359 100644
--- a/pies/index.html
+++ b/pies/index.html
@@ -21,6 +21,10 @@
         <strong>HOW TO: Pure CSS pie charts w/ CSS variables</strong>
         <br/><span>Create customisable pie charts in ~30 lines of CSS</span>
       </a>
+      <a href="https://www.freecodecamp.org/news/css-only-pie-chart/">
+        <strong>How to Create a Pie Chart Using Only CSS</strong>
+        <br/><span>only one slice ;)</span>
+      </a>
     </p>
   </body>
 </html>
diff --git a/pies/pie-charts.css b/pies/pie-charts.css
index d4f9c8e..a2c70be 100644
--- a/pies/pie-charts.css
+++ b/pies/pie-charts.css
@@ -1,3 +1,13 @@
+.references {
+  position: fixed;
+  bottom: 5px;
+  right: 5px;
+  border-radius: 5px;
+  padding: 10px;
+  background-color: lightblue; }
+  .references a[href], .references a:link, .references a:hover, .references a:focus, .references a:active {
+    color: darkblue; }
+
 :root {
   font-family: sans-serif; }
 
@@ -22,14 +32,4 @@
   width: 310px;
   background-color: #cecece; }
 
-.references {
-  position: fixed;
-  bottom: 5px;
-  right: 5px;
-  border-radius: 5px;
-  padding: 10px;
-  background-color: lightblue; }
-  .references a[href], .references a:link, .references a:hover, .references a:focus, .references a:active {
-    color: darkblue; }
-
 /*# sourceMappingURL=pie-charts.css.map */
diff --git a/pies/pie-charts.css.map b/pies/pie-charts.css.map
index 468c661..3b0223f 100644
--- a/pies/pie-charts.css.map
+++ b/pies/pie-charts.css.map
@@ -1,7 +1,7 @@
 {
 "version": 3,
-"mappings": "AASA,KAAK;EACH,WAAW,EAAE,UAAU;;AAGzB,aAAa;EACX,aAAa,EAAE,IAAI;EACnB,QAAQ,EAAE,QAAQ;;AAGpB,IAAK;EACH,MAAM,EAnBE,KAAK;EAoBb,KAAK,EApBG,KAAK;EAqBb,gBAAgB,EApBV,OAAO;EAqBb,GAAG,EAhBS,GAAG;EAiBf,IAAI,EAjBQ,GAAG;EAkBf,YAAU;IACR,MAAM,EAAE,kBAAwC;IAChD,QAAQ,EAAE,QAAQ;IAClB,MAAM,EAAE,IAAI;IACZ,KAAK,EAAC,IAAI;;AAId,OAAQ;EACN,MAAM,EAAE,KAA+B;EACvC,KAAK,EAAG,KAA+B;EACvC,gBAAgB,EA9BN,OAAO;;AAiCnB,WAAY;EACV,QAAQ,EAAC,KAAK;EACd,MAAM,EAAC,GAAG;EACV,KAAK,EAAC,GAAG;EACT,aAAa,EAAC,GAAG;EACjB,OAAO,EAAC,IAAI;EACZ,gBAAgB,EAAC,SAAS;EAExB,uGAAwC;IACtC,KAAK,EAAC,QAAQ",
-"sources": ["_pie-charts.scss"],
+"mappings": "AAAA,WAAY;EACV,QAAQ,EAAC,KAAK;EACd,MAAM,EAAC,GAAG;EACV,KAAK,EAAC,GAAG;EACT,aAAa,EAAC,GAAG;EACjB,OAAO,EAAC,IAAI;EACZ,gBAAgB,EAAC,SAAS;EAExB,uGAAwC;IACtC,KAAK,EAAC,QAAQ;;ACApB,KAAK;EACH,WAAW,EAAE,UAAU;;AAGzB,aAAa;EACX,aAAa,EAAE,IAAI;EACnB,QAAQ,EAAE,QAAQ;;AAGpB,IAAK;EACH,MAAM,EAnBE,KAAK;EAoBb,KAAK,EApBG,KAAK;EAqBb,gBAAgB,EApBV,OAAO;EAqBb,GAAG,EAhBS,GAAG;EAiBf,IAAI,EAjBQ,GAAG;EAkBf,YAAU;IACR,MAAM,EAAE,kBAAwC;IAChD,QAAQ,EAAE,QAAQ;IAClB,MAAM,EAAE,IAAI;IACZ,KAAK,EAAC,IAAI;;AAId,OAAQ;EACN,MAAM,EAAE,KAA+B;EACvC,KAAK,EAAG,KAA+B;EACvC,gBAAgB,EA9BN,OAAO",
+"sources": ["_global.scss","_pie-charts-multipart.scss"],
 "names": [],
 "file": "pie-charts.css"
 }
\ No newline at end of file
diff --git a/pies/style.scss b/pies/style.scss
new file mode 100644
index 0000000..8916b65
--- /dev/null
+++ b/pies/style.scss
@@ -0,0 +1,2 @@
+@import "global";
+@import "pie-charts-multipart";
\ No newline at end of file