Skip to content

Commit b914fe2

Browse files
author
Olivier Giulieri
committed
Responsive navigation bar.
…still needs work.
1 parent 62b3d62 commit b914fe2

16 files changed

Lines changed: 255 additions & 62 deletions

‎demo/contact.html‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
<html xmlns="http://www.w3.org/1999/xhtml" >
22
<head>
3-
<title>evolutility.js :: demo</title>
43
<meta charset="utf-8">
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
5+
<meta name="viewport" content="width=device-width,initial-scale=1">
56

67
<link href="../dist/css/demo.css" rel="stylesheet" />
78
<link href="../dist/css/evolutility.css" rel="stylesheet" />
@@ -13,6 +14,7 @@
1314
<script src="../js/demo.js" type="text/javascript"></script>
1415
<script src="../js/ui-models/apps/contacts.js" type="text/javascript"></script>
1516
<script src="../js/ui-models/apps/contacts.data.js" type="text/javascript"></script>
17+
<title>demo: Contacts</title>
1618
</head>
1719

1820
<body>
@@ -21,7 +23,7 @@
2123
<div class="evo-logo"><a href="../index.html"><span>evol</span>utility<span>.js</span></a></div>
2224
<ul class="evo-head-links">
2325
<li><a href="index.html" class="sel">demo</a></li>
24-
<li><a href="../doc/index.html">documentation</a></li>
26+
<li><a href="../doc/index.html">doc</a></li>
2527
<li><a href="https://github.com/evoluteur/evolutility" target="_new">GitHub</a></li>
2628
</ul>
2729
<ul class="evo-head-links2">

‎demo/index.html‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
<html xmlns="http://www.w3.org/1999/xhtml" >
22
<head>
3-
<title>demos</title>
43
<meta charset="utf-8">
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
5+
<meta name="viewport" content="width=device-width,initial-scale=1">
56

67
<link href="../dist/css/demo.css" rel="stylesheet" />
78
<link id="bwCSS" href="../dist/css/vendors.min.css" rel="stylesheet" />
9+
<title>demos</title>
810
</head>
911

1012
<body>
@@ -13,7 +15,7 @@
1315
<div class="evo-logo"><a href="../index.html"><span>evol</span>utility<span>.js</span></a></div>
1416
<ul class="evo-head-links">
1517
<li><a href="index.html" class="sel">demo</a></li>
16-
<li><a href="../doc/index.html">documentation</a></li>
18+
<li><a href="../doc/index.html">doc</a></li>
1719
<li><a href="https://github.com/evoluteur/evolutility" target="_new">GitHub</a></li>
1820
</ul>
1921
<ul class="evo-head-links2">

‎demo/test.html‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
<html xmlns="http://www.w3.org/1999/xhtml" >
22
<head>
3-
<title>evolutility.js :: Test</title>
43
<meta charset="utf-8">
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
5+
<meta name="viewport" content="width=device-width,initial-scale=1">
56

67
<link href="../dist/css/demo.css" rel="stylesheet" />
78
<link href="../dist/css/evolutility.css" rel="stylesheet" />
@@ -11,7 +12,9 @@
1112
<script src="../dist/evolutility.js" type="text/javascript"></script>
1213

1314
<script src="../js/demo.js" type="text/javascript"></script>
14-
<script src="../js/ui-models/apps/test.js" type="text/javascript"></script>
15+
<script src="../js/ui-models/apps/test.js" type="text/javascript"></script>
16+
17+
<title>evolutility.js :: Test</title>
1518
</head>
1619

1720
<body>
@@ -20,7 +23,7 @@
2023
<div class="evo-logo"><a href="../index.html"><span>evol</span>utility<span>.js</span></a></div>
2124
<ul class="evo-head-links">
2225
<li><a href="index.html" class="sel">demo</a></li>
23-
<li><a href="../doc/index.html">documentation</a></li>
26+
<li><a href="../doc/index.html">doc</a></li>
2427
<li><a href="https://github.com/evoluteur/evolutility" target="_new">GitHub</a></li>
2528
</ul>
2629
<ul class="evo-head-links2">

‎demo/todo.html‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
<html xmlns="http://www.w3.org/1999/xhtml" >
22
<head>
3-
<title>evolutility.js :: ToDo</title>
43
<meta charset="utf-8">
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
5+
<meta name="viewport" content="width=device-width,initial-scale=1">
56

67
<link href="../dist/css/demo.css" rel="stylesheet" />
78
<link href="../dist/css/evolutility.css" rel="stylesheet" />
@@ -13,6 +14,7 @@
1314
<script src="../js/demo.js" type="text/javascript"></script>
1415
<script src="../js/ui-models/apps/todo.js" type="text/javascript"></script>
1516
<script src="../js/ui-models/apps/todo.data.js" type="text/javascript"></script>
17+
<title>demo: ToDo</title>
1618
</head>
1719

