Skip to content

Commit 0bec36d

Browse files
zesamerizesameri
committed
nav animation working css fixes
1 parent bf941b1 commit 0bec36d

File tree

7 files changed

+158
-115
lines changed

7 files changed

+158
-115
lines changed

‎css/about.css‎

Lines changed: 36 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,19 @@
11
/* ============================================================
22
For About Me Styling
33
============================================================ */
4+
.about {
5+
display: flex;
6+
flex-direction: column;
7+
}
8+
9+
.menu-space {
10+
height: 2em;
11+
}
412
.flex-exper {
513
display: flex;
614
flex-direction: row;
15+
background: FloralWhite;
16+
height: 100%;
717
}
818

919
.side-nav {
@@ -12,7 +22,7 @@
1222
justify-content: center;
1323
align-items: center;
1424
width:30%;
15-
25+
border: 2px solid #1A1110;
1626
}
1727

1828
.side-nav div{
@@ -25,6 +35,19 @@
2535
width: 100%;
2636
font-size: x-large;
2737
background: salmon;
38+
-webkit-touch-callout: none;
39+
-webkit-user-select: none;
40+
-khtml-user-select: none;
41+
-moz-user-select: none;
42+
-ms-user-select: none;
43+
user-select: none;
44+
}
45+
.side-nav div:hover {
46+
background: #fba298;
47+
}
48+
.side-nav div:active {
49+
background: FloralWhite;
50+
color: salmon;
2851
}
2952

3053

@@ -34,7 +57,7 @@
3457
display: flex;
3558
align-items: center;
3659
justify-content: center;
37-
border-left: 2px solid #1A1110;
60+
border: 2px solid #1A1110;
3861
}
3962
.main .content {
4063
color: #1A1110;
@@ -47,3 +70,14 @@
4770
font-size: 160%;
4871
text-align: left;
4972
}
73+
@media screen and (orientation:portrait) {
74+
.side-nav div {
75+
font-size: 1em;
76+
}
77+
.main h1 {
78+
font-size: 1.5em;
79+
}
80+
.main p {
81+
font-size: 1em;
82+
}
83+
}

‎css/hero.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
background-attachment: fixed;
55
background-size: cover;
66
background-image: url("../assets/rio.jpg");
7+
overflow: visible;
78
display: flex;
89
align-items: center;
910
justify-content: center;

