aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorAnhgelus Morhtuuzh <anhgelus.morhtuuzh@proton.me>2024-11-09 23:53:27 +0100
committerAnhgelus Morhtuuzh <anhgelus.morhtuuzh@proton.me>2024-11-09 23:53:27 +0100
commitbbacda44f8cd1629d311ce0242fd01124fe4c876 (patch)
tree3b53e68d51fcdd84a9d3faffd4b530ecc11d9df4
parent5b98185aa6149660be9fd278f48515690d19307a (diff)
feat(style): custom colors
-rw-r--r--data.go34
-rw-r--r--example.json46
-rw-r--r--scss/main.scss2
-rw-r--r--templates/page/index.gohtml6
4 files changed, 54 insertions, 34 deletions
diff --git a/data.go b/data.go
index 59f1593..7ac825b 100644
--- a/data.go
+++ b/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 (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)
+ return template.CSS("background: " + l.Color + ";")
}
diff --git a/example.json b/example.json
index 2897b7b..c9cf1ae 100644
--- a/example.json
+++ b/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"
}
]
} \ No newline at end of file
diff --git a/scss/main.scss b/scss/main.scss
index 575828c..5283641 100644
--- a/scss/main.scss
+++ b/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;
}
diff --git a/templates/page/index.gohtml b/templates/page/index.gohtml
index e39c8f4..cfb90ed 100644
--- a/templates/page/index.gohtml
+++ b/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>