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

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

parent 1557d96b
.sdlc-container.position-relative
.sdlc-description
%a.title-link{ href: "/concurrent-devops" }
%h2 200% Faster DevOps Lifecycle
%p From project planning and source code management to CI/CD and monitoring, GitLab is a single application for the complete DevOps lifecycle.
%h2 DevOpsライフサイクルを 200% 加速
%p GitLabは、ソフトウェア開発サイクル全体をカバーするアプリケーションです。プロジェクトの計画からソースコード管理、CI/CD、監視、セキュリティに至るまでGitLab1つで完結します。
%img.sdlc-image{ src: "/images/home/sdl-single-application.png" }
.table-container
%p.table-label.single-application-label GitLab is a single application for the complete DevOps lifecycle.
......@@ -30,7 +29,7 @@
%img.competitor-logo{ src: "#{competitor.logo}", alt: "#{competitor.name} logo png" }
.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/libs/tweenmax.min.js" }
%header
%nav.navbar.navbar-fixed-top.navbar-default{role: "navigation"}
.container
.navbar-header
%button.navbar-toggle{type: "button", data: {target: "#main-gl-nav", toggle: "collapse"}}
%span.sr-only
Toggle Navigation
%span.icon-bar
%span.icon-bar
%span.icon-bar
%header.navbar#main-nav{role: "navigation"}
.navbar-left
%a.navbar-brand.animated{href: "/"}
= partial "includes/logos/wm_web.svg"
.collapse.navbar-collapse#main-gl-nav
.navbar-right
= partial "includes/layout/nav"
.mobile-icons
%button.search-icon.js-search-toggle{ type: "button", "aria-label" => "Search" }
%i.fas.fa-search
%button.mobile-icon#mobile-icon
.icon-bar
.icon-bar
.icon-bar
.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
%li{class: ("active" if current_page.url == "/product/")}
%a{href: "/product/"}
%ul
%li{class: ("menu-item-active" if current_page.url == "/product/")}
%a.main-nav-link{href: "/product/"}
製品
%li{class: ("active" if current_page.url == "/pricing/")}
%a{href: "/pricing/"}
%li{class: ("menu-item-active" if current_page.url == "/pricing/")}
%a.main-nav-link{href: "/pricing/"}
料金
%li{class: ("active" if current_page.url == "/installation/")}
%a{href: "/installation/"}
%li{class: ("menu-item-active" if current_page.url == "/installation/")}
%a.main-nav-link{href: "/installation/"}
インストール
%li{class: ("active" if current_page.url == "/links/")}
%a{href: "/links/"}
%li{class: ("menu-item-active" if current_page.url == "/links/")}
%a.main-nav-link{href: "/links/"}
リンク
%li{class: ("active" if current_page.url == "/blog/")}
%a{href: "/blog/"}
%li{class: ("menu-item-active" if current_page.url == "/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 @@
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: $color-self-hosted-accent;
background-image: linear-gradient(to top, $color-saas-accent 0%, $color-self-hosted-accent 100%);
background-color: $color-self-managed-accent;
background-image: linear-gradient(to top, $color-saas-accent 0%, $color-self-managed-accent 100%);
color: $color-white;
font-size: 20px;
line-height: 1;
......@@ -44,4 +44,3 @@
}
}
}
......@@ -19,7 +19,6 @@
background-color: $color-white;
border-color: $color-primary;
transition: all .2s;
font-weight: 600;
&:hover {
color: $color-white;
......@@ -33,7 +32,6 @@
background-color: $color-secondary;
border-color: $color-secondary;
transition: all .2s;
font-weight: 600;
&:hover {
color: $color-white;
......@@ -47,7 +45,6 @@
background-color: $color-white;
border-color: $color-white;
transition: all .2s;
font-weight: 600;
&:hover {
color: $color-secondary;
......@@ -66,7 +63,6 @@
background-color: $color-white;
border-radius: 3px;
font-size: 16px;
font-weight: 600;
line-height: 35px;
@media (min-width: 990px) {
......@@ -100,16 +96,14 @@
.cta-btn {
display: inline-block;
padding: 0 30px;
margin: 10px;
font-size: 16px;
padding: 4px 30px;
font-size: 18px;
line-height: 40px;
min-width: 140px;
&.large {
padding: 8px 20px 9px;
font-size: 18px;
font-weight: 600;
}
&.red {
......@@ -143,6 +137,15 @@
}
}
&.orange {
background-color: $color-accent;
color: $color-white;
&:hover {
background-color: $color-accent-alt;
}
}
&.accent {
background-color: $color-accent;
color: $color-white;
......@@ -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 {
border: 1px solid $color-accent;
background-color: transparent;
......@@ -170,16 +184,26 @@
&:hover {
border-color: $color-accent-alt;
background-color: $color-accent-alt;
background-color: $color-accent;
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 {
border: 1px solid $color-primary;
background-color: transparent;
color: $color-primary;
font-weight: 600;
&:hover {
background-color: $color-primary;
......@@ -188,14 +212,12 @@
}
&.purple {
border: 1px solid $color-primary;
background-color: $color-primary;
color: $color-white;
&:focus,
&:hover {
background-color: $color-white;
color: $color-primary;
background-color: $color-primary-dark;
}
}
......@@ -214,6 +236,16 @@
}
.btn-primary {
background-color: $color-primary;
color: $color-white;
&:hover {
background-color: $color-primary-dark;
}
}
.copy-btn {
background-color: transparent;
margin: 5px;
......@@ -242,7 +274,7 @@
}
}
.btn-self-hosted {
.btn-self-managed {
background-color: $color-primary;
&:hover,
......
......@@ -2,8 +2,6 @@
margin: 80px 0 70px;
h2 {
font-weight: 400;
color: $text-color-light;
}
}
......@@ -125,6 +125,7 @@
//scss-lint:disable SelectorDepth
font-size: 14px;
li:hover span,
li a:hover {
$lt-comparison-link-hover-color: #f5f5f5;
background-color: $lt-comparison-link-hover-color;
......
......@@ -17,6 +17,13 @@
&.is-open {
.faq-answer {
display: block;
p {
background: $color-gray-extra-light-alt;
padding: 10px;
border-radius: $border-radius-large;
}
}
.faq-question {
......
.centered-form {
@media (min-width: 510px) {
margin: 2em auto;
width: 630px;
max-width: 630px;
}
}
......
......@@ -11,7 +11,7 @@
.in-page-nav {
.body--has-in-page-nav-stuck & {
position: fixed;
top: 50px;
top: 58px;
width: 100%;
margin: 0 auto;
z-index: 5;
......@@ -76,4 +76,3 @@
display: none;
}
}
.nav-logo {
max-height: 44px;
position: relative;
top: -12px;
height: 36px;
}
// scss-lint:disable NestingDepth,SelectorDepth
.navbar-default {
> .container {
position: relative;
.navbar {
background: $color-white;
position: sticky;
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 {
@media (max-width: $screen-sm-max) {
max-height: none;
text-align: center;
a {
color: $color-gray;
border-radius: $border-radius-large;
padding: 0 20px;
}
.search-icon,
.search-box-icon {
font-size: 14px;
}
.search-icon {
padding: 10px;
margin-right: 6px;
}
// Logo side
.navbar-left {
.navbar-brand {
@media (min-width: $screen-md-min) {
padding-right: 0;
margin-right: -20px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
.nav-logo {
@media all and (max-width: $screen-md-min) {
height: 30px;
}
}
.wordmark {
transition: fill .3s;
@media all and (max-width: $screen-md-min) {
display: none;
}
}
}
}
&:focus,
&:hover {
outline: 0;
// Mobile stuff
.wordmark {
fill: $color-primary-alt;
.mobile-menu {
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;
}
}
.navbar-nav {
margin-bottom: 0;
@media all and (max-width: $screen-xs-min) {
flex-direction: column;
}
}
}
li {
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;
}
}
}
.search-icon {
display: none;
}
.exit-icon-container {
position: fixed;
width: 34px;
right: 34px;
top: 34px;
display: flex;
justify-content: center;
align-items: center;
border: 0;
z-index: 100;
img {
width: 100%;
}
}
}
.mobile-icons {
display: none;
justify-content: center;
align-items: center;
.mobile-icon {
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 (min-width: $screen-md-min) {
float: right;
@media all and (max-width: $screen-md-min) {
display: flex;
}
}
// Right side
> li {
&.active {
.navbar-right {
height: 100%;
ul {
height: 100%;
display: flex;
margin: 0;
li {
height: 100%;
position: relative;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
&::after {
content: "";
position: absolute;
left: 15px;
right: 15px;
bottom: -1px;
height: 4px;
background-color: $color-primary;
a,
.search-icon {
border-radius: $border-radius-large;
&:hover,
&:focus {
text-decoration: none;
background: $color-gray-extra-light-alt;
color: $color-primary !important;
}
}
&:last-child {
border-bottom: 2px solid $color-primary;
.sign-up {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
font-weight: 600;
padding: 0 10px;
}
@media (min-width: $screen-md-min) {
border-bottom: 0;
.main-nav-link:not(.sign-up) {
width: 100%;
height: 100%;
padding: 0 20px;
display: flex;
justify-content: center;
align-items: center;
@media all and (max-width: $screen-lg-min) {
padding: 0 10px;
}
}
> a {
padding-left: 30px;
padding-right: 30px;
font-size: 14px;
&:hover,
&:focus-within {
overflow: visible;
@media (min-width: $screen-sm-min) {
padding-left: 10px;
padding-right: 10px;
font-size: 14px;
.dropdown {
opacity: 1;
transform: translateY(0);
}
}
@media (min-width: $screen-md-min) {
padding: 15px 10px;
font-size: 16px;
.dropdown {
position: absolute;
transform: translateY(3px);
top: 100%;
left: 0;
width: 240px;
padding: 10px;
display: flex;
flex-direction: column;
background: $color-white;
box-shadow: $box-shadow-large;
border-radius: $border-radius-large;
opacity: 0;
transform: translateY(20px);
transition: $transition-primary;
z-index: 100;
a {
padding: $input-padding;
text-decoration: none;
color: $color-gray !important;
border-radius: $border-radius-large;
&:hover,
&:focus {
color: $color-primary !important;
}
}
}
}
}
@media (min-width: $screen-lg-min) {
padding-left: 25px;
padding-right: 25px;
@media all and (max-width: $screen-md-min) {
display: none;
}
}
.sign-up-container {
display: flex;
justify-content: center;
align-items: center;
}
.sign-in-up-btn,
.explore-btn {
position: relative;
padding-left: 0;
padding-right: 0;
.sign-up,
.search-icon {
color: $color-primary;
font-weight: 600;
}
@media (min-width: $screen-md-min) {
margin-right: 10px;
.search-visible {
height: $navbar-height;
box-shadow: 0 2px 4px $color-transparent-alt;
}
&:hover {
text-decoration: underline;
@media all and (max-width: $screen-lg-min) {
padding: 0 20px;
}
}