‎css/main.css‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,5 +40,4 @@ html, body {
4040

4141
section {
4242
height: 100vh;
43-
padding-top: 2em;
4443
}

‎css/menu.css‎

Lines changed: 17 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -4,48 +4,46 @@
44

55
.menu-bar {
66
position: fixed;
7-
margin:auto;
87
width: 100%;
9-
background: rgba(139,0,0, 0.2);
10-
padding: 0.5em 0;
8+
background: rgba(139,0,0, 0.4);
9+
height: 2em;
1110
font-weight: 500;
1211
z-index: 100;
13-
}
14-
15-
.snip1168 * {
16-
box-sizing: border-box;
12+
display: flex;
13+
flex-direction: row;
14+
justify-content: center;
15+
align-content: center;
16+
align-items: center;
17+
}
18+
.snip1168 {
19+
display: flex;
20+
flex-direction: row;
21+
flex-wrap: nowrap;
22+
justify-content: center;
23+
align-content: center;
24+
align-items: center;
25+
list-style: outside none none;
1726
}
1827
.snip1168 li {
19-
display: inline-block;
20-
list-style: outside none none;
21-
margin: 0 1em;
22-
padding: 0;
28+
padding: 0 1em;
2329
}
2430
.snip1168 a {
25-
padding: 0.5em 0;
2631
color: rgba(255, 255, 255, 0.5);
2732
position: relative;
2833
letter-spacing: 1px;
2934
text-decoration: none;
3035
}
3136
.snip1168 a:before,
3237
.snip1168 a:after {
33-
position: absolute;
3438
-webkit-transition: all 0.35s ease;
3539
transition: all 0.35s ease;
3640
}
3741
.snip1168 a:before {
38-
top: 0;
39-
display: block;
40-
height: 3px;
41-
width: 0%;
4242
content: "";
4343
background-color: rgb(176,224,230);
4444
}
4545
.snip1168 a:after {
4646
left: 0;
47-
top: 0;
48-
padding: 0.5em 0;
4947
position: absolute;
5048
content: attr(data-hover);
5149
color: #ffffff;

css/flexmenu.css renamed to css/project-menu.css

File renamed without changes.

‎index.html‎

Lines changed: 96 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,7 @@
1919
<link rel="stylesheet" href="css/menu.css">
2020
<link rel="stylesheet" href="css/hero.css">
2121
<link rel="stylesheet" href="css/about.css">
22-
<link rel="stylesheet" href="css/flexmenu.css">
23-
<link rel="stylesheet" href="css/testing.css">
22+
<link rel="stylesheet" href="css/project-menu.css">
2423
<!-- Scripts
2524
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
2625
<script src="js/jquery-3.1.0.min.js"></script>
@@ -35,116 +34,122 @@
3534
<!-- Main Menu –––––––––––––––––––––––––––––––––––––––––––– -->
3635
<nav class="menu-bar">
3736
<ul class="snip1168">
38-
<li class="current"><a href="#" data-hover="home">home</a></li>
39-
<li><a href="#about-page" data-hover="about">about</a></li>
40-
41-
<li><a href="#projects" data-hover="projects">projects</a></li>
42-
<li><a href="#gratitude" data-hover="blog">gratitude</a></li>
37+
<li><a class="goto" ref="#home" data-hover="home">home</a></li>
38+
<li><a class="goto" ref="#about-page" data-hover="about">about</a></li>
39+
<li><a class="goto" ref="#projects" data-hover="projects">projects</a></li>
40+
<li><a class="goto" ref="#gratitude" data-hover="gratitude">gratitude</a></li>
4341
</ul>
4442
</nav>
4543

4644
<!-- Landing page ––––––––––––––––––––––––––––––– -->
47-
<section class="hero">
45+
<section class="hero" id="home">
4846
<div>
4947
<img class="rotate" src="assets/flower.svg">
5048
<h1> meredith hoo </h1>
51-
<button class="button">enter</button>
49+
<button class="button goto" ref="#about-page">enter</button>
5250
</div>
5351
</section>
5452

5553
<!-- About ––––––––––––––––––––––––––––––––– -->
56-
<section id="about-page" class="flex-exper">
57-
<div class="side-nav">
58-
<div class="">background</div>
59-
<div class="">interests</div>
60-
<div class="">skills</div>
61-
<div class="">work experience</div>
62-
<div class="">philanthropies</div>
63-
<div class="">blog</div>
64-
<div class="">resume</div>
65-
<div class="">contact</div>
66-
</div>
67-
<div class="main">
68-
<div class="content">
69-
<h1 class="name">Meredith Hoo</h1>
70-
<p>
71-
I'm a software engineer based in New York, looking to solve complex problems wherever the code takes me.
72-
Over the last six years, I've become involved in the creative applications of machine learning,
73-
the software development of educational and socailly responsible expereinces. From my work in the classroom
74-
and in industry.
75-
</p>
76-
<p >
77-
Please know that this site is experiemental, and in progress
78-
</p>
79-
</div>
80-
</div>
81-
</section>
82-
83-
<!-- Projects Landscape Mode ––––––––––––––––––––––––––––––––– -->
84-
<section class="flex-parent landscape" id="projects">
85-
<div class="flex-grid-thirds">
86-
<div >
87-
<img src="assets/flower.svg">
88-
<p >apps</p>
89-
</div>
90-
<div >
91-
<img src="assets/flower.svg">
92-
<p >edutech</p>
54+
<section class="about" id="about-page" >
55+
<div class="menu-space"></div>
56+
<div class="flex-exper">
57+
<div class="side-nav">
58+
<div class="">background</div>
59+
<div class="">interests</div>
60+
<div class="">skills</div>
61+
<div class="">work experience</div>
62+
<div class="">philanthropies</div>
63+
<div class="">blog</div>
64+
<div class="">resume</div>
65+
<div class="">contact</div>
9366
</div>
94-
<div >
95-
<img src="assets/flower.svg">
96-
<p >writing</p>
97-
</div>
98-
</div>
99-
<div class="flex-grid-thirds">
100-
<div >
101-
<img src="assets/flower.svg">
102-
<p >art</p>
103-
</div>
104-
<div >
105-
<img src="assets/flower.svg">
106-
<p >podcast</p>
107-
</div>
108-
<div >
109-
<img src="assets/flower.svg">
110-
<p >blog</p>
67+
<div class="main">
68+
<div class="content">
69+
<h1 class="name">Meredith Hoo</h1>
70+
<p>
71+
I'm a software engineer based in New York, looking to solve complex problems wherever the code takes me.
72+
Over the last six years, I've become involved in the creative applications of machine learning,
73+
the software development of educational and socailly responsible expereinces. From my work in the classroom
74+
and in industry.
75+
</p>
76+
<p>
77+
Please know that this site is experiemental, and in progress
78+
</p>
79+
</div>
11180
</div>
11281
</div>
11382
</section>
11483

115-
<!-- Projects Portrait Mode ––––––––––––––––––––––––––––––––– -->
116-
<section class="flex-parent portrait" id="projects">
117-
<div class="flex-grid-halves">
118-
<div >
119-
<img src="assets/flower.svg">
120-
<p >apps</p>
84+
<!-- Projects ––––––––––––––––––––––––––––––––– -->
85+
<div id="projects">
86+
<section class="flex-parent landscape">
87+
<div class="flex-grid-thirds">
88+
<div>
89+
<img src="assets/flower.svg">
90+
<p >apps</p>
91+
</div>
92+
<div>
93+
<img src="assets/flower.svg">
94+
<p >edutech</p>
95+
</div>
96+
<div>
97+
<img src="assets/flower.svg">
98+
<p >writing</p>
99+
</div>
121100
</div>
122-
<div >
123-
<img src="assets/flower.svg">
124-
<p >edutech</p>
101+
<div class="flex-grid-thirds">
102+
<div>
103+
<img src="assets/flower.svg">
104+
<p >art</p>
105+
</div>
106+
<div >
107+
<img src="assets/flower.svg">
108+
<p >podcast</p>
109+
</div>
110+
<div>
111+
<img src="assets/flower.svg">
112+
<p >blog</p>
113+
</div>
125114
</div>
126-
</div>
127-
<div class="flex-grid-halves">
128-
<div >
129-
<img src="assets/flower.svg">
130-
<p >writing</p>
115+
</section>
116+
117+
<!-- Projects Portrait Mode ––––––––––––––––––––––––––––––––– -->
118+
<section class="flex-parent portrait" id="projects">
119+
<div class="flex-grid-halves">
120+
<div >
121+
<img src="assets/flower.svg">
122+
<p >apps</p>
123+
</div>
124+
<div >
125+
<img src="assets/flower.svg">
126+
<p >edutech</p>
127+
</div>
131128
</div>
132-
<div >
133-
<img src="assets/flower.svg">
134-
<p >art</p>
129+
<div class="flex-grid-halves">
130+
<div >
131+
<img src="assets/flower.svg">
132+
<p >writing</p>
133+
</div>
134+
<div >
135+
<img src="assets/flower.svg">
136+
<p >art</p>
137+
</div>
135138
</div>
136-
</div>
137-
<div class="flex-grid-halves">
138-
<div >
139-
<img src="assets/flower.svg">
140-
<p >podcast</p>
139+
<div class="flex-grid-halves">
140+
<div >
141+
<img src="assets/flower.svg">
142+
<p >podcast</p>
143+
</div>
144+
<div >
145+
<img src="assets/flower.svg">
146+
<p >blog</p>
147+
</div>
141148
</div>
142-
<div >
143-
<img src="assets/flower.svg">
144-
<p >blog</p>
145-
</div>
146-
</div>
147-
</section>
149+
</section>
150+
</div>
151+
<!-- Projects Portrait Mode ––––––––––––––––––––––––––––––––– -->
152+
<section id="gratitude"></section>
148153

149154
<!-- End Document ––––––––––––––––––––––––––––––– -->
150155
</body>

‎js/main.js‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,13 @@
11
$(document).ready(function() {
2-
$(".hero button").click(function() {
2+
$( ".snip1168 li" ).first().addClass('current');
3+
$(".goto").click(function() {
4+
let link = $(this).attr('ref');
35
$('html,body').animate({
4-
scrollTop: $("#about-page").offset().top},
6+
scrollTop: $(link).offset().top},
57
'slow');
68
});
9+
$(".snip1168 li").click(function() {
10+
$(".snip1168 li").removeClass('current');
11+
$(this).addClass('current');
12+
})
713
});

0 commit comments

Comments
 (0)