Skip to content
Snippets Groups Projects
Commit c4702805 authored by Job van der Voort's avatar Job van der Voort
Browse files

expandable menu on mobile

parent b48930f6
No related branches found
No related tags found
1 merge request!241Mobile nav
Hide whitespace changes
Inline Side-by-side
source/_layouts/default.html
+ 9
− 3
View file @ c4702805
@@ -38,12 +38,18 @@
 
</script>
 
</head>
</head>
<body>
 
<div class="navbar navbar-fixed-top navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-gl-nav">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
{% if page.url == '/index.html' %}
<a class="navbar-brand animated"><img src="/images/wordmark_inverted_small.png" class="nav-logo"></a>
{% else %}
@@ -51,7 +57,7 @@
{% endif %}
</div>
 
<div class="collapse navbar-collapse">
<div class="collapse navbar-collapse" id="main-gl-nav">
<ul class="nav pull-right animated navbar-nav">
<li><a href="/products">Products</a></li>
<li><a href="/services">Services</a></li>
@@ -66,7 +72,7 @@
 
{% unless page.suppress_header %}
<div id="header">
<div class="container">
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-12">
<h1>{{ page.title }}</h1>
source/_layouts/post.html
+ 7
− 1
View file @ c4702805
@@ -44,10 +44,16 @@
<div class="navbar navbar-fixed-top navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-gl-nav">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand animated" href="/"><img src="/images/wordmark_inverted_small.png" class="nav-logo"></a>
</div>
 
<div class="collapse navbar-collapse">
<div class="collapse navbar-collapse" id="main-gl-nav">
<ul class="nav pull-right animated navbar-nav">
<li><a href="/products">Products</a></li>
<li><a href="/services">Services</a></li>
source/index.html
+ 2
− 2
View file @ c4702805
@@ -9,7 +9,7 @@ suppress_header: true
 
<div class="col-sm-12 text-center">
<h1 class="landing-header">Open source software to collaborate on code</h1>
<div class="col-sm-12 col-md-12 text-left">
<p class="text-center">
GitLab offers git repository management, code reviews, issue tracking, activity feeds and wikis.
@@ -27,7 +27,7 @@ suppress_header: true
<img src="/images/main_screenshot.png" class="img-responsive main-screenshot">
</div>
 
</div>
</div>
</div>
source/stylesheets/base.css
+ 68
− 21
View file @ c4702805
@@ -52,10 +52,10 @@ img {
margin-top: -5px;
}
 
iframe[name='google_conversion_frame'] {
iframe[name='google_conversion_frame'] {
height: 0 !important;
width: 0 !important;
line-height: 0 !important;
width: 0 !important;
line-height: 0 !important;
font-size: 0 !important;
margin-top: -13px;
float: left;
@@ -64,7 +64,7 @@ iframe[name='google_conversion_frame'] {
float: right;
color: #888;
}
/* Content Dividers
-------------------------------------------------- */
hr.dashed {
@@ -135,7 +135,7 @@ hr.thick {
-moz-transition: all .2s linear;
-ms-transition: all .2s linear;
-o-transition: all .2s linear;
transition: all .2s linear;
transition: all .2s linear;
}
 
/* Typography
@@ -269,6 +269,39 @@ hr.thick {
padding: 30px 0;
}
 
@media (max-width: 530px) {
#landing h1 {
font-size: 3.3rem;
margin-bottom: 1rem;
}
#landing p {
font-size: 1.6rem;
}
.action-button {
width: 100%;
margin-bottom: 1.2rem;
}
#landing .main-screenshot {
padding-top: 2rem;
}
}
@media (max-width: 768px) {
#landing h1 {
font-size: 3.3rem;
margin-bottom: 1rem;
}
#landing p {
font-size: 1.6rem;
}
.action-button {
margin-bottom: 1.2rem;
}
#landing .main-screenshot {
padding-top: 2rem;
}
}
/* Testimonials
-------------------------------------------------- */
 
@@ -320,7 +353,7 @@ padding-bottom: 30px;
-webkit-animation-name: rise;
-moz-animation-name: rise;
-o-animation-name: rise;
animation-name: rise;
animation-name: rise;
}
 
/* Call to Action Headline
@@ -383,12 +416,12 @@ ul.plans {
}
.product-plan .action {
padding: 20px;
text-align: center;
text-align: center;
}
.paypal_button {
width:230px;
width:230px;
margin-left:auto;
margin-right:auto;
margin-right:auto;
}
.product-plan.popular {
-webkit-box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.2);
@@ -490,7 +523,7 @@ h3.title {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid rgba(0, 0, 0, 0.1);
margin: 0 0 30px;
padding: 10px;
padding: 10px;
}
 
article {
@@ -623,6 +656,20 @@ h2.terms {
 
/* Mobile Defaults
------------------------- */
.icon-bar {
background-color: white !important;
}
@media (max-width: 768px) {
ul.nav.pull-right.animated.navbar-nav {
float: none !important;
}
.navbar-default .navbar-collapse {
text-align: center;
}
}
@media (max-width: 979px) {
body {
padding-top: 0;
@@ -647,23 +694,23 @@ h2.terms {
.dropdown-menu li > a:focus,
.dropdown-submenu:hover > a {
background-image: none;
}
}
.navbar .nav-collapse.nav .active > a {
margin-left: 5px;
}
}
.navbar .nav-collapse .nav > li.active > a,
.navbar .nav-collapse .nav > li.active:hover > a,
.navbar .nav-collapse .nav > li.active:hover > a,
.navbar .nav-collapse .nav .active > a,
.navbar .nav-collapse .nav .active > a:hover,
.navbar .nav-collapse .nav .active > a:focus {
border-bottom: medium none;
padding: 9px 15px;
padding: 9px 15px;
}
.navbar .nav-collapse .nav > li > a:hover {
-webkit-animation-name: slide;
-moz-animation-name: slide;
-o-animation-name: slide;
animation-name: slide;
animation-name: slide;
}
.navbar .nav li.dropdown.open > .dropdown-toggle,
.navbar .nav li.dropdown.active > .dropdown-toggle,
@@ -671,8 +718,8 @@ h2.terms {
-webkit-animation-name: none;
-moz-animation-name: none;
-o-animation-name: none;
animation-name: none;
}
animation-name: none;
}
#landing,
#landingSlide,
#header,
@@ -694,7 +741,7 @@ h2.terms {
margin-left: -20px;
margin-right: -20px;
padding: 0 20px;
}
}
}
 
/* Tablets to Phones
@@ -708,14 +755,14 @@ h2.terms {
}
#landingSlide {
background: none repeat scroll center 200px #F1F1F1;
height: auto;
}
height: auto;
}
.product-plan {
margin-bottom: 10px;
}
#footer {
display: none;
}
}
}
 
/* Embeding video */
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment