Skip to content

Commit 4682a1c

Browse files
divyaverma-01divyaverma-01
committed
Added back-to-top button changes
1 parent d7acf33 commit 4682a1c

File tree

2 files changed

+165
-65
lines changed

2 files changed

+165
-65
lines changed

‎tmpl/assets/awesome-go.css‎

Lines changed: 72 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,75 @@
11
* {
2-
max-width: 100%;
3-
box-sizing: border-box;
4-
font-family: "Fira Sans";
5-
text-decoration: none;
6-
font-weight: 300;
2+
max-width: 100%;
3+
box-sizing: border-box;
4+
font-family: "Fira Sans";
5+
text-decoration: none;
6+
font-weight: 300;
77
}
88
.awesome-logo {
9-
max-width: 500px;
10-
width: 100%;
11-
margin: auto;
12-
display: block;
9+
max-width: 500px;
10+
width: 100%;
11+
margin: auto;
12+
display: block;
1313
}
1414

1515
a {
16-
color: #669;
16+
color: #669;
1717
}
18-
a:visited, h1, h2, h3, h4 {
19-
color: #494368;
20-
font-weight: 400;
18+
a:visited,
19+
h1,
20+
h2,
21+
h3,
22+
h4 {
23+
color: #494368;
24+
font-weight: 400;
2125
}
2226
h1 > a:nth-child(1) {
23-
margin-left: 10px;
27+
margin-left: 10px;
2428
}
2529
h1 > a img {
26-
padding-right: 5px;
30+
padding-right: 5px;
2731
}
2832

2933
#content {
30-
width: 100%;
31-
padding: 40px 80px;
34+
width: 100%;
35+
padding: 40px 80px;
3236
}
3337

3438
@media (max-width: 720px) {
35-
#content {
36-
padding: 20px 40px;
37-
}
39+
#content {
40+
padding: 20px 40px;
41+
}
3842
}
3943
@media (max-width: 420px) {
40-
#content * {
41-
word-wrap: break-word;
42-
}
44+
#content * {
45+
word-wrap: break-word;
46+
}
4347
}
4448

4549
/** ADs
4650
* */
4751
#ads {
48-
max-width: 330px;
49-
width: 100%;
50-
margin: auto;
51-
margin-top: auto;
52-
margin-right: auto;
53-
margin-bottom: auto;
54-
margin-left: auto;
55-
display: block;
52+
max-width: 330px;
53+
width: 100%;
54+
margin: auto;
55+
margin-top: auto;
56+
margin-right: auto;
57+
margin-bottom: auto;
58+
margin-left: auto;
59+
display: block;
5660
}
5761

5862
#carbonads {
59-
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu,
60-
Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;
63+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
64+
Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial,
65+
sans-serif;
6166
}
6267

6368
#carbonads {
6469
display: flex;
6570
max-width: 330px;
6671
background-color: hsl(0, 0%, 98%);
67-
box-shadow: 0 1px 4px 1px hsla(0, 0%, 0%, .1);
72+
box-shadow: 0 1px 4px 1px hsla(0, 0%, 0%, 0.1);
6873
}
6974

