Skip to content

Commit 28229fe

Browse files
pigstakepigstake
committed
Initial top nav commit, adds markup and first take at atomic design css organization
1 parent a915f92 commit 28229fe

File tree

4 files changed

+221
-426
lines changed

4 files changed

+221
-426
lines changed

‎public/css/atoms/buttons.css‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
button,
2+
.button {
3+
background-color: white;
4+
border: solid 1px black;
5+
border-radius: 0.75rem;
6+
font-size: 1rem;
7+
font-weight: bold;
8+
height: 3rem;
9+
line-height: 3rem;
10+
padding: 0 1rem;
11+
}

‎public/css/organisms/mobileNav.css‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
.mobileNavCheckbox {
2+
display: none;
3+
}
4+
.mobileNavButton {
5+
cursor: pointer;
6+
font-size: 1rem;
7+
margin: 0;
8+
padding: 0 1rem;
9+
position: absolute;
10+
right: 1rem;
11+
text-align: center;
12+
top: 1.5rem;
13+
z-index: 99999;
14+
}
15+
.mobileNavCheckbox:checked ~ .mobileNavButton {
16+
position: fixed;
17+
}
18+
.mobileNavButton-icon {
19+
background-color: #000;
20+
display: inline-block;
21+
height: 0.25rem;
22+
position: relative;
23+
top: -.1875rem;
24+
transition-duration: 0s;
25+
transition-delay: 0.2s;
26+
width: 1.25rem;
27+
}
28+
.mobileNavButton-icon::before,
29+
.mobileNavButton-icon::after {
30+
background-color: #000;
31+
content: '';
32+
display: block;
33+
height: 0.25rem;
34+
position: absolute;
35+
transition-delay: 0.2s, 0s;
36+
transition-duration: 0.2s;
37+
transition-property: margin, transform;
38+
width: 1.25rem;
39+
}
40+
.mobileNavButton-icon::before {
41+
margin-top: 0.375rem;
42+
}
43+
.mobileNavButton-icon::after {
44+
margin-top: -0.375rem;
45+
}
46+
.mobileNavCheckbox:checked ~ .mobileNavButton .mobileNavButton-icon {
47+
background-color: transparent;
48+
}
49+
.mobileNavCheckbox:checked ~ .mobileNavButton .mobileNavButton-icon::before,
50+
.mobileNavCheckbox:checked ~ .mobileNavButton .mobileNavButton-icon::after {
51+
margin-top: 0;
52+
transition-delay: 0s, 0.2s;
53+
}
54+
.mobileNavCheckbox:checked ~ .mobileNavButton .mobileNavButton-icon::before {
55+
transform: rotate(45deg);
56+
}
57+
.mobileNavCheckbox:checked ~ .mobileNavButton .mobileNavButton-icon::after {
58+
transform: rotate(-45deg);
59+
}
60+
.mobileNav {
61+
background-color: #9DFCF0;
62+
display: block;
63+
height: 100%;
64+
position: fixed;
65+
text-align: left;
66+
top: 0;
67+
transform: translate(-100%, 0);
68+
transition: all 0.3s ease-in-out;
69+
width: 100%;
70+
z-index: 88888;
71+
}
72+
.mobileNavCheckbox:checked ~ .mobileNav {
73+
transform: translate(0, 0);
74+
}
75+
.mobileNav-list {
76+
list-style-type: none;
77+
margin: 0 auto;
78+
max-width: 32rem;
79+
padding: 6rem 2rem 0;
80+
}
81+
.mobileNav-listItem {
82+
margin-bottom: 1.5rem;
83+
}
84+
.mobileNav-listItem:last-of-type {
85+
padding-top: 1.5rem;
86+
}
87+
.mobileNav-link {
88+
89+
}

‎public/css/organisms/topNav.css‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
.topNav {
2+
display: flex;
3+
align-items: center;
4+
justify-content: space-between;
5+
height: 6rem;
6+
padding: 0 1rem;
7+
}
8+
.topNav-logo {
9+
display: block;
10+
height: 1.5rem;
11+
width: 6.75rem;
12+
}
13+
.topNav-list {
14+
display: flex;
15+
margin-right: 8rem;
16+
}
17+
.topNav-listItem {
18+
display: block;
19+
margin-left: 1rem;
20+
}
21+
.topNav-link {
22+
23+
}

0 commit comments

Comments
 (0)