Skip to content
This repository was archived by the owner on Jan 19, 2025. It is now read-only.

Commit 461ae2b

Browse files
chiciochicio
committed
Merge branch 'source' of https://github.com/chicio/chicio.github.io into source
2 parents d3a5309 + aaa96a3 commit 461ae2b

File tree

13 files changed

+272
-202
lines changed

13 files changed

+272
-202
lines changed

‎__stories__/organism/blog-menu.stories.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import React from "react";
2+
import { Meta, Story } from "@storybook/react";
3+
import {
4+
BlogMenu,
5+
MenuProps,
6+
} from "../../src/components/design-system/organism/blog-menu";
7+
8+
const Template: Story<MenuProps> = (args) => <BlogMenu {...args} />;
9+
10+
export const BlogMenuStory = Template.bind({});
11+
BlogMenuStory.args = {
12+
trackingCategory: "",
13+
pathname: "/blog/",
14+
};
15+
BlogMenuStory.storyName = "Blog Menu";
16+
17+
export default {
18+
title: "Organisms/Blog Menu",
19+
component: BlogMenu,
20+
} as Meta;

‎__stories__/organism/menu.stories.tsx‎

Lines changed: 0 additions & 20 deletions
This file was deleted.

‎src/components/design-system/atoms/call-to-action-style.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ export const callToActionStyle = css`
1111
margin: ${(props) => props.theme.spacing[0]};
1212
line-height: 1;
1313
text-align: center;
14+
display: inline-block;
1415
1516
${mediaQuery.dark} {
1617
background-color: ${(props) => props.theme.dark.accentColor};
@@ -20,12 +21,20 @@ export const callToActionStyle = css`
2021
color: ${(props) => props.theme.light.textAbovePrimaryColor};
2122
text-decoration: none;
2223
24+
${mediaQuery.inputDevice.mouse} {
25+
transition: transform 0.15s;
26+
}
27+
2328
&:hover {
2429
color: ${(props) => props.theme.light.textAbovePrimaryColor};
2530
text-decoration: none;
2631
2732
@media (prefers-color-scheme: dark) {
2833
color: ${(props) => props.theme.dark.textAbovePrimaryColor};
2934
}
35+
36+
${mediaQuery.inputDevice.mouse} {
37+
transform: scale(1.1);
38+
}
3039
}
3140
`;

‎src/components/design-system/molecules/recent-post-card.tsx‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -19,16 +19,6 @@ const CardDescriptionContainer = styled.div`
1919
flex-grow: 1;
2020
`;
2121

22-
const CardHeading = styled(Heading6)`
23-
margin-bottom: ${(props) => props.theme.spacing[3]};
24-
margin-right: 0;
25-
margin-left: 0;
26-
`;
27-
28-
interface CardContainerProps {
29-
margin: boolean;
30-
}
31-
3222
const CardContainer = styled.div<CardContainerProps>`
3323
background-color: ${(props) => props.theme.light.generalBackgroundLight};
3424
box-shadow: ${(props) => props.theme.light.boxShadowLight} 0 3px 10px 0;
@@ -38,10 +28,10 @@ const CardContainer = styled.div<CardContainerProps>`
3828
margin: ${(props) => props.theme.spacing[2]} 0 0 0;
3929
display: flex;
4030
flex-direction: column;
31+
margin: 0 ${(props) => (props.margin ? props.theme.spacing[2] : "")};
4132
4233
${mediaQuery.minWidth.md} {
4334
${mediaQuery.inputDevice.mouse} {
44-
margin: 0 ${(props) => (props.margin ? props.theme.spacing[2] : "")};
4535
transition: all 0.2s;
4636
4737
&:hover {
@@ -56,6 +46,16 @@ const CardContainer = styled.div<CardContainerProps>`
5646
}
5747
`;
5848

49+
const CardHeading = styled(Heading6)`
50+
margin-bottom: ${(props) => props.theme.spacing[3]};
51+
margin-right: 0;
52+
margin-left: 0;
53+
`;
54+
55+
interface CardContainerProps {
56+
margin: boolean;
57+
}
58+
5959
export interface RecentPostCardProps {
6060
position: number;
6161
slug: string;

‎src/components/design-system/organism/blog-header.tsx‎

Lines changed: 63 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
11
import React from "react";
22
import { StaticImage } from "gatsby-plugin-image";
33
import styled from "styled-components";
4-
import { Heading3 } from "../atoms/heading3";
54
import { mediaQuery } from "../utils-css/media-query";
65

76
const BlogHeaderContainer = styled.div`
87
display: flex;
98
align-items: center;
10-
margin-top: 50px;
11-
margin-bottom: 20px;
9+
10+
${mediaQuery.minWidth.sm} {
11+
margin-top: ${(props) => props.theme.spacing[10]};
12+
margin-bottom: ${(props) => props.theme.spacing[10]};
13+
}
1214
`;
1315

1416
const BlogHeaderColumn = styled.div`
@@ -17,58 +19,82 @@ const BlogHeaderColumn = styled.div`
1719
justify-content: center;
1820
`;
1921