7075
#carbonads a {
@@ -106,10 +111,17 @@ h1 > a img {
106111
.carbon-poweredby {
107112
display: block;
108113
padding: 8px 10px;
109-
background: repeating-linear-gradient(-45deg, transparent, transparent 5px, hsla(0, 0%, 0%, .025) 5px, hsla(0, 0%, 0%, .025) 10px) hsla(203, 11%, 95%, .4);
114+
background: repeating-linear-gradient(
115+
-45deg,
116+
transparent,
117+
transparent 5px,
118+
hsla(0, 0%, 0%, 0.025) 5px,
119+
hsla(0, 0%, 0%, 0.025) 10px
120+
)
121+
hsla(203, 11%, 95%, 0.4);
110122
text-align: center;
111123
text-transform: uppercase;
112-
letter-spacing: .5px;
124+
letter-spacing: 0.5px;
113125
font-weight: 600;
114126
font-size: 9px;
115127
line-height: 1;
@@ -118,3 +130,27 @@ h1 > a img {
118130
td {
119131
padding: 6px;
120132
}
133+
134+
/* Add this CSS to your awesome-go.css file */
135+
136+
#backToTopBtn {
137+
display: none; /* Hidden by default */
138+
position: fixed; /* Keep it in view */
139+
bottom: 20px;
140+
right: 30px;
141+
z-index: 99; /* Make sure it's on top */
142+
border: none;
143+
outline: none;
144+
background-color: #555; /* A dark background */
145+
color: white;
146+
cursor: pointer;
147+
padding: 15px;
148+
border-radius: 10px;
149+
font-size: 18px;
150+
opacity: 0.7; /* Slightly transparent */
151+
}
152+
153+
#backToTopBtn:hover {
154+
background-color: #333; /* Darken on hover */
155+
opacity: 1;
156+
}

‎tmpl/index.tmpl.html‎

Lines changed: 93 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,36 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
4-
<head>
3+
<head>
54
<meta charset="utf-8" />
65
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
76
<meta name="viewport" content="width=device-width" />
8-
<title>A curated list of awesome Go frameworks, libraries and software - Awesome Go / Golang</title>
9-
<meta name="description" content="A curated list of awesome Go / Golang frameworks, libraries and software" />
10-
<meta name="keywords" content="golang, go, awesome, awesome-go, go framework, golang framework" />
7+
<title>
8+
A curated list of awesome Go frameworks, libraries and software - Awesome
9+
Go / Golang
10+
</title>
11+
<meta
12+
name="description"
13+
content="A curated list of awesome Go / Golang frameworks, libraries and software"
14+
/>
15+
<meta
16+
name="keywords"
17+
content="golang, go, awesome, awesome-go, go framework, golang framework"
18+
/>
1119
<meta name="twitter:card" value="summary" />
12-
<meta property="og:title" content="A curated list of awesome Go frameworks, libraries and software - Awesome Go" />
20+
<meta
21+
property="og:title"
22+
content="A curated list of awesome Go frameworks, libraries and software - Awesome Go"
23+
/>
1324
<meta property="og:type" content="article" />
1425
<meta property="og:url" content="https://awesome-go.com/" />
15-
<meta property="og:image" content="https://awesome-go.com/assets/logo.png" />
16-
<meta property="og:description" content="A curated list of awesome #Golang frameworks, libraries and software" />
26+
<meta
27+
property="og:image"
28+
content="https://awesome-go.com/assets/logo.png"
29+
/>
30+
<meta
31+
property="og:description"
32+
content="A curated list of awesome #Golang frameworks, libraries and software"
33+
/>
1734

1835
<link rel="canonical" href="https://awesome-go.com/" />
1936

@@ -25,34 +42,81 @@
2542
<link rel="icon" href="/assets/favicon/favicon.ico" type="image/x-icon" />
2643
<link rel="apple-touch-icon" href="/assets/favicon/apple-touch-icon.png" />
2744
<link rel="manifest" href="/assets/favicon/manifest.json" />
28-
29-
</head>
45+
</head>
3046

31-
<body>
47+
<body>
3248
<div id="content">
33-
<div>
34-
<div id="amzn-assoc-ad-ce1dd292-c6f0-4062-ac99-55bc005bbbf9"></div>
35-
<script async src="//z-na.amazon-adsystem.com/widgets/onejs?MarketPlace=US&adInstanceId=ce1dd292-c6f0-4062-ac99-55bc005bbbf9"></script>
36-
</div>
49+
<div>
50+
<div id="amzn-assoc-ad-ce1dd292-c6f0-4062-ac99-55bc005bbbf9"></div>
51+
<script
52+
async
53+
src="//z-na.amazon-adsystem.com/widgets/onejs?MarketPlace=US&adInstanceId=ce1dd292-c6f0-4062-ac99-55bc005bbbf9"
54+
></script>
55+
</div>
3756

38-
{{.Body}}
57+
{{.Body}}
3958

40-
<a href="https://bit.ly/awesome-go-netlify">
41-
<img src="https://www.netlify.com/img/global/badges/netlify-dark.svg" alt="Deploys by Netlify" />
42-
</a>
59+
<a href="https://bit.ly/awesome-go-netlify">
60+
<img
61+
src="https://www.netlify.com/img/global/badges/netlify-dark.svg"
62+
alt="Deploys by Netlify"
63+
/>
64+
</a>
4365
</div>
4466

45-
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
46-
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/1.1.0/marked.min.js" integrity="sha512-uggp1jOpxGjqTeS8Fit5x6+lqyJoIuXXn/VziVPlxBRnqZ0FhCaxsUnQsPL5PKylHr0KIoMtNbBIiU6n31dDTg==" crossorigin="anonymous"></script>
67+
<script
68+
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"
69+
integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg=="
70+
crossorigin="anonymous"
71+
></script>
72+
<script
73+
src="https://cdnjs.cloudflare.com/ajax/libs/marked/1.1.0/marked.min.js"
74+
integrity="sha512-uggp1jOpxGjqTeS8Fit5x6+lqyJoIuXXn/VziVPlxBRnqZ0FhCaxsUnQsPL5PKylHr0KIoMtNbBIiU6n31dDTg=="
75+
crossorigin="anonymous"
76+
></script>
4777
<!-- Google tag (gtag.js) -->
48-
<script async src="https://www.googletagmanager.com/gtag/js?id=G-DXZMLYYVYM"></script>
49-
<script>
50-
window.dataLayer = window.dataLayer || [];
51-
function gtag(){dataLayer.push(arguments);}
52-
gtag('js', new Date());
78+
<script
79+
async
80+
src="https://www.googletagmanager.com/gtag/js?id=G-DXZMLYYVYM"
81+
></script>
82+
<script>
83+
window.dataLayer = window.dataLayer || [];
84+
function gtag() {
85+
dataLayer.push(arguments);
86+
}
87+
gtag("js", new Date());
88+
89+
gtag("config", "G-DXZMLYYVYM");
90+
</script>
91+
92+
<button onclick="scrollToTop()" id="backToTopBtn" title="Go to top">
93+
▲
94+
</button>
95+
96+
<script>
97+
// Get the button
98+
let mybutton = document.getElementById("backToTopBtn");
99+
100+
// When the user scrolls down 20px from the top of the document, show the button
101+
window.onscroll = function () {
102+
scrollFunction();
103+
};
53104

54-
gtag('config', 'G-DXZMLYYVYM');
55-
</script>
56-
</body>
105+
function scrollFunction() {
106+
if (
107+
document.body.scrollTop > 20 ||
108+
document.documentElement.scrollTop > 20
109+
) {
110+
mybutton.style.display = "block";
111+
} else {
112+
mybutton.style.display = "none";
113+
}
114+
}
57115

116+
// When the user clicks on the button, scroll to the top of the document
117+
function scrollToTop() {
118+
window.scrollTo({ top: 0, behavior: "smooth" });
119+
}
120+
</script>
121+
</body>
58122
</html>

0 commit comments

Comments
 (0)