mirror of
https://github.com/LukeHagar/website.git
synced 2025-12-06 04:22:07 +00:00
fix: improve scss imports and legacy compiler
This commit is contained in:
Torsten Dittmann
@@ -158,7 +158,6 @@
|
||||
import { postController } from './post';
|
||||
import Post from './post/post.svelte';
|
||||
import { anyify } from '$lib/utils/anyify';
|
||||
import Badge from '$lib/components/ui/Badge.svelte';
|
||||
|
||||
/* Basic Animation setup */
|
||||
let scrollInfo = {
|
||||
@@ -508,10 +507,6 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
|
||||
.web-label {
|
||||
margin-block-start: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
h4 {
|
||||
|
||||
@@ -108,10 +108,6 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
|
||||
.web-label {
|
||||
margin-block-start: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
h4 {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { flip } from '$lib/utils/flip';
|
||||
import { crossfade, scale, slide } from 'svelte/transition';
|
||||
import { scale, slide } from 'svelte/transition';
|
||||
import { functionsController } from '.';
|
||||
|
||||
const { state } = functionsController;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { safeAnimate, sleep } from '$lib/animations';
|
||||
import { safeAnimate } from '$lib/animations';
|
||||
import { createResettable } from '$lib/utils/resettable';
|
||||
import { animate } from 'motion';
|
||||
import { getElSelector } from '../Products.svelte';
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
<script lang="ts">
|
||||
import Button from './ui/Button.svelte';
|
||||
import { PUBLIC_APPWRITE_DASHBOARD } from '$env/static/public';
|
||||
import { classNames } from '$lib/utils/classnames';
|
||||
import { trackEvent } from '$lib/actions/analytics';
|
||||
|
||||
@@ -87,7 +87,7 @@
|
||||
<ul
|
||||
class="web-u-padding-block-start-80 grid grid-cols-3 text-center md:grid-cols-6 md:gap-10"
|
||||
>
|
||||
{#each logos as { src, alt, width, height }, i}
|
||||
{#each logos as { src, alt, width, height }}
|
||||
<li class="grid place-content-center">
|
||||
<img {src} {alt} {width} {height} />
|
||||
</li>
|
||||
|
||||
@@ -5,21 +5,19 @@
|
||||
</li>
|
||||
|
||||
<style lang="scss">
|
||||
@use '$scss/abstract' as *;
|
||||
@use '$scss/abstract/functions' as f;
|
||||
|
||||
.slide {
|
||||
cursor: grab;
|
||||
|
||||
&:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
flex: 0 0 50%;
|
||||
min-width: 0;
|
||||
margin-right: f.pxToRem(16);
|
||||
|
||||
@media (max-width: 768px) {
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
|
||||
flex: 0 0 50%;
|
||||
min-width: 0;
|
||||
margin-right: pxToRem(16);
|
||||
&:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -25,7 +25,6 @@
|
||||
import { PUBLIC_APPWRITE_DASHBOARD } from '$env/static/public';
|
||||
import AnnouncementBanner from '$lib/components/AnnouncementBanner.svelte';
|
||||
import InitBanner from '$lib/components/InitBanner.svelte';
|
||||
import Button from '$lib/components/ui/Button.svelte';
|
||||
import { trackEvent } from '$lib/actions/analytics';
|
||||
|
||||
export let omitMainId = false;
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
import { Root, Slide } from '$lib/components/carousel';
|
||||
import FooterNav from '$lib/components/FooterNav.svelte';
|
||||
import MainFooter from '$lib/components/MainFooter.svelte';
|
||||
import ProductsGrid from '$lib/components/ProductsGrid.svelte';
|
||||
import { Main } from '$lib/layouts';
|
||||
import { DEFAULT_HOST } from '$lib/utils/metadata';
|
||||
import type { Integration } from '$routes/integrations/+page';
|
||||
@@ -181,13 +180,8 @@
|
||||
</Main>
|
||||
|
||||
<style lang="scss">
|
||||
@use '$scss/abstract' as *;
|
||||
|
||||
.cta {
|
||||
min-height: pxToRem(560);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
@use '$scss/abstract/functions' as f;
|
||||
@use '$scss/abstract/variables/devices';
|
||||
|
||||
.web-pre-footer-bg {
|
||||
position: absolute;
|
||||
@@ -199,24 +193,15 @@
|
||||
max-inline-size: unset;
|
||||
max-block-size: unset;
|
||||
}
|
||||
/* more tha 9 items */
|
||||
|
||||
.l-side-column {
|
||||
display: flex;
|
||||
gap: pxToRem(16);
|
||||
@media #{$break1} {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.l-grid-2-1 {
|
||||
@media #{$break1} {
|
||||
@media #{devices.$break1} {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
@media #{$break2open} {
|
||||
@media #{devices.$break2open} {
|
||||
display: grid;
|
||||
gap: pxToRem(64);
|
||||
gap: f.pxToRem(64);
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
}
|
||||
|
||||
|
||||
@@ -129,9 +129,7 @@
|
||||
<span class="web-icon-star shrink-0" aria-hidden="true" />
|
||||
<span class="text-caption shrink-0 font-medium">New</span>
|
||||
<div class="web-hero-banner-button-sep" />
|
||||
<span class="text-caption web-u-trim-1"
|
||||
>Introducing Database Backups</span
|
||||
>
|
||||
<span class="text-caption web-u-trim-1">Introducing Database Backups</span>
|
||||
|
||||
<span class="web-icon-arrow-right shrink-0" aria-hidden="true" />
|
||||
</a>
|
||||
|
||||
@@ -77,15 +77,11 @@
|
||||
<Main>
|
||||
<div class="web-big-padding-section">
|
||||
<div id="form" class="web-big-padding-section-level-1 u-padding-0 u-overflow-hidden">
|
||||
<div
|
||||
class="web-big-padding-section-level-2 is-margin-replace-padding relative"
|
||||
>
|
||||
<div class="web-big-padding-section-level-2 is-margin-replace-padding relative">
|
||||
<div class="relative">
|
||||
<div class="web-container relative">
|
||||
<!-- before submit -->
|
||||
<div
|
||||
class="relative u-z-index-1 web-grid-1-1-opt-2 u-gap-32 e-u-row-gap-0"
|
||||
>
|
||||
<div class="u-z-index-1 web-grid-1-1-opt-2 u-gap-32 e-u-row-gap-0 relative">
|
||||
<div>
|
||||
<div
|
||||
class="web-u-max-inline-size-none-mobile"
|
||||
|
||||
@@ -385,10 +385,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.bg-blur {
|
||||
inset-block-start: -100px;
|
||||
}
|
||||
|
||||
.tech-hero {
|
||||
@include gradients.border-block-gradient;
|
||||
|
||||
|
||||
@@ -355,6 +355,7 @@
|
||||
</Main>
|
||||
|
||||
<style lang="scss">
|
||||
@use '$scss/abstract/functions' as f;
|
||||
@use '$scss/abstract/mixins/border-gradient' as gradients;
|
||||
|
||||
.hero {
|
||||
@@ -456,7 +457,7 @@
|
||||
padding-inline: 4rem;
|
||||
|
||||
display: flex;
|
||||
gap: pxToRem(32);
|
||||
gap: f.pxToRem(32);
|
||||
flex-shrink: 0;
|
||||
|
||||
> * {
|
||||
|
||||
@@ -34,12 +34,4 @@
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.text-title font-aeonik-pro {
|
||||
margin-block-start: 0.75rem;
|
||||
}
|
||||
|
||||
.text-sub-body font-medium {
|
||||
margin-block-start: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -413,12 +413,6 @@
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.text-title font-aeonik-pro {
|
||||
font-size: adjusted(2.5);
|
||||
line-height: #{math.div(44, 40)}em;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.text-label {
|
||||
font-size: adjusted(1.5);
|
||||
line-height: #{math.div(28, 24)}em;
|
||||
|
||||
@@ -33,12 +33,4 @@
|
||||
align-items: center;
|
||||
background-color: hsl(var(--web-color-subtle));
|
||||
}
|
||||
|
||||
.text-title font-aeonik-pro {
|
||||
margin-block-start: 0.75rem;
|
||||
}
|
||||
|
||||
.text-sub-body font-medium {
|
||||
margin-block-start: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -58,12 +58,12 @@
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
@use '$scss/abstract' as *;
|
||||
@use '$scss/abstract/functions' as f;
|
||||
|
||||
.col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: pxToRem(32);
|
||||
gap: f.pxToRem(32);
|
||||
|
||||
@keyframes scroll {
|
||||
0% {
|
||||
|
||||
@@ -56,7 +56,7 @@
|
||||
pointer-events: none;
|
||||
transition: 200ms ease;
|
||||
|
||||
&[data-state='open'] {
|
||||
:global(&[data-state='open']) {
|
||||
opacity: 1;
|
||||
pointer-events: all;
|
||||
}
|
||||
@@ -82,7 +82,7 @@
|
||||
pointer-events: none;
|
||||
transition: 200ms ease;
|
||||
|
||||
&[data-state='open'] {
|
||||
:global(&[data-state='open']) {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
pointer-events: all;
|
||||
|
||||
@@ -8,12 +8,12 @@
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
@use '$scss/abstract' as *;
|
||||
@use '$scss/abstract/functions' as f;
|
||||
|
||||
.cell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: pxToRem(32);
|
||||
gap: f.pxToRem(32);
|
||||
height: 100%;
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
|
||||
@@ -8,11 +8,11 @@
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
@use '$scss/abstract' as *;
|
||||
@use '$scss/abstract/functions' as f;
|
||||
|
||||
.grid {
|
||||
display: flex;
|
||||
gap: pxToRem(32);
|
||||
gap: f.pxToRem(32);
|
||||
flex-direction: column;
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
|
||||
@@ -178,7 +178,7 @@
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
@use '$scss/abstract' as *;
|
||||
@use '$scss/abstract/functions' as f;
|
||||
$base-width: 22;
|
||||
|
||||
.wrapper {
|
||||
@@ -231,7 +231,7 @@
|
||||
grid-template-columns: repeat(12, minmax(0, 1fr));
|
||||
gap: 4px;
|
||||
overflow: hidden;
|
||||
border-radius: pxToRem(16);
|
||||
border-radius: f.pxToRem(16);
|
||||
aspect-ratio: 2 / 1;
|
||||
animation: fade 1s ease-out;
|
||||
transition: transform 100ms;
|
||||
@@ -245,7 +245,7 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
border-radius: pxToRem(8);
|
||||
border-radius: f.pxToRem(8);
|
||||
line-height: 1;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
@@ -270,7 +270,7 @@
|
||||
justify-content: space-between;
|
||||
width: fit-content;
|
||||
gap: 4px;
|
||||
padding: pxToRem(24) 0;
|
||||
padding: f.pxToRem(24) 0;
|
||||
left: 80%;
|
||||
|
||||
span {
|
||||
@@ -288,17 +288,17 @@
|
||||
--delay: 700ms;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: pxToRem(4);
|
||||
gap: f.pxToRem(4);
|
||||
width: 60%;
|
||||
margin: pxToRem(16);
|
||||
border-radius: pxToRem(16);
|
||||
margin: f.pxToRem(16);
|
||||
border-radius: f.pxToRem(16);
|
||||
|
||||
&[data-remove-delay] {
|
||||
--delay: 0ms;
|
||||
}
|
||||
|
||||
.row {
|
||||
gap: pxToRem(4);
|
||||
gap: f.pxToRem(4);
|
||||
display: flex;
|
||||
|
||||
div {
|
||||
@@ -307,14 +307,14 @@
|
||||
height: var(--size);
|
||||
flex-shrink: 0;
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
--size: 8px;
|
||||
}
|
||||
|
||||
border-radius: calc(var(--size) / 4);
|
||||
animation: fade-in 500ms ease calc(calc(75ms * var(--index)) + var(--delay))
|
||||
forwards;
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
--size: 8px;
|
||||
}
|
||||
|
||||
&[data-level] {
|
||||
--bg-color: var(--web-color-accent);
|
||||
}
|
||||
@@ -358,9 +358,9 @@
|
||||
grid-column: span 9 / span 9;
|
||||
height: 100%;
|
||||
background: #000;
|
||||
padding: pxToRem(20);
|
||||
padding: f.pxToRem(20);
|
||||
position: relative;
|
||||
border-radius: pxToRem(16);
|
||||
border-radius: f.pxToRem(16);
|
||||
overflow: hidden;
|
||||
|
||||
.text-label {
|
||||
@@ -385,8 +385,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.text-title font-aeonik-pro {
|
||||
font-size: clamp(20px, 1vw, 24px);
|
||||
line-height: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -131,14 +131,4 @@
|
||||
margin-block-start: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.text-display font-aeonik-pro {
|
||||
margin-bottom: -48px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.text-display font-aeonik-pro {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -447,16 +447,18 @@
|
||||
</Main>
|
||||
|
||||
<style lang="scss">
|
||||
@use '$scss/abstract' as *;
|
||||
@use '$scss/abstract/functions' as f;
|
||||
@use '$scss/abstract/variables/devices';
|
||||
|
||||
:global([data-scroll-smooth]) {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
.hero {
|
||||
min-height: pxToRem(620);
|
||||
min-height: f.pxToRem(620);
|
||||
@media (min-width: 768px) {
|
||||
display: grid;
|
||||
grid-template-columns: 60% minmax(0, 1fr);
|
||||
gap: pxToRem(32);
|
||||
gap: f.pxToRem(32);
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
@@ -465,7 +467,7 @@
|
||||
transform-origin: left center;
|
||||
scale: 1.25;
|
||||
position: relative;
|
||||
left: pxToRem(-30);
|
||||
left: f.pxToRem(-30);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -525,7 +527,7 @@
|
||||
/* more tha 9 items */
|
||||
.l-max-size-list-cards-section {
|
||||
scroll-snap-align: start;
|
||||
scroll-margin-top: pxToRem(120);
|
||||
scroll-margin-top: f.pxToRem(120);
|
||||
}
|
||||
.l-max-size-list-cards {
|
||||
&:where(:has(> ul > li:nth-child(10))) {
|
||||
@@ -536,7 +538,7 @@
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
max-height: pxToRem(350);
|
||||
max-height: f.pxToRem(350);
|
||||
content: '';
|
||||
display: block;
|
||||
background: linear-gradient(
|
||||
@@ -550,7 +552,7 @@
|
||||
.l-float-button {
|
||||
position: absolute;
|
||||
inset-inline: 0;
|
||||
inset-block-end: pxToRem(20);
|
||||
inset-block-end: f.pxToRem(20);
|
||||
margin-inline: auto;
|
||||
display: flex;
|
||||
}
|
||||
@@ -576,16 +578,16 @@
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
|
||||
gap: 1rem;
|
||||
@media #{$break1} {
|
||||
@media #{devices.$break1} {
|
||||
gap: 1.25rem;
|
||||
}
|
||||
}
|
||||
.l-integrations-grid {
|
||||
position: relative;
|
||||
|
||||
@media #{$break1} {
|
||||
@media #{devices.$break1} {
|
||||
gap: 0;
|
||||
padding-block-start: pxToRem(80);
|
||||
padding-block-start: f.pxToRem(80);
|
||||
}
|
||||
|
||||
.disabled {
|
||||
@@ -596,8 +598,8 @@
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
margin-bottom: pxToRem(60);
|
||||
@media #{$break2open} {
|
||||
margin-bottom: f.pxToRem(60);
|
||||
@media #{devices.$break2open} {
|
||||
position: sticky;
|
||||
top: 50px;
|
||||
height: 500px;
|
||||
@@ -609,7 +611,7 @@
|
||||
}
|
||||
|
||||
.tag {
|
||||
min-width: pxToRem(42) !important;
|
||||
min-width: f.pxToRem(42) !important;
|
||||
|
||||
&.active-tag {
|
||||
background-color: #fff;
|
||||
@@ -618,17 +620,17 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media #{$break2open} {
|
||||
@media #{devices.$break2open} {
|
||||
display: grid;
|
||||
gap: pxToRem(68);
|
||||
grid-template-columns: pxToRem(240) 1fr;
|
||||
padding-block-start: pxToRem(40);
|
||||
gap: f.pxToRem(68);
|
||||
grid-template-columns: f.pxToRem(240) 1fr;
|
||||
padding-block-start: f.pxToRem(40);
|
||||
}
|
||||
}
|
||||
.l-integrations-hero {
|
||||
@media #{$break1} {
|
||||
@media #{devices.$break1} {
|
||||
}
|
||||
@media #{$break2open} {
|
||||
@media #{devices.$break2open} {
|
||||
}
|
||||
}
|
||||
.l-bg-1 {
|
||||
@@ -645,12 +647,12 @@
|
||||
}
|
||||
|
||||
.web-feature-grid {
|
||||
@media #{$break1} {
|
||||
@media #{devices.$break1} {
|
||||
gap: 1rem;
|
||||
}
|
||||
}
|
||||
.web-feature-grid {
|
||||
@media #{$break1} {
|
||||
@media #{devices.$break1} {
|
||||
gap: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -359,10 +359,4 @@
|
||||
gap: 1rem;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
|
||||
.web-pricing-cards-list .web-main-body-500 {
|
||||
height: 78px;
|
||||
--p-font-size: unset !important;
|
||||
--p-line-height: var(--web-line-height-sm);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
import { clamp } from '$lib/utils/clamp';
|
||||
import { withPrevious } from '$lib/utils/withPrevious';
|
||||
import { withRaf } from '$lib/utils/withRaf';
|
||||
import { get } from 'svelte/store';
|
||||
import Accordion from './Accordion/Accordion.svelte';
|
||||
import AccordionItem from './Accordion/AccordionItem.svelte';
|
||||
import Checkbox from './Checkbox.svelte';
|
||||
|
||||
@@ -187,8 +187,8 @@
|
||||
class="text-description web-u-max-width-640 e-u-padding-inline-32-desktop mx-auto"
|
||||
>
|
||||
The Appwrite Startups Program supports your startup with a complete
|
||||
backend for you to build your products. You will receive
|
||||
$20,000 Cloud credits for Appwrite Scale for 12 months.
|
||||
backend for you to build your products. You will receive $20,000 Cloud
|
||||
credits for Appwrite Scale for 12 months.
|
||||
</p>
|
||||
<button on:click={scrollToForm} class="web-button mt-3 mx-auto">
|
||||
Apply now
|
||||
|
||||
@@ -25,7 +25,7 @@
|
||||
},
|
||||
{
|
||||
question: 'Who is eligible to apply?',
|
||||
answer: "We welcome early-stage startups as well as startups established within the last decade. So whether you are still looking to build your backend or want to switch to Appwrite, we welcome you to join."
|
||||
answer: 'We welcome early-stage startups as well as startups established within the last decade. So whether you are still looking to build your backend or want to switch to Appwrite, we welcome you to join.'
|
||||
},
|
||||
{
|
||||
question: 'What are the limits of the Scale plan?',
|
||||
|
||||
@@ -21,8 +21,7 @@
|
||||
Develop your developer skills with Appwrite Pro, join a vibrant community of
|
||||
open-source contributors, and start building with a vast array of frameworks.
|
||||
</p>
|
||||
<a href={educationSignUp} class="web-button mt-4 !w-full md:!w-fit">Sign up</a
|
||||
>
|
||||
<a href={educationSignUp} class="web-button mt-4 !w-full md:!w-fit">Sign up</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -2,14 +2,18 @@
|
||||
import Badge from '$lib/components/ui/Badge.svelte';
|
||||
import { classNames } from '$lib/utils/classnames';
|
||||
import { PUBLIC_APPWRITE_DASHBOARD } from '$env/static/public';
|
||||
|
||||
|
||||
const educationSignUp = `${PUBLIC_APPWRITE_DASHBOARD}/console/education`;
|
||||
|
||||
const items = [
|
||||
{
|
||||
label: 'Enroll to the GitHub Student Developer Pack',
|
||||
description: 'Sign up for the Student Developer pack and explore the benefits.',
|
||||
cta: { url: 'https://github.com/education', label: 'Enroll on GitHub Education', icon: 'github' }
|
||||
cta: {
|
||||
url: 'https://github.com/education',
|
||||
label: 'Enroll on GitHub Education',
|
||||
icon: 'github'
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Redeem your Cloud credits',
|
||||
|
||||
@@ -53,10 +53,6 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.text-sub-body font-medium {
|
||||
font-size: 1rem !important;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
@@ -1,75 +1,110 @@
|
||||
@use '../abstract' as *;
|
||||
|
||||
.#{$p}-main-header {
|
||||
--p-main-header-padding-block: #{pxToRem(15)};
|
||||
|
||||
--p-main-header-link-color: var(--web-color-greyscale-900);
|
||||
--p-main-header-border-color: rgb(0,0,0, 0.1);
|
||||
--p-main-header-padding-block: #{pxToRem(15)};
|
||||
|
||||
|
||||
position:sticky; z-index:999; inset-block-start:0; background-color:hsl(var(--p-body-bg-color));
|
||||
padding-inline:pxToRem(32); border-block-end: solid pxToRem(1) var(--p-main-header-border-color);
|
||||
min-block-size:pxToRem(73);
|
||||
|
||||
&.is-special-padding {
|
||||
padding-inline: clamp(1.25rem,4vw,120rem); /* Thomas calculation */
|
||||
}
|
||||
&.is-docs {
|
||||
.#{$p}-main-header-wrapper { max-inline-size:86.875rem; }
|
||||
}
|
||||
&.is-reference {
|
||||
.#{$p}-main-header-wrapper { max-inline-size:var(--container-size-huge); }
|
||||
}
|
||||
|
||||
&-wrapper {
|
||||
display:flex; flex-wrap:wrap; justify-content:center; gap:pxToRem(16); margin-inline:auto;
|
||||
max-inline-size:pxToRem(1728); padding-block:var(--p-main-header-padding-block);
|
||||
}
|
||||
&-start { display:flex; align-items:center; }
|
||||
&-end { display:flex; margin-inline-start:auto; align-items:center; gap:pxToRem(8) }
|
||||
|
||||
.#{$p}-input-text { padding-block:pxToRem(7); padding-inline-end:pxToRem(8); }
|
||||
|
||||
.web-logo { margin-inline-end:pxToRem(32); }
|
||||
|
||||
|
||||
&-nav {
|
||||
align-self:center; font-size:pxToRem(16); user-select:none;
|
||||
&-list { display:flex; gap:pxToRem(32); }
|
||||
&-link {
|
||||
color:hsl(var(--web-color-primary)); transition:var(--transition);
|
||||
&.is-selected { color:hsl(var(--p-main-header-link-color)); }
|
||||
}
|
||||
}
|
||||
&-more {
|
||||
&-link { color:hsl(var(--color-neutral-0) / 0.64); }
|
||||
}
|
||||
|
||||
&.is-transparent {
|
||||
[data-js-enabled] & {
|
||||
background-color: transparent; -webkit-backdrop-filter:blur(pxToRem(10)); backdrop-filter:blur(pxToRem(10));
|
||||
}
|
||||
}
|
||||
|
||||
#{$theme-dark} &,
|
||||
&#{$theme-dark} {
|
||||
--p-main-header-link-color: var(--web-color-greyscale-100);
|
||||
--p-main-header-border-color: rgb(255,255,255, 0.1);
|
||||
}
|
||||
|
||||
#{$theme-light} &,
|
||||
&#{$theme-light} {
|
||||
--p-main-header-link-color: var(--web-color-greyscale-900);
|
||||
--p-main-header-border-color: rgb(0,0,0, 0.1);
|
||||
}
|
||||
--p-main-header-border-color: rgb(0, 0, 0, 0.1);
|
||||
|
||||
@media #{$break1}, #{$break2}{
|
||||
display:none;
|
||||
}
|
||||
|
||||
position: sticky;
|
||||
z-index: 999;
|
||||
inset-block-start: 0;
|
||||
background-color: hsl(var(--p-body-bg-color));
|
||||
padding-inline: pxToRem(32);
|
||||
border-block-end: solid pxToRem(1) var(--p-main-header-border-color);
|
||||
min-block-size: pxToRem(73);
|
||||
transition: transform 0.3s ease;
|
||||
|
||||
transition: transform 0.3s ease;
|
||||
&.is-hidden {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
}
|
||||
&.is-special-padding {
|
||||
padding-inline: clamp(1.25rem, 4vw, 120rem); /* Thomas calculation */
|
||||
}
|
||||
&.is-docs {
|
||||
.#{$p}-main-header-wrapper {
|
||||
max-inline-size: 86.875rem;
|
||||
}
|
||||
}
|
||||
&.is-reference {
|
||||
.#{$p}-main-header-wrapper {
|
||||
max-inline-size: var(--container-size-huge);
|
||||
}
|
||||
}
|
||||
|
||||
&-wrapper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: pxToRem(16);
|
||||
margin-inline: auto;
|
||||
max-inline-size: pxToRem(1728);
|
||||
padding-block: var(--p-main-header-padding-block);
|
||||
}
|
||||
&-start {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
&-end {
|
||||
display: flex;
|
||||
margin-inline-start: auto;
|
||||
align-items: center;
|
||||
gap: pxToRem(8);
|
||||
}
|
||||
|
||||
.#{$p}-input-text {
|
||||
padding-block: pxToRem(7);
|
||||
padding-inline-end: pxToRem(8);
|
||||
}
|
||||
|
||||
.web-logo {
|
||||
margin-inline-end: pxToRem(32);
|
||||
}
|
||||
|
||||
&-nav {
|
||||
align-self: center;
|
||||
font-size: pxToRem(16);
|
||||
user-select: none;
|
||||
&-list {
|
||||
display: flex;
|
||||
gap: pxToRem(32);
|
||||
}
|
||||
&-link {
|
||||
color: hsl(var(--web-color-primary));
|
||||
transition: var(--transition);
|
||||
&.is-selected {
|
||||
color: hsl(var(--p-main-header-link-color));
|
||||
}
|
||||
}
|
||||
}
|
||||
&-more {
|
||||
&-link {
|
||||
color: hsl(var(--color-neutral-0) / 0.64);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-transparent {
|
||||
[data-js-enabled] & {
|
||||
background-color: transparent;
|
||||
-webkit-backdrop-filter: blur(pxToRem(10));
|
||||
backdrop-filter: blur(pxToRem(10));
|
||||
}
|
||||
}
|
||||
|
||||
#{$theme-dark} &,
|
||||
&#{$theme-dark} {
|
||||
--p-main-header-link-color: var(--web-color-greyscale-100);
|
||||
--p-main-header-border-color: rgb(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
#{$theme-light} &,
|
||||
&#{$theme-light} {
|
||||
--p-main-header-link-color: var(--web-color-greyscale-900);
|
||||
--p-main-header-border-color: rgb(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
@media #{$break1}, #{$break2} {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.is-hidden {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,30 +1,49 @@
|
||||
@use '../abstract' as *;
|
||||
|
||||
.#{$p}-mobile-header {
|
||||
--p-mobile-header-border-color: rgb(0,0,0, 0.1);
|
||||
--p-mobile-header-border-color: rgb(0, 0, 0, 0.1);
|
||||
|
||||
position: sticky;
|
||||
z-index: 120;
|
||||
inset-block-start: 0;
|
||||
background-color: hsl(var(--p-body-bg-color));
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: pxToRem(16);
|
||||
border-block-end: solid 1px var(--p-mobile-header-border-color);
|
||||
padding-inline: pxToRem(20);
|
||||
padding-block: pxToRem(16);
|
||||
transition: transform 0.3s ease;
|
||||
&-start {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
&-end {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: pxToRem(8);
|
||||
}
|
||||
&.is-transparent {
|
||||
background-color: transparent;
|
||||
-webkit-backdrop-filter: blur(pxToRem(8));
|
||||
backdrop-filter: blur(pxToRem(8));
|
||||
}
|
||||
@media #{$break3open} {
|
||||
display: none;
|
||||
}
|
||||
|
||||
position:sticky; z-index:120; inset-block-start:0; background-color:hsl(var(--p-body-bg-color));
|
||||
display:flex; justify-content:space-between; align-items:center; gap:pxToRem(16);
|
||||
border-block-end: solid 1px var(--p-mobile-header-border-color);
|
||||
padding-inline:pxToRem(20); padding-block:pxToRem(16);
|
||||
&-start { display:flex; align-items: center; }
|
||||
&-end { display:flex; align-items: center; gap: pxToRem(8) }
|
||||
&.is-transparent { background-color:transparent; -webkit-backdrop-filter:blur(pxToRem(8)); backdrop-filter:blur(pxToRem(8)); }
|
||||
@media #{$break3open} { display:none; }
|
||||
#{$theme-dark} &,
|
||||
&#{$theme-dark} {
|
||||
--p-mobile-header-border-color: rgb(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
#{$theme-dark} &,
|
||||
&#{$theme-dark} {
|
||||
--p-mobile-header-border-color: rgb(255,255,255, 0.1);
|
||||
}
|
||||
#{$theme-light} &,
|
||||
&#{$theme-light} {
|
||||
--p-mobile-header-border-color: rgb(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
#{$theme-light} &,
|
||||
&#{$theme-light} {
|
||||
--p-mobile-header-border-color: rgb(0,0,0, 0.1);
|
||||
}
|
||||
|
||||
transition: transform 0.3s ease;
|
||||
&.is-hidden {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
}
|
||||
&.is-hidden {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -27,6 +27,13 @@ export default defineConfig({
|
||||
includePublic: true
|
||||
})
|
||||
],
|
||||
css: {
|
||||
preprocessorOptions: {
|
||||
scss: {
|
||||
api: 'modern'
|
||||
}
|
||||
}
|
||||
},
|
||||
build: {
|
||||
reportCompressedSize: false
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user