Skip to content

Commit 326d4c3

Browse files
amyleewamyleew
committed
mobile design
1 parent 2939726 commit 326d4c3

2 files changed

Lines changed: 132 additions & 54 deletions

File tree

‎index.html‎

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -23,11 +23,11 @@
2323
</header>
2424

2525
<map class='contain clearfix'>
26-
<div class='overlay'>
26+
<div class='overlay clearfix'>
2727

2828
<div class='limiter clearfix'>
2929

30-
<div class='col6 margin3 pad4y clearfix'>
30+
<div class='col7 margin3 pad4y clearfix'>
3131
<div class='pad2y title '>Modern C++ routing engine for shortest paths in road networks.</div>
3232
<div class='center'><a href='#'><input type='button' class='button' value='VIEW DEMO >>' name='' /></a></div>
3333
</div>
@@ -41,7 +41,7 @@
4141
<section class='pad2y limiter'>
4242

4343
<!-- headers -->
44-
<div class='col12 clearfix'>
44+
<div class='col12 clearfix hide-mobile '>
4545
<div class='col2 margin1 center'>
4646
<div class='section-icons section1-icon space-bottom2'></div>
4747
</div>
@@ -56,25 +56,29 @@
5656

5757
<!-- content -->
5858
<div class='col12 clearfix content'>
59-
60-
<div class='col2 margin1 center'>Flexible import of </br> OpenStreetMap data.</div>
61-
<div class='col2 margin1 center'>Handles continental sized </br> networks within miliseconds.</div>
62-
<div class='col2 margin1 center'>Supports car, foot, walk modes; easily customized through profiles.</div>
59+
<div class='subhead2 show-mobile'>Features.</div>
60+
61+
<div class='col2 margin1 center'>Flexible import of </br> OpenStreetMap data.</div>
62+
<div class='col2 margin1 center'>Handles continental sized </br> networks within miliseconds.</div>
63+
<div class='col2 margin1 center'>Supports car, foot, walk modes; easily customized through profiles.</div>
64+
6365
<div class='col2 margin1 social'>
64-
<div class='col12 clearfix'>
65-
<div class='col2'>
66+
<div class='col12 clearfix '>
67+
<div class='subhead show-mobile'>Get in Touch.</div>
68+
69+
<div class='col2 hide-mobile '>
6670
<div class='social-icons social1-icon'></div>
6771
</div>
6872
<div class='col9 margin1'><a href='irc://irc.oftc.net/osrm'>IRC Channel</a></div>
6973
</div>
7074
<div class='col12 clearfix'>
71-
<div class='col2'>
75+
<div class='col2 hide-mobile '>
7276
<div class='social-icons social2-icon'></div>
7377
</div>
7478
<div class='col9 margin1'><a href='https://lists.openstreetmap.org/listinfo/osrm-talk'>Mailing List</a></div>
7579
</div>
7680
<div class='col12 clearfix'>
77-
<div class='col2'>
81+
<div class='col2 hide-mobile '>
7882
<div class='social-icons social3-icon'></div>
7983
</div>
8084
<div class='col9 margin1'><a href='https://twitter.com/ProjectOSRM'>Twitter</a></div>

‎site.css‎

Lines changed: 117 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -74,30 +74,29 @@ body {
7474
}
7575

7676
header {
77-
height: 15vh;
7877
background: white;
7978
min-height: 160px;
8079
vertical-align: middle;
8180
}
8281

8382
map {
84-
height: 60vh;
8583
background-image: url('images/route_map.png');
8684
display: block;
8785
background-position: center center;
86+
min-height: 420px;
8887
}
8988

9089
section {
91-
height: 20vh;
90+
min-height: 150px;
9291
}
9392

9493
footer {
95-
height: 5vh;
9694
background-color: rgba(173, 182, 196, 1);
9795
color: rgba(255, 255, 255, 0.8);
9896
font-family: 'Open Sans Condensed Light';
9997
font-size: 12px;
10098
letter-spacing: .5px;
99+
min-height: 40px;
101100
}
102101

