feat(style): custom colors

data.go

@@ -6,11 +6,11 @@ import (
 )
 
 type Data struct {
-	Image           string           `json:"image"`
-	Description     string           `json:"description"`
-	Person          *Person          `json:"person"`
-	BackgroundColor *BackgroundColor `json:"background_color"`
-	Links           []*Link          `json:"links"`
+	Image       string  `json:"image"`
+	Description string  `json:"description"`
+	Person      *Person `json:"person"`
+	Color       *Color  `json:"colors"`
+	Links       []*Link `json:"links"`
 }
 
 type Person struct {
@@ -19,6 +19,11 @@ type Person struct {
 	Image    string `json:"image"`
 }
 
+type Color struct {
+	Background *BackgroundColor `json:"background"`
+	Text       string           `json:"text"`
+}
+
 type BackgroundColor struct {
 	Type   string `json:"type"`
 	Angle  uint   `json:"angle"`
@@ -29,13 +34,14 @@ type BackgroundColor struct {
 }
 
 type Link struct {
-	Link    string `json:"link"`
-	Content string `json:"content"`
-	Color   string `json:"color"`
+	Link      string `json:"link"`
+	Content   string `json:"content"`
+	Color     string `json:"color"`
+	TextColor string `json:"text_color"`
 }
 
 func (d *Data) GetBackground() template.CSS {
-	bg := d.BackgroundColor
+	bg := d.Color.Background
 	css := "background: " + bg.Type + "-gradient("
 	if bg.Type == "linear" {
 		css += strconv.Itoa(int(bg.Angle)) + "deg,"
@@ -46,6 +52,14 @@ func (d *Data) GetBackground() template.CSS {
 	return template.CSS(css[:len(css)-1] + ");")
 }
 
-func (l *Link) GetBackground() template.CSS {
-	return template.CSS("background: " + l.Color)
+func (d *Data) GetTextColor() template.CSS {
+	return template.CSS("color: " + d.Color.Text + ";")
+}
+
+func (l *Link) GetLinkColor() template.CSS {
+	return template.CSS("color: " + l.TextColor + ";")
+}
+
+func (l *Link) GetBackground() template.CSS {
+	return template.CSS("background: " + l.Color + ";")
 }

example.json

@@ -6,39 +6,45 @@
     "pronouns": "he/his - some basic things though",
     "image": "pfp.webp"
   },
-  "background_color": {
-    "type": "linear",
-    "angle": 243,
-    "colors": [
-      {
-        "color": "#020024",
-        "position": 0
-      },
-      {
-        "color": "#090979",
-        "position": 40
-      },
-      {
-        "color": "#00d4ff",
-        "position": 100
-      }
-    ]
+  "colors": {
+    "text": "#fff",
+    "background": {
+      "type": "linear",
+      "angle": 243,
+      "colors": [
+        {
+          "color": "#020024",
+          "position": 0
+        },
+        {
+          "color": "#090979",
+          "position": 40
+        },
+        {
+          "color": "#00d4ff",
+          "position": 100
+        }
+      ]
+    }
   },
   "links": [
     {
       "link": "https://discord.gg/minecraft",
       "content": "Minecraft's Discord",
-      "color": "#800080FF"
+      "color": "#800080FF",
+      "text_color": "#fff"
     },
     {
       "link": "https://github.com/anhgelus",
       "content": "GitHub",
-      "color": "#800080FF"
+      "color": "#800080FF",
+      "text_color": "#fff"
     },
     {
       "link": "https://youtube.com/@anhgelus",
       "content": "YouTube",
-      "color": "#800080FF"
+      "color": "#800080FF",
+      "text_color": "#fff"
     }
   ]
 }

scss/main.scss

@@ -21,7 +21,6 @@ body {
 
 main {
   width: 50%;
-  background: mediumpurple;
   padding: 2rem;
   border-radius: 32px;
   box-shadow: 0 0 70px 2px rgba(0,0,0,0.75);
@@ -73,7 +72,6 @@ h2 {
     display: flex;
     align-items: center;
     justify-content: center;
-    background: purple;
     width: 33%;
     border-radius: 16px;
   }

templates/page/index.gohtml

@@ -1,5 +1,5 @@
 {{define "body"}}
-    <main style="{{ .GetBackground }}">
+    <main style="{{ .GetBackground }}{{ .GetTextColor }}">
         <div class="presentation">
             <figure>
                 <img src="{{ getStaticPath .Person.Image }}" alt="{{ .Person.Name }}'s image">
@@ -12,7 +12,9 @@
         <p class="description">{{ .Description }}</p>
         <div class="links">
             {{ range $link := .Links }}
-            <div class="link" style="{{ $link.GetBackground }}"><a href="{{ $link.Link }}">{{ $link.Content }}</a></div>
+            <div class="link" style="{{ .GetBackground }}">
+                <a href="{{ .Link }}" style="{{ .GetLinkColor }}">{{ .Content }}</a>
+            </div>
             {{end}}
         </div>
     </main>