From 6a78afd2d4d2aaacaaafea8a1ef0a9fba2a71830 Mon Sep 17 00:00:00 2001 From: xeronimus Date: Fri, 6 Oct 2023 09:36:20 +0200 Subject: [PATCH] #58 fix github ribbon --- client/app/_styled.js | 9 +++++++++ client/app/components/Landing/GithubRibbon.js | 10 ++++------ client/app/components/Landing/_styled.js | 11 +++-------- package-lock.json | 2 +- 4 files changed, 17 insertions(+), 15 deletions(-) diff --git a/client/app/_styled.js b/client/app/_styled.js index 34ce9683..8663b117 100644 --- a/client/app/_styled.js +++ b/client/app/_styled.js @@ -144,6 +144,15 @@ const Global = createGlobalStyle` border-bottom-right-radius: 8px; } + + /** ---- "Fork me on Github" ribbon ---- **/ + /*! + * "Fork me on GitHub" CSS ribbon v0.2.3 | MIT License + * https://github.com/simonwhitaker/github-fork-ribbon-css +*/.github-fork-ribbon{width:12.1em;height:12.1em;position:absolute;overflow:hidden;top:0;right:0;z-index:9999;pointer-events:none;font-size:13px;text-decoration:none;text-indent:-999999px}.github-fork-ribbon.fixed{position:fixed}.github-fork-ribbon:active,.github-fork-ribbon:hover{background-color:rgba(0,0,0,0)}.github-fork-ribbon:after,.github-fork-ribbon:before{position:absolute;display:block;width:15.38em;height:1.54em;top:3.23em;right:-3.23em;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}.github-fork-ribbon:before{content:"";padding:.38em 0;background-color:#a00;background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,0)),to(rgba(0,0,0,.15)));background-image:-webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.15));background-image:-moz-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.15));background-image:-ms-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.15));background-image:-o-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.15));background-image:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.15));-webkit-box-shadow:0 .15em .23em 0 rgba(0,0,0,.5);-moz-box-shadow:0 .15em .23em 0 rgba(0,0,0,.5);box-shadow:0 .15em .23em 0 rgba(0,0,0,.5);pointer-events:auto}.github-fork-ribbon:after{content:attr(data-ribbon);color:#fff;font:700 1em "Helvetica Neue",Helvetica,Arial,sans-serif;line-height:1.54em;text-decoration:none;text-shadow:0 -.08em rgba(0,0,0,.5);text-align:center;text-indent:0;padding:.15em 0;margin:.15em 0;border-width:.08em 0;border-style:dotted;border-color:#fff;border-color:rgba(255,255,255,.7)}.github-fork-ribbon.left-bottom,.github-fork-ribbon.left-top{right:auto;left:0}.github-fork-ribbon.left-bottom,.github-fork-ribbon.right-bottom{top:auto;bottom:0}.github-fork-ribbon.left-bottom:after,.github-fork-ribbon.left-bottom:before,.github-fork-ribbon.left-top:after,.github-fork-ribbon.left-top:before{right:auto;left:-3.23em}.github-fork-ribbon.left-bottom:after,.github-fork-ribbon.left-bottom:before,.github-fork-ribbon.right-bottom:after,.github-fork-ribbon.right-bottom:before{top:auto;bottom:3.23em}.github-fork-ribbon.left-top:after,.github-fork-ribbon.left-top:before,.github-fork-ribbon.right-bottom:after,.github-fork-ribbon.right-bottom:before{-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)} + + + /** ---- changing browser scrollbars ---- **/ @media ${device.desktop} { /* Works on Firefox */ diff --git a/client/app/components/Landing/GithubRibbon.js b/client/app/components/Landing/GithubRibbon.js index 531a05bc..480ab9f5 100644 --- a/client/app/components/Landing/GithubRibbon.js +++ b/client/app/components/Landing/GithubRibbon.js @@ -3,16 +3,14 @@ import {StyledGithubRibbon} from './_styled'; const GithubRibbon = () => ( - Fork me on GitHub + Fork me on GitHub ); - export default GithubRibbon; diff --git a/client/app/components/Landing/_styled.js b/client/app/components/Landing/_styled.js index 36c92e94..0116b652 100644 --- a/client/app/components/Landing/_styled.js +++ b/client/app/components/Landing/_styled.js @@ -135,13 +135,8 @@ export const StyledLandingForm = styled.form` `; export const StyledGithubRibbon = styled.a` - position: fixed; - top: 0; - right: 0; - border: 0; - - > img { - border: none; - outline: none; + // see also globalStyle, client/app/_styled.js + &:before { + background-color: ${COLOR_ORANGE}; } `; diff --git a/package-lock.json b/package-lock.json index 501fee83..7180ffe5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,7 +22,7 @@ "prettier": "3.0.3" }, "engines": { - "node": ">=16" + "node": ">=18" } }, "node_modules/@ampproject/remapping": {