diff --git a/apps/web/src/components/Github.css b/apps/web/src/components/Github.css new file mode 100644 index 0000000..e03c07e --- /dev/null +++ b/apps/web/src/components/Github.css @@ -0,0 +1,12 @@ +button.github-btn { + svg { + width: 100%; + height: 100%; + fill: var(--style-color); + transition: fill 0.2s ease-in-out; + } + @media (hover: hover) { + &:hover svg { fill: var(--style-background); } + } + &:active svg{ fill: var(--style-background); } +} \ No newline at end of file diff --git a/apps/web/src/components/Github.tsx b/apps/web/src/components/Github.tsx new file mode 100644 index 0000000..5e55bfe --- /dev/null +++ b/apps/web/src/components/Github.tsx @@ -0,0 +1,20 @@ +import './Github.css' +export function Github() { + return ( + + ) +} +export default Github diff --git a/apps/web/src/components/ThemeToggle.tsx b/apps/web/src/components/ThemeToggle.tsx index 39269ea..50270b1 100644 --- a/apps/web/src/components/ThemeToggle.tsx +++ b/apps/web/src/components/ThemeToggle.tsx @@ -65,8 +65,9 @@ export function ThemeToggle() { cy="12" r="5" mask="url(#ios-fail-proof-mask)" + fill="currentColor" /> - + diff --git a/apps/web/src/containers/Home.css b/apps/web/src/containers/Home.css index 0fbb8d7..d6c2e4a 100644 --- a/apps/web/src/containers/Home.css +++ b/apps/web/src/containers/Home.css @@ -7,19 +7,19 @@ justify-content: center; .main { font-weight: bold; } } - .theme-toggle-btn { + > .actions { position: fixed; bottom: 1rem; right: 1rem; + width: auto; display: flex; - width: 2.5rem; - height: 2.5rem; - padding: 0.25rem; - cursor: pointer; - align-items: center; - justify-content: center; - -webkit-tap-highlight-color: transparent; - transition: background-color 0.3s; + gap: 1rem; + >.github-btn, + >.theme-toggle-btn { + width: 2.5rem; + height: 2.5rem; + padding: 0.25rem; + } } >.controls { flex-direction: column; diff --git a/apps/web/src/containers/Home.tsx b/apps/web/src/containers/Home.tsx index 02738d1..55f32e9 100644 --- a/apps/web/src/containers/Home.tsx +++ b/apps/web/src/containers/Home.tsx @@ -1,6 +1,7 @@ import { useRemake, useFeatures, useGoAchv, useGoThanks } from '@remake/hooks' import { TextSvg } from '@/components/TextSvg' import ThemeToggle from '@/components/ThemeToggle' +import Github from '@/components/Github' import './Home.css' export default function Home() { @@ -31,7 +32,10 @@ export default function Home() { )} - +
+ {features && } + +
) } diff --git a/apps/web/src/styles/common.css b/apps/web/src/styles/common.css index 9ad6998..b654389 100644 --- a/apps/web/src/styles/common.css +++ b/apps/web/src/styles/common.css @@ -66,6 +66,7 @@ button { user-select: none; transition: all 0.2s ease-in-out; outline: none; + -webkit-tap-highlight-color: transparent; @media (hover: hover) { &:hover { background: var(--style-color);