feat(style): custom colors for default buttons

3 files changed, 21 insertions, 4 deletions

diff --git a/data.go b/data.go
index c4f9354..c5c98c3 100644
--- a/data.go
+++ b/data.go
@@ -29,6 +29,7 @@ type Tag struct {
 
 type Color struct {
 	Background *BackgroundColor `json:"background"`
+	Button     *ButtonColor     `json:"buttons"`
 	Text       string           `json:"text"`
 }
 
@@ -41,6 +42,13 @@ type BackgroundColor struct {
 	} `json:"colors"`
 }
 
+type ButtonColor struct {
+	Text            string `json:"text"`
+	TextHover       string `json:"text_hover"`
+	Background      string `json:"background"`
+	BackgroundHover string `json:"background_hover"`
+}
+
 type Link struct {
 	Link           string `json:"link"`
 	Content        string `json:"content"`
@@ -76,6 +84,14 @@ func (c *Config) GetTextColor() template.CSS {
 	return template.CSS("--text-color: " + c.Color.Text + ";")
 }
 
+func (b *ButtonColor) GetTextColor() template.CSS {
+	return template.CSS("--text-color: " + b.Text + ";--text-color-hover: " + b.TextHover + ";")
+}
+
+func (b *ButtonColor) GetBackground() template.CSS {
+	return template.CSS("--background: " + b.Background + ";--background-hover: " + b.BackgroundHover + ";")
+}
+
 func (l *Link) GetLinkColor() template.CSS {
 	return template.CSS("--text-color: " + l.TextColor + ";--text-color-hover: " + l.TextColorHover + ";")
 }
diff --git a/scss/main.scss b/scss/main.scss
index 1625649..9d00489 100644
--- a/scss/main.scss
+++ b/scss/main.scss
@@ -166,10 +166,11 @@ h4 {
   grid-template-columns: repeat(3, 1fr);
   margin-top: 2rem;
   width: 100%;
-  gap: 1rem;
+  column-gap: 1rem;
+  row-gap: 0.5rem;
   @media only screen and (max-width: vars.$bp-little) {
     grid-template-columns: 1fr;
-    gap: 0.5rem;
+    column-gap: 0.5rem;
     align-items: center;
   }
   & .link {
diff --git a/templates/page/index.gohtml b/templates/page/index.gohtml
index 4b1389a..9bef33a 100644
--- a/templates/page/index.gohtml
+++ b/templates/page/index.gohtml
@@ -18,8 +18,8 @@
                 <a href="{{ .Link }}" style="{{ .GetLinkColor }}">{{ .Content }}</a>
             </div>
             {{ end }}
-            <div class="link" style="--background: #000;--background-hover: #333;">
-                <a href="/tags" style="--text-color: #ddd;--text-color-hover: #fff;">Tags</a>
+            <div class="link" style="{{ .Color.Button.GetBackground }}">
+                <a href="/tags" style="{{ .Color.Button.GetTextColor }}">Tags</a>
             </div>
         </div>
     </main>