Skip to content

Added back-to-top button changes #5848

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Added back-to-top button changes #5848

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
108 changes: 72 additions & 36 deletions tmpl/assets/awesome-go.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,70 +1,75 @@
* {
max-width: 100%;
box-sizing: border-box;
font-family: "Fira Sans";
text-decoration: none;
font-weight: 300;
max-width: 100%;
box-sizing: border-box;
font-family: "Fira Sans";
text-decoration: none;
font-weight: 300;
}
.awesome-logo {
max-width: 500px;
width: 100%;
margin: auto;
display: block;
max-width: 500px;
width: 100%;
margin: auto;
display: block;
}

a {
color: #669;
color: #669;
}
a:visited, h1, h2, h3, h4 {
color: #494368;
font-weight: 400;
a:visited,
h1,
h2,
h3,
h4 {
color: #494368;
font-weight: 400;
}
h1 > a:nth-child(1) {
margin-left: 10px;
margin-left: 10px;
}
h1 > a img {
padding-right: 5px;
padding-right: 5px;
}

#content {
width: 100%;
padding: 40px 80px;
width: 100%;
padding: 40px 80px;
}

@media (max-width: 720px) {
#content {
padding: 20px 40px;
}
#content {
padding: 20px 40px;
}
}
@media (max-width: 420px) {
#content * {
word-wrap: break-word;
}
#content * {
word-wrap: break-word;
}
}

/** ADs
* */
#ads {
max-width: 330px;
width: 100%;
margin: auto;
margin-top: auto;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
display: block;
max-width: 330px;
width: 100%;
margin: auto;
margin-top: auto;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
display: block;
}

#carbonads {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu,
Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial,
sans-serif;
}

#carbonads {
display: flex;
max-width: 330px;
background-color: hsl(0, 0%, 98%);
box-shadow: 0 1px 4px 1px hsla(0, 0%, 0%, .1);
box-shadow: 0 1px 4px 1px hsla(0, 0%, 0%, 0.1);
}

#carbonads a {
Expand Down Expand Up @@ -106,10 +111,17 @@ h1 > a img {
.carbon-poweredby {
display: block;
padding: 8px 10px;
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);
background: repeating-linear-gradient(
-45deg,
transparent,
transparent 5px,
hsla(0, 0%, 0%, 0.025) 5px,
hsla(0, 0%, 0%, 0.025) 10px
)
hsla(203, 11%, 95%, 0.4);
text-align: center;
text-transform: uppercase;
letter-spacing: .5px;
letter-spacing: 0.5px;
font-weight: 600;
font-size: 9px;
line-height: 1;
Expand All @@ -118,3 +130,27 @@ h1 > a img {
td {
padding: 6px;
}

/* Add this CSS to your awesome-go.css file */
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am going to modify your code before merging it, are you fine with that?

Or you can do the following changes and then I will merge it after further review.

  • Formatting changes should be removed OR add separate commits for formatting and the back-to-top changes.
  • Remove these LLM generated comments. only leave any helpful comments.


#backToTopBtn {
display: none; /* Hidden by default */
position: fixed; /* Keep it in view */
bottom: 20px;
right: 30px;
z-index: 99; /* Make sure it's on top */
border: none;
outline: none;
background-color: #555; /* A dark background */
color: white;
cursor: pointer;
padding: 15px;
border-radius: 10px;
font-size: 18px;
opacity: 0.7; /* Slightly transparent */
}

#backToTopBtn:hover {
background-color: #333; /* Darken on hover */
opacity: 1;
}
122 changes: 93 additions & 29 deletions tmpl/index.tmpl.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,36 @@
<!DOCTYPE html>
<html lang="en">

