mirror of
https://github.com/ThatGuySam/doesitarm.git
synced 2026-05-18 06:44:46 -07:00
162 lines
3.8 KiB
CSS
162 lines
3.8 KiB
CSS
/**
|
|
* This injects Tailwind's base styles, which is a combination of
|
|
* Normalize.css and some additional base styles.
|
|
*
|
|
* You can see the styles here:
|
|
* https://github.com/tailwindcss/tailwindcss/blob/master/css/base.css
|
|
*
|
|
* If using `postcss-import`, use this import instead:
|
|
*
|
|
* @import "tailwindcss/base";
|
|
*/
|
|
@tailwind base;
|
|
|
|
/**
|
|
* This injects any component classes registered by plugins.
|
|
*
|
|
* If using `postcss-import`, use this import instead:
|
|
*
|
|
* @import "tailwindcss/components";
|
|
*/
|
|
@tailwind components;
|
|
|
|
/**
|
|
* Here you would add any of your custom component classes; stuff that you'd
|
|
* want loaded *before* the utilities so that the utilities could still
|
|
* override them.
|
|
*
|
|
* Example:
|
|
*
|
|
* .btn { ... }
|
|
* .form-input { ... }
|
|
*
|
|
* Or if using a preprocessor or `postcss-import`:
|
|
*
|
|
* @import "components/buttons";
|
|
* @import "components/forms";
|
|
*/
|
|
|
|
/**
|
|
* This injects all of Tailwind's utility classes, generated based on your
|
|
* config file.
|
|
*
|
|
* If using `postcss-import`, use this import instead:
|
|
*
|
|
* @import "tailwindcss/utilities";
|
|
*/
|
|
@tailwind utilities;
|
|
|
|
|
|
|
|
|
|
html {
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont,
|
|
'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
font-size: 20px;
|
|
word-spacing: 1px;
|
|
-ms-text-size-adjust: 100%;
|
|
-webkit-text-size-adjust: 100%;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
-webkit-font-smoothing: antialiased;
|
|
box-sizing: border-box;
|
|
|
|
background: #191a1d;
|
|
}
|
|
|
|
*,
|
|
*:before,
|
|
*:after {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
}
|
|
|
|
|
|
/**
|
|
* Here you would add any custom utilities you need that don't come out of the
|
|
* box with Tailwind.
|
|
*
|
|
* Example :
|
|
*
|
|
* .bg-pattern-graph-paper { ... }
|
|
* .skew-45 { ... }
|
|
*
|
|
* Or if using a preprocessor or `postcss-import`:
|
|
*
|
|
* @import "utilities/background-patterns";
|
|
* @import "utilities/skew-transforms";
|
|
*/
|
|
|
|
|
|
.ease {
|
|
transition-property: all;
|
|
transition-duration: 400ms;
|
|
/* easeInOutQuart */
|
|
/* https://easings.net/en#easeInOutQuart */
|
|
transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
|
|
}
|
|
|
|
.lazyload,
|
|
.lazyloading {
|
|
opacity: 0;
|
|
}
|
|
.lazyloaded {
|
|
@apply ease;
|
|
transition-property: opacity;
|
|
|
|
opacity: 1;
|
|
}
|
|
|
|
.neumorphic-shadow,
|
|
.hover\:neumorphic-shadow:hover {
|
|
/* box-shadow: -0.25rem -0.25rem 0.5rem rgba(255, 255, 255, 0.07); */
|
|
box-shadow:
|
|
-0.25rem -0.25rem 0.5rem rgba(255, 255, 255, 0.07),
|
|
0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 0.12),
|
|
-.75rem -.75rem 1.75rem rgba(255, 255, 255, 0.07),
|
|
0.75rem 0.75rem 1.75rem rgba(0, 0, 0, 0.12),
|
|
inset 8rem 8rem 8rem rgba(0, 0, 0, 0.05),
|
|
inset -8rem -8rem 8rem rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
|
|
.neumorphic-shadow-outer,
|
|
.hover\:neumorphic-shadow-outer:hover {
|
|
/* box-shadow: -0.25rem -0.25rem 0.5rem rgba(255, 255, 255, 0.07); */
|
|
box-shadow:
|
|
-0.25rem -0.25rem 0.5rem rgba(255, 255, 255, 0.07),
|
|
0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 0.12),
|
|
-.75rem -.75rem 1.75rem rgba(255, 255, 255, 0.07),
|
|
0.75rem 0.75rem 1.75rem rgba(0, 0, 0, 0.12);
|
|
}
|
|
|
|
.neumorphic-shadow-inner,
|
|
.hover\:neumorphic-shadow-inner:hover {
|
|
box-shadow:
|
|
inset -0.25rem -0.25rem 0.5rem rgba(255, 255, 255, 0.07),
|
|
inset 0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 0.12),
|
|
inset -.75rem -.75rem 1.75rem rgba(255, 255, 255, 0.07),
|
|
inset 0.75rem 0.75rem 1.75rem rgba(0, 0, 0, 0.12);
|
|
}
|
|
|
|
.bg-blur,
|
|
.hover\:bg-blur:hover {
|
|
backdrop-filter: blur(15px);
|
|
}
|
|
|
|
.shimmer {
|
|
animation: placeHolderShimmer 1s infinite;
|
|
animation-timing-function: linear;
|
|
background: #f6f7f8;
|
|
background: linear-gradient(to right, rgba(0, 0, 0, 0.07) 8%, rgba(0, 0, 0, 0.45) 18%, rgba(0, 0, 0, 0.07) 33%);
|
|
background-size: 200% 100px;
|
|
background-attachment: fixed;
|
|
}
|
|
|
|
@keyframes placeHolderShimmer {
|
|
0% {
|
|
background-position: 100% 0;
|
|
}
|
|
100% {
|
|
background-position: -100% 0;
|
|
}
|
|
}
|