20-
const BlogTitle = styled(Heading3)`
22+
const BlogTitle = styled.span`
2123
color: ${(props) => props.theme.light.primaryTextColor};
2224
margin: 0;
2325
font-weight: bold;
2426
display: block;
2527
line-height: 1.5;
28+
font-size: ${(props) => props.theme.fontSizes[4]};
2629
2730
${mediaQuery.dark} {
2831
color: ${(props) => props.theme.dark.primaryTextColor};
2932
}
3033
31-
${mediaQuery.maxWidth.md} {
32-
font-size: 28px;
34+
${mediaQuery.minWidth.xs} {
35+
font-size: ${(props) => props.theme.fontSizes[6]};
3336
}
3437
35-
${mediaQuery.maxWidth.xs} {
36-
font-size: 22px;
38+
${mediaQuery.minWidth.sm} {
39+
font-size: ${(props) => props.theme.fontSizes[9]};
3740
}
3841
`;
3942

4043
const BlogDescription = styled.span`
41-
display: block;
42-
font-size: ${(props) => props.theme.fontSizes[4]};
43-
color: ${(props) => props.theme.light.secondaryTextColor};
44-
line-height: 1.5;
45-
46-
${mediaQuery.dark} {
47-
color: ${(props) => props.theme.dark.secondaryTextColor};
48-
}
44+
display: none;
4945
50-
${mediaQuery.maxWidth.md} {
51-
font-size: 12px;
52-
}
46+
${mediaQuery.minWidth.sm} {
47+
display: block;
48+
font-size: ${(props) => props.theme.fontSizes[4]};
49+
color: ${(props) => props.theme.light.secondaryTextColor};
50+
line-height: 1.5;
5351
54-
${mediaQuery.maxWidth.xs} {
55-
font-size: 10px;
52+
${mediaQuery.dark} {
53+
color: ${(props) => props.theme.dark.secondaryTextColor};
54+
}
5655
}
5756
`;
5857

5958
const ImageContainer = styled.div`
60-
width: 80px;
61-
height: 80px;
59+
width: 35px;
60+
height: 35px;
61+
6262
background-color: ${(props) => props.theme.light.generalBackgroundLight};
6363
margin-right: ${(props) => props.theme.spacing[2]};
6464
border-radius: 10px;
6565
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.575);
6666
67+
${mediaQuery.minWidth.sm} {
68+
width: 80px;
69+
height: 80px;
70+
}
71+
6772
${mediaQuery.dark} {
6873
background-color: ${(props) => props.theme.dark.generalBackgroundLight};
6974
}
7075
`;
7176

77+
export const DesktopContainer = styled.div`
78+
display: none;
79+
80+
${mediaQuery.minWidth.sm} {
81+
display: block;
82+
}
83+
`;
84+
85+
interface MobileContainerProps {
86+
height: string;
87+
}
88+
89+
export const MobileContainer = styled.div<MobileContainerProps>`
90+
display: flex;
91+
height: ${(props) => props.height};
92+
93+
${mediaQuery.minWidth.sm} {
94+
display: none;
95+
}
96+
`;
97+
7298
export const BlogHeader: React.FC = () => (
7399
<BlogHeaderContainer>
74100
<ImageContainer>
@@ -91,3 +117,17 @@ export const BlogHeader: React.FC = () => (
91117
</BlogHeaderColumn>
92118
</BlogHeaderContainer>
93119
);
120+
121+
export const DesktopBlogHeader: React.FC = () => (
122+
<DesktopContainer>
123+
<BlogHeader />
124+
</DesktopContainer>
125+
);
126+
127+
export const MobileBlogHeader: React.FC<MobileContainerProps> = ({
128+
height,
129+
}) => (
130+
<MobileContainer height={height}>
131+
<BlogHeader />
132+
</MobileContainer>
133+
);

src/components/design-system/organism/menu.tsx renamed to src/components/design-system/organism/blog-menu.tsx

Lines changed: 46 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,36 @@ import { Overlay } from "../atoms/overlay";
99
import { CSSTransition } from "react-transition-group";
1010
import { Close } from "../molecules/close";
1111
import { mediaQuery } from "../utils-css/media-query";
12+
import { MobileBlogHeader } from "./blog-header";
13+
import { ContainerFluid } from "../atoms/container-fluid";
14+
15+
const menuHeight = "55px";
16+
17+
const MobileBlogHeaderContainer = styled(ContainerFluid)`
18+
height: ${menuHeight};
19+
display: flex;
20+
flex-direction: column;
21+
justify-content: center;
22+
align-items: center;
23+
24+
${mediaQuery.minWidth.sm} {
25+
display: none;
26+
}
27+
`;
28+
29+
const Divider = styled.div`
30+
height: 1px;
31+
background-color: ${(props) => props.theme.light.textAbovePrimaryColor};
32+
position: absolute;
33+
top: 54px;
34+
left: ${(props) => props.theme.spacing[3]};
35+
right: ${(props) => props.theme.spacing[3]};
36+
opacity: 0.2;
37+
38+
${mediaQuery.dark} {
39+
background-color: ${(props) => props.theme.dark.textAbovePrimaryColor};
40+
}
41+
`;
1242

1343
const MenuButtonContainer = styled.div`
1444
position: absolute;
@@ -30,12 +60,14 @@ const MenuContainer = styled.div<MenuContainerProps>`
3060
background-color: ${(props) => props.theme.light.primaryColor};
3161
box-shadow: inset 0 -2px 5px rgba(0, 0, 0, 0.1);
3262
position: fixed;
33-
top: ${(props) => (props.shouldHide ? "-55px" : 0)};
63+
top: ${(props) => (props.shouldHide ? `-${menuHeight}` : 0)};
64+
left: 0;
65+
right: 0;
3466
transition: top 0.3s ease 0s,
3567
height 0.3s ease ${(props) => `${props.delayOpenCloseMenuAnimation}s`};
3668
width: 100%;
3769
z-index: 300;
38-
height: ${(props) => (props.shouldOpenMenu ? "200px" : "55px")};
70+
height: ${(props) => (props.shouldOpenMenu ? "210px" : menuHeight)};
3971
4072
${mediaQuery.dark} {
4173
background-color: ${(props) => props.theme.dark.primaryColor};
@@ -50,6 +82,7 @@ const NavBar = styled(Container)<NavBarProps>`
5082
display: flex;
5183
flex-direction: column;
5284
align-items: center;
85+
height: ${menuHeight};
5386
5487
${mediaQuery.minWidth.sm} {
5588
flex-direction: row;
@@ -99,7 +132,7 @@ const NavBarMenuItem = memo(styled(MenuItemWithTracking)<NavBarMenuItemProps>`
99132
${mediaQuery.minWidth.sm} {
100133
visibility: visible;
101134
opacity: 1;
102-
height: 55px;
135+
height: ${menuHeight};
103136
104137
${(props) =>
105138
!props.selected &&
@@ -239,7 +272,10 @@ export interface MenuProps {
239272
pathname: string;
240273
}
241274

242-
export const Menu: React.FC<MenuProps> = ({ trackingCategory, pathname }) => {
275+
export const BlogMenu: React.FC<MenuProps> = ({
276+
trackingCategory,
277+
pathname,
278+
}) => {
243279
const direction = useScrollDirection();
244280
const [shouldOpenMenu, setShouldOpenMenu] = useState(false);
245281
const [enableMenuButton, setEnableMenuButton] = useState(true);
@@ -269,6 +305,10 @@ export const Menu: React.FC<MenuProps> = ({ trackingCategory, pathname }) => {
269305
delayOpenCloseMenuAnimation={shouldOpenMenu ? 0 : 0.4}
270306
>
271307
<NavBar shouldOpenMenu={shouldOpenMenu}>
308+
<MobileBlogHeaderContainer>
309+
<MobileBlogHeader height={menuHeight}/>
310+
{shouldOpenMenu && <Divider />}
311+
</MobileBlogHeaderContainer>
272312
<AnimatedNavBarItem
273313
label={"Home"}
274314
slug={"/"}
@@ -293,27 +333,15 @@ export const Menu: React.FC<MenuProps> = ({ trackingCategory, pathname }) => {
293333
onStartAnimation={onStartAnimation}
294334
onFinishAnimation={onFinishAnimation}
295335
/>
296-
<AnimatedNavBarItem
297-
label={"Art"}
298-
slug={slugs.art}
299-
selected={pathname === slugs.art}
300-
trackingAction={tracking.action.open_art}
301-
trackingCategory={trackingCategory}
302-
shouldOpenMenu={shouldOpenMenu}
303-
enterDelayAnimation={"0.5s"}
304-
exitDelayAnimation={"0.1s"}
305-
onStartAnimation={onStartAnimation}
306-
onFinishAnimation={onFinishAnimation}
307-
/>
308336
<AnimatedNavBarItem
309337
label={"About me"}
310338
slug={slugs.aboutMe}
311339
selected={pathname === slugs.aboutMe}
312340
trackingAction={tracking.action.open_about_me}
313341
trackingCategory={trackingCategory}
314342
shouldOpenMenu={shouldOpenMenu}
315-
enterDelayAnimation={"0.6s"}
316-
exitDelayAnimation={"0s"}
343+
enterDelayAnimation={"0.5s"}
344+
exitDelayAnimation={"0.1s"}
317345
onStartAnimation={onStartAnimation}
318346
onFinishAnimation={onFinishAnimation}
319347
/>

0 commit comments

Comments
 (0)