<head>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width" />
<title>A curated list of awesome Go frameworks, libraries and software - Awesome Go / Golang</title>
<meta name="description" content="A curated list of awesome Go / Golang frameworks, libraries and software" />
<meta name="keywords" content="golang, go, awesome, awesome-go, go framework, golang framework" />
<title>
A curated list of awesome Go frameworks, libraries and software - Awesome
Go / Golang
</title>
<meta
name="description"
content="A curated list of awesome Go / Golang frameworks, libraries and software"
/>
<meta
name="keywords"
content="golang, go, awesome, awesome-go, go framework, golang framework"
/>
<meta name="twitter:card" value="summary" />
<meta property="og:title" content="A curated list of awesome Go frameworks, libraries and software - Awesome Go" />
<meta
property="og:title"
content="A curated list of awesome Go frameworks, libraries and software - Awesome Go"
/>
<meta property="og:type" content="article" />
<meta property="og:url" content="https://awesome-go.com/" />
<meta property="og:image" content="https://awesome-go.com/assets/logo.png" />
<meta property="og:description" content="A curated list of awesome #Golang frameworks, libraries and software" />
<meta
property="og:image"
content="https://awesome-go.com/assets/logo.png"
/>
<meta
property="og:description"
content="A curated list of awesome #Golang frameworks, libraries and software"
/>

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

Expand All @@ -25,34 +42,81 @@
<link rel="icon" href="/assets/favicon/favicon.ico" type="image/x-icon" />
<link rel="apple-touch-icon" href="/assets/favicon/apple-touch-icon.png" />
<link rel="manifest" href="/assets/favicon/manifest.json" />

</head>
</head>

<body>
<body>
<div id="content">
<div>
<div id="amzn-assoc-ad-ce1dd292-c6f0-4062-ac99-55bc005bbbf9"></div>
<script async src="//z-na.amazon-adsystem.com/widgets/onejs?MarketPlace=US&adInstanceId=ce1dd292-c6f0-4062-ac99-55bc005bbbf9"></script>
</div>
<div>
<div id="amzn-assoc-ad-ce1dd292-c6f0-4062-ac99-55bc005bbbf9"></div>
<script
async
src="//z-na.amazon-adsystem.com/widgets/onejs?MarketPlace=US&adInstanceId=ce1dd292-c6f0-4062-ac99-55bc005bbbf9"
></script>
</div>

{{.Body}}
{{.Body}}

<a href="https://bit.ly/awesome-go-netlify">
<img src="https://www.netlify.com/img/global/badges/netlify-dark.svg" alt="Deploys by Netlify" />
</a>
<a href="https://bit.ly/awesome-go-netlify">
<img
src="https://www.netlify.com/img/global/badges/netlify-dark.svg"
alt="Deploys by Netlify"
/>
</a>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/1.1.0/marked.min.js" integrity="sha512-uggp1jOpxGjqTeS8Fit5x6+lqyJoIuXXn/VziVPlxBRnqZ0FhCaxsUnQsPL5PKylHr0KIoMtNbBIiU6n31dDTg==" crossorigin="anonymous"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"
integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg=="
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/marked/1.1.0/marked.min.js"
integrity="sha512-uggp1jOpxGjqTeS8Fit5x6+lqyJoIuXXn/VziVPlxBRnqZ0FhCaxsUnQsPL5PKylHr0KIoMtNbBIiU6n31dDTg=="
crossorigin="anonymous"
></script>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-DXZMLYYVYM"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
<script
async
src="https://www.googletagmanager.com/gtag/js?id=G-DXZMLYYVYM"
></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag("js", new Date());

gtag("config", "G-DXZMLYYVYM");
</script>

<button onclick="scrollToTop()" id="backToTopBtn" title="Go to top">
▲
</button>

<script>
// Get the button
let mybutton = document.getElementById("backToTopBtn");

// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function () {
scrollFunction();
};

gtag('config', 'G-DXZMLYYVYM');
</script>
</body>
function scrollFunction() {
if (
document.body.scrollTop > 20 ||
document.documentElement.scrollTop > 20
) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}

// When the user clicks on the button, scroll to the top of the document
function scrollToTop() {
window.scrollTo({ top: 0, behavior: "smooth" });
}
</script>
</body>
</html>
Loading