Split app.css into components
This commit is contained in:
parent
51d8fabf2d
commit
abe119a1cb
|
@ -1,36 +1,8 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
|
||||
.skip-link:focus {
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
#header a {
|
||||
@apply text-white no-underline;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
@apply underline
|
||||
}
|
||||
}
|
||||
|
||||
#main a {
|
||||
@apply text-blue-300 no-underline border-b border-blue-100 border-dotted;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
@apply text-blue-100 border-solid
|
||||
}
|
||||
}
|
||||
|
||||
#footer a {
|
||||
@apply text-white no-underline border-b border-dotted border-white;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
@apply border-none
|
||||
}
|
||||
}
|
||||
@import './components/footer.css';
|
||||
@import './components/main.css';
|
||||
@import './components/skip-link.css';
|
||||
|
||||
@tailwind utilities;
|
||||
|
|
8
src/css/components/footer.css
Normal file
8
src/css/components/footer.css
Normal file
|
@ -0,0 +1,8 @@
|
|||
#footer a {
|
||||
@apply text-white no-underline border-b border-dotted border-white;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
@apply border-none
|
||||
}
|
||||
}
|
8
src/css/components/main.css
Normal file
8
src/css/components/main.css
Normal file
|
@ -0,0 +1,8 @@
|
|||
#main a {
|
||||
@apply text-blue-300 no-underline border-b border-blue-100 border-dotted;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
@apply text-blue-100 border-solid
|
||||
}
|
||||
}
|
4
src/css/components/skip-link.css
Normal file
4
src/css/components/skip-link.css
Normal file
|
@ -0,0 +1,4 @@
|
|||
.skip-link:focus {
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
Reference in a new issue