anhgelus/now
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(link): change color on hover

Browse source
This commit is contained in:
Anhgelus Morhtuuzh 2024-11-10 00:43:24 +01:00
parent 8129d4f13d
commit 6a177e4663
No known key found for this signature in database
GPG key ID: CAD341EFA92DDDE5
5 changed files with 43 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

18
data.go
View file

@ -36,10 +36,12 @@ type BackgroundColor struct {
} }
type Link struct { type Link struct {
Link string `json:"link"` Link string `json:"link"`
Content string `json:"content"` Content string `json:"content"`
Color string `json:"color"` Color string `json:"color"`
TextColor string `json:"text_color"` TextColor string `json:"text_color"`
ColorHover string `json:"color_hover"`
TextColorHover string `json:"text_color_hover"`
} }
type Legal struct { type Legal struct {
@ -60,17 +62,17 @@ func (d *Data) GetBackground() template.CSS {
} }
func (d *Data) GetBackgroundImage() template.CSS { func (d *Data) GetBackgroundImage() template.CSS {
return template.CSS("background-image: url(" + golatt.GetStaticPath(d.Image) + ");") return template.CSS("--background-image: url(" + golatt.GetStaticPath(d.Image) + ");")
} }
func (d *Data) GetTextColor() template.CSS { func (d *Data) GetTextColor() template.CSS {
return template.CSS("color: " + d.Color.Text + ";") return template.CSS("--text-color: " + d.Color.Text + ";")
} }
func (l *Link) GetLinkColor() template.CSS { func (l *Link) GetLinkColor() template.CSS {
return template.CSS("color: " + l.TextColor + ";") return template.CSS("--text-color: " + l.TextColor + ";--text-color-hover: " + l.TextColorHover + ";")
} }
func (l *Link) GetBackground() template.CSS { func (l *Link) GetBackground() template.CSS {
return template.CSS("background: " + l.Color + ";") return template.CSS("--background: " + l.Color + ";--background-hover: " + l.ColorHover + ";")
} }

14
example.json
View file

@ -31,20 +31,26 @@
{ {
"link": "https://discord.gg/minecraft", "link": "https://discord.gg/minecraft",
"content": "Minecraft's Discord", "content": "Minecraft's Discord",
"color": "#800080FF", "color": "#800080",
"text_color": "#fff" "text_color": "#fff",
"color_hover": "#680c68",
"text_color_hover": "#eee"
}, },
{ {
"link": "https://github.com/anhgelus", "link": "https://github.com/anhgelus",
"content": "GitHub", "content": "GitHub",
"color": "#800080FF", "color": "#800080FF",
"text_color": "#fff" "text_color": "#fff",
"color_hover": "#680c68",
"text_color_hover": "#eee"
}, },
{ {
"link": "https://youtube.com/@anhgelus", "link": "https://youtube.com/@anhgelus",
"content": "YouTube", "content": "YouTube",
"color": "#800080FF", "color": "#800080FF",
"text_color": "#fff" "text_color": "#fff",
"color_hover": "#680c68",
"text_color_hover": "#eee"
} }
], ],
"legal": { "legal": {

26
scss/main.scss
View file

@ -1,15 +1,19 @@
@use "../node_modules/reset-css/reset.css"; @use "../node_modules/reset-css/reset.css";
:root {
--text-color: #000
}
body { body {
--background-image: ;
height: 100vh; height: 100vh;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 18px; font-size: 18px;
background-position: center; background: var(--background-image) center fixed no-repeat;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover; background-size: cover;
color: var(--text-color);
} }
.credits { .credits {
@ -19,7 +23,7 @@ body {
gap: 1em; gap: 1em;
font-size: 16px; font-size: 16px;
& a { & a {
color: black; color: var(--text-color);
} }
} }
@ -44,6 +48,7 @@ h2 {
align-items: center; align-items: center;
gap: 2rem; gap: 2rem;
margin-bottom: 2rem; margin-bottom: 2rem;
color: var(--text-color);
&__information { &__information {
display: flex; display: flex;
@ -68,6 +73,10 @@ h2 {
} }
.links { .links {
--text-color-hover: var(--text-color);
--background: #000;
--background-hover: var(--background);
display: flex; display: flex;
margin-top: 2rem; margin-top: 2rem;
width: 100%; width: 100%;
@ -78,13 +87,20 @@ h2 {
justify-content: center; justify-content: center;
width: 33%; width: 33%;
border-radius: 16px; border-radius: 16px;
background: var(--background);
&:hover {
background: var(--background-hover);
}
} }
& a { & a {
display: block; display: block;
color: black; color: var(--text-color);
text-decoration: none; text-decoration: none;
text-align: center; text-align: center;
padding: 1em; padding: 1em;
width: 100%; width: 100%;
&:hover {
color: var(--text-color-hover);
}
} }
} }

2
templates/base/base.gohtml
View file

@ -9,7 +9,7 @@
<link rel="stylesheet" href="{{getAssetPath "styles.css"}}" /> <link rel="stylesheet" href="{{getAssetPath "styles.css"}}" />
{{template "opengraph-base" .SEO}} {{template "opengraph-base" .SEO}}
</head> </head>
<body style="{{ .Data.GetBackgroundImage }}"> <body style="{{ .Data.GetBackgroundImage }}{{ .Data.GetTextColor }}">
{{template "body" .Data}} {{template "body" .Data}}
<div class="credits"> <div class="credits">
<p>Crafted by <a href="https://www.anhgelus.world/" target="_blank">Anhgelus Morhtuuzh</a></p> <p>Crafted by <a href="https://www.anhgelus.world/" target="_blank">Anhgelus Morhtuuzh</a></p>

2
templates/page/index.gohtml
View file

@ -1,5 +1,5 @@
{{define "body"}} {{define "body"}}
<main style="{{ .GetBackground }}{{ .GetTextColor }}"> <main style="{{ .GetBackground }}">
<div class="presentation"> <div class="presentation">
<figure> <figure>
<img src="{{ getStaticPath .Person.Image }}" alt="{{ .Person.Name }}'s image"> <img src="{{ getStaticPath .Person.Image }}" alt="{{ .Person.Name }}'s image">