* feat: upgrade to svelte 5 & tailwind v4 + add navigation menu to ui package * feat: website navigation with nav menu from shadcn * chore: refactor navigation menu storybook * fix: responsiveness bug * chore: remove tailwind config file * chore: - remove carbon icons from repo - add Geist font family * refactor website --------- Co-authored-by: Rotimi Best <best@classroomio.com>
159 lines
2.4 KiB
CSS
159 lines
2.4 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap');
|
|
|
|
@import 'tailwindcss';
|
|
|
|
@import '@cio/ui/output.css';
|
|
|
|
@custom-variant dark (&:where(.dark, .dark *));
|
|
|
|
body {
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
* {
|
|
font-family: 'Geist', sans-serif;
|
|
}
|
|
|
|
.floating {
|
|
-webkit-animation: floating 2.5s linear infinite;
|
|
animation: floating 2.5s linear infinite;
|
|
}
|
|
|
|
@-webkit-keyframes floating {
|
|
0%,
|
|
100% {
|
|
-webkit-transform: translateY(0rem);
|
|
transform: translateY(0rem);
|
|
}
|
|
|
|
50% {
|
|
-webkit-transform: translateY(1rem);
|
|
transform: translateY(1rem);
|
|
}
|
|
}
|
|
|
|
@keyframes floating {
|
|
0%,
|
|
100% {
|
|
-webkit-transform: translateY(0rem);
|
|
transform: translateY(0rem);
|
|
}
|
|
|
|
50% {
|
|
-webkit-transform: translateY(1rem);
|
|
transform: translateY(1rem);
|
|
}
|
|
}
|
|
|
|
.prose {
|
|
font-family: 'Geist', sans-serif;
|
|
}
|
|
|
|
.prose :is(h1, h2, h3, h4, h5, h6) {
|
|
font-weight: 700;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.prose :is(h1) {
|
|
font-size: 2em;
|
|
}
|
|
|
|
.prose :is(h2) {
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
.prose :is(h3) {
|
|
font-size: 1.17em;
|
|
}
|
|
|
|
.prose :is(h4) {
|
|
font-size: 1em;
|
|
}
|
|
|
|
.prose :is(h5) {
|
|
font-size: 0.83em;
|
|
}
|
|
|
|
.prose :is(h6) {
|
|
font-size: 0.67em;
|
|
}
|
|
|
|
.prose :is(p, li) {
|
|
margin-top: 0.7em;
|
|
margin-bottom: 0em;
|
|
color: #374151;
|
|
}
|
|
|
|
.prose :is(ul, ol) {
|
|
list-style-type: disc;
|
|
padding-left: 3rem;
|
|
}
|
|
|
|
.prose pre {
|
|
max-inline-size: 100%;
|
|
padding: 1rem;
|
|
border-radius: 8px;
|
|
tab-size: 2;
|
|
}
|
|
|
|
.prose blockquote {
|
|
border-left: 4px solid gray;
|
|
font-style: italic;
|
|
font-weight: 500;
|
|
padding-left: 16px;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.prose figure + em {
|
|
display: block;
|
|
font-size: 14px;
|
|
margin-bottom: 40px;
|
|
border: none;
|
|
padding: none;
|
|
text-align: center;
|
|
}
|
|
|
|
.hero-bg {
|
|
background-image: url('https://assets.cdn.clsrio.com/www/hero-bg.svg');
|
|
}
|
|
|
|
.tools-hero-bg {
|
|
background-image: url('https://assets.cdn.clsrio.com/www/tools-hero-bg.svg');
|
|
}
|
|
|
|
@media (min-width: 760px) {
|
|
.tools-hero-bg {
|
|
min-height: 350px;
|
|
}
|
|
}
|
|
|
|
.cio-bg-blue {
|
|
background: rgb(2, 51, 189);
|
|
background-size: cover;
|
|
background: radial-gradient(circle at 50% 100%, rgba(2, 51, 189, 1) 1%, rgb(4, 2, 56) 100%);
|
|
}
|
|
|
|
.embed {
|
|
width: 100%;
|
|
height: 315px;
|
|
border-radius: 0.375rem;
|
|
}
|
|
|
|
svg.lucide-icon:not(.custom) {
|
|
color: #666666;
|
|
}
|
|
|
|
.dark svg.lucide-icon:not(.custom) {
|
|
color: #fff;
|
|
}
|
|
|
|
@media (min-width: 640px) {
|
|
.embed {
|
|
width: 560px;
|
|
}
|
|
}
|
|
|
|
body {
|
|
--primary: var(--color-blue-700);
|
|
}
|