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>
|
||||
|
||||
@@ -9,7 +9,11 @@
|
||||
{
|
||||
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;
|
||||
|
||||
@@ -6,48 +6,85 @@
|
||||
--p-main-header-link-color: var(--web-color-greyscale-900);
|
||||
--p-main-header-border-color: rgb(0, 0, 0, 0.1);
|
||||
|
||||
|
||||
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);
|
||||
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;
|
||||
|
||||
&.is-special-padding {
|
||||
padding-inline: clamp(1.25rem, 4vw, 120rem); /* Thomas calculation */
|
||||
}
|
||||
&.is-docs {
|
||||
.#{$p}-main-header-wrapper { max-inline-size:86.875rem; }
|
||||
.#{$p}-main-header-wrapper {
|
||||
max-inline-size: 86.875rem;
|
||||
}
|
||||
}
|
||||
&.is-reference {
|
||||
.#{$p}-main-header-wrapper { max-inline-size:var(--container-size-huge); }
|
||||
.#{$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);
|
||||
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);
|
||||
}
|
||||
&-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); }
|
||||
.#{$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); }
|
||||
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)); }
|
||||
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); }
|
||||
&-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));
|
||||
background-color: transparent;
|
||||
-webkit-backdrop-filter: blur(pxToRem(10));
|
||||
backdrop-filter: blur(pxToRem(10));
|
||||
}
|
||||
}
|
||||
|
||||
@@ -67,8 +104,6 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
transition: transform 0.3s ease;
|
||||
&.is-hidden {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
|
||||
@@ -3,15 +3,35 @@
|
||||
.#{$p}-mobile-header {
|
||||
--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);
|
||||
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; }
|
||||
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;
|
||||
}
|
||||
|
||||
#{$theme-dark} &,
|
||||
&#{$theme-dark} {
|
||||
@@ -23,7 +43,6 @@
|
||||
--p-mobile-header-border-color: rgb(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
transition: transform 0.3s ease;
|
||||
&.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