added tailwind
This commit is contained in:
176
style.css
176
style.css
@@ -1,97 +1,101 @@
|
||||
:root {
|
||||
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
color-scheme: light dark;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
background-color: #242424;
|
||||
/* :root { */
|
||||
/* font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; */
|
||||
/* line-height: 1.5; */
|
||||
/* font-weight: 400; */
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
/* color-scheme: light dark; */
|
||||
/* color: rgba(255, 255, 255, 0.87); */
|
||||
/* background-color: #242424; */
|
||||
|
||||
a {
|
||||
font-weight: 500;
|
||||
color: #646cff;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
a:hover {
|
||||
color: #535bf2;
|
||||
}
|
||||
/* font-synthesis: none; */
|
||||
/* text-rendering: optimizeLegibility; */
|
||||
/* -webkit-font-smoothing: antialiased; */
|
||||
/* -moz-osx-font-smoothing: grayscale; */
|
||||
/* -webkit-text-size-adjust: 100%; */
|
||||
/* } */
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
place-items: center;
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
/* a { */
|
||||
/* font-weight: 500; */
|
||||
/* color: #646cff; */
|
||||
/* text-decoration: inherit; */
|
||||
/* } */
|
||||
/* a:hover { */
|
||||
/* color: #535bf2; */
|
||||
/* } */
|
||||
|
||||
h1 {
|
||||
font-size: 3.2em;
|
||||
line-height: 1.1;
|
||||
}
|
||||
/* body { */
|
||||
/* margin: 0; */
|
||||
/* display: flex; */
|
||||
/* place-items: center; */
|
||||
/* min-width: 320px; */
|
||||
/* min-height: 100vh; */
|
||||
/* } */
|
||||
|
||||
#app {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
/* h1 { */
|
||||
/* font-size: 3.2em; */
|
||||
/* line-height: 1.1; */
|
||||
/* } */
|
||||
|
||||
.logo {
|
||||
height: 6em;
|
||||
padding: 1.5em;
|
||||
will-change: filter;
|
||||
transition: filter 300ms;
|
||||
}
|
||||
.logo:hover {
|
||||
filter: drop-shadow(0 0 2em #646cffaa);
|
||||
}
|
||||
.logo.vanilla:hover {
|
||||
filter: drop-shadow(0 0 2em #f7df1eaa);
|
||||
}
|
||||
/* #app { */
|
||||
/* max-width: 1280px; */
|
||||
/* margin: 0 auto; */
|
||||
/* padding: 2rem; */
|
||||
/* text-align: center; */
|
||||
/* } */
|
||||
|
||||
.card {
|
||||
padding: 2em;
|
||||
}
|
||||
/* .logo { */
|
||||
/* height: 6em; */
|
||||
/* padding: 1.5em; */
|
||||
/* will-change: filter; */
|
||||
/* transition: filter 300ms; */
|
||||
/* } */
|
||||
/* .logo:hover { */
|
||||
/* filter: drop-shadow(0 0 2em #646cffaa); */
|
||||
/* } */
|
||||
/* .logo.vanilla:hover { */
|
||||
/* filter: drop-shadow(0 0 2em #f7df1eaa); */
|
||||
/* } */
|
||||
|
||||
.read-the-docs {
|
||||
color: #888;
|
||||
}
|
||||
/* .card { */
|
||||
/* padding: 2em; */
|
||||
/* } */
|
||||
|
||||
button {
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
padding: 0.6em 1.2em;
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
background-color: #1a1a1a;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.25s;
|
||||
}
|
||||
button:hover {
|
||||
border-color: #646cff;
|
||||
}
|
||||
button:focus,
|
||||
button:focus-visible {
|
||||
outline: 4px auto -webkit-focus-ring-color;
|
||||
}
|
||||
/* .read-the-docs { */
|
||||
/* color: #888; */
|
||||
/* } */
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
color: #213547;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
a:hover {
|
||||
color: #747bff;
|
||||
}
|
||||
button {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
}
|
||||
/* button { */
|
||||
/* border-radius: 8px; */
|
||||
/* border: 1px solid transparent; */
|
||||
/* padding: 0.6em 1.2em; */
|
||||
/* font-size: 1em; */
|
||||
/* font-weight: 500; */
|
||||
/* font-family: inherit; */
|
||||
/* background-color: #1a1a1a; */
|
||||
/* cursor: pointer; */
|
||||
/* transition: border-color 0.25s; */
|
||||
/* } */
|
||||
/* button:hover { */
|
||||
/* border-color: #646cff; */
|
||||
/* } */
|
||||
/* button:focus, */
|
||||
/* button:focus-visible { */
|
||||
/* outline: 4px auto -webkit-focus-ring-color; */
|
||||
/* } */
|
||||
|
||||
/* @media (prefers-color-scheme: light) { */
|
||||
/* :root { */
|
||||
/* color: #213547; */
|
||||
/* background-color: #ffffff; */
|
||||
/* } */
|
||||
/* a:hover { */
|
||||
/* color: #747bff; */
|
||||
/* } */
|
||||
/* button { */
|
||||
/* background-color: #f9f9f9; */
|
||||
/* } */
|
||||
/* } */
|
||||
|
||||
Reference in New Issue
Block a user