opdavies/lab
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Move all files to inviqa-tailwindcss-example/

Browse source
This commit is contained in:
Oliver Davies 2025-09-29 23:19:01 +01:00
parent 6d7993bbaa
commit 225421ac19
26 changed files with 0 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

129
inviqa-tailwindcss-example/styles/Home.module.css Normal file
View file

@ -0,0 +1,129 @@
.container {
padding: 0 2rem;
}
.main {
min-height: 100vh;
padding: 4rem 0;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.footer {
display: flex;
flex: 1;
padding: 2rem 0;
border-top: 1px solid #eaeaea;
justify-content: center;
align-items: center;
}
.footer a {
display: flex;
justify-content: center;
align-items: center;
flex-grow: 1;
}
.title a {
color: #0070f3;
text-decoration: none;
}
.title a:hover,
.title a:focus,
.title a:active {
text-decoration: underline;
}
.title {
margin: 0;
line-height: 1.15;
font-size: 4rem;
}
.title,
.description {
text-align: center;
}
.description {
margin: 4rem 0;
line-height: 1.5;
font-size: 1.5rem;
}
.code {
background: #fafafa;
border-radius: 5px;
padding: 0.75rem;
font-size: 1.1rem;
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
Bitstream Vera Sans Mono, Courier New, monospace;
}
.grid {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
max-width: 800px;
}
.card {
margin: 1rem;
padding: 1.5rem;
text-align: left;
color: inherit;
text-decoration: none;
border: 1px solid #eaeaea;
border-radius: 10px;
transition: color 0.15s ease, border-color 0.15s ease;
max-width: 300px;
}
.card:hover,
.card:focus,
.card:active {
color: #0070f3;
border-color: #0070f3;
}
.card h2 {
margin: 0 0 1rem 0;
font-size: 1.5rem;
}
.card p {
margin: 0;
font-size: 1.25rem;
line-height: 1.5;
}
.logo {
height: 1em;
margin-left: 0.5rem;
}
@media (max-width: 600px) {
.grid {
width: 100%;
flex-direction: column;
}
}
@media (prefers-color-scheme: dark) {
.card,
.footer {
border-color: #222;
}
.code {
background: #111;
}
.logo img {
filter: invert(1);
}
}

96
inviqa-tailwindcss-example/styles/globals.css Normal file
View file

@ -0,0 +1,96 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.markup {
* + * {
@apply mt-4;
}
}
.fancy-corners {
position: relative;
background-color: #fff;
transform-style: preserve-3d;
}
.fancy-corners:after,
.fancy-corners:before {
position: absolute;
width: 8em;
height: 8em;
background-color: theme("colors.primary");
background-size: 100% 100%;
background-position: 0 0;
transform: translateZ(-1px);
z-index: -1;
}
.fancy-corners[class*="--bottom"]:after,
.fancy-corners[class*="--top"]:before {
content: "";
}
.fancy-corners--large[class*="--top"]:before {
top: -2.05882em;
}
.fancy-corners--large[class*="--bottom"]:after {
bottom: -2.05882em;
}
.fancy-corners--large[class*="--bottom"][class*="--bottom-right"]:after {
right: -2.05882em;
}
.fancy-corners[class*="--bottom"]:after {
bottom: -1.17647em;
}
.fancy-corners[class*="--bottom"][class*="--bottom-right"]:after {
right: -1.17647em;
}
.fancy-corners[class*="--top"]:before {
top: -1.17647em;
}
.fancy-corners[class*="--top"][class*="--top-left"]:before {
left: -1.17647em;
}
.fancy-corners--top-left:before {
-webkit-mask-image: linear-gradient(-45deg, #fff 85.5%, transparent 0);
mask-image: linear-gradient(-45deg, #fff 85.5%, transparent 0);
}
.fancy-corners--bottom-right:after {
-webkit-mask-image: linear-gradient(-45deg, transparent 14.5%, #fff 0);
mask-image: linear-gradient(-45deg, transparent 14.5%, #fff 0);
}
@screen lg {
.fancy-corners--large:after,
.fancy-corners--large:before {
width: 14em;
height: 14em;
}
.fancy-corners--large[class*="--top"][class*="--top-left"]:before {
left: -2.05882em;
}
.fancy-corners--large[class*="--top"]:before {
top: -2.05882em;
}
.fancy-corners--large[class*="--bottom"]:after {
bottom: -2.05882em;
}
.fancy-corners--large[class*="--bottom"][class*="--bottom-right"]:after {
right: -2.05882em;
}
}
}