Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

37 update theme with the one from the style guide #38

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -11,3 +11,4 @@ test-results
vite.config.js.timestamp-*
vite.config.ts.timestamp-*
_site
.idea
916 changes: 882 additions & 34 deletions package-lock.json

Large diffs are not rendered by default.

5 changes: 4 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -43,5 +43,8 @@
"vite": "^5.4.10",
"vitest": "2.1.3"
},
"type": "module"
"type": "module",
"dependencies": {
"@frequency-chain/style-guide": "^0.1.9"
}
}
2 changes: 1 addition & 1 deletion src/components/FounderProfile.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
export let linkedinUrl: string;
</script>

<div class="max-w-[100px] sm:text-indigo lg:text-cream">
<div class="max-w-[100px] sm:text-brightBlue lg:text-cream">
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same hex, new name

<a href={linkedinUrl} target="_blank">
<div class="relative">
<img src={imgSrc} alt="headshot" class="mb-4 h-[100px] rounded-full drop-shadow-lg" />
Expand Down
2 changes: 1 addition & 1 deletion src/components/IconBtn.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

<a
aria-label={label}
class="h-[38px] w-[38px] rounded bg-black p-1 transition-colors duration-[0.3s] hover:bg-indigo"
class="hover:bg-indigo h-[38px] w-[38px] rounded bg-black p-1 transition-colors duration-[0.3s]"
{href}
target="_blank"
>
Expand Down
2 changes: 1 addition & 1 deletion src/components/JoinSocials.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
</script>

<div class="w-full max-w-[425px] pb-[80px] sm:pt-[80px] lg:pl-[140px] lg:pt-6">
<h3 class="text-base font-semibold">Join the Digital Revolution</h3>
<h3 class="text-normal font-semibold">Join the Digital Revolution</h3>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

new name

<p class="text-sm">Become a part of shaping the future of the digital landscape with Frequency.</p>
<div class="mt-4 flex gap-4" aria-label="Social Links">
<IconBtn label="X/Twitter" imgSrc={XLogo} href={'https://twitter.com/one_frequency'} />
Expand Down
4 changes: 2 additions & 2 deletions src/components/OpenCloseIcon.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -16,14 +16,14 @@
y1="50%"
x2="100%"
y2="50%"
class={`origin-left translate-y-[20%] stroke-[10%] transition-all duration-[0.3s] ${isOpen ? 'translate-x-[8px] translate-y-[35%] -rotate-45 stroke-cream' : 'rotate-0 stroke-indigo'}`}
class={`origin-left translate-y-[20%] stroke-[10%] transition-all duration-[0.3s] ${isOpen ? 'translate-x-[8px] translate-y-[35%] -rotate-45 stroke-cream' : 'stroke-indigo rotate-0'}`}
/>
<line
x1="0"
y1="50%"
x2="100%"
y2="50%"
class={`origin-left translate-y-[-20%] stroke-[10%] transition-all duration-[0.3s] ${isOpen ? 'translate-x-[8px] translate-y-[-35%] rotate-45 stroke-cream' : 'rotate-0 stroke-indigo'}`}
class={`origin-left translate-y-[-20%] stroke-[10%] transition-all duration-[0.3s] ${isOpen ? 'translate-x-[8px] translate-y-[-35%] rotate-45 stroke-cream' : 'stroke-indigo rotate-0'}`}
/>
</svg>
</button>
2 changes: 1 addition & 1 deletion src/components/SectionNumber.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
</script>

<div
class={`absolute -rotate-90 text-[150px] font-black leading-none ${isLeft ? 'sm:-left-3' : 'sm:-right-3'} bottom-0 sm:text-[85px] md:text-100 lg:-right-6 lg:left-[auto] ${classes}`}
class={`absolute -rotate-90 text-[150px] font-black leading-none ${isLeft ? 'sm:-left-3' : 'sm:-right-3'} bottom-0 sm:text-[85px] md:text-[100px] lg:-right-6 lg:left-[auto] ${classes}`}
>
<slot />
</div>
2 changes: 1 addition & 1 deletion src/components/Sections/Section2.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
<div class="flex gap-4 text-right sm:items-end lg:items-start">
<!-- Desktop section number -->
<SectionNumber
classes="md:text-100 lg:block lg:font-normal relative lg:bottom-auto lg:right-auto lg:top-[16px] sm:hidden"
classes="md:text-[100px] lg:block lg:font-normal relative lg:bottom-auto lg:right-auto lg:top-[16px] sm:hidden"
>.02</SectionNumber
>
<SlideIn>
Expand Down
4 changes: 2 additions & 2 deletions src/components/Sections/Section3.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@