103102
.contain {
@@ -588,43 +587,118 @@ a.fill-dark {
588587
height:44px;
589588
}
590589

590+
.hide-mobile { display:block!important; }
591+
.show-mobile { display:none; }
592+
593+
594+
595+
/* Mobile Layout
596+
------------------------------------------------------- */
597+
591598
@media only screen and (max-width:640px) {
592-
.pull-left0,
593-
.pull-left1,
594-
.pull-left2,
595-
.pull-left3,
596-
.pull-left4,
597-
.pull-left5,
598-
.pull-left6,
599-
.pull-left7,
600-
.pull-left8,
601-
.pull-left9,
602-
.pull-left10,
603-
.pull-left11,
604-
.pull-left12 { left:0; }
605-
606-
.pull-right0,
607-
.pull-right1,
608-
.pull-right2,
609-
.pull-right3,
610-
.pull-right4,
611-
.pull-right5,
612-
.pull-right6,
613-
.pull-right7,
614-
.pull-right8,
615-
.pull-right9,
616-
.pull-right10,
617-
.pull-right11,
618-
.pull-right12 { right:0; }
619-
.mobile-relative { position:relative; }
620-
.device { margin:0; }
621-
622-
.top40 { top:20px; }
623-
.top80 { top:40px; }
624-
.bottom40 { bottom:20px; }
625-
.bottom80 { bottom:40px; }
626-
627-
.device {
628-
min-height:360px;
629-
}
630-
}
599+
600+
.hide-mobile { display:none!important; }
601+
.show-mobile { display:block!important;; }
602+
603+
.title {
604+
font-size: 28px;
605+
}
606+
607+
.subhead {
608+
font-family: 'Open Sans Condensed Bold';
609+
font-size: 24px;
610+
color: rgba(87, 43, 122, 0.8);
611+
padding-top: 10px;
612+
}
613+
614+
.subhead2 {
615+
font-family: 'Open Sans Condensed Bold';
616+
font-size: 24px;
617+
color: rgba(20, 82, 207, 0.6);
618+
}
619+
620+
.margin1 {
621+
margin-left: 0;
622+
}
623+
624+
.content {
625+
font-size: 14px;
626+
}
627+
628+
.device {
629+
min-height:360px;
630+
}
631+
632+
map {
633+
min-height: 275px;
634+
}
635+
636+
a:link { -webkit-tap-highlight-color:rgba(0,0,0,0); }
637+
label .inline a { font-weight:normal; }
638+
639+
.row1 { height:auto; min-height: 40px;}
640+
.row2 { height:auto; min-height: 80px;}
641+
.row3 { height:auto; min-height: 120px;}
642+
.row4 { height:auto; min-height: 160px;}
643+
.row5 { height:auto; min-height: 200px;}
644+
.row6 { height:auto; min-height: 240px;}
645+
.row7 { height:auto; min-height: 280px;}
646+
.row8 { height:auto; min-height: 320px;}
647+
.row9 { height:auto; min-height: 360px;}
648+
.row10 { height:auto; min-height: 400px;}
649+
.row11 { height:auto; min-height: 440px;}
650+
.row12 { height:auto; min-height: 480px;}
651+
.row13 { height:auto; min-height: 520px;}
652+
.row14 { height:auto; min-height: 560px;}
653+
.row15 { height:auto; min-height: 600px;}
654+
.row16 { height:auto; min-height: 640px;}
655+
656+
.col1,
657+
.col2,
658+
.col3,
659+
.col4,
660+
.col5,
661+
.col6,
662+
.col7,
663+
.col8,
664+
.col9,
665+
.col10,
666+
.col11,
667+
.col12,
668+
.fifths > * { width:100%; max-width:100%; }
669+
.margin0,
670+
.margin1 { text-align: left; }
671+
.margin2,
672+
.margin3,
673+
.margin4,
674+
.margin5,
675+
.margin6,
676+
.margin7,
677+
.margin8,
678+
.margin9,
679+
.margin10,
680+
.margin11,
681+
.margin12 { margin-left:0; }
682+
.pad8 { padding:40px; }
683+
.pad8y { padding-top:40px; padding-bottom:40px;}
684+
.pad8x { padding-left:40px; padding-right:40px;}
685+
.pad4y { padding-top:20px; padding-bottom:20px; }
686+
.pad4 { padding:20px; }
687+
.pad4x { padding-left:20px; padding-right:20px; }
688+
.pad2 { padding:10px; }
689+
.pad2y { padding-top:10px; padding-bottom:10px; }
690+
.pad2x { padding-right:10px; padding-left:10px; }
691+
.title { margin-bottom:10px; }
692+
.space-bottom2, .space-bottom { margin-bottom:10px; }
693+
.space-bottom4 { margin-bottom:20px; }
694+
.space-bottom8 { margin-bottom:40px;}
695+
.space-top2 { margin-top:10px;}
696+
.space-top4 { margin-top:20px;}
697+
.space-top8 { margin-top:40px;}
698+
.hide-mobile { display:none!important; }
699+
.show-mobile { display:block!important; }
700+
.show-mobile.inline { display:inline-block!important; }
701+
702+
}
703+
704+

0 commit comments

Comments
 (0)