Skip to content

Commit 4f6ae12

Browse files
fundamentalfundamental
committed
Roadmap/Index Styling
1 parent fdcd849 commit 4f6ae12

File tree

6 files changed

+430
-104
lines changed

6 files changed

+430
-104
lines changed

‎bootstrap.min.css

+9
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎index.html

+29-13
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@
77
<title>ZynAddSubFX</title>
88
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
99
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
10+
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
11+
<link rel="stylesheet" type="text/css" href="lighter.css">
1012
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"
1113
type="text/javascript">
1214
</script>
@@ -17,21 +19,33 @@
1719
</head>
1820

1921
<body>
20-
<nav>
21-
<a href="/">About</a> |
22-
<a href="/download.html">Downloads</a> |
23-
<a href="/support.html">Support</a> |
24-
<a href="/roadmap.html">Roadmap</a> |
25-
<a href="/contribute.html">Contributing</a>
26-
</nav>
22+
<div class="wrapper">
23+
<nav class="navbar navbar-default" role="navigation">
24+
<div class="container">
25+
<div class="navbar-header">
26+
<a class="navbar-brand nav-link" href="About.html"></a>
27+
</div> <!-- /.navbar-header -->
28+
29+
<div class="collapse navbar-collapse navbar-ex1-collapse">
30+
<ul class="nav navbar-nav navbar-right">
31+
<li class="active"><a href="index.html">About</a></li>
32+
<li><a href="download.html">Download</a></li>
33+
<li><a href="support.html">Support</a></li>
34+
<li><a href="roadmap.html">Roadmap</a></li>
35+
<li><a href="contribute.html">Contribute</a></li>
36+
</ul>
37+
</div> <!-- /.navbar-collapse -->
38+
</div> <!-- /.container -->
39+
</nav> <!-- /.navbar -->
40+
2741
<center><div align="left" id="content">
2842

2943
<center>
30-
<div class="slider fade">
31-
<div><img src="images/screenshot07.png" alt="3" height="500"/></div>
32-
<div><img src="images/screenshot05.png" alt="1" height="500"/></div>
33-
<div><img src="images/screenshot06.png" alt="2" height="500"/></div>
34-
<div><img src="images/screenshot08.png" alt="3" height="500"/></div>
44+
<div class="slider images">
45+
<div><img src="images/screenshot07.png" alt="3" height="400"/></div>
46+
<div><img src="images/screenshot05.png" alt="1" height="400"/></div>
47+
<div><img src="images/screenshot06.png" alt="2" height="400"/></div>
48+
<div><img src="images/screenshot08.png" alt="3" height="400"/></div>
3549
</div>
3650
</center>
3751
<p>
@@ -121,8 +135,10 @@ <h2>Audio demos:</h2>
121135
</audio>
122136