<SectionWrapper
id="section3"
classes="z-0 flex sm:justify-center md:justify-center overflow-hidden sm:pt-[40px] vertical-lg:pt-0 text-cream"
classes="z-0 flex sm:justify-center md:justify-center overflow-hidden sm:pt-[40px] vertical-lg:pt-0 text-white"
>
<!-- Desktop Wave -->
<div class="absolute bottom-0 left-0 h-full w-[50%] sm:hidden lg:block vertical-lg:hidden">
Expand Down Expand Up @@ -40,5 +40,5 @@
</SectionParagraph>
</SplitSection>
</section>
<SectionNumber classes="sm:bottom-4 lg:-bottom-[20px] lg:text-200 lg:-right-[80px]">.03</SectionNumber>
<SectionNumber classes="sm:bottom-4 lg:-bottom-[20px] lg:text-[200px] lg:-right-[80px]">.03</SectionNumber>
</SectionWrapper>
5 changes: 3 additions & 2 deletions src/components/Sections/Section4.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,9 @@
</SectionParagraph>
</section>
</div>
<SectionNumber isLeft={true} classes="text-yellow sm:bottom-[100px] md:bottom-[120px] lg:text-200 lg:-right-[80px]"
>.04</SectionNumber
<SectionNumber
isLeft={true}
classes="text-yellow sm:bottom-[100px] md:bottom-[120px] lg:text-[200px] lg:-right-[80px]">.04</SectionNumber
>

<div class="absolute bottom-0 left-0 flex h-full w-full">
Expand Down
10 changes: 5 additions & 5 deletions src/components/Sections/Section5.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@

<SectionWrapper
id="section5"
classes="relative bg-indigo flex sm:flex-col vertical-lg:flex-col lg:flex-row sm:pt-[50px] vertical-lg:pt-[50px] lg:pt-0"
classes="relative bg-brightBlue flex sm:flex-col vertical-lg:flex-col lg:flex-row sm:pt-[50px] vertical-lg:pt-[50px] lg:pt-0"
>
<!-- Image -->
<div class="absolute bottom-0 left-0 flex h-full w-full overflow-hidden sm:hidden lg:block vertical-lg:hidden">
Expand All @@ -25,23 +25,23 @@
<SlideIn>
<h2 class="title-75 text-yellow sm:pr-5 lg:max-w-[600px]">The Core of Our Technology</h2>
</SlideIn>
<SectionParagraph classes="sm:pr-5 md:pr-[140px] lg:px-0 text-cream">
<SectionParagraph classes="sm:pr-5 md:pr-[140px] lg:px-0 text-white">
The creators of Frequency are at the forefront of innovation. They've created the Decentralized Social
Networking Protocol (DSNP), an open-source solution that establishes a shared social graph independent of
specific applications or centralized platforms.
</SectionParagraph>
<a href="https://docs.frequency.xyz/" target="_blank"
><button
class="max-w-[200px] border-2 border-cream px-10 py-3 text-xs font-semibold text-cream transition-colors duration-500 hover:bg-cream hover:bg-opacity-30"
class="max-w-[200px] border-2 border-white px-10 py-3 text-xs font-semibold text-white transition-colors duration-500 hover:bg-cream hover:bg-opacity-30"
>Learn More</button
></a
>
<SectionNumber classes="text-cream sm:hidden lg:block mr-[70px] bottom-4 right-0 vertical-lg:hidden"
<SectionNumber classes="text-white sm:hidden lg:block mr-[70px] bottom-4 right-0 vertical-lg:hidden"
>.05</SectionNumber
>
</section>

