extern/zrok
1
1
Fork 0
mirror of https://github.com/openziti/zrok.git synced 2024-12-22 23:02:52 +01:00
Code Issues Packages Projects Releases Wiki Activity

style download links

Browse Source
This commit is contained in:
Kenneth Bingham 2023-11-23 13:09:24 -05:00
parent 73ee3e6e1b
commit 29b88cdee9
No known key found for this signature in database
GPG Key ID: 31709281860130B6
2 changed files with 8 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
website/src/components/download-card.jsx
View File

@ -35,8 +35,8 @@ const DownloadCard = ({ osName, osLogo, infoText, guideLink }) => {
{filteredLinks.length > 0 && (
<ul>
{filteredLinks.map((link, index) => (
<li key={index}>
<a href={link.url}>
<li key={index} className={styles.downloadButtons}>
<a href={link.url} className={styles.downloadLinks}>
{link.arch}
</a>
</li>

10
website/src/css/download-card.module.css
View File

@ -56,24 +56,26 @@
margin-bottom: 20px; /* Add some space between the list and the footer */
}
.downloadCard li {
.downloadButtons {
display: inline-block; /* Allows width and height to be set */
margin: 5px; /* Spacing between buttons */
padding: 10px 15px; /* Size of the button */
text-align: center; /* Centers text within the button */
text-decoration: none; /* Removes the underline from links */
background-color: var(--contrasting-background); /* Background color - Bootstrap primary button color */
border: 1px var(--container-border); /* Border color - same as background for a solid button */
border-radius: 18px; /* Rounded corners */
transition: background-color 0.3s ease; /* Smooth transition for hover effect */
}
.downloadCard li:hover, .downloadCard li:focus {
.downloadButtons:hover, .downloadButtons:focus {
background-color: var(--button-background-hover);
text-decoration: none; /* Ensures the text remains with no underline on hover/focus */
outline: none; /* Removes the outline on focus for a clean look */
}
.downloadLinks, .downloadLinks:hover, .downloadLinks:focus {
text-decoration: none; /* Removes the underline from links */
}
.downloadCard h3 {
margin-top: 10px;
}