diff --git a/public/styles/lion/layout.css b/public/styles/lion/layout.css new file mode 100644 index 000000000..65a1595dd --- /dev/null +++ b/public/styles/lion/layout.css @@ -0,0 +1,703 @@ +/* smooth scroll only if there is no preference for reduced motion */ +@media (prefers-reduced-motion: no-preference) { + html { + scroll-behavior: smooth; + } +} + +body { + margin: 0; + font-family: var(--primary-font-family); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + font-size: 16px; + color: var(--text-color); + background-color: var(--page-background); + display: flex; + flex-flow: column; + min-height: 100vh; + max-width: 100vw; + overflow-x: hidden; +} + +* { + box-sizing: border-box; +} + +pre { + overflow: auto; +} + +.logo-link img { + width: 30px; + height: 30px; + vertical-align: middle; +} + +.sr-only { + position: absolute; + left: -10000px; + top: auto; + width: 1px; + height: 1px; + overflow: hidden; +} + +.light-dark-switch { + /* disabled for now */ + display: none !important; +} + +.light-dark-switch::part(button) { + height: 20px; + width: 40px; +} + +.light-dark-switch::part(thumb) { + right: 20px; + border: solid 1px #4d4d4d; + border-radius: 50%; + width: calc(50% - 2px); + height: calc(100% - 2px); + background-color: white; +} + +.light-dark-switch[checked]::part(thumb) { + right: 0; +} + +.light-dark-switch::part(track) { + border-top-left-radius: 10px; + border-bottom-left-radius: 10px; + border-top-right-radius: 10px; + border-bottom-right-radius: 10px; + background-color: #4d4d4d; +} + +.light-dark-switch[checked]::part(track)::before { + content: '🌞'; + position: absolute; + left: 2px; + top: 4px; + line-height: 14px; +} + +.light-dark-switch::part(track)::before { + content: '🌛'; + position: absolute; + left: 22px; + top: 4px; + line-height: 14px; +} + +.light-dark-switch { + margin-right: 50px; + + --generic-switch-focus: 0 0 2px 3px #e63a46; +} + +hr { + border: none; + height: 1px; + background: #ccc; +} + +/** LAYOUT ****************************************************************************************/ +#content-wrapper .content-area, +#main-header .content-area, +#main-footer .content-area { + padding: 0 20px; +} + +#content-wrapper .content-area { + display: flex; +} + +@media screen and (min-width: 1024px) { + #wrapper { + max-width: 1200px; + margin: 0 auto; + } + + .content-area { + max-width: 1200px; + margin: 0 auto; + } +} + +/** HEADER ****************************************************************************************/ +#main-header { + align-items: center; + padding: 20px 0; + top: 0; + position: sticky; + z-index: 100; + background-color: var(--page-background); + box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); +} + +body[data-layout='layout-home'] #main-header { + position: relative; +} + +#main-header .content-area { + display: flex; + justify-content: space-between; + align-items: center; + min-height: 30px; +} + +#main-header a { + text-decoration: none; + color: var(--text-color); + transition: color 0.3s ease-in-out; + font-weight: bold; + order: 2; +} + +#main-header a:hover { + color: var(--secondary-color-lighter); +} + +body[data-layout='layout-home'] #main-header a:hover { + color: inherit; +} + +#mobile-menu-trigger { + color: inherit; + border: none; + width: 20px; + height: 20px; + box-sizing: content-box; + background: none; + padding: 0; +} + +.social-link { + display: none; +} + +#main-header .logo-link { + display: none; + color: var(--primary-color); + order: 0; +} + +#main-header .search { + order: 3; +} + +#main-header .logo-link span { + font-size: 19px; + font-weight: bold; + margin-left: 8px; + vertical-align: middle; +} + +#main-header .light-dark-switch { + display: none; +} + +@media screen and (min-width: 1024px) { + .social-link { + display: block; + width: 30px; + height: 30px; + } + + .social-link img { + width: 100%; + } + + #main-header .content-area > * { + margin-right: 50px; + } + + #main-header .content-area > .social-link { + margin-right: 15px; + } + + #main-header .content-area > *:last-child { + margin-right: 0; + } + + #main-header .search { + order: 1; + } + + #mobile-menu-trigger { + display: none; + } + + #main-header .logo-link { + display: block; + margin-right: auto; + } + + #main-header .light-dark-switch { + display: block; + } + + body[layout='layout-home-background'] #main-header a { + color: var(--contrast-color-light, #fff); + } + + body[layout='layout-home-background'] .social-link { + color: var(--contrast-color-light, #fff); + } +} + +/** SIDEBAR ***************************************************************************************/ +#sidebar { + display: none; /* for loading */ +} + +#sidebar-nav { + background: var(--page-background, #fff); + width: 80%; + height: 100%; + position: fixed; + top: 0; + left: 0; + max-height: 100vh; + overflow: auto; +} + +rocket-navigation .light-dark-switch { + margin-bottom: 10px; +} + +rocket-navigation .light-dark-switch::part(label) { + order: 10; + margin-left: 10px; +} + +rocket-navigation a { + text-decoration: none; + color: var(--text-color); +} + +rocket-navigation a:hover { + text-decoration: underline; +} + +/* line on the left to indicate current page */ +rocket-navigation > ul > li > ul li.current ul li.anchor.current::before { + content: ''; + height: 1.6em; + width: 3px; + background: var(--secondary-color); + position: absolute; + left: 0; + margin-top: -2px; +} + +rocket-navigation li { + padding: 7px 0; +} + +rocket-navigation > ul > li > ul li.current a:not(.anchor) { + font-weight: bold; +} + +rocket-navigation > ul > li > ul > li.current > ul > li > a { + font-weight: normal; +} + +rocket-navigation hr { + margin: 30px -10px 10px -10px; +} + +/* Hide below 3rd level by default */ +rocket-navigation > ul > li > ul > li ul { + display: none; +} + +/* Only show below 3rd level if level above is active/current */ +li.current > ul, +li.active > ul { + display: block; +} + +rocket-navigation > ul > li > a { + color: var(--primary-color); + font-weight: bold; + font-size: 18px; + text-transform: uppercase; +} + +rocket-navigation > ul > li > ul a { + font-weight: normal; +} + +rocket-navigation { + overflow: auto; + display: block; + margin-top: 40px; + padding: 0 20px; +} + +rocket-navigation ul { + padding: 7px 0 10px 15px; + margin: 0; + list-style-type: none; +} + +rocket-navigation > ul { + padding: 0; + position: relative; +} + +#sidebar-nav .logo-link { + display: block; + font-size: 18px; + border-bottom: 1px solid #ccc; + padding: 20px 0; + padding-left: 10px; + text-decoration: none; + + /* same as header */ + box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); + color: var(--text-color); + font-weight: bold; +} + +#sidebar-nav .logo-link span { + padding-left: 10px; +} + +#sidebar-nav li.anchor { + padding: 4px 0; +} + +#sidebar-nav li.anchor a { + position: relative; +} + +#sidebar-nav li.anchor:last-child { + padding: 4px 0 0 0; +} + +li.anchor { + display: none; +} + +li.current > ul > li.anchor { + display: block; +} + +.sidebar-bottom { + padding-bottom: 10px; +} + +@media screen and (min-width: 1024px) { + #sidebar { + position: sticky; + height: 100%; + left: 0; + top: 70px; + overflow-y: auto; + scroll-behavior: smooth; + min-width: 270px; + z-index: 10; + margin-right: 50px; + } + + #sidebar .sidebar-bottom { + display: none; + } + + #sidebar hr { + margin: 30px 0 10px 0; + background: linear-gradient(90deg, rgba(204, 204, 204, 1) 0%, rgba(255, 255, 255, 0) 80%); + } + + #sidebar-nav { + width: 100%; + position: static; + max-height: calc(100vh - 70px); + } + + #sidebar .logo-link { + display: none; + } + + rocket-navigation { + padding: 0 25px 0 0; + } + + body[layout='layout-sidebar'] #sidebar, + body[layout='layout-index'] #sidebar { + display: block; + } +} + +/* for blog detail page */ +rocket-navigation h3 { + font-family: var(--heading-font-family, var(--primary-font-family)); + font-size: 16px; + margin: 0 0 7px 0; +} + +.sidebar-tags h3 { + font-family: var(--heading-font-family, var(--primary-font-family)); + margin-top: 30px; +} + +.sidebar-tags .tags { + display: flex; + flex-wrap: wrap; +} + +.sidebar-tags .tag { + background: var(--sidebar-tag-background-color, #ccc); + color: var(--sidebar-tag-color, var(--text-color)); + margin: 5px 0 0 5px; + padding: 5px 10px; + box-sizing: content-box; + border-radius: 20px; +} + +/** MAIN ******************************************************************************************/ +#content-wrapper { + min-height: 60vh; +} + +body[layout='layout-home'] #content-wrapper { + margin-top: 0; +} + +main { + width: 100%; + position: relative; + + /* makes sure that code blocks don't grow bigger then main => see https://css-tricks.com/preventing-a-grid-blowout/ */ + min-width: 0; + margin-top: 40px; +} + +main > * { + scroll-margin-top: 85px; +} + +@media screen and (min-width: 1024px) { + main { + z-index: 50; + } +} + +.content-footer { + border-top: 1px solid var(--primary-lines-color); + margin-top: 100px; + padding-top: 20px; + text-align: center; +} + +/** CALL TO ACTION ********************************************************************************/ + +.markdown-body .call-to-action-list { + display: flex; + text-align: center; + gap: 8px; + padding: 24px 0; +} + +.markdown-body .call-to-action { + display: inline-block; + text-align: center; + text-transform: uppercase; + font-family: var(--secondary-font-family); + font-size: 16px; + font-weight: bold; + vertical-align: middle; + padding: 8px 24px; + border-radius: 24px; + background: var(--contrast-color-dark); + color: var(--contrast-color-light, #fff); + text-decoration: none; +} + +.markdown-body .call-to-action:hover { + opacity: 0.8; + text-decoration: none; +} + +.markdown-body .call-to-action:focus { + outline: 2px solid var(--contrast-color-dark); + outline-offset: 2px; +} + +.markdown-body .call-to-action:active { + background: var(--primary-color-darker); +} + +/** LAYOUT-INDEX ******************************************************************************************/ +#layout-index-open-navigation { + display: flex; + width: 100%; + align-items: center; + justify-content: center; +} + +#layout-index-open-navigation svg { + width: 20px; + margin-right: 20px; +} + +@media screen and (min-width: 1024px) { + #layout-index-open-navigation { + display: none; + } +} + +/** HOME ******************************************************************************************/ + +.page-background { + display: none; +} + +body[data-layout='layout-home'] main { + padding: 0; + margin-top: 0; +} + +body[data-layout='layout-home'] section { + padding-inline: 48px; +} + +body[data-layout='layout-home'] .banner { + display: flex; + flex-direction: column; + background-color: var(--secondary-color); + padding-block-start: 96px; +} + +body[data-layout='layout-home'] .page-title--container { + display: flex; + flex-direction: column; + align-items: flex-start; + margin-bottom: 32px; +} + +body[data-layout='layout-home'] .page-title { + color: var(--text-color); + font-size: 64px; +} + +body[data-layout='layout-home'] .call-to-action-list { + flex-direction: column; +} + +body[data-layout='layout-home'] .page-logo { + display: block; + margin: 0 auto; + width: 35vw; + max-width: 500px; + align-self: flex-end; +} + +html.dark body[data-layout='layout-home'] .page-logo { + filter: brightness(0.8); +} + +body[data-layout='layout-home'] .page-title, +body[data-layout='layout-home'] .reason-header, +body[data-layout='layout-home'] .page-slogan { + border-bottom: none; + color: var(--text-color); + max-width: 600px; +} + +body[data-layout='layout-home'] .page-slogan { + font-size: 18px; +} + +body[data-layout='layout-home'] .reason-header { + margin-top: 60px; +} + +body[data-layout='layout-home'] .reasons { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + column-gap: 100px; + row-gap: 40px; + color: var(--text-color); +} + +body[data-layout='layout-home'] .markdown-body .call-to-action:nth-child(1) { + margin-left: 0; +} + +@media screen and (min-width: 600px) { + body[data-layout='layout-home'] .banner { + flex-direction: row; + } + + body[data-layout='layout-home'] .call-to-action-list { + flex-direction: row; + } +} + +@media screen and (min-width: 1024px) { + body[data-layout='layout-home'] section { + padding-inline: 96px; + } + + #main-footer { + padding-inline: 96px; + } +} + +/** HOME WITH BACKGROUND **************************************************************************/ +body[layout='layout-home-background'] .page-background { + display: none; +} + +@media screen and (min-width: 1024px) { + body[layout='layout-home-background'] .page-title, + body[layout='layout-home-background'] .page-slogan { + text-align: left; + } + + body[layout='layout-home-background'] .page-title { + margin-top: 110px; + } + + body[layout='layout-home-background'] .page-slogan { + max-width: 500px; + } + + body[layout='layout-home-background'] .markdown-body .call-to-action-list { + text-align: left; + } + + body[layout='layout-home-background'] #main-header { + background: transparent; + border-bottom: none; + } + + body[layout='layout-home-background'] .page-background { + display: block; + position: absolute; + top: -52px; + right: -60px; + z-index: -1; + } + + body[layout='layout-home-background'] .page-logo { + display: none; + } + + body[layout='layout-home-background'] #main-header .logo-link { + color: var(--contrast-color-dark, #000); + } + + body[layout='layout-home-background'] #main-header .logo-link span { + position: absolute; + left: -10000px; + top: auto; + width: 1px; + height: 1px; + overflow: hidden; + } +} diff --git a/public/styles/lion/markdown.css b/public/styles/lion/markdown.css new file mode 100644 index 000000000..209076d03 --- /dev/null +++ b/public/styles/lion/markdown.css @@ -0,0 +1,510 @@ +@font-face { + font-family: octicons-link; + src: url(data:font/woff;charset=utf-8;base64,d09GRgABAAAAAAZwABAAAAAACFQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABEU0lHAAAGaAAAAAgAAAAIAAAAAUdTVUIAAAZcAAAACgAAAAoAAQAAT1MvMgAAAyQAAABJAAAAYFYEU3RjbWFwAAADcAAAAEUAAACAAJThvmN2dCAAAATkAAAABAAAAAQAAAAAZnBnbQAAA7gAAACyAAABCUM+8IhnYXNwAAAGTAAAABAAAAAQABoAI2dseWYAAAFsAAABPAAAAZwcEq9taGVhZAAAAsgAAAA0AAAANgh4a91oaGVhAAADCAAAABoAAAAkCA8DRGhtdHgAAAL8AAAADAAAAAwGAACfbG9jYQAAAsAAAAAIAAAACABiATBtYXhwAAACqAAAABgAAAAgAA8ASm5hbWUAAAToAAABQgAAAlXu73sOcG9zdAAABiwAAAAeAAAAME3QpOBwcmVwAAAEbAAAAHYAAAB/aFGpk3jaTY6xa8JAGMW/O62BDi0tJLYQincXEypYIiGJjSgHniQ6umTsUEyLm5BV6NDBP8Tpts6F0v+k/0an2i+itHDw3v2+9+DBKTzsJNnWJNTgHEy4BgG3EMI9DCEDOGEXzDADU5hBKMIgNPZqoD3SilVaXZCER3/I7AtxEJLtzzuZfI+VVkprxTlXShWKb3TBecG11rwoNlmmn1P2WYcJczl32etSpKnziC7lQyWe1smVPy/Lt7Kc+0vWY/gAgIIEqAN9we0pwKXreiMasxvabDQMM4riO+qxM2ogwDGOZTXxwxDiycQIcoYFBLj5K3EIaSctAq2kTYiw+ymhce7vwM9jSqO8JyVd5RH9gyTt2+J/yUmYlIR0s04n6+7Vm1ozezUeLEaUjhaDSuXHwVRgvLJn1tQ7xiuVv/ocTRF42mNgZGBgYGbwZOBiAAFGJBIMAAizAFoAAABiAGIAznjaY2BkYGAA4in8zwXi+W2+MjCzMIDApSwvXzC97Z4Ig8N/BxYGZgcgl52BCSQKAA3jCV8CAABfAAAAAAQAAEB42mNgZGBg4f3vACQZQABIMjKgAmYAKEgBXgAAeNpjYGY6wTiBgZWBg2kmUxoDA4MPhGZMYzBi1AHygVLYQUCaawqDA4PChxhmh/8ODDEsvAwHgMKMIDnGL0x7gJQCAwMAJd4MFwAAAHjaY2BgYGaA4DAGRgYQkAHyGMF8NgYrIM3JIAGVYYDT+AEjAwuDFpBmA9KMDEwMCh9i/v8H8sH0/4dQc1iAmAkALaUKLgAAAHjaTY9LDsIgEIbtgqHUPpDi3gPoBVyRTmTddOmqTXThEXqrob2gQ1FjwpDvfwCBdmdXC5AVKFu3e5MfNFJ29KTQT48Ob9/lqYwOGZxeUelN2U2R6+cArgtCJpauW7UQBqnFkUsjAY/kOU1cP+DAgvxwn1chZDwUbd6CFimGXwzwF6tPbFIcjEl+vvmM/byA48e6tWrKArm4ZJlCbdsrxksL1AwWn/yBSJKpYbq8AXaaTb8AAHja28jAwOC00ZrBeQNDQOWO//sdBBgYGRiYWYAEELEwMTE4uzo5Zzo5b2BxdnFOcALxNjA6b2ByTswC8jYwg0VlNuoCTWAMqNzMzsoK1rEhNqByEyerg5PMJlYuVueETKcd/89uBpnpvIEVomeHLoMsAAe1Id4AAAAAAAB42oWQT07CQBTGv0JBhagk7HQzKxca2sJCE1hDt4QF+9JOS0nbaaYDCQfwCJ7Au3AHj+LO13FMmm6cl7785vven0kBjHCBhfpYuNa5Ph1c0e2Xu3jEvWG7UdPDLZ4N92nOm+EBXuAbHmIMSRMs+4aUEd4Nd3CHD8NdvOLTsA2GL8M9PODbcL+hD7C1xoaHeLJSEao0FEW14ckxC+TU8TxvsY6X0eLPmRhry2WVioLpkrbp84LLQPGI7c6sOiUzpWIWS5GzlSgUzzLBSikOPFTOXqly7rqx0Z1Q5BAIoZBSFihQYQOOBEdkCOgXTOHA07HAGjGWiIjaPZNW13/+lm6S9FT7rLHFJ6fQbkATOG1j2OFMucKJJsxIVfQORl+9Jyda6Sl1dUYhSCm1dyClfoeDve4qMYdLEbfqHf3O/AdDumsjAAB42mNgYoAAZQYjBmyAGYQZmdhL8zLdDEydARfoAqIAAAABAAMABwAKABMAB///AA8AAQAAAAAAAAAAAAAAAAABAAAAAA==) + format('woff'); +} + +.markdown-body .octicon { + display: inline-block; + fill: currentColor; + vertical-align: text-bottom; +} + +.markdown-body .anchor { + float: left; + line-height: 1; + margin-left: -20px; + padding-right: 4px; +} + +.markdown-body .anchor:focus { + outline: none; +} + +.markdown-body h1 .octicon-link, +.markdown-body h2 .octicon-link, +.markdown-body h3 .octicon-link, +.markdown-body h4 .octicon-link, +.markdown-body h5 .octicon-link, +.markdown-body h6 .octicon-link { + color: var(--markdown-octicon-link, #1b1f23); + vertical-align: middle; + visibility: hidden; +} + +.markdown-body h1:hover .anchor, +.markdown-body h2:hover .anchor, +.markdown-body h3:hover .anchor, +.markdown-body h4:hover .anchor, +.markdown-body h5:hover .anchor, +.markdown-body h6:hover .anchor { + text-decoration: none; +} + +.markdown-body h1:focus-within .anchor .octicon-link, +.markdown-body h2:focus-within .anchor .octicon-link, +.markdown-body h3:focus-within .anchor .octicon-link, +.markdown-body h4:focus-within .anchor .octicon-link, +.markdown-body h5:focus-within .anchor .octicon-link, +.markdown-body h6:focus-within .anchor .octicon-link, +.markdown-body h1:hover .anchor .octicon-link, +.markdown-body h2:hover .anchor .octicon-link, +.markdown-body h3:hover .anchor .octicon-link, +.markdown-body h4:hover .anchor .octicon-link, +.markdown-body h5:hover .anchor .octicon-link, +.markdown-body h6:hover .anchor .octicon-link { + visibility: visible; +} + +.markdown-body { + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + color: var(--markdown-body, --page-background); + line-height: 1.5; + font-family: var(--primary-font-family); + font-size: 16px; + line-height: 1.5; + word-wrap: break-word; +} + +.markdown-body details { + display: block; +} + +.markdown-body summary { + display: list-item; +} + +.markdown-body a { + background-color: transparent; +} + +.markdown-body a:active, +.markdown-body a:hover { + outline-width: 0; +} + +.markdown-body strong { + font-weight: inherit; + font-weight: bolder; +} + +.markdown-body img { + border-style: none; +} + +.markdown-body code, +.markdown-body kbd, +.markdown-body pre { + font-family: monospace, monospace; + font-size: 1em; +} + +.markdown-body hr { + box-sizing: content-box; + height: 0; + overflow: visible; +} + +.markdown-body input { + font: inherit; + margin: 0; +} + +.markdown-body input { + overflow: visible; +} + +.markdown-body input[type='checkbox'] { + box-sizing: border-box; + padding: 0; +} + +.markdown-body * { + box-sizing: border-box; +} + +.markdown-body input { + font-family: inherit; + font-size: inherit; + line-height: inherit; +} + +.markdown-body a { + color: var(--markdown-link-color, #0366d6); + text-decoration: none; +} + +.markdown-body a:hover { + text-decoration: underline; +} + +.markdown-body strong { + font-weight: 600; +} + +.markdown-body hr { + background: transparent; + border: 0; + border-bottom: 1px solid #dfe2e5; + height: 0; + margin: 15px 0; + overflow: hidden; +} + +.markdown-body hr::before { + content: ''; + display: table; +} + +.markdown-body hr::after { + clear: both; + content: ''; + display: table; +} + +.markdown-body table { + border-collapse: collapse; + border-spacing: 0; +} + +.markdown-body td, +.markdown-body th { + padding: 0; +} + +.markdown-body details summary { + cursor: pointer; +} + +.markdown-body h1, +.markdown-body h2, +.markdown-body h3, +.markdown-body h4, +.markdown-body h5, +.markdown-body h6 { + font-family: var(--heading-font-family, var(--primary-font-family)); + margin-bottom: 0; + margin-top: 0; +} + +.markdown-body h1 { + font-size: 32px; +} + +.markdown-body h1, +.markdown-body h2 { + font-weight: 600; +} + +.markdown-body h2 { + font-size: 24px; +} + +.markdown-body h3 { + font-size: 20px; +} + +.markdown-body h3, +.markdown-body h4 { + font-weight: 600; +} + +.markdown-body h4 { + font-size: 16px; +} + +.markdown-body h5 { + font-size: 14px; +} + +.markdown-body h5, +.markdown-body h6 { + font-weight: 600; +} + +.markdown-body h6 { + font-size: 12px; +} + +.markdown-body p { + margin-bottom: 10px; + margin-top: 0; +} + +.markdown-body blockquote { + margin: 0; +} + +.markdown-body ol, +.markdown-body ul { + margin-bottom: 0; + margin-top: 0; + padding-left: 0; +} + +.markdown-body ol ol, +.markdown-body ul ol { + list-style-type: lower-roman; +} + +.markdown-body ol ol ol, +.markdown-body ol ul ol, +.markdown-body ul ol ol, +.markdown-body ul ul ol { + list-style-type: lower-alpha; +} + +.markdown-body dd { + margin-left: 0; +} + +.markdown-body code, +.markdown-body pre { + font-family: var(--monospace-font-family); + font-size: 12px; +} + +.markdown-body pre { + margin-bottom: 0; + margin-top: 0; +} + +.markdown-body input::-webkit-inner-spin-button, +.markdown-body input::-webkit-outer-spin-button { + -webkit-appearance: none; + appearance: none; + margin: 0; +} + +.markdown-body::before { + content: ''; + display: table; +} + +.markdown-body::after { + clear: both; + content: ''; + display: table; +} + +.markdown-body > :first-child { + margin-top: 0 !important; +} + +.markdown-body > :last-child { + margin-bottom: 0 !important; +} + +.markdown-body a:not([href]) { + color: inherit; + text-decoration: none; +} + +.markdown-body blockquote, +.markdown-body dl, +.markdown-body ol, +.markdown-body p, +.markdown-body pre, +.markdown-body table, +.markdown-body ul { + margin-bottom: 16px; + margin-top: 0; +} + +.markdown-body hr { + background-color: var(--markdown-divider-color, #e1e4e8); + border: 0; + height: 0.25em; + margin: 24px 0; + padding: 0; +} + +.markdown-body blockquote { + border-left: 0.25em solid var(--markdown-blockquote-border-color, #dfe2e5); + color: var(--markdown-blockquote-color, #6a737d); + padding: 0 1em; +} + +.markdown-body blockquote > :first-child { + margin-top: 0; +} + +.markdown-body blockquote > :last-child { + margin-bottom: 0; +} + +.markdown-body kbd { + background-color: var(--markdown-kbd-background-color, #fafbfc); + border: 1px solid var(--markdown-kbd-border-color, #c6cbd1); + border-bottom-color: var(--markdown-kbd-border-bottom-color, #959da5); + border-radius: 3px; + box-shadow: inset 0 -1px 0 var(--markdown-kbd-border-bottom-color, #959da5); + color: var(--markdown-kbd-color, #444d56); + display: inline-block; + font-size: 11px; + line-height: 10px; + padding: 3px 5px; + vertical-align: middle; +} + +.markdown-body h1, +.markdown-body h2, +.markdown-body h3, +.markdown-body h4, +.markdown-body h5, +.markdown-body h6 { + color: var(--text-color); + font-weight: 600; + line-height: 1.25; + margin-bottom: 1rem; + margin-top: 1.5rem; +} + +.markdown-body h1 { + font-size: 2em; +} + +.markdown-body h1, +.markdown-body h2 { + border-bottom: 1px solid var(--primary-lines-color); + padding-bottom: 0.3em; +} + +.markdown-body h2 { + font-size: 1.5em; + margin-top: 3rem; +} + +.markdown-body h3 { + font-size: 1.25em; +} + +.markdown-body h4 { + font-size: 1em; +} + +.markdown-body h5 { + font-size: 0.875em; +} + +.markdown-body h6 { + color: var(--markdown-heading-color-6, #6a737d); + font-size: 0.85em; +} + +.markdown-body ol, +.markdown-body ul { + padding-left: 2em; +} + +.markdown-body ol ol, +.markdown-body ol ul, +.markdown-body ul ol, +.markdown-body ul ul { + margin-bottom: 0; + margin-top: 0; +} + +.markdown-body li { + word-wrap: break-all; +} + +.markdown-body li > p { + margin-top: 16px; +} + +.markdown-body li + li { + margin-top: 0.25em; +} + +.markdown-body dl { + padding: 0; +} + +.markdown-body dl dt { + font-size: 1em; + font-style: italic; + font-weight: 600; + margin-top: 16px; + padding: 0; +} + +.markdown-body dl dd { + margin-bottom: 16px; + padding: 0 16px; +} + +.markdown-body table { + display: block; + overflow: auto; + width: 100%; +} + +.markdown-body table th { + font-weight: 600; +} + +.markdown-body table td, +.markdown-body table th { + border: 1px solid var(--markdown-table-border-color, #dfe2e5); + padding: 6px 13px; +} + +.markdown-body table tr { + background-color: var(--markdown-table-background-color, #fff); + border-top: 1px solid var(--markdown-table-border-color, #c6cbd1); +} + +.markdown-body table tr:nth-child(2n) { + background-color: var(--markdown-table-row-odd-background-color, #f6f8fa); +} + +.markdown-body img { + box-sizing: content-box; + max-width: 100%; + width: 100%; + height: auto; +} + +.markdown-body img[align='right'] { + padding-left: 20px; +} + +.markdown-body img[align='left'] { + padding-right: 20px; +} + +/***************** + */ + +.astro-code { + color: var(--markdown-syntax-color, #393a34); + font-family: + SFMono-Regular, + Consolas, + Liberation Mono, + Menlo, + monospace; + direction: ltr; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + tab-size: 4; + hyphens: none; + margin-bottom: 16px; + padding: 16px; + overflow: auto; + font-size: 85%; + line-height: 1.45; + background-color: var(--markdown-syntax-background-color, #f6f8fa); + border-radius: 3px; +} + +.language-autohotkey .token.selector { + color: var(--markdown-syntax-hotkey-selector-color, #d73a49); +} + +.language-autohotkey .token.keyword { + color: var(--markdown-syntax-keyword-color, #22863a); +} diff --git a/public/styles/lion/variables.css b/public/styles/lion/variables.css index 1fb9cc4f3..b1352afe6 100644 --- a/public/styles/lion/variables.css +++ b/public/styles/lion/variables.css @@ -1,14 +1,18 @@ html { /* Base colors */ - --dandilion-100: #fff6cc; - --dandilion-300: #ffe366; - --dandilion-500: #ffd100; - --dandilion-700: #997d00; - --dandilion-900: #332a00; + --dandelion-100: #fff6cc; + --dandelion-300: #ffe366; + --dandelion-500: #ffd100; + --dandelion-700: #997d00; + --dandelion-900: #332a00; + --blue-100: #b4c1ff; + --blue-300: #8197ff; --blue-500: #002eff; + --blue-700: #0025cc; + --blue-900: #0020b3; - --green-500: #00ff51; + --green-700: #8bcc00; --black: #080700; --white: #ffffff; @@ -17,27 +21,33 @@ html { --gray-300: #b3b3b3; --gray-500: #808080; --gray-700: #4d4d4d; + --gray-800: #282828; --gray-900: #1a1a1a; /* Alias tokens */ - --primary-color: var(--dandilion-700); - --secondary-color: var(--blue-500); - --primary-color-lighter: var(--dandilion-300); - --primary-color-darker: var(--dandilion-700); - --primary-text-color: var(--black); - --primary-icon-color: var(--dandilion-900); - --primary-lines-color: var(--gray-300); + --primary-color: var(--blue-500); + --primary-color-lighter: var(--blue-300); + --primary-color-darker: var(--blue-700); + --secondary-color: var(--dandelion-500); + --secondary-color-lighter: var(--dandelion-300); + --secondary-color-darker: var(--dandelion-700); + --neutral-color: var(--gray-500); + --neutral-color-lightest: var(--gray-100); + --neutral-color-lighter: var(--gray-300); + --neutral-color-darker: var(--gray-700); + --neutral-color-darkest: var(--gray-900); + --primary-icon-color: var(--dandelion-900); + --primary-lines-color: var(--gray-100); --primary-text-inverse-color: var(--gray-100); - --markdown-link-color: var(--blue-500); /* Contrast colors */ --contrast-color-light: var(--white); - --contrast-color-dark: var(--dandilion-900); + --contrast-color-dark: var(--dandelion-900); /* background-colors */ --page-background: var(--white); --secondary-background: var(--gray-100); - --footer-background: rgba(0, 0, 0, 0.1); + --footer-background: var(--neutral-color-lighter); /* typography */ --text-color: var(--black); @@ -47,15 +57,36 @@ html { 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', 'Courier', monospace; /* controls */ - --switch-unselected-color: var(--gray-500); - --switch-selected-color: var(--green-500); + --switch-unselected-color: var(--neutral-color); + --switch-selected-color: var(--green-700); + + --sidebar-tag-background-color: var(--secondary-color); + --sidebar-tag-color: var(--text-color); + + /* markdown */ + --markdown-body: var(--text-color); + --markdown-link-color: var(--primary-color); + --markdown-octicon-link: var(--primary-color); + --markdown-syntax-background-color: var(--neutral-color); + --markdown-link-color: var(--primary-color); + --markdown-blockquote-color: var(--secondary-color-darker); } html.dark { - --primary-color: #e63946; - --primary-color-lighter: #e25761; - --primary-color-darker: #a22831; - --primary-text-color: var(--white); + --primary-color: var(--blue-100); + --primary-color-lighter: var(--blue-300); + --primary-color-darker: var(--blue-100); + --secondary-color: var(--dandelion-700); + --secondary-color-lighter: var(--dandelion-900); + --secondary-color-darker: var(--dandelion-500); + --neutral-color: var(--gray-700); + --neutral-color-lightest: var(--gray-900); + --neutral-color-lighter: var(--gray-800); + --neutral-color-darker: var(--gray-500); + --neutral-color-darkest: var(--gray-300); + + --text-color: var(--white); + --primary-icon-color: var(--dandelion-100); --primary-text-inverse-color: #2c3e50; /* Contrast colors */ @@ -63,19 +94,11 @@ html.dark { --contrast-color-dark: #1d3557; /* background-colors */ - --page-background: #333; - --footer-background: #4f4f4f; - + --page-background: var(--gray-700); + --footer-background: var(--gray-900); /* typography */ --text-color: white; /* controls */ --switch-unselected-color: #808080; - --switch-selected-color: #42b983; - - /* markdown */ - --markdown-octicon-link: white; - --markdown-syntax-background-color: #a0a0a0; - --markdown-link-color: #fb7881; - --markdown-blockquote-color: #c9e3ff; } diff --git a/src/components/ui-portal-footer.js b/src/components/ui-portal-footer.js index 3dedad3e5..63c483eb7 100644 --- a/src/components/ui-portal-footer.js +++ b/src/components/ui-portal-footer.js @@ -26,6 +26,10 @@ export class UIPortalFooter extends LitElement { } @media screen and (min-width: 1024px) { + #main-footer { + padding-inline: 96px; + } + #footer-menu .content-area { flex-direction: row; text-align: left; @@ -39,10 +43,14 @@ export class UIPortalFooter extends LitElement { #footer-menu a { text-decoration: none; - color: var(--primary-text-color); + color: var(--text-color); padding: 5px 0; display: block; } + + #footer-menu a:hover { + text-decoration: underline; + } `, ]; diff --git a/src/components/ui-portal-inpage-nav.js b/src/components/ui-portal-inpage-nav.js index 40261517c..49eca9136 100644 --- a/src/components/ui-portal-inpage-nav.js +++ b/src/components/ui-portal-inpage-nav.js @@ -26,7 +26,7 @@ export class UIPortalInpageNav extends LitElement { list-style-type: none; margin: 0; padding: 0 0 0 20px; - border-left: #d9d9d9 solid 1px; + border-left: 1px solid var(--primary-lines-color); } [data-part='anchor'] { @@ -35,6 +35,10 @@ export class UIPortalInpageNav extends LitElement { font-size: 14px; } + [data-part='anchor']:hover { + text-decoration: underline; + } + h4 { font-weight: normal; } diff --git a/src/components/ui-portal-main-nav.js b/src/components/ui-portal-main-nav.js index e2dda2d9e..a10ceca92 100644 --- a/src/components/ui-portal-main-nav.js +++ b/src/components/ui-portal-main-nav.js @@ -20,6 +20,7 @@ try { export class UIPortalMainNav extends UIBaseElement { static properties = { navData: { type: Array, attribute: 'nav-data' }, + layoutWide: { type: Boolean, attribute: 'layout-wide' }, // true or false }; constructor() { @@ -28,6 +29,7 @@ export class UIPortalMainNav extends UIBaseElement { * @type {NavItem[]} */ this.navData = []; + this.layoutWide = false; this.getLink = item => html`${item.name}
- ${templates.navRootLevel(context, { children: data.navData, level: 1 })} - ${templates.navNestedLevel(context, { - children: data.navData.find(item => item.active)?.children, - level: 2, - })} + ${templates.navLevel(context, { children: data.navData, level: 1 })}
`; }, - navRootLevel(context, { children, level, hasActiveChild = false }) { + navLevel(context, { children, level, hasActiveChild = false }) { const { templates } = context; - return html`
- -
- - - Search - -
-
`; - }, - navNestedLevel(context, { children, level, hasActiveChild = false }) { - const { templates } = context; - - if (!children?.length) { - return nothing; - } - return html`
${templates.navItem(context, { item, level })} ${item.children?.length - ? templates.navNestedLevel(context, { + ? templates.navLevel(context, { level: level + 1, children: item.children, hasActiveChild: item.hasActiveChild, @@ -195,8 +172,51 @@ const baseUINavMarkup = { `, )} + ${level === 1 + ? html` +
+ + + Search + +
+ ` + : nothing}
`; }, + navLevel3(context, { children, level, item }) { + const { templates } = context; + + return html`
+ ${this.getLink(item)} + +
`; + + // accordion with all the links + // return html` + //

+ //
+ // + //
+ // `; + }, navItem(context, { item, level }) { return html` open correct l1 */ @@ -272,6 +292,16 @@ UIPortalMainNav.provideStylesAndMarkup({ display: none; } + :host [data-part='level'][data-level='2'] { + width: var(--_width-l1); + position: absolute; + left: var(--_width-l0); + top: 0; + /* padding-inline: var(--size-6); */ + border-right: 1px solid #ccc; + height: 100%; + } + :host [data-part='list'] { list-style-type: none; margin: 4px; @@ -290,7 +320,7 @@ UIPortalMainNav.provideStylesAndMarkup({ padding-inline: var(--size-6); } - :host [data-part='anchor'][data-level='2'][aria-current='page'] { + :host [data-part='anchor'][data-level='2'][aria-current='page']:not(:last-child) { padding-block: var(--size-2); } @@ -310,7 +340,7 @@ UIPortalMainNav.provideStylesAndMarkup({ :host [data-part='anchor'] { display: block; - color: var(--primary-text-color); + color: var(--text-color); text-decoration: inherit; font-size: 1rem; fill: var(--primary-icon-color); @@ -318,15 +348,17 @@ UIPortalMainNav.provideStylesAndMarkup({ border-radius: var(--radius-4); } - :host [data-part='anchor'][aria-current='page'] { + :host [data-part='anchor'][aria-current='page'][data-level='1'], + :host [data-part='anchor'][aria-current='page'][data-level='3']:last-child, + :host [data-part='anchor'][aria-current='page'][data-level='4'] { font-weight: bold; - background-color: var(--primary-color); + background-color: var(--secondary-color); } :host [data-part='anchor']:hover { text-decoration: underline; text-underline-offset: 0.3em; - background-color: var(--primary-color); + background-color: var(--secondary-color-lighter); } :host [data-part='anchor']:focus { @@ -339,7 +371,15 @@ UIPortalMainNav.provideStylesAndMarkup({ } :host [data-part='level'][data-level='2'] { - color: var(--primary-text-color, #333); + display: none; + } + + :host [data-\\:active] [data-part='level'][data-level='2'] { + display: block; + } + + :host [data-part='level'][data-level='2'] { + color: var(--text-color, #333); /* 14px/Regular */ font-family: 'ING Me'; @@ -352,13 +392,13 @@ UIPortalMainNav.provideStylesAndMarkup({ :host [data-part='listitem'][data-level='2'][data-\\:active] { border-radius: var(--radius-4); - background: var(--primary-color, #f0f0f0); - padding-block-end: 12px; + background: var(--neutral-color-lightest); margin-block: 6px; } :host [data-part='level'][data-level='3'] { overflow: hidden; + padding-block-end: 12px; } :host [data-part='anchor'][data-level='3'], @@ -370,8 +410,8 @@ UIPortalMainNav.provideStylesAndMarkup({ font-weight: 400; line-height: 20px; /* 142.857% */ text-decoration: none; - margin-left: var(--size-8); - padding-inline: var(--size-2); + margin-left: var(--size-7); + padding-inline: var(--size-3); } :host [data-part='anchor'][data-level='3'][aria-current='page'], @@ -385,7 +425,7 @@ UIPortalMainNav.provideStylesAndMarkup({ } :host [data-part='list'][data-level='4'] { - margin-left: var(--size-4); + margin-left: var(--size-3); } `, ],