<Founders />
</div>
<SectionNumber classes="text-cream bottom-4 lg:hidden vertical-lg:block">.05</SectionNumber>
<SectionNumber classes="text-white bottom-4 lg:hidden vertical-lg:block">.05</SectionNumber>
</SectionWrapper>
2 changes: 1 addition & 1 deletion src/components/Sections/Section5Wave.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
@keyframes wave {
0%,
100% {
margin-left: 20;
margin-left: 20px;
}
50% {
margin-left: -20px;
Expand Down
2 changes: 1 addition & 1 deletion src/lib/assets/section5waves.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 4 additions & 4 deletions src/routes/(home)/+page.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,14 @@

$: section = 1;

const indigo = '#5E69FF';
const brightBlue = '#5E69FF';
const cream = '#FEFAF3';

const logoMap = new Map([
[1, { logo: indigo, nav: 'navy' }],
[1, { logo: brightBlue, nav: 'navy' }],
[2, { logo: cream, nav: 'cream' }],
[3, { logo: indigo, nav: 'cream' }],
[4, { logo: indigo, nav: 'navy' }],
[3, { logo: brightBlue, nav: 'cream' }],
[4, { logo: brightBlue, nav: 'navy' }],
[5, { logo: cream, nav: 'cream' }],
]);

Expand Down
1 change: 0 additions & 1 deletion src/routes/+layout.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import '../style/app.css';

// since there's no server side data here, we can prerender
export const prerender = true;
export const ssr = false;
Expand Down
29 changes: 5 additions & 24 deletions src/style/app.css
Original file line number Diff line number Diff line change
Expand Up @@ -21,16 +21,16 @@
@apply font-title leading-[1] tracking-wider sm:text-[40px] md:text-[44px] lg:text-[44px];
}
.title-75 {
@apply font-title leading-[1] tracking-wide sm:text-[40px] md:text-[55px] lg:text-75;
@apply font-title leading-[1] tracking-wide sm:text-[40px] md:text-[55px] lg:text-[75px];
}
.title-100 {
@apply font-title leading-[1] tracking-wide sm:text-[55px] md:text-75 lg:text-100;
@apply font-title leading-[1] tracking-wide sm:text-[55px] md:text-[75px] lg:text-[100px];
}
.subtitle {
@apply font-semibold sm:text-lg md:text-lg lg:text-xl;
}
.body {
@apply sm:text-xs md:text-sm lg:text-base;
@apply sm:text-xs md:text-sm lg:text-normal;
}

/* Layout */
Expand All @@ -50,25 +50,6 @@
@apply w-full;
}

/* Underline on hover animation */
.underline-on-hover {
@apply relative block cursor-pointer overflow-hidden px-0 py-1;
}

.underline-on-hover::after {
@apply absolute bottom-0 left-0 h-[0.1em] w-full opacity-0 transition-opacity content-[''];
transition:
opacity 300ms,
transform 300ms;
transform: translate3d(-100%, 0, 0);
}

.underline-on-hover:hover::after,
.underline-on-hover:focus::after {
@apply opacity-100;
transform: translate3d(0, 0, 0);
}

@keyframes slide-from-right {
0% {
opacity: 0;
Expand All @@ -89,14 +70,14 @@

@layer base {
body {
@apply flex flex-col items-center bg-cream text-base text-black;
@apply flex flex-col items-center bg-white text-normal text-black;
}

button {
@apply select-none;
}

::placeholder {
@apply text-disabled !important;
@apply text-gray2 !important;
}
}
32 changes: 3 additions & 29 deletions tailwind.config.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
/** @type {import('tailwindcss').Config} */
import frequencyConfig from '@frequency-chain/style-guide/tailwind.config';

import { MAX_PAGE_WIDTH } from './src/lib/consts';

Expand All @@ -10,23 +11,8 @@ export default {
sans: ['Poppins', 'sans-serif'],
},
colors: {
transparent: 'transparent',
current: 'currentColor',
white: '#ffffff',
black: '#000000',
disabled: '#BCBAC0',
cream: '#FEFAF3',
navy: '#19455E',
yellow: '#FFD747',
teal: '#4BA0A5',
tealBright: '#00B6AF',
purple: '#2B2F6E',
orange: '#F87C48',
indigo: '#5E69FF',
darkIndigo: '#445BC3',
rose: '#A06B87',
red: '#EB5757',
gray: '#C8CDD0',
tealBright: '#00B6AF',
},
width: {
page: `${MAX_PAGE_WIDTH}px`,
Expand All @@ -40,19 +26,6 @@ export default {
page: `${MAX_PAGE_WIDTH}px`,
full: '100%',
},
extend: {
fontSize: {
xs: '14px',
sm: '16px',
base: '18px',
lg: '20px',
xl: '25px',
'2xl': '30px',
75: '75px',
100: '100px',
200: '200px',
},
},
screens: {
sm: '0px',
md: '900px',
Expand All @@ -65,4 +38,5 @@ export default {
},
},
safelist: ['after:bg-navy', 'after:bg-cream', 'invalid:border-red'],
presets: [frequencyConfig],
};
Loading