Skip to content

Commit 1e43d65

Browse files
wilwadewilwade
committed
Cleanup
1 parent f6151ec commit 1e43d65

File tree

4 files changed

+31
-122
lines changed

4 files changed

+31
-122
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
"lint": "npm run lint:md && npm run lint:spellcheck"
2020
},
2121
"devDependencies": {
22-
"@frequency-chain/style-guide": "^0.1.37",
22+
"@frequency-chain/style-guide": "^0.2.0",
2323
"@tailwindcss/cli": "^4.1.7",
2424
"remark": "^15.0.1",
2525
"remark-cli": "^12.0.1",

‎theme/css/variables.css

Lines changed: 1 addition & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -2,38 +2,10 @@
22
/*
33
* MOD: We have to modify this fairly heavily.
44
* To update, just make sure that we have all the new variables.
5+
* See @frequency-chain/style-guide for the style variables
56
*/
67

78
:root {
8-
/* COPY the colors from Style Guide */
9-
--color-primary: #790e70;
10-
--color-purple25: #9a4a94;
11-
--color-purple50: #bc86b7;
12-
--color-purple75: #ddc3db;
13-
--color-darkPurple: #331e49;
14-
--color-secondary: #ff9a02;
15-
16-
/* State Colors */
17-
--color-error: #eb5757;
18-
--color-warning: #f99a2a;
19-
--color-success: #27ae60;
20-
--color-info: #2f80ed;
21-
22-
/* Neutrals */
23-
--color-black: #242527;
24-
--color-gray1: #717171;
25-
--color-gray2: #8b8b8b;
26-
--color-gray3: #dbdbdb;
27-
--color-white: #ffffff;
28-
--color-cream: #fcf3e4;
29-
30-
/* Gradients */
31-
--gradient-primary: -90deg, #311e48 0%, #790e70 50%, #aa40a1 100%;
32-
--gradient-secondary: -90deg, #ff5b2f 0%, #ff9a02 50%, #ffcf2c 100%;
33-
34-
/* Extra Colors */
35-
--color-cream: #f0f0f0;
36-
379
/* Extra Variables */
3810
--sidebar-width-mobile: calc(100vw - 50px);
3911
--header-height: 85px;

‎theme/header.hbs

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<header id="header" class="bg-white header-shadow flex h-[var(--header-height)] font-title sticky left-0 top-0 w-full z-10 px-10">
2-
<div class="m-auto flex h-[85px] w-full max-w-(--breakpoint-xl) justify-between md:flex-row s-b-JUd07AFC-o">
2+
<div class="xs:flex-row-reverse m-auto flex h-[85px] w-full max-w-(--breakpoint-xl) justify-between md:flex-row s-b-JUd07AFC-o">
33
<a href="" class="self-center pointer-events-none s-b-JUd07AFC-o">
44
<svg width="255" height="47.6" viewBox="0 0 600 112" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-[146px] text-black md:w-[200px]">
55
<path d="M216.3 28.5v-8.6h-10.5v49.9H217V44c0-9.7 4.2-14.2 13.2-14V19c-7.1.3-11.8 3.5-14 9.3zM118.8 0H7a7 7 0 0 0-7 7v97.8a7 7 0 0 0 3.3 6 7 7 0 0 0 6.8.3L94 69a7 7 0 0 0-3.2-13H36.6L122 13.3A7 7 0 0 0 118.8 0Zm35 69.8h11.7V40.3h35v-9.8h-35V9.9h35V0h-46.7v69.8Zm103.6-50.6a25 25 0 0 0-25.8 25.7c0 15 10.7 25.7 26 25.7s21-7 24-17.1h-10.3a13.7 13.7 0 0 1-13.2 8.2c-9.7 0-16-6.6-16.2-16.2h40.3c0-14.5-8.6-26.1-25-26.1zm-14.3 19a15.1 15.1 0 0 1 14.6-10.5c6.9 0 12 4 13.9 10.5h-28.4Zm232.5-19a16.1 16.1 0 0 0-14.6 8.1V20h-10.4v49.9h11.2v-29c0-7.1 3.8-12.1 10.4-12.1 6.7 0 8.7 4.4 8.7 11.7V70h11.3V38.3c0-11.6-6.5-19-16.6-19zm62.8 30.3c-1.3 7-6.4 11.2-14.1 11.2a16 16 0 0 1-15.6-16c0-9.4 6.5-15.8 15.6-15.8s12.8 4.4 14 11.1h11c-1.6-12.5-11-20.8-25-20.8a26 26 0 0 0-26.5 25.7c0 15.1 11 25.7 26.5 25.7s23.5-8.2 25-21h-11zM588.2 20l-14.9 24.8L559.5 20h-12l19.7 35-19.8 33.2h11.8L600 20Zm-168.5-.7A25 25 0 0 0 393.8 45c0 15 10.7 25.7 26 25.7 15.4 0 21-7 24-17.1h-10.3a13.7 13.7 0 0 1-13.1 8.2c-9.7 0-16-6.6-16.2-16.2h40.3c0-14.5-8.6-26.1-25-26.1zm-14.3 19A15.1 15.1 0 0 1 420 27.7c7 0 12 4 13.9 10.5h-28.4Zm-28.3 12c0 6.6-3.6 10.5-9.7 10.5-6 0-9.7-3.9-9.7-10.5V19.9h-11.2v30.9c0 12 8.2 19.7 21 19.7 12.6 0 20.8-7.8 20.8-19.7v-31H377Zm-49.4-20.5a20.4 20.4 0 0 0-18.5-10.5c-13.5 0-23.3 10.5-23.3 25.7 0 15.1 9.7 25.7 23.3 25.7 13.6 0 14-3.5 17.7-9.3v27.1h11.3V20.1h-10.5v9.7zm-16 31.2c-9 0-14.9-6.8-14.9-16.2 0-9.4 6.2-16 14.9-16s15.2 6.5 15.2 16S320.6 61 311.7 61z" fill="currentColor"></path>
@@ -35,7 +35,7 @@
3535
</div>
3636
</nav>
3737
<input type="checkbox" class="peer hidden" id="mobile-menu-toggle">
38-
<label class="relative z-50 hover:peer-checked:text-purple50 hover:text-primary xs:flex cursor-pointer self-center text-black peer-checked:text-white lg:hidden" for="mobile-menu-toggle" aria-label="Open main navigation" aria-controls="mobile-navigation">
38+
<label class="relative z-50 xs:flex cursor-pointer self-center lg:hidden hover:peer-checked:text-purple50 hover:text-primary peer-checked:text-cream text-black" for="mobile-menu-toggle" aria-label="Open main navigation" aria-controls="mobile-navigation">
3939
<svg id="menu-button" class="h-[40px] w-[40px] stroke-current" role="none">
4040
<line id="menu-button-top" x1="5%" y1="50%" x2="95%" y2="50%" stroke-linecap="round" stroke-linejoin="round" class="origin-left translate-y-[25%] transform stroke-[10%] transition-all duration-[0.3s]"></line>
4141
<line id="menu-button-center" x1="5%" y1="50%" x2="95%" y2="50%" stroke-linecap="round" stroke-linejoin="round" class="origin-center transform stroke-[10%] transition-all duration-[0.3s]"></line>
@@ -44,14 +44,14 @@
4444
</label>
4545
<div id="mobile-menu" class="gap-f24 xs:flex fixed top-0 left-0 z-1 h-0 w-[100vw] flex-col justify-between overflow-y-scroll bg-black px-[12%] transition-[height] duration-[1s] peer-checked:h-[100vh] lg:hidden" aria-expanded="false">
4646
<nav id="mobile-navigation" aria-label="Main" class="mb-f48 gap-f24 xs:flex mt-[85px] flex-col text-white">
47-
<a class="h4 underline-on-hover after:bg-current" href="https://www.frequency.xyz/#mission" target="_self">Mission</a>
48-
<a class="h4 underline-on-hover after:bg-current" href="https://www.frequency.xyz/#about" target="_self">About</a>
49-
<a class="h4 underline-on-hover after:bg-current" href="https://www.frequency.xyz/#user" target="_self">User</a>
50-
<a class="h4 underline-on-hover after:bg-current" href="https://www.frequency.xyz/#developers" target="_self">Developers</a>
51-
<a class="h4 underline-on-hover after:bg-current" href="https://www.frequency.xyz/#contact" target="_self">Contact</a>
52-
<a class="pointer-events-auto block" href="/" target="_self">
53-
<button class="h-[46px] px-f24 cursor-pointer rounded-full text-center transition-all text-nowrap hover:shadow-md bg-white text-black w-full">
54-
<div class="font-bold gap-f8 text-normal flex items-center justify-center font-sans">Developer Portal</div>
47+
<a class="h4 underline-on-hover font-bold uppercase after:bg-current text-white" href="https://www.frequency.xyz/#mission" target="_self">Mission.</a>
48+
<a class="h4 underline-on-hover font-bold uppercase after:bg-current text-white" href="https://www.frequency.xyz/#about" target="_self">About.</a>
49+
<a class="h4 underline-on-hover font-bold uppercase after:bg-current text-white" href="https://www.frequency.xyz/#user" target="_self">User.</a>
50+
<a class="h4 underline-on-hover font-bold uppercase after:bg-current text-white" href="https://www.frequency.xyz/#developers" target="_self">Developers.</a>
51+
<a class="h4 underline-on-hover font-bold uppercase after:bg-current text-white" href="https://www.frequency.xyz/#contact" target="_self">Contact.</a>
52+
<a class="pointer-events-auto block mt-f24 max-w-[360px] md:hidden" href="https://www.frequency.xyz/dev-portal/" target="_self">
53+
<button class="h-[46px] px-f24 cursor-pointer rounded-full text-center transition-all text-nowrap bg-cream text-black hover:bg-primary hover:text-white hover:shadow-lg-gray3 w-full">
54+
<div class=" font-bold gap-f8 text-normal flex items-center justify-center">Developer Portal</div>
5555
</button>
5656
</a>
5757
</nav>

‎theme/tailwind.css

Lines changed: 19 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -4,53 +4,7 @@
44
box-shadow: 0 4px 4px 0 #00000040;
55
}
66

7-
/* Underline on hover animation */
8-
.underline-on-nav-hover,
9-
.underline-on-nav {
10-
@apply relative cursor-pointer overflow-hidden;
11-
}
12-
13-
.underline-on-nav-hover::after,
14-
.underline-on-nav::after {
15-
@apply absolute bottom-0 left-0 h-[13px] w-full bg-teal opacity-0 transition-opacity content-[''];
16-
transition:
17-
opacity 300ms,
18-
transform 300ms;
19-
transform: translate3d(0, 200%, 0);
20-
}
21-
22-
.underline-on-nav-hover:hover::after,
23-
.underline-on-nav-hover:focus::after,
24-
.underline-on-nav::after {
25-
@apply opacity-100;
26-
transform: translate3d(0, 0, 0);
27-
}
28-
297
@layer components {
30-
.lg {
31-
@apply text-lg leading-lg;
32-
}
33-
34-
.md {
35-
@apply text-md leading-md;
36-
}
37-
38-
.normal {
39-
@apply text-normal leading-normal;
40-
}
41-
42-
.md {
43-
@apply text-md leading-md;
44-
}
45-
46-
.sm {
47-
@apply text-sm leading-sm;
48-
}
49-
50-
.xs {
51-
@apply text-xs leading-xs;
52-
}
53-
548
/* Underline on hover animation */
559
.underline-on-hover {
5610
@apply relative block cursor-pointer overflow-hidden px-0 py-1;
@@ -73,63 +27,46 @@
7327

7428
/* Lots adding back in defaults that tailwind removes */
7529
@layer base {
76-
h1,
77-
.h1 {
78-
@apply font-title text-[48px] leading-[1] tracking-wide md:text-[56px] lg:text-[70px];
79-
}
80-
8130
.content h1 {
82-
margin: 0.67em 0;
31+
margin-block-start: 0.67em;
32+
margin-block-end: 0.67em;
33+
font-weight: bold;
8334
}
8435

8536
/* Reset the margins for the first header in the contents */
8637
.content h1:first-of-type {
38+
margin-block-start: 0;
8739
margin-top: 0;
8840
}
8941

90-
h2,
91-
.h2 {
92-
@apply font-title text-[40px] leading-[1] tracking-wider md:text-[48px] lg:text-[56px];
93-
}
94-
9542
.content h2 {
96-
margin: 0.83em 0;
97-
}
98-
99-
h3,
100-
.h3 {
101-
@apply font-title text-[30px] leading-[1] tracking-wider sm:text-[36px] md:text-[40px] lg:text-[44px];
43+
margin-block-start: 0.83em;
44+
margin-block-end: 0.83em;
45+
font-weight: bold;
10246
}
10347

10448
.content h3 {
105-
margin: 1em 0;
106-
}
107-
108-
h4,
109-
.h4 {
110-
@apply font-title text-[24px] leading-[1] tracking-wider sm:text-[28px] md:text-[20px] lg:text-[36px];
49+
margin-block-start: 1em;
50+
margin-block-end: 1em;
51+
font-weight: bold;
11152
}
11253

11354
.content h4 {
114-
margin: 1.33em 0;
115-
}
116-
117-
h5,
118-
.h5 {
119-
@apply font-title text-[18px] leading-[1] tracking-wider sm:text-[20px] md:text-[22px] lg:text-[26px];
55+
margin-block-start: 1.33em;
56+
margin-block-end: 1.33em;
57+
font-weight: bold;
12058
}
12159

12260
.content h5 {
123-
margin: 1.67em 0;
124-
}
125-
126-
h6,
127-
.h6 {
128-
@apply font-title text-[18px] leading-[1] tracking-wider sm:text-[20px] md:text-[22px] lg:text-[22px];
61+
margin-block-start: 1.67em;
62+
margin-block-end: 1.67em;
63+
font-weight: bold;
12964
}
13065

13166
.content h6 {
132-
margin: 2.33em 0;
67+
margin-block-start: 2.33em;
68+
margin-block-end: 2.33em;
69+
font-weight: bold;
13370
}
13471

13572
.content ol {

0 commit comments

Comments
 (0)