extern/zrok
1
1
Fork 0
mirror of https://github.com/openziti/zrok.git synced 2025-06-01 23:55:44 +02: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 && ( {filteredLinks.length > 0 && (
<ul> <ul>
{filteredLinks.map((link, index) => ( {filteredLinks.map((link, index) => (
<li key={index}> <li key={index} className={styles.downloadButtons}>
<a href={link.url}> <a href={link.url} className={styles.downloadLinks}>
{link.arch} {link.arch}
</a> </a>
</li> </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 */ 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 */ display: inline-block; /* Allows width and height to be set */
margin: 5px; /* Spacing between buttons */ margin: 5px; /* Spacing between buttons */
padding: 10px 15px; /* Size of the button */ padding: 10px 15px; /* Size of the button */
text-align: center; /* Centers text within 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 */ 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: 1px var(--container-border); /* Border color - same as background for a solid button */
border-radius: 18px; /* Rounded corners */ border-radius: 18px; /* Rounded corners */
transition: background-color 0.3s ease; /* Smooth transition for hover effect */ 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); 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 */ 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 { .downloadCard h3 {
margin-top: 10px; margin-top: 10px;
} }