123137
</div></center>
138+
139+
</div>
124140
<script>
125-
$('.fade').slick({
141+
$('.images').slick({
126142
slidesToShow: 2,
127143
dots: true,
128144
infinite: true,

‎lighter.css

+267
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,267 @@
1+
{
2+
margin: 0;
3+
}
4+
html, body {
5+
height: 100%;
6+
}
7+
.wrapper {
8+
min-height: 100%;
9+
height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */
10+
height: 100%;
11+
margin: 0 auto -69px; /* the bottom margin is the negative value of the footer's height */
12+
}
13+
body {
14+
background: #2C425C;
15+
position: relative;
16+
color: #379;
17+
}
18+
body, h1, h2, h3, h4, h5, h6 {
19+
font-family: helvetica, arial, sans-serif;
20+
}
21+
a {
22+
color: #00A99A;
23+
text-decoration: none;
24+
}
25+
a:hover, a:focus {
26+
color: #58B3EC;
27+
text-decoration: underline;
28+
}
29+
.btn {
30+
border-radius: 1px;
31+
}
32+
.btn-primary {
33+
color: #00c2b1;
34+
background-color: transparent;
35+
border-color: #00c2b1;
36+
border-width: 2px;
37+
}
38+
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary {
39+
color: #fff;
40+
background-color: #00c2b1;
41+
border-color: #00c2b1;
42+
border-width: 2px;
43+
}
44+
.container {
45+
max-width: 1211px; /*1140 default*/
46+
}
47+
.container-first {
48+
background: #26384D;
49+
margin-top: 76px;
50+
}
51+
.container-alternate {
52+
background: #26384D;
53+
}
54+
.navbar {
55+
background: #1F2D3D;
56+
padding: 0.8em 0;
57+
border-bottom: none;
58+
margin-bottom: 0px;
59+
}
60+
.navbar .navbar-brand {
61+
display: block;
62+
position: relative;
63+
float: left;
64+
height: 41px;
65+
font-size: 120%;
66+
background: url('zynlogo.png') no-repeat;
67+
font-weight: lighter;
68+
line-height: 180%;
69+
width: 187px;
70+
opacity: 1;
71+
background-size: 187px 41px;
72+
-webkit-transition: opacity .2s ease-in;
73+
-moz-transition: opacity .2s ease-in;
74+
-o-transition: opacity .2s ease-in;
75+
-ms-transition: opacity .2s ease-in;
76+
transition: opacity .2s ease-in;
77+
}
78+
.navbar ul.nav li.active {
79+
color: #00c2b1;
80+
}
81+
.navbar ul.nav li.active a{
82+
color: #00c2b1;
83+
background: #1F2D3D;
84+
}
85+
.navbar ul.nav li.active a:hover{
86+
color: #00c2b1;
87+
background: #1F2D3D;
88+
}
89+
.navbar ul.nav li a {
90+
color: #dbdbdb;
91+
padding-left: 0;
92+
padding-right: 0;
93+
margin: 0 10px;
94+
}
95+
.navbar ul.nav li a:hover {
96+
color: #00c2b1;
97+
}
98+
.navbar ul.nav li button {
99+
margin: 0.7em 0 0 1em;
100+
}
101+
.nav>li>a:hover, .nav>li>a:focus{
102+
background-color: #00c2b1;
103+
color: #fff;
104+
}
105+
.subhead {
106+
font-size: 2em;
107+
text-align: left;
108+
margin: 2em 0 0.5em;
109+
}
110+
#tour {
111+
margin: 1em 0 6em;
112+
}
113+
.carousel-fade .carousel-inner .item {
114+
opacity: 0;
115+
-webkit-transition-property: opacity;
116+
-moz-transition-property: opacity;
117+
-o-transition-property: opacity;
118+
transition-property: opacity;
119+
}
120+
.carousel-fade .carousel-inner .active {
121+
opacity: 1;
122+
}
123+
.carousel-fade .carousel-inner .active.left,
124+
.carousel-fade .carousel-inner .active.right {
125+
left: 0;
126+
opacity: 0;
127+
z-index: 1;
128+
}
129+
.carousel-fade .carousel-inner .next.left,
130+
.carousel-fade .carousel-inner .prev.right {
131+
opacity: 1;
132+
}
133+
.carousel-fade .carousel-control {
134+
z-index: 2;
135+
}
136+
.carousel-inner img {
137+
height: 100%;
138+
width: 100%;
139+
}
140+
.carousel-indicators {
141+
bottom:-65px;
142+
}
143+
.carousel-caption {
144+
margin-bottom: 5px;
145+
}
146+
147+
.carousel-indicators li {
148+
border-color:#999;
149+
background-color:#ccc;
150+
}
151+
.faqs {
152+
margin-bottom: 3em;
153+
}
154+
.faqs p {
155+
line-height: 1.5em;
156+
margin: 1.2em -2px;
157+
}
158+
.about p {
159+
line-height: 1.5em;
160+
margin: 1em 0;
161+
}
162+
.about p:last-child {
163+
margin-bottom: 4em;
164+
}
165+
footer {
166+
background: #1F2D3D;
167+
color: #dbdbdb;
168+
padding: 1.5em 0 0.8em;
169+
margin: 0 auto;
170+
}
171+
footer, .push {
172+
height: 69px; /* .push must be the same height as .footer */
173+
}
174+
ul.list-group li.list-group-item{
175+
background: #26384D;
176+
margin-bottom: 5px;
177+
border-radius: 0px;
178+
border: 0px;
179+
}
180+
ul.list-group{
181+
margin: 1em 0 4em;
182+
}
183+
pre {
184+
display: block;
185+
padding: 9.5px;
186+
margin: 0 0 10px;
187+
font-size: 13px;
188+
line-height: 1.428571429;
189+
color: #333;
190+
word-break: break-all;
191+
word-wrap: break-word;
192+
background-color: #5092BB;
193+
border: 1px solid #5092BB;
194+
border-radius: 2px;
195+
}
196+
197+
/* ------------ News -------------*/
198+
.fixed {
199+
position: fixed;
200+
}
201+
202+
/* sidebar */
203+
.bs-docs-sidebar {
204+
padding-left: 20px;
205+
margin-top: 20px;
206+
margin-bottom: 20px;
207+
}
208+
209+
/* all links */
210+
.bs-docs-sidebar .nav>li>a {
211+
padding: 4px 20px;
212+
font-size: 13px;
213+
font-weight: 400;
214+
}
215+
216+
/* nested links */
217+
.bs-docs-sidebar .nav .nav>li>a {
218+
padding-top: 1px;
219+
padding-bottom: 1px;
220+
padding-left: 30px;
221+
font-size: 12px;
222+
}
223+
224+
.bs-docs-sidebar .nav>.active>a {
225+
color: #00c2b1;
226+
}
227+
.bs-docs-sidebar .nav>.active>a:hover {
228+
color: #fff;
229+
}
230+
/* ------------ END News -------------*/
231+
232+
audio {
233+
width: 280px;
234+
}
235+
@media screen and (max-width: 768px) {
236+
.navbar ul.nav li {
237+
text-align: center;
238+
}
239+
.navbar ul.nav li button {
240+
margin: 1em 0;
241+
}
242+
}
243+
@media screen and (max-width: 480px) {
244+
body {
245+
font-size: 12px;
246+
}
247+
footer .pull-left {
248+
text-align: center;
249+
}
250+
251+
footer .pull-right {
252+
display: block;
253+
text-align: center;
254+
}
255+
.faqs p {
256+
line-height: 1.5em;
257+
margin: 1.2em 0;
258+
align-items: center;
259+
}
260+
.bs-docs-sidebar {
261+
display:none
262+
}
263+
}
264+
265+
.navbar {
266+
border: 0;
267+
}

0 commit comments

Comments
 (0)