Commit 373e6e34 authored by Hiroyuki Sato's avatar Hiroyuki Sato 🇯🇵

トップページのデザインを修正

parent 1557d96b
.sdlc-container.position-relative .sdlc-container.position-relative
.sdlc-description .sdlc-description
%a.title-link{ href: "/concurrent-devops" } %h2 DevOpsライフサイクルを 200% 加速
%h2 200% Faster DevOps Lifecycle %p GitLabは、ソフトウェア開発サイクル全体をカバーするアプリケーションです。プロジェクトの計画からソースコード管理、CI/CD、監視、セキュリティに至るまでGitLab1つで完結します。
%p From project planning and source code management to CI/CD and monitoring, GitLab is a single application for the complete DevOps lifecycle.
%img.sdlc-image{ src: "/images/home/sdl-single-application.png" } %img.sdlc-image{ src: "/images/home/sdl-single-application.png" }
.table-container .table-container
%p.table-label.single-application-label GitLab is a single application for the complete DevOps lifecycle. %p.table-label.single-application-label GitLab is a single application for the complete DevOps lifecycle.
...@@ -30,7 +29,7 @@ ...@@ -30,7 +29,7 @@
%img.competitor-logo{ src: "#{competitor.logo}", alt: "#{competitor.name} logo png" } %img.competitor-logo{ src: "#{competitor.logo}", alt: "#{competitor.name} logo png" }
.btn-group.margin-top20 .btn-group.margin-top20
%a.btn.cta-btn.accent{ href: '/comparison/' } See comparisons %a.btn.cta-btn.accent{ href: '/comparison/' } 他のツールとの比較
%script{ src: "/javascripts/rotate-competitors.js" } %script{ src: "/javascripts/rotate-competitors.js" }
%script{ src: "/javascripts/libs/tweenmax.min.js" } %script{ src: "/javascripts/libs/tweenmax.min.js" }
%header %header.navbar#main-nav{role: "navigation"}
%nav.navbar.navbar-fixed-top.navbar-default{role: "navigation"} .navbar-left
.container %a.navbar-brand.animated{href: "/"}
.navbar-header = partial "includes/logos/wm_web.svg"
%button.navbar-toggle{type: "button", data: {target: "#main-gl-nav", toggle: "collapse"}} .navbar-right
%span.sr-only = partial "includes/layout/nav"
Toggle Navigation .mobile-icons
%span.icon-bar %button.search-icon.js-search-toggle{ type: "button", "aria-label" => "Search" }
%span.icon-bar %i.fas.fa-search
%span.icon-bar %button.mobile-icon#mobile-icon
%a.navbar-brand.animated{href: "/"} .icon-bar
= partial "includes/logos/wm_web.svg" .icon-bar
.collapse.navbar-collapse#main-gl-nav .icon-bar
= partial "includes/layout/nav" .display-none.mobile-menu#mobile-menu
%button.exit-icon-container#exit-icon
%img.exit-icon{ src: "/images/icons/x.svg" }
= partial "includes/layout/nav"
%script{src: "/javascripts/mobile-menu.js", type: "text/javascript"}
%script{ src: "/javascripts/libs/tweenmax.min.js", type: "text/javascript" }
%ul.nav.navbar-nav.animated %ul
%li{class: ("active" if current_page.url == "/product/")} %li{class: ("menu-item-active" if current_page.url == "/product/")}
%a{href: "/product/"} %a.main-nav-link{href: "/product/"}
製品 製品
%li{class: ("active" if current_page.url == "/pricing/")} %li{class: ("menu-item-active" if current_page.url == "/pricing/")}
%a{href: "/pricing/"} %a.main-nav-link{href: "/pricing/"}
料金 料金
%li{class: ("active" if current_page.url == "/installation/")} %li{class: ("menu-item-active" if current_page.url == "/installation/")}
%a{href: "/installation/"} %a.main-nav-link{href: "/installation/"}
インストール インストール
%li{class: ("active" if current_page.url == "/links/")} %li{class: ("menu-item-active" if current_page.url == "/links/")}
%a{href: "/links/"} %a.main-nav-link{href: "/links/"}
リンク リンク
%li{class: ("active" if current_page.url == "/blog/")} %li{class: ("menu-item-active" if current_page.url == "/blog/")}
%a{href: "/blog/"} %a.main-nav-link{href: "/blog/"}
ブログ ブログ
(function() {
var mobileIcon = document.getElementById('mobile-icon');
var mobileMenu = document.getElementById('mobile-menu');
var exitIcon = document.getElementById('exit-icon');
var mobileMenuOpen = false;
function toggleMobileMenu() {
mobileMenuOpen = !mobileMenuOpen;
if (mobileMenuOpen) {
mobileMenu.classList.remove('display-none');
TweenMax.staggerTo('.mobile-menu ul li', 0.6, {ease: Power4.easeOut, y: 0, opacity: 1}, 0.1);
} else {
mobileMenu.classList.add('display-none')
TweenMax.staggerTo('.mobile-menu ul li', 0.6, {ease: Power4.easeOut, y: 40, opacity: 0}, 0.1);
}
}
mobileIcon.addEventListener('click', toggleMobileMenu);
exitIcon.addEventListener('click', toggleMobileMenu);
})();
body {
font-family: Verdana, "Hiragino Kaku Gothic ProN", 游ゴシック, YuGothic, Meiryo, sans-serif;
font-size: 16px;
}
p {
// 禁則処理
word-break: normal;
-ms-word-break: normal; // IE用
text-align: justify;
text-justify: inter-ideograph; // IE用
}
...@@ -12,8 +12,8 @@ ...@@ -12,8 +12,8 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-radius: 50%; border-radius: 50%;
background-color: $color-self-hosted-accent; background-color: $color-self-managed-accent;
background-image: linear-gradient(to top, $color-saas-accent 0%, $color-self-hosted-accent 100%); background-image: linear-gradient(to top, $color-saas-accent 0%, $color-self-managed-accent 100%);
color: $color-white; color: $color-white;
font-size: 20px; font-size: 20px;
line-height: 1; line-height: 1;
...@@ -44,4 +44,3 @@ ...@@ -44,4 +44,3 @@
} }
} }
} }
...@@ -19,7 +19,6 @@ ...@@ -19,7 +19,6 @@
background-color: $color-white; background-color: $color-white;
border-color: $color-primary; border-color: $color-primary;
transition: all .2s; transition: all .2s;
font-weight: 600;
&:hover { &:hover {
color: $color-white; color: $color-white;
...@@ -33,7 +32,6 @@ ...@@ -33,7 +32,6 @@
background-color: $color-secondary; background-color: $color-secondary;
border-color: $color-secondary; border-color: $color-secondary;
transition: all .2s; transition: all .2s;
font-weight: 600;
&:hover { &:hover {
color: $color-white; color: $color-white;
...@@ -47,7 +45,6 @@ ...@@ -47,7 +45,6 @@
background-color: $color-white; background-color: $color-white;
border-color: $color-white; border-color: $color-white;
transition: all .2s; transition: all .2s;
font-weight: 600;
&:hover { &:hover {
color: $color-secondary; color: $color-secondary;
...@@ -66,7 +63,6 @@ ...@@ -66,7 +63,6 @@
background-color: $color-white; background-color: $color-white;
border-radius: 3px; border-radius: 3px;
font-size: 16px; font-size: 16px;
font-weight: 600;
line-height: 35px; line-height: 35px;
@media (min-width: 990px) { @media (min-width: 990px) {
...@@ -100,16 +96,14 @@ ...@@ -100,16 +96,14 @@
.cta-btn { .cta-btn {
display: inline-block; display: inline-block;
padding: 0 30px; padding: 4px 30px;
margin: 10px; font-size: 18px;
font-size: 16px;
line-height: 40px; line-height: 40px;
min-width: 140px; min-width: 140px;
&.large { &.large {
padding: 8px 20px 9px; padding: 8px 20px 9px;
font-size: 18px; font-size: 18px;
font-weight: 600;
} }
&.red { &.red {
...@@ -143,6 +137,15 @@ ...@@ -143,6 +137,15 @@
} }
} }
&.orange {
background-color: $color-accent;
color: $color-white;
&:hover {
background-color: $color-accent-alt;
}
}
&.accent { &.accent {
background-color: $color-accent; background-color: $color-accent;
color: $color-white; color: $color-white;
...@@ -163,6 +166,17 @@ ...@@ -163,6 +166,17 @@
} }
} }
&.ghost-orange {
border: 2px solid $color-accent;
background-color: transparent;
color: $color-accent;
&:hover {
border-color: $color-accent-alt;
color: $color-accent-alt;
}
}
&.ghost-accent { &.ghost-accent {
border: 1px solid $color-accent; border: 1px solid $color-accent;
background-color: transparent; background-color: transparent;
...@@ -170,16 +184,26 @@ ...@@ -170,16 +184,26 @@
&:hover { &:hover {
border-color: $color-accent-alt; border-color: $color-accent-alt;
background-color: $color-accent-alt; background-color: $color-accent;
color: $color-white; color: $color-white;
} }
} }
&.ghost-purple {
border: 2px solid $color-primary;
background-color: transparent;
color: $color-primary;
&:hover {
border-color: $color-primary-dark;
color: $color-primary-dark;
}
}
&.ghost-primary { &.ghost-primary {
border: 1px solid $color-primary; border: 1px solid $color-primary;
background-color: transparent; background-color: transparent;
color: $color-primary; color: $color-primary;
font-weight: 600;
&:hover { &:hover {
background-color: $color-primary; background-color: $color-primary;
...@@ -188,14 +212,12 @@ ...@@ -188,14 +212,12 @@
} }
&.purple { &.purple {
border: 1px solid $color-primary;
background-color: $color-primary; background-color: $color-primary;
color: $color-white; color: $color-white;
&:focus, &:focus,
&:hover { &:hover {
background-color: $color-white; background-color: $color-primary-dark;
color: $color-primary;
} }
} }
...@@ -214,6 +236,16 @@ ...@@ -214,6 +236,16 @@
} }
.btn-primary {
background-color: $color-primary;
color: $color-white;
&:hover {
background-color: $color-primary-dark;
}
}
.copy-btn { .copy-btn {
background-color: transparent; background-color: transparent;
margin: 5px; margin: 5px;
...@@ -242,7 +274,7 @@ ...@@ -242,7 +274,7 @@
} }
} }
.btn-self-hosted { .btn-self-managed {
background-color: $color-primary; background-color: $color-primary;
&:hover, &:hover,
......
...@@ -2,8 +2,6 @@ ...@@ -2,8 +2,6 @@
margin: 80px 0 70px; margin: 80px 0 70px;
h2 { h2 {
font-weight: 400;
color: $text-color-light; color: $text-color-light;
} }
} }
...@@ -125,6 +125,7 @@ ...@@ -125,6 +125,7 @@
//scss-lint:disable SelectorDepth //scss-lint:disable SelectorDepth
font-size: 14px; font-size: 14px;
li:hover span,
li a:hover { li a:hover {
$lt-comparison-link-hover-color: #f5f5f5; $lt-comparison-link-hover-color: #f5f5f5;
background-color: $lt-comparison-link-hover-color; background-color: $lt-comparison-link-hover-color;
......
...@@ -17,6 +17,13 @@ ...@@ -17,6 +17,13 @@
&.is-open { &.is-open {
.faq-answer { .faq-answer {
display: block; display: block;
p {
background: $color-gray-extra-light-alt;
padding: 10px;
border-radius: $border-radius-large;
}
} }
.faq-question { .faq-question {
......
.centered-form { .centered-form {
@media (min-width: 510px) { @media (min-width: 510px) {
margin: 2em auto; margin: 2em auto;
width: 630px; max-width: 630px;
} }
} }
......
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
.in-page-nav { .in-page-nav {
.body--has-in-page-nav-stuck & { .body--has-in-page-nav-stuck & {
position: fixed; position: fixed;
top: 50px; top: 58px;
width: 100%; width: 100%;
margin: 0 auto; margin: 0 auto;
z-index: 5; z-index: 5;
...@@ -76,4 +76,3 @@ ...@@ -76,4 +76,3 @@
display: none; display: none;
} }
} }
.nav-logo { .nav-logo {
max-height: 44px; height: 36px;
position: relative;
top: -12px;
} }
// scss-lint:disable NestingDepth,SelectorDepth .navbar {
.navbar-default { background: $color-white;
> .container { position: sticky;
position: relative; top: 0;
width: 100%;
padding: 0 80px;
display: flex;
align-items: center;
justify-content: space-between;
height: $navbar-height;
font-size: .9em;
z-index: 1000;
box-shadow: $box-shadow;
transition: $transition-primary;
// Standard tags
li {
list-style: none;
white-space: nowrap;
padding: 4px 0;
} }
.navbar-collapse { a {
@media (max-width: $screen-sm-max) { color: $color-gray;
max-height: none; border-radius: $border-radius-large;
text-align: center; padding: 0 20px;
}
.search-icon,
.search-box-icon {
font-size: 14px;
}
.search-icon {
padding: 10px;
margin-right: 6px;
}
// Logo side
.navbar-left {
.navbar-brand {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
.nav-logo {
@media all and (max-width: $screen-md-min) {
height: 30px;
}
}
.wordmark {
@media all and (max-width: $screen-md-min) {
display: none;
}
}
} }
} }
.navbar-brand { // Mobile stuff
@media (min-width: $screen-md-min) {
padding-right: 0; .mobile-menu {
margin-right: -20px; position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
background: $color-white;
padding: 30px;
padding-bottom: 120px;
overflow-y: scroll;
font-size: 1.2em;
ul {
margin: 0;
padding: 0;
margin-left: 0;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
.sign-up-container {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
z-index: 100;
padding: 6px;
background: $color-white;
li {
width: 100%;
padding: 0;
padding-top: 6px;
display: flex;
&:first-child {
margin-right: 6px;
@media all and (max-width: $screen-xs-min) {
margin-right: 0;
}
}
.sign-up {
width: 100%;
background: $color-primary;
font-size: .9em;
}
}
@media all and (max-width: $screen-xs-min) {
flex-direction: column;
}
}
} }
.wordmark { li {
transition: fill .3s; padding-top: 40px;
text-align: center;
opacity: 0;
transform: translateY(40px);
a {
padding: $input-padding;
}
.main-nav-link {
color: $color-primary;
font-weight: 600;
}
.dropdown {
display: flex;
flex-direction: column;
margin-top: 10px;
a {
font-weight: 400;
color: $color-gray;
}
}
} }
&:focus, .search-icon {
&:hover { display: none;
outline: 0; }
.wordmark { .exit-icon-container {
fill: $color-primary-alt; position: fixed;
width: 34px;
right: 34px;
top: 34px;
display: flex;
justify-content: center;
align-items: center;
border: 0;
z-index: 100;
img {
width: 100%;
} }
} }
} }
.navbar-nav { .mobile-icons {
margin-bottom: 0; display: none;
justify-content: center;
align-items: center;
@media (min-width: $screen-md-min) { .mobile-icon {
float: right; padding: 12px;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 40px;
border: 0;
margin-left: 10px;
.icon-bar {
height: 2px;
width: 24px;
border-radius: $border-radius-circle;
background: $color-primary;
}
}
@media all and (max-width: $screen-md-min) {
display: flex;
} }
}
// Right side
> li { .navbar-right {
&.active { height: 100%;
ul {
height: 100%;
display: flex;
margin: 0;
li {
height: 100%;
position: relative; position: relative;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
&::after { a,
content: ""; .search-icon {
position: absolute; border-radius: $border-radius-large;
left: 15px;
right: 15px;
bottom: -1px;
height: 4px;
background-color: $color-primary;
}
}
&:last-child { &:hover,
border-bottom: 2px solid $color-primary; &:focus {
text-decoration: none;
background: $color-gray-extra-light-alt;
color: $color-primary !important;
}