feat(style): custom colors

data.go

@@ -9,7 +9,7 @@ type Data struct {
 	Image       string  `json:"image"`
 	Description string  `json:"description"`
 	Person      *Person `json:"person"`
-	BackgroundColor *BackgroundColor `json:"background_color"`
+	Color       *Color  `json:"colors"`
 	Links       []*Link `json:"links"`
 }
 
@@ -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"`
@@ -32,10 +37,11 @@ type Link struct {
 	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 {
+func (d *Data) GetTextColor() template.CSS {
-	return template.CSS("background: " + l.Color)
+	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,7 +6,9 @@
     "pronouns": "he/his - some basic things though",
     "image": "pfp.webp"
   },
-  "background_color": {
+  "colors": {
+    "text": "#fff",
+    "background": {
       "type": "linear",
       "angle": 243,
       "colors": [
@@ -23,22 +25,26 @@
           "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>