Docs style alignment (#8134)

* Flashier top-level menu

* Flashy buttons

CHANGELOG_BEGIN
CHANGELOG_END

* Increase top-level nav font-size

* Make the entire landing page box clickable

* Fix code block alignment and copy button with line numbers

* Fix code blocks with line numbers on mobile

* Reengineer code blocks properly

* More fixes to code-blocks

* Add a vertical line after line numbers
This commit is contained in:
Bernhard Elsner 2020-12-04 08:50:08 +01:00 committed by GitHub
parent e0e317e05d
commit f0b98a85b9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 331 additions and 272 deletions

View File

@ -11,28 +11,28 @@
{%- endmacro %}
<div class="boxes">
<div class="box box1">
<a class="box box1 da-btn" href="{{ safe_pathto('getting-started/installation') }}" >
<h3>Getting started</h3>
<a href="{{ safe_pathto('getting-started/installation') }}" class="btn btn-neutral">Go <img src="{{ pathto('_static/images/boxes/GoButtonArrow.svg', 1) }}"></a>
</div>
<div class="box box2">
<span class="da-btn-label">Go</span>
</a>
<a class="box box2 da-btn" href="{{ safe_pathto('daml/reference/index') }}">
<h3>Writing DAML</h3>
<a href="{{ safe_pathto('daml/reference/index') }}" class="btn btn-neutral">Go <img src="{{ pathto('_static/images/boxes/GoButtonArrow.svg', 1) }}"></a>
</div>
<div class="box box3">
<span class="da-btn-label">Go</span>
</a>
<a class="box box3 da-btn" href="{{ safe_pathto('app-dev/app-arch') }}">
<h3>Building applications</h3>
<a href="{{ safe_pathto('app-dev/app-arch') }}" class="btn btn-neutral">Go <img src="{{ pathto('_static/images/boxes/GoButtonArrow.svg', 1) }}"></a>
</div>
<div class="box box4">
<span class="da-btn-label">Go</span>
</a>
<a class="box box4 da-btn" href="{{ safe_pathto('tools/assistant') }}">
<h3>SDK tools</h3>
<a href="{{ safe_pathto('tools/assistant') }}" class="btn btn-neutral">Go <img src="{{ pathto('_static/images/boxes/GoButtonArrow.svg', 1) }}"></a>
</div>
<div class="box box5">
<span class="da-btn-label">Go</span>
</a>
<a class="box box5 da-btn" href="{{ safe_pathto('concepts/ledger-model/index') }}">
<h3>Background concepts</h3>
<a href="{{ safe_pathto('concepts/ledger-model/index') }}" class="btn btn-neutral">Go <img src="{{ pathto('_static/images/boxes/GoButtonArrow.svg', 1) }}"></a>
</div>
<div class="box box6">
<span class="da-btn-label">Go</spana>
</a>
<a class="box box6 da-btn" href="https://daml.com/examples">
<h3>Examples</h3>
<a href="https://daml.com/examples" class="btn btn-neutral">Go <img src="{{ pathto('_static/images/boxes/GoButtonArrow.svg', 1) }}"></a>
</div>
<span class="da-btn-label">Go</span>
</a>
</div>

View File

@ -4,11 +4,11 @@
<footer>
{% if (theme_prev_next_buttons_location == 'bottom' or theme_prev_next_buttons_location == 'both') and (next or prev) %}
<div class="rst-footer-buttons" role="navigation" aria-label="footer navigation">
{% if next %}
<a href="{{ next.link|e }}" class="btn btn-neutral btn-next" title="{{ next.title|striptags|e }}" accesskey="n" rel="next">{{ _('Next') }} <img src="{{ pathto('_static/images/boxes/GoButtonArrow.svg', 1) }}"></a>
{% endif %}
{% if prev %}
<a href="{{ prev.link|e }}" class="btn btn-neutral float-left btn-prev" title="{{ prev.title|striptags|e }}" accesskey="p" rel="prev"><img src="{{ pathto('_static/images/boxes/GoButtonArrow.svg', 1) }}">{{ _('Previous') }}</a>
<a href="{{ prev.link|e }}" class="da-btn da-btn-label btn-prev" title="{{ prev.title|striptags|e }}" accesskey="p" rel="prev">{{ _('Previous') }}</a>
{% endif %}
{% if next %}
<a href="{{ next.link|e }}" class="da-btn da-btn-label btn-next" title="{{ next.title|striptags|e }}" accesskey="n" rel="next">{{ _('Next') }}</a>
{% endif %}
</div>
{% endif %}

View File

@ -4,10 +4,14 @@
<div class="navbar">
<h1><img src="{{ pathto('_static/images/DAML_Logo_Blue.svg', 1) }}"></h1>
<div class="navbar-menu">
<ul>
<li><a href="https://www.daml.com">Developers</a></li>
<li><a href="https://www.digitalasset.com/products">Products</a></li>
<li><a href="https://www.digitalasset.com">Company</a></li>
</ul>
<div class="da-menu-item da-menu-depth-1" role="menu">
<a href="https://www.daml.com/" role="menuitem" class="da-menu-link">Developers</a>
</div>
<div class="da-menu-item da-menu-depth-1" role="menu">
<a href="https://www.digitalasset.com/products" role="menuitem" class="da-menu-link">Products</a>
</div>
<div class="da-menu-item da-menu-depth-1" role="menu">
<a href="https://www.digitalasset.com" role="menuitem" class="da-menu-link">Company</a>
</div>
</div>
</div>

Binary file not shown.

View File

@ -1,13 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="14px" height="17px" viewBox="0 0 14 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 52.5 (67469) - http://www.bohemiancoding.com/sketch -->
<title>Shape</title>
<desc>Created with Sketch.</desc>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Redlines_NewVisuals" transform="translate(-385.000000, -166.000000)" fill="#6292f7" fill-rule="nonzero">
<g id="Group-20" transform="translate(1.000000, 133.000000)">
<path d="M391.073887,33.1951798 L389.943093,34.4434504 C389.763194,34.6472496 389.737494,34.9529485 389.917393,35.1822227 L393.463974,39.9205557 L385.805415,39.9205557 C385.651216,39.9205557 385.522717,39.9715055 385.419917,40.0734051 L384.212024,41.0924015 C383.929325,41.3216756 383.929325,41.7547491 384.212024,41.9840233 L385.445617,43.0539694 C385.548417,43.1558691 385.702616,43.2068189 385.831115,43.2068189 L393.438274,43.2068189 L389.865994,47.7923024 C389.686095,48.0215766 389.711794,48.3272755 389.891693,48.5565496 L390.996788,49.8048202 C391.253786,50.0850442 391.690684,50.0595692 391.921983,49.7538703 L397.884351,41.8566487 C398.03855,41.6528495 398.03855,41.3471505 397.884351,41.1433513 L391.999082,33.2461297 C391.767783,32.9404308 391.330886,32.9149558 391.073887,33.1951798 Z" id="Shape"></path>
</g>
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 1.5 KiB

View File

@ -0,0 +1,4 @@
<svg width="100%" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="arrow" stroke="#232F40" d="M1 4.65821L11 4.65821M11 4.65821L7.47505 1.13326M11 4.65821L7.47505 8.6582" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 265 B

View File

@ -1,9 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="13px" height="14px" viewBox="0 0 13 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 52.6 (67491) - http://www.bohemiancoding.com/sketch -->
<title>Path</title>
<desc>Created with Sketch.</desc>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<polygon id="Path" fill="#232f40" points="6.5 0 5.354375 1.23375 9.888125 6.125 0 6.125 0 7.875 9.888125 7.875 5.354375 12.76625 6.5 14 13 7"></polygon>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 588 B

View File

@ -0,0 +1 @@
<svg aria-hidden="true" data-prefix="far" data-icon="copy" class="svg-inline--fa fa-copy fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="#6292f7" d="M433.941 65.941l-51.882-51.882A48 48 0 0 0 348.118 0H176c-26.51 0-48 21.49-48 48v48H48c-26.51 0-48 21.49-48 48v320c0 26.51 21.49 48 48 48h224c26.51 0 48-21.49 48-48v-48h80c26.51 0 48-21.49 48-48V99.882a48 48 0 0 0-14.059-33.941zM266 464H54a6 6 0 0 1-6-6V150a6 6 0 0 1 6-6h74v224c0 26.51 21.49 48 48 48h96v42a6 6 0 0 1-6 6zm128-96H182a6 6 0 0 1-6-6V54a6 6 0 0 1 6-6h106v88c0 13.255 10.745 24 24 24h88v202a6 6 0 0 1-6 6zm6-256h-64V48h9.632c1.591 0 3.117.632 4.243 1.757l48.368 48.368a6 6 0 0 1 1.757 4.243V112z"></path></svg>

After

Width:  |  Height:  |  Size: 714 B

View File

@ -304,7 +304,8 @@ function scrollContentMenu($sections) {
}
function setHighlighterWidth() {
$('div[class*="highlight"]').css('width', ($('.wy-nav-content').outerWidth() + 76) + 'px')
var contentWidth = $('.wy-nav-content').outerWidth();
$('div[class*="highlight"]:has(div[class*="highlight"])').css('width', contentWidth + 'px');
}
function performSearch(fullSearchState, search, results, inline) {

View File

@ -166,3 +166,9 @@
font-weight: 900
src: url('../fonts/source-code-pro-v13-latin-ext_latin/source-code-pro-v13-latin-ext_latin-900italic.eot')
src: url('../fonts/source-code-pro-v13-latin-ext_latin/source-code-pro-v13-latin-ext_latin-900italic.eot?#iefix') format('embedded-opentype'), url('../fonts/source-code-pro-v13-latin-ext_latin/source-code-pro-v13-latin-ext_latin-900italic.woff2') format('woff2'), url('../fonts/source-code-pro-v13-latin-ext_latin/source-code-pro-v13-latin-ext_latin-900italic.woff') format('woff'), url('../fonts/source-code-pro-v13-latin-ext_latin/source-code-pro-v13-latin-ext_latin-900italic.ttf') format('truetype'), url('../fonts/source-code-pro-v13-latin-ext_latin/source-code-pro-v13-latin-ext_latin-900italic.svg#SourceCodePro') format('svg')
@font-face
font-family: 'Roboto Mono'
font-style: normal
font-weight: 400
src: url('../fonts/RobotoMono-Regular.ttf')

View File

@ -1,34 +1,100 @@
.rst-content
div > .highlight
padding-left: 47px !important
margin-left: -56px
dd, li
div > .highlight
padding-left: calc(47px + 1.6em) !important
margin-left: calc(-56px - 1.6em)
div[class^='highlight']
margin-left: calc(-56px - 1.6em)
dd, li
div > .highlight
padding-left: calc(47px + 2 * 1.6em) !important
margin-left: calc(-56px - 2 * 1.6em)
div[class^='highlight']
margin-left: calc(-56px - 2 * 1.6em)
.linenos
padding-left: 11px
div[class^="highlight"]
padding-left: 18px
pre.literal-block, div[class^="highlight"]
background-color: #171B26
overflow-x: hidden !important
width: 160%
overflow-x: auto
margin: 35px 0 35px -47px
.linenodiv
color: #ffffff
+media($tablet)
margin-left: -25px
+media($mobile)
margin-left: -30px
div[class^='highlight']
padding: 0
border: none
margin: 0
padding-left: 47px
overflow-x: visible
+media($tablet)
padding-left: 25px
+media($mobile)
padding-left: 30px
pre
padding-right: 2em
a.copybtn.o-tooltip--left
position: absolute
opacity: 1
top: 0.7em
+media($desktop)
left: 15px
+media($tablet)
right: 2em
&:before
content: ""
background: url("../images/copy-button.svg") no-repeat
position: absolute
vertical-align: top
margin: 0
top: 0
left: 0
height: 20px
width: 20px
&:after
padding: 6px
top: -7px
background: $gray-lighter
color: $text-dark
+media($desktop)
left: 4.5em
+media($tablet)
left: -0.5em
img
display: none
.linenos
padding: 0
width: 27px
.linenodiv
width: 100%
position: relative
left: 38px
overflow: visible
z-index: 1
padding-right: 10px
border-right: solid 1px $gray
+media($tablet)
left: 16px
+media($mobile)
left: 21px
pre
text-align: end
padding-left: 0
.highlighttable
width: 100%
table-layout: fixed
div[class^='highlight']
a.copybtn.o-tooltip--left
+media($desktop)
left: -11px
.literal-block-wrapper, .literal-block-wrapper:last-child
margin-top: 35px
@ -62,3 +128,25 @@
color: #FFFFFF
.nx
color: #DCDCA4
dd, li
pre.literal-block, div[class^='highlight']
padding-left: 1.6em
margin-left: calc(-47px - 1.6em)
+media($tablet)
margin-left: calc(-25px - 1.6em)
+media($mobile)
margin-left: calc(-40px - 1.6em)
dd, li
pre.literal-block, div[class^='highlight']
padding-left: 3.2em
margin-left: calc(-47px - 2 * 1.6em)
+media($tablet)
margin-left: calc(-25px - 2 * 1.6em)
+media($mobile)
margin-left: calc(-40px - 2 * 1.6em)

View File

@ -54,13 +54,11 @@
padding-top: 120px
.rst-content
.box .btn
.box .da-btn-label
position: absolute
font-size: 16px
font-size: 18px
right: 20px
top: 26px
width: 75px
height: 38px
top: 14px
.boxes .box1
background-image: url('../images/boxes/GettingStarted.png')

View File

@ -707,22 +707,6 @@ body
-webkit-box-shadow: 0px 3px 2px -1px $gray-lighter
.topbar
.navbar
h1
&:before
padding-left: 0
margin-bottom: initial
display: none
.navbar-menu
margin-top: -75px
+media($mobile)
margin-top: 0
&.landing
display: block
.version
margin-top: 49px
top: 0
@ -928,7 +912,7 @@ body
&:after
content: ""
display: block
background: url("../images/DarkBlueArrow.svg") no-repeat
background: url("../images/arrowblack.svg") no-repeat
width: 14px
height: 17px
background-size: 14px
@ -971,7 +955,7 @@ body
&:after
content: ""
display: block
background: url("../images/DarkBlueArrow.svg") no-repeat
background: url("../images/arrowblack.svg") no-repeat
width: 14px
height: 17px
background-size: 14px
@ -1684,12 +1668,6 @@ body
.hide-mobile
display: none
.navbar
.navbar-menu
.documentation
display: block
.wy-nav-side
overflow-y: unset
overflow-x: unset
@ -1811,79 +1789,18 @@ body
.wy-breadcrumbs
display: none
.navbar
.navbar-menu
display: none
align-items: start
position: absolute
top: 66px
left: 3
width: 100%
ul
display: flex
flex-direction: column
height: auto
width: 100%
justify-content: space-around
&.shift
left: 0
width: 100%
position: relative
background: $menu-background-color
.search-inline
display: block
width: 100%
margin-top: 110px
.navbar
background: $nav-background-color
.navbar-menu
display: block
font-size: 14px
box-shadow: none
-moz-box-shadow: none
-webkit-box-shadow: none
padding-bottom: 10px
// todo - add color variable
background-color: $menu-background-color
z-index: 2
ul
li
margin-left: 0
a
font-weight: $weight-body
color: $text-dark
&.active
padding-top: 25px
border: none
a
position: relative
font-weight: $weight-body
&:after
content: ""
display: block
background: url("../images/Check.svg") no-repeat
width: 14px
height: 17px
background-size: 14px
position: absolute
left: -20px
top: 3px
width: 100%
margin-top: 110px
.wy-nav-content
margin-top: 110px
.content-menu
display: none
@ -1909,10 +1826,6 @@ body
cursor: default
word-break: break-word
&:hover
&:before
display:none
.wy-table-responsive
overflow: visible
table-layout: fixed
@ -2016,39 +1929,80 @@ body
&:visited
color: $link-visited-color
.btn
&.btn-next, &.btn-prev
min-width: 120px
.rst-footer-buttons
padding: 1rem 0
&.btn-next
margin-left: 20px
a.da-btn
z-index: 0
position: relative
color: $text-dark
text-decoration: none
&.btn-neutral, &.btn-neutral:visited
position: relative
background-color: $blue-lighter !important
border-radius: 20px
&:visited
color: $text-dark
.da-btn-label, &.da-btn-label
font-size: 1.2rem
padding: 0.8rem 2rem
font-weight: $weight-btn
font-family: $btn-font-family
color: $text-dark
text-decoration: none
&:visited
color: $text-dark
padding: 9px 17px 9px 17px
border: none
box-shadow: 2px 3px 6px -3px $gray-lighter
transition: box-shadow .5s
font-weight: $weight-body
img
height: 13px
margin-bottom: 0
position: relative
top: -2px
right: -3px
&.btn-next
margin-left: 20px
padding: 0.8rem 3.4rem
&.btn-prev
img
transform: scaleX(-1)
right: 3px
&.btn-prev
&:hover:before
transform: translate(-10rem, -50%)
&:hover
text-decoration: none
box-shadow: 2px 3px 6px -3px $gray-lighter, 2px 3px 6px -1px $blue-lighter
&:after
right: 8.9rem
top: 1.3rem
transform: scaleX(-1)
&:before
content: ''
position: absolute
right: -2rem
top: 50%
transform: translate(-2rem, -50%)
width: 100%
height: 100%
background-color: $blue-lighter !important
color: $text-dark
z-index: -1
border-radius: 3rem
transition: all 200ms cubic-bezier(0.215, 0.61, 0.355, 1)
&:after
content: ''
position: absolute
width: 0.7rem
height: 0.6rem
right: -0.1rem
top: 50%
transform: translate(0rem, -50%)
background-image: url("../images/arrowblack.svg")
background-size: cover
opacity: 0
transition: all 200ms cubic-bezier(0.215, 0.61, 0.355, 1)
&:hover
text-decoration: none
.da-btn-label, &.da-btn-label
&:before
width: 2.5rem
height: 2.5rem
transform: translate(-1rem, -50%)
&:after
opacity: 1
ul.search
em, .ss360-highlight
@ -2108,40 +2062,3 @@ div.pdf-download
z-index: 20000
+media($mobile)
display: none
a.copybtn.o-tooltip--left
position: absolute
opacity: 1
top: 0.7em
+media($desktop)
left: 1.5em
+media($tablet)
right: 3.5em
&:before
content: ""
background: url("../images/copy-button.svg") no-repeat
position: absolute
vertical-align: top
margin: 0
top: 0
left: 0
height: 20px
width: 20px
&:after
padding: 6px
top: -7px
background: $gray-lighter
color: $text-dark
+media($desktop)
left: 4.5em
+media($tablet)
left: -0.5em
img
display: none

View File

@ -13,20 +13,64 @@
justify-content: space-between
align-items: center
.navbar-menu > ul
display: flex
h1
&:before
padding-left: 0
margin-bottom: initial
display: none
.navbar-menu ul li
padding: 3px 0
margin-left: 20px
font-size: 80%
.navbar-menu
display: flex
justify-content: flex-end
align-items: center
margin-top: -75px
.navbar-menu ul li a
color: $text-dark
.da-menu-item
display: flex
font-weight: 700
font-size: 16px
line-height: 29px
margin-left: 32px
&:hover
color: $text-medium
.da-menu-link
position: relative
text-decoration: none
color: $text-dark
overflow: hidden
&:before
content: ''
position: absolute
width: 100%
bottom: 0
left: 0
height: 2px
background-color: $text-medium
transform: translateX(-101%)
&:after
content: ''
position: absolute
width: 100%
bottom: 0
left: 0
height: 2px
background-color: $text-medium
transition: transform 500ms cubic-bezier(0.645, 0.045, 0.355, 1)
transform: translateX(101%)
&:hover
color: $text-medium
&:before
transform: translateX(0)
transition: 500ms cubic-bezier(0.645, 0.045, 0.355, 1)
&:after
transform: translateX(0)
transition-delay: 490ms
transition-duration: 10ms
+media($tablet)
.navbar
@ -35,3 +79,31 @@
margin-top: 12px
max-width: 141px
+media($mobile)
.wy-nav-content-wrap
.navbar
.navbar-menu
display: none
margin-top: 0
flex-direction: column
align-items: start
position: absolute
top: 66px
left: 64px
width: 100%
height: auto
font-size: 14px
box-shadow: none
-moz-box-shadow: none
-webkit-box-shadow: none
padding-bottom: 10px
.da-menu-item
margin-left: 0
margin-bottom: 3px
&.shift
.navbar
.navbar-menu
display: flex

View File

@ -61,18 +61,6 @@
font-weight: $weight-code
display: block
overflow: auto
pre.literal-block, div[class^='highlight']
overflow-x: auto
// 1px hack otherwise border won't show. lame
margin: 35px 0 35px -76px
+media($desktop-wider)
margin: 35px 0 35px -76px
div[class^='highlight']
padding: 0px
border: none
margin: 0
// Needs 100% width for line highlighting to work properly
div[class^='highlight'] td.code
width: 100%
@ -88,7 +76,7 @@
font-weight: $weight-code
white-space: pre
margin: 0
padding: $base-line-height / 2 $base-line-height / 2
padding: $base-line-height / 2 0
display: block
overflow: auto
& .hll

View File

@ -64,7 +64,14 @@ $sidebar-title-background-color: $table-border-color
// Sphinx highlight color
$highlight-color: $yellow
$base-font-family: "Brown", "Lato", Helvetica,Arial,sans-serif
$custom-font-family: "Brown", "Lato", Helvetica,Arial,sans-serif
$custom-font-family2: "Brown", "Lato", Helvetica,Arial,sans-serif
$code-font-family: "NBInternational", "Source Code Pro", "Courier New", Courier, monospace
$base-font-family: "Lato", Helvetica,Arial,sans-serif
$custom-font-family: "Lato", Helvetica,Arial,sans-serif
$custom-font-family2: "Lato", Helvetica,Arial,sans-serif
$code-font-family: "Source Code Pro", "Courier New", Courier, monospace
$btn-font-family: "Roboto Mono", "Lato", Helvetica,Arial,sans-serif
$weight-title: 400
$weight-body: 300
$weight-bold: 400
$weight-code: 400
$weight-btn: 400

View File

@ -43,8 +43,3 @@ $link-color: $blue
$link-visited-color: $blue
$base-line-height: 1.6em
$weight-title: 400
$weight-body: 300
$weight-bold: 400
$weight-code: 400