Added a sponsor link to footer

This commit is contained in:
Andrew Collington 2023-08-15 17:56:39 +01:00
parent bfb12e7e7c
commit db5903638a
2 changed files with 18 additions and 7 deletions

View file

@ -1166,6 +1166,11 @@ function Footer(props) {
target="_blank" target="_blank"
title="opcache-gui (currently version {props.version}) on GitHub" title="opcache-gui (currently version {props.version}) on GitHub"
>https://github.com/amnuts/opcache-gui - version {props.version}</a> >https://github.com/amnuts/opcache-gui - version {props.version}</a>
<a className="sponsor-link" href="https://github.com/sponsors/amnuts"
target="_blank"
title="Sponsor this project and author on GitHub"
>Sponsor this project</a>
</footer> </footer>
); );
} }

View file

@ -286,7 +286,8 @@ $footer-border-color: #CCC;
.nav-tab-link-reset, .nav-tab-link-reset,
.nav-tab-link-realtime, .nav-tab-link-realtime,
.github-link { .github-link,
.sponsor-link {
background-repeat: no-repeat; background-repeat: no-repeat;
background-color: transparent; background-color: transparent;
} }
@ -296,21 +297,17 @@ $footer-border-color: #CCC;
background-position: 24px 50%; background-position: 24px 50%;
} }
.github-link {
background-position: 5px 50%;
}
.main-footer { .main-footer {
border-top: 1px solid $footer-border-color; border-top: 1px solid $footer-border-color;
padding: 1em 2em; padding: 1em 2em;
} }
.github-link { .github-link,
.sponsor-link {
background-position: 0 50%; background-position: 0 50%;
padding: 2em 0 2em 2.3em; padding: 2em 0 2em 2.3em;
text-decoration: none; text-decoration: none;
opacity: 0.7; opacity: 0.7;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" width="1.19em" height="1em" viewBox="0 0 1664 1408"><path d="M640 960q0 40-12.5 82t-43 76t-72.5 34t-72.5-34t-43-76t-12.5-82t12.5-82t43-76t72.5-34t72.5 34t43 76t12.5 82zm640 0q0 40-12.5 82t-43 76t-72.5 34t-72.5-34t-43-76t-12.5-82t12.5-82t43-76t72.5-34t72.5 34t43 76t12.5 82zm160 0q0-120-69-204t-187-84q-41 0-195 21q-71 11-157 11t-157-11q-152-21-195-21q-118 0-187 84t-69 204q0 88 32 153.5t81 103t122 60t140 29.5t149 7h168q82 0 149-7t140-29.5t122-60t81-103t32-153.5zm224-176q0 207-61 331q-38 77-105.5 133t-141 86t-170 47.5t-171.5 22t-167 4.5q-78 0-142-3t-147.5-12.5t-152.5-30t-137-51.5t-121-81t-86-115Q0 992 0 784q0-237 136-396q-27-82-27-170q0-116 51-218q108 0 190 39.5T539 163q147-35 309-35q148 0 280 32q105-82 187-121t189-39q51 102 51 218q0 87-27 168q136 160 136 398z" fill="#{toRGB($nav-icon-color)}"/></svg>');
font-size: 80%; font-size: 80%;
&:hover { &:hover {
@ -318,6 +315,15 @@ $footer-border-color: #CCC;
} }
} }
.github-link {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" width="1.19em" height="1em" viewBox="0 0 1664 1408"><path d="M640 960q0 40-12.5 82t-43 76t-72.5 34t-72.5-34t-43-76t-12.5-82t12.5-82t43-76t72.5-34t72.5 34t43 76t12.5 82zm640 0q0 40-12.5 82t-43 76t-72.5 34t-72.5-34t-43-76t-12.5-82t12.5-82t43-76t72.5-34t72.5 34t43 76t12.5 82zm160 0q0-120-69-204t-187-84q-41 0-195 21q-71 11-157 11t-157-11q-152-21-195-21q-118 0-187 84t-69 204q0 88 32 153.5t81 103t122 60t140 29.5t149 7h168q82 0 149-7t140-29.5t122-60t81-103t32-153.5zm224-176q0 207-61 331q-38 77-105.5 133t-141 86t-170 47.5t-171.5 22t-167 4.5q-78 0-142-3t-147.5-12.5t-152.5-30t-137-51.5t-121-81t-86-115Q0 992 0 784q0-237 136-396q-27-82-27-170q0-116 51-218q108 0 190 39.5T539 163q147-35 309-35q148 0 280 32q105-82 187-121t189-39q51 102 51 218q0 87-27 168q136 160 136 398z" fill="#{toRGB($nav-icon-color)}"/></svg>');
}
.sponsor-link {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24"><path fill="crimson" d="M12 21.35l-1.45-1.32c-5.15-4.67-8.55-7.75-8.55-11.53 0-3.08 2.42-5.5 5.5-5.5 1.74 0 3.41.81 4.5 2.09 1.09-1.28 2.76-2.09 4.5-2.09 3.08 0 5.5 2.42 5.5 5.5 0 3.78-3.4 6.86-8.55 11.54l-1.45 1.31z"/></svg>');
margin-left: 2em;
}
.file-cache-only { .file-cache-only {
margin-top: 0; margin-top: 0;
} }