diff options
-rw-r--r-- | content/assets/stylesheets/_variables.scss | 10 | ||||
-rw-r--r-- | content/assets/stylesheets/stylesheet.scss | 46 | ||||
-rw-r--r-- | content/assets/stylesheets/toc.scss | 2 | ||||
-rw-r--r-- | layouts/head.html | 4 |
4 files changed, 40 insertions, 22 deletions
diff --git a/content/assets/stylesheets/_variables.scss b/content/assets/stylesheets/_variables.scss index 1c021026..d90589ef 100644 --- a/content/assets/stylesheets/_variables.scss +++ b/content/assets/stylesheets/_variables.scss @@ -12,10 +12,12 @@ $introduced-in-border-color: #e3e3e3; // Fonts $mono-font-family: "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas", "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace; -$sans-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; -$body-font-size: 15px; +$sans-font-family: 'Source Sans Pro', sans-serif; +$heading-font-family: 'Lato', sans-serif; +$body-font-size: 16px; $tooltip-font-size: 12px; $introduced-in-font-size: 13px; +$font-weight-bolder: 700; // Margins $h-margin-top: 10px; @@ -92,7 +94,7 @@ $gds-indigo-800: #393982; // Add here all the variables that already conform with GDS // Base colors -$body-color: $gds-gray-950; //font color +$body-color: #2f2a6b; //font color $body-background-color: $gds-white; //body background $main-background-color: $gds-white; // content background $header-background-color: $gds-purple-900; @@ -109,7 +111,7 @@ $link-color-nav-hover: $gds-gray-900; // Global nav $global-nav-link-level0: $link-color-nav; $global-nav-link-level1: $link-color-nav; -$global-nav-link-level2: $gds-gray-700; +$global-nav-link-level2: $gds-gray-800; $global-nav-link-shadow: $gds-gray-200; // Table of contents diff --git a/content/assets/stylesheets/stylesheet.scss b/content/assets/stylesheets/stylesheet.scss index 045a11e2..8d842ec6 100644 --- a/content/assets/stylesheets/stylesheet.scss +++ b/content/assets/stylesheets/stylesheet.scss @@ -16,6 +16,7 @@ body { font-family: $sans-font-family; font-size: $body-font-size; color: $body-color; + font-weight: 400; >.wrapper { min-height: 100vh; @@ -42,6 +43,10 @@ a, a:visited { } } +b, strong { + font-weight: 700; +} + details { summary { display: list-item; @@ -60,8 +65,12 @@ table { background: $thead-background-color; } + th { + font-weight: 600; + } + tbody { - border-top: 3px solid $gds-gray-200; + border-top: 1px solid $gds-gray-200; &:first-child { border-top: 0; @@ -79,8 +88,8 @@ table { td, th { text-align: left; padding: 8px; - border: 1px solid $table-border-color; - font-size: 14px; + border: .5px solid $table-border-color; + font-size: 16px; .badge-small { &:hover::after { @@ -215,7 +224,7 @@ h2, h3, h4, h5, h6 { .anchor { opacity: 0; float: left; - margin-left: -30px; + margin-left: -50px; vertical-align: bottom; margin-top: 8px; height: 22px; @@ -231,8 +240,8 @@ h2, h3, h4, h5, h6 { // p font size = $body-font-size: 15px; h1 { - font-size: 34px; - font-weight: 700; + font-size: 42px; + font-weight: 600; border-bottom: solid 2px $h1-border-bottom; padding-bottom: 10px; margin-top: $h-margin-top; @@ -244,8 +253,8 @@ h1 { } h2 { - font-size: 28px; - font-weight: 700; + font-size: 34px; + font-weight: 500; margin-top: $h2-margin-top; margin-bottom: $h-margin-bottom; @@ -255,8 +264,8 @@ h2 { } h3 { - font-size: 23px; - font-weight: 700; + font-size: 28px; + font-weight: 400; margin-top: $h2-margin-top; margin-bottom: $h-margin-bottom; @@ -266,8 +275,8 @@ h3 { } h4 { - font-size: 18px; - font-weight: 700; + font-size: 24px; + font-weight: 400; margin-top: $h2-margin-top; margin-bottom: $h-margin-bottom; @@ -277,8 +286,8 @@ h4 { } h5 { - font-size: 16px; - font-weight: 600; + font-size: 20px; + font-weight: 400; margin-top: $h2-margin-top; margin-bottom: $h-margin-bottom; @@ -288,8 +297,8 @@ h5 { } h6 { - font-size: 15px; - font-weight: 600; + font-size: 16px; + font-weight: 400; margin-top: $h2-margin-top; margin-bottom: $h-margin-bottom; @@ -422,6 +431,7 @@ h6 { word-break: normal; padding: 2px 4px; line-height: 22px; + font-weight: 300; } .input-group-text { @@ -683,7 +693,7 @@ a.global-nav-link, .nav-link { a.global-nav-link { line-height: 1.25; - font-size: 14px; + font-size: 15px; width: 100%; } @@ -1303,6 +1313,8 @@ a.global-nav-link { // https://gitlab.com/gitlab-org/gitlab-docs/issues/107#note_36655246 h1, h2, h3, h4, h5, h6 { + font-family: $heading-font-family; + color: #232150; &[id]::before { display: block; content: " "; diff --git a/content/assets/stylesheets/toc.scss b/content/assets/stylesheets/toc.scss index 8c7dacac..d4c415ce 100644 --- a/content/assets/stylesheets/toc.scss +++ b/content/assets/stylesheets/toc.scss @@ -7,7 +7,7 @@ version: 18 $base-nav-link-padding: .75rem; $sm-nav-link-padding: .25rem; -$nav-link-font-size: 14px; +$nav-link-font-size: 15px; // ToC styles .table-of-contents { diff --git a/layouts/head.html b/layouts/head.html index 3ae9b05c..436ba79a 100644 --- a/layouts/head.html +++ b/layouts/head.html @@ -33,6 +33,10 @@ <link rel="stylesheet" href="<%= @items['/assets/stylesheets/footer.*'].path %>"> <link rel="stylesheet" href="<%= @items['/assets/stylesheets/toc.*'].path %>"> <link rel="stylesheet" href="<%= @items['/assets/stylesheets/help.*'].path %>"> +<link rel="preconnect" href="https://fonts.gstatic.com"> +<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&display=swap"> +<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap"> + <!-- new fontawesome version 4 - via CDN --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <!-- end of fontawesome --> |