Skip to content

Commit 0c84c3c

Browse files
zesamerizesameri
committed
fixed responsive menu flexgrid, still working on about section
1 parent 7e756c6 commit 0c84c3c

File tree

7 files changed

+161
-151
lines changed

7 files changed

+161
-151
lines changed

‎css/about.css‎

Lines changed: 29 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,6 @@
22
For About Me Styling
33
============================================================ */
44

5-
6-
.about {}
7-
8-
95
.me {
106
background-color: aliceblue;
117
color:
@@ -16,3 +12,32 @@
1612
background-color: aliceblue;
1713
color: midnightblue;
1814
}
15+
16+
17+
.testing {
18+
overflow:hidden;
19+
background-color: aquamarine;
20+
}
21+
22+
.testing div {
23+
height: 100%;
24+
}
25+
.one {
26+
background-color: cornflowerBlue;
27+
float:left;
28+
width:62vw;
29+
height: 100%;
30+
}
31+
.two {
32+
background-color: aliceblue;
33+
color: midnightblue;
34+
height: 100%;
35+
text-align: left;
36+
}
37+
38+
@media screen and (max-width: 400px) {
39+
.one {
40+
float: none;
41+
margin-right:0;
42+
width:auto;
43+
}

‎css/flexmenu.css‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
.flex-parent {
2+
display: flex;
3+
flex-direction: column;
4+
}
5+
6+
.flex-grid-thirds {
7+
display: flex;
8+
justify-content: space-between;
9+
flex-direction: row;
10+
flex: 1;
11+
padding: 20px;
12+
align-items: center;
13+
}
14+
.flex-grid-halves {
15+
display: flex;
16+
justify-content: space-between;
17+
flex-direction: row;
18+
flex: 1;
19+
padding: 20px;
20+
align-items: center;
21+
}
22+
23+
@media screen and (orientation:portrait) {
24+
/* Portrait styles */
25+
.portrait {
26+
display: flex;
27+
}
28+
.landscape {
29+
display: none;
30+
}
31+
}
32+
/* Landscape */
33+
@media screen and (orientation:landscape) {
34+
/* Landscape styles */
35+
.portrait {
36+
display: none;
37+
}
38+
.landscape {
39+
display: flex;
40+
}
41+
}
42+
43+
.pure-img-responsive {
44+
max-width: 50%;
45+
height: auto;
46+
margin-left: auto;
47+
margin-right: auto;
48+
border-radius: 50%;
49+
}
50+
51+
.portfolio-nav {}
52+
.portfolio-nav-label {
53+
font-size: medium;
54+
}

‎css/main.css‎

Lines changed: 3 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -27,18 +27,7 @@ time, mark, audio, video {
2727
/*font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;*/
2828
}
2929

30-
html {
31-
overflow: hidden;
32-
position: relative;
33-
}
34-
body {
35-
position: absolute;
36-
top: 0;
37-
bottom: 0;
38-
left: 0;
39-
right: -17px; /* Increase/Decrease this value for cross-browser compatibility */
40-
overflow-y: scroll;
41-
}
30+
4231

4332

4433
html, body {
@@ -49,7 +38,6 @@ html, body {
4938
color: FloralWhite;
5039
background-color: #1A1110;
5140
text-align: center;
52-
display: inline-block;
5341

5442
}
5543

@@ -103,46 +91,17 @@ section {
10391
transform: rotate(180deg);
10492
}
10593

106-
@media (max-width: 500px) {
94+
@media screen and (orientation:portrait) {
10795
.logo {
10896
-webkit-animation:spin 6s linear infinite;
10997
-moz-animation:spin 6s linear infinite;
11098
animation:spin 6s linear infinite;
11199
}
112100
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
113-
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
101+
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
114102
}
115103

116104
#wrapper {
117105
position: relative;
118106
top:25vh;
119107
}
120-
121-
.testing {
122-
overflow:hidden;
123-
background-color: aquamarine;
124-
}
125-
126-
.testing div {
127-
height: 100%;
128-
}
129-
.one {
130-
background-color: cornflowerBlue;
131-
float:left;
132-
width:62vw;
133-
height: 100%;
134-
}
135-
.two {
136-
background-color: aliceblue;
137-
color: midnightblue;
138-
height: 100%;
139-
text-align: left;
140-
}
141-
142-
@media screen and (max-width: 400px) {
143-
.one {
144-
float: none;
145-
margin-right:0;
146-
width:auto;
147-
}
148-
}

‎css/menu.css‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,6 @@
88
width: 100%;
99
background: rgba(139,0,0, 0.2);
1010
padding: 0.5em 0;
11-
text-transform: lowercase;
12-
text-align: center;
1311
font-weight: 500;
1412
}
1513

‎css/portfolio.css‎

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

‎index.html‎

Lines changed: 68 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
<!-- FONT
1818
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
1919
<!--link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css"-->
20-
<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet">
20+
<!--link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet"-->
2121

2222
<!-- CSS
2323
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
@@ -32,6 +32,7 @@
3232
<link rel="stylesheet" href="css/menu.css">
3333
<link rel="stylesheet" href="css/about.css">
3434
<link rel="stylesheet" href="css/portfolio.css">
35+
<link rel="stylesheet" href="css/flexmenu.css">
3536

3637
<!-- Scripts
3738
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
@@ -46,12 +47,12 @@
4647
<!-- Main Menu –––––––––––––––––––––––––––––––––––––––––––– -->
4748
<nav class="menu-bar">
4849
<ul class="snip1168">
49-
<li class="current"><a href="#" data-hover="Home">Home</a></li>
50-
<li><a href="#about-page" data-hover="About Us">About</a></li>
51-
<li><a href="assets/Resume.pdf" data-hover="Resume">Resume</a></li>
52-
<li><a href="#blog" data-hover="Blog">Blog</a></li>
53-
<li><a href="#projects" data-hover="Projects">Projects</a></li>
54-
<li><a href="#" data-hover="Contact">Contact</a></li>
50+
<li class="current"><a href="#" data-hover="Home">home</a></li>
51+
<li><a href="#about-page" data-hover="About Us">about</a></li>
52+
<li><a href="assets/Resume.pdf" data-hover="Resume">resume</a></li>
53+
<li><a href="#blog" data-hover="Blog">blog</a></li>
54+
<li><a href="#projects" data-hover="Projects">projects</a></li>
55+
<li><a href="#" data-hover="Contact">contact</a></li>
5556
</ul>
5657
</nav>
5758

@@ -88,53 +89,85 @@ <h1 id="about_title" class="title"> Meredith Hoo </h1>
8889
</section-->
8990

9091
<section id="about-page"class="testing">
91-
<div class="testing">
92-
<div class="one"></div>
93-
<div class="two">
94-
<h1 id="about_title" class="title"> Meredith Hoo </h1>
95-
<p class="">
96-
I'm a software engineer based in New York, looking to solve complex problems wherever the code takes me.
97-
Over the last six years, I've become involved in the creative applications of machine learning,
98-
the software development of educational and socailly responsible expereinces. From my work in the classroom
99-
and in industry.
100-
</p>
101-
<p class="">
102-
Please know that this site is experiemental, and in progress
103-
</div>
92+
<div class="one"></div>
93+
<div class="two">
94+
<h1 id="about_title" class="title"> Meredith Hoo </h1>
95+
<p class="about-text">
96+
I'm a software engineer based in New York, looking to solve complex problems wherever the code takes me.
97+
Over the last six years, I've become involved in the creative applications of machine learning,
98+
the software development of educational and socailly responsible expereinces. From my work in the classroom
99+
and in industry.
100+
</p>
101+
<p class="text">
102+
Please know that this site is experiemental, and in progress
104103
</div>
105104
</section>
106105

107-
108106
<!-- Projects ––––––––––––––––––––––––––––––––– -->
109-
<section id="projects"class="portfolio-nav">
110-
<nav class="pure-g">
111-
<div class="pure-u-1-2 pure-u-lg-1-3">
112-
<img class="pure-img-responsive" src="assets/print1.jpg"/>
107+
<section class="flex-parent landscape" id="projects">
108+
<div class="flex-grid-thirds">
109+
<div class="col">
110+
<img class="pure-img-responsive" src="assets/flower.svg">
113111
<p class="portfolio-nav-label">apps</p>
114112
</div>
115-
<div class="pure-u-1-2 pure-u-lg-1-3">
116-
<img class="pure-img-responsive" src="assets/print2.png"/>
113+
<div class="col">
114+
<img class="pure-img-responsive" src="assets/flower.svg">
117115
<p class="portfolio-nav-label">edutech</p>
118116
</div>
119-
<div class="pure-u-1-2 pure-u-lg-1-3">
120-
<img class="pure-img-responsive" src="assets/print3.png"/>
117+
<div class="col">
118+
<img class="pure-img-responsive" src="assets/flower.svg">
121119
<p class="portfolio-nav-label">writing</p>
122120
</div>
123-
<div class="pure-u-1-2 pure-u-lg-1-3">
124-
<img class="pure-img-responsive" src="assets/print4.jpg"/>
121+
</div>
122+
<div class="flex-grid-thirds">
123+
<div class="col">
124+
<img class="pure-img-responsive" src="assets/flower.svg">
125125
<p class="portfolio-nav-label">art</p>
126126
</div>
127-
<div class="pure-u-1-2 pure-u-lg-1-3">
128-
<img class="pure-img-responsive" src="assets/print7.jpg"/>
127+
<div class="col">
128+
<img class="pure-img-responsive" src="assets/flower.svg">
129129
<p class="portfolio-nav-label">podcast</p>
130130
</div>
131-
<div class="pure-u-1-2 pure-u-lg-1-3">
132-
<img class="pure-img-responsive" src="assets/print8.png"/>
131+
<div class="col">
132+
<img class="pure-img-responsive" src="assets/flower.svg">
133133
<p class="portfolio-nav-label">blog</p>
134134
</div>
135135
</div>
136136
</section>
137137

138+
<!-- Projects ––––––––––––––––––––––––––––––––– -->
139+
<section class="flex-parent portrait" id="projects">
140+
<div class="flex-grid-halves">
141+
<div class="col">
142+
<img class="pure-img-responsive" src="assets/flower.svg">
143+
<p class="portfolio-nav-label">apps</p>
144+
</div>
145+
<div class="col">
146+
<img class="pure-img-responsive" src="assets/flower.svg">
147+
<p class="portfolio-nav-label">edutech</p>
148+
</div>
149+
</div>
150+
<div class="flex-grid-halves">
151+
<div class="col">
152+
<img class="pure-img-responsive" src="assets/flower.svg">
153+
<p class="portfolio-nav-label">writing</p>
154+
</div>
155+
<div class="col">
156+
<img class="pure-img-responsive" src="assets/flower.svg">
157+
<p class="portfolio-nav-label">art</p>
158+
</div>
159+
</div>
160+
<div class="flex-grid-halves">
161+
<div class="col">
162+
<img class="pure-img-responsive" src="assets/flower.svg">
163+
<p class="portfolio-nav-label">podcast</p>
164+
</div>
165+
<div class="col">
166+
<img class="pure-img-responsive" src="assets/flower.svg">
167+
<p class="portfolio-nav-label">blog</p>
168+
</div>
169+
</div>
170+
</section>
138171

139172
<!-- End Document ––––––––––––––––––––––––––––––– -->
140173
</body>

0 commit comments

Comments
 (0)