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

10
data.go
View file

@ -40,6 +40,8 @@ type Link struct {
Content string `json:"content"`
Color string `json:"color"`
TextColor string `json:"text_color"`
ColorHover string `json:"color_hover"`
TextColorHover string `json:"text_color_hover"`
}
type Legal struct {
@ -60,17 +62,17 @@ func (d *Data) GetBackground() 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 {
return template.CSS("color: " + d.Color.Text + ";")
return template.CSS("--text-color: " + d.Color.Text + ";")
}
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 {
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",
"content": "Minecraft's Discord",
"color": "#800080FF",
"text_color": "#fff"
"color": "#800080",
"text_color": "#fff",
"color_hover": "#680c68",
"text_color_hover": "#eee"
},
{
"link": "https://github.com/anhgelus",
"content": "GitHub",
"color": "#800080FF",
"text_color": "#fff"
"text_color": "#fff",
"color_hover": "#680c68",
"text_color_hover": "#eee"
},
{
"link": "https://youtube.com/@anhgelus",
"content": "YouTube",
"color": "#800080FF",
"text_color": "#fff"
"text_color": "#fff",
"color_hover": "#680c68",
"text_color_hover": "#eee"
}
],
"legal": {

26
scss/main.scss
View file

@ -1,15 +1,19 @@
@use "../node_modules/reset-css/reset.css";
:root {
--text-color: #000
}
body {
--background-image: ;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
background: var(--background-image) center fixed no-repeat;
background-size: cover;
color: var(--text-color);
}
.credits {
@ -19,7 +23,7 @@ body {
gap: 1em;
font-size: 16px;
& a {
color: black;
color: var(--text-color);
}
}
@ -44,6 +48,7 @@ h2 {
align-items: center;
gap: 2rem;
margin-bottom: 2rem;
color: var(--text-color);
&__information {
display: flex;
@ -68,6 +73,10 @@ h2 {
}
.links {
--text-color-hover: var(--text-color);
--background: #000;
--background-hover: var(--background);
display: flex;
margin-top: 2rem;
width: 100%;
@ -78,13 +87,20 @@ h2 {
justify-content: center;
width: 33%;
border-radius: 16px;
background: var(--background);
&:hover {
background: var(--background-hover);
}
}
& a {
display: block;
color: black;
color: var(--text-color);
text-decoration: none;
text-align: center;
padding: 1em;
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"}}" />
{{template "opengraph-base" .SEO}}
</head>
<body style="{{ .Data.GetBackgroundImage }}">
<body style="{{ .Data.GetBackgroundImage }}{{ .Data.GetTextColor }}">
{{template "body" .Data}}
<div class="credits">
<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"}}
<main style="{{ .GetBackground }}{{ .GetTextColor }}">
<main style="{{ .GetBackground }}">
<div class="presentation">
<figure>
<img src="{{ getStaticPath .Person.Image }}" alt="{{ .Person.Name }}'s image">