1820
<body>
@@ -21,7 +23,7 @@
2123
<div class="evo-logo"><a href="../index.html"><span>evol</span>utility<span>.js</span></a></div>
2224
<ul class="evo-head-links">
2325
<li><a href="index.html" class="sel">demo</a></li>
24-
<li><a href="../doc/index.html">documentation</a></li>
26+
<li><a href="../doc/index.html">doc</a></li>
2527
<li><a href="https://github.com/evoluteur/evolutility" target="_new">GitHub</a></li>
2628
</ul>
2729
<ul class="evo-head-links2">

‎demo/winecellar.html‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
<html xmlns="http://www.w3.org/1999/xhtml" >
22
<head>
3-
<title>evolutility.js :: Wine Cellar</title>
43
<meta charset="utf-8">
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
5+
<meta name="viewport" content="width=device-width,initial-scale=1">
56

67
<link href="../dist/css/demo.css" rel="stylesheet" />
78
<link href="../dist/css/evolutility.css" rel="stylesheet" />
@@ -13,6 +14,7 @@
1314
<script src="../js/demo.js" type="text/javascript"></script>
1415
<script src="../js/ui-models/apps/winecellar.js" type="text/javascript"></script>
1516
<script src="../js/ui-models/apps/winecellar.data.js" type="text/javascript"></script>
17+
<title>demo: Wine Cellar</title>
1618
</head>
1719

1820
<body>
@@ -21,7 +23,7 @@
2123
<div class="evo-logo"><a href="../index.html"><span>evol</span>utility<span>.js</span></a></div>
2224
<ul class="evo-head-links">
2325
<li><a href="index.html" class="sel">demo</a></li>
24-
<li><a href="../doc/index.html">documentation</a></li>
26+
<li><a href="../doc/index.html">doc</a></li>
2527
<li><a href="https://github.com/evoluteur/evolutility" target="_new">GitHub</a></li>
2628
</ul>
2729
<ul class="evo-head-links2">

‎dist/css/demo.css‎

Lines changed: 56 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -29,12 +29,11 @@
2929
color: #ed991a;
3030
}
3131
.evo-header {
32-
overflow: hidden;
33-
background-color: #1f497d;
3432
position: fixed;
35-
border-bottom: #366092 solid 1px;
3633
top: 0;
3734
left: 0;
35+
background-color: #1f497d;
36+
border-bottom: #366092 solid 1px;
3837
width: 100%;
3938
padding: 2px 5px 2px 10px;
4039
z-index: 3000;
@@ -46,6 +45,12 @@
4645
.evo-header a :hover {
4746
color: #c6d9f0;
4847
}
48+
@media only screen and (min-width: 900px) {
49+
.evo-header {
50+
width: 182px;
51+
height: 100%;
52+
}
53+
}
4954
.evo-head-links,
5055
.evo-head-links2 {
5156
display: block;
@@ -71,26 +76,63 @@
7176
.evo-head-links {
7277
font-size: 1.5em;
7378
margin-left: 30px;
79+
margin-top: 5px;
80+
}
81+
.evo-head-links > li:nth-child(3) {
82+
margin-left: 70px;
83+
}
84+
@media only screen and (min-width: 900px) {
85+
.evo-head-links {
86+
position: absolute;
87+
top: 64px;
88+
left: -58px;
89+
}
90+
.evo-head-links > li {
91+
display: block;
92+
}
93+
.evo-head-links > li:nth-child(3) {
94+
margin-left: 0;
95+
margin-top: 83px;
96+
}
97+
}
98+
@media only screen and (min-width: 900px) {
99+
.evo-head-links2 {
100+
position: absolute;
101+
padding: 0;
102+
top: 71px;
103+
left: 82px;
104+
}
74105
}
75106
.evo-title,
76107
.evo-title2 {
108+
background-color: #1f497d;
77109
position: relative;
78110
}
79111
.evo-title > h1,
80112
.evo-title2 > h1 {
81113
margin-left: 20px;
82-
color: white !important;
114+
color: white;
83115
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
84116
font-weight: 500;
85117
}
118+
@media only screen and (min-width: 900px) {
119+
.evo-title,
120+
.evo-title2 {
121+
top: 0 !important;
122+
margin-left: 182px;
123+
background-color: white;
124+
}
125+
.evo-title > h1,
126+
.evo-title2 > h1 {
127+
color: #0d0d0d;
128+
}
129+
}
86130
.evo-title {
87-
background-color: #1f497d;
88131
top: 50px;
89132
padding: 20px 10px;
90133
min-height: 120px;
91134
}
92135
.evo-title2 {
93-
background-color: #1f497d;
94136
top: 62px;
95137
padding: 5px 10px;
96138
}
@@ -103,6 +145,14 @@
103145
.evo-content3 {
104146
padding: 96px 30px 30px;
105147
}
148+
@media only screen and (min-width: 900px) {
149+
.evo-content,
150+
.evo-content2,
151+
.evo-content3 {
152+
margin-left: 182px;
153+
padding-top: 0;
154+
}
155+
}
106156
.footer {
107157
text-align: center;
108158
font-size: smaller;

0 commit comments

Comments
 (0)