Skip to content

Commit

Permalink
feat: migrate styling to tailwind
Browse files Browse the repository at this point in the history
Signed-off-by: Logan McAnsh <logan@mcan.sh>
  • Loading branch information
mcansh committed Jan 27, 2021
1 parent bf0cd76 commit 55b7b29
Show file tree
Hide file tree
Showing 16 changed files with 21,829 additions and 12,085 deletions.
6 changes: 5 additions & 1 deletion .eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,11 @@ module.exports = {
'import/no-extraneous-dependencies': [
'error',
{
devDependencies: ['next.config.js', 'prettier.config.js'],
devDependencies: [
'next.config.js',
'prettier.config.js',
'tailwind.config.js',
],
},
],
},
Expand Down
2 changes: 1 addition & 1 deletion .npmrc
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
save-exact=true
tag-version-prefix=""
"@mcansh:registry"="https://npm.pkg.github.com"
"@mcansh:registry"="https://registry.npmjs.org"
3 changes: 3 additions & 0 deletions .vscode/settings.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"typescript.tsdk": "node_modules/typescript/lib"
}
16 changes: 0 additions & 16 deletions @types/styled-components.d.ts

This file was deleted.

2 changes: 1 addition & 1 deletion babel.config.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
module.exports = api => {
api.cache(true);
const presets = ['next/babel'];
const plugins = ['styled-components', 'polished'];
const plugins = [];

return { presets, plugins };
};
13 changes: 0 additions & 13 deletions components/style/container.ts

This file was deleted.

52 changes: 0 additions & 52 deletions components/style/global-style.ts

This file was deleted.

52 changes: 8 additions & 44 deletions components/style/styled-link.tsx
Original file line number Diff line number Diff line change
@@ -1,47 +1,11 @@
import styled from 'styled-components';
import * as React from 'react';

const StyledLink = styled.a`
--line: var(--links);
--size: 0.2rem;
text-decoration: none;
color: currentColor;
position: relative;
type Props = React.HTMLAttributes<HTMLAnchorElement>;

span {
background-image: linear-gradient(0deg, var(--line) 0%, var(--line) 100%);
background-position: 100% 100%;
background-repeat: no-repeat;
background-size: var(--background-size, 100%) var(--size);
transition: background-size 0.2s linear var(--background-delay, 0.15s);
transform: translateZ(0);
}
const FunHoverLink: React.FC<Props> = ({ children, ...rest }) => (
<a {...rest} className="fun-link">
{children}
</a>
);

svg {
vertical-align: middle;
display: inline-block;
line-height: 1;
height: 2rem;
position: relative;
left: -var(--size);
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: var(--size);
stroke: var(--line);
stroke-dasharray: 7.95 30;
stroke-dashoffset: var(--stroke-dashoffset, 46);
transition: stroke-dashoffset var(--stroke-duration, 0.15s)
var(--stroke-easing, linear) var(--stroke-delay, 0s);
}
&:hover {
--background-size: 0%;
--background-delay: 0s;
--stroke-dashoffset: 26;
--stroke-duration: 0.3s;
--stroke-easing: cubic-bezier(0.3, 1.5, 0.5, 1);
--stroke-delay: 0.195s;
}
`;

export { StyledLink };
export { FunHoverLink };
Loading

1 comment on commit 55b7b29

@vercel
Copy link

@vercel vercel bot commented on 55b7b29 Jan 27, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.