chore: colour upgrades
This commit is contained in:
gerjanvangeest
Thijs Louisse
parent
df9ca9fec5
commit
63f93ab51b
6 changed files with 1380 additions and 92 deletions
703
public/styles/lion/layout.css
Normal file
703
public/styles/lion/layout.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
510
public/styles/lion/markdown.css
Normal file
510
public/styles/lion/markdown.css
Normal file
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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`<a href="${item.redirect || item.url}" aria-current=${item.active ? 'page' : ''}
|
||||
>${item.name}</a
|
||||
|
|
@ -100,6 +102,17 @@ export class UIPortalMainNav extends UIBaseElement {
|
|||
return this.getLink(item);
|
||||
},
|
||||
};
|
||||
|
||||
attributeChangedCallback(attrName, oldVal, newVal) {
|
||||
super.attributeChangedCallback(attrName, oldVal, newVal);
|
||||
if (attrName === 'layout-wide') {
|
||||
if (newVal === true || newVal === 'true') {
|
||||
this.setAttribute('data-wide', 'true');
|
||||
} else {
|
||||
this.removeAttribute('data-wide');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
export const tagName = 'ui-portal-main-nav';
|
||||
|
||||
|
|
@ -131,50 +144,14 @@ const baseUINavMarkup = {
|
|||
</label>
|
||||
|
||||
<div id="l1-wrapper" data-part="l1-wrapper">
|
||||
${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 })}
|
||||
</div>
|
||||
</nav>
|
||||
`;
|
||||
},
|
||||
navRootLevel(context, { children, level, hasActiveChild = false }) {
|
||||
navLevel(context, { children, level, hasActiveChild = false }) {
|
||||
const { templates } = context;
|
||||
|
||||
return html`<div
|
||||
data-part="level"
|
||||
data-level="${level}"
|
||||
data-has-active-child="${hasActiveChild}"
|
||||
>
|
||||
<ul data-part="list" data-level="${level}">
|
||||
${children.map(
|
||||
item =>
|
||||
html`<li data-part="listitem" data-level="${level}" ?data-:active="${item.active}">
|
||||
${templates.navItem(context, { item, level })}
|
||||
</li>`,
|
||||
)}
|
||||
</ul>
|
||||
<div class="nav-item-last">
|
||||
<a href="/search" data-part="anchor" data-level="${level}">
|
||||
<lion-icon
|
||||
data-part="icon"
|
||||
data-level="${level}"
|
||||
icon-id="lion-portal:portal:search"
|
||||
></lion-icon>
|
||||
<span>Search</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>`;
|
||||
},
|
||||
navNestedLevel(context, { children, level, hasActiveChild = false }) {
|
||||
const { templates } = context;
|
||||
|
||||
if (!children?.length) {
|
||||
return nothing;
|
||||
}
|
||||
|
||||
return html`<div
|
||||
data-part="level"
|
||||
data-level="${level}"
|
||||
|
|
@ -186,7 +163,7 @@ const baseUINavMarkup = {
|
|||
html`<li data-part="listitem" data-level="${level}" ?data-:active="${item.active}">
|
||||
${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 = {
|
|||
</li>`,
|
||||
)}
|
||||
</ul>
|
||||
${level === 1
|
||||
? html`
|
||||
<div class="nav-item-last">
|
||||
<a href="/search" data-part="anchor" data-level="${level}">
|
||||
<lion-icon
|
||||
data-part="icon"
|
||||
data-level="${level}"
|
||||
icon-id="lion-portal:portal:search"
|
||||
></lion-icon>
|
||||
<span>Search</span>
|
||||
</a>
|
||||
</div>
|
||||
`
|
||||
: nothing}
|
||||
</div>`;
|
||||
},
|
||||
navLevel3(context, { children, level, item }) {
|
||||
const { templates } = context;
|
||||
|
||||
return html`<div>
|
||||
${this.getLink(item)}
|
||||
<ul data-part="list" class="second-level-list">
|
||||
${children.map(
|
||||
child =>
|
||||
html`<li ?data-:active="${child.active}">
|
||||
${templates.navItem(context, { child, level })}
|
||||
</li>`,
|
||||
)}
|
||||
</ul>
|
||||
</div>`;
|
||||
|
||||
// accordion with all the links
|
||||
// return html`<lion-accordion>
|
||||
// <h3 slot="invoker"><button>${item.name}</button></h3>
|
||||
// <div slot="content">
|
||||
// <ul>
|
||||
// ${children.map(
|
||||
// item => html`<li ?data-:active="${item.isActive}">
|
||||
// ${templates.navItem(context, { item, level })}
|
||||
//
|
||||
// </li>`)}
|
||||
// </ul>
|
||||
// </div>
|
||||
// </div>`;
|
||||
},
|
||||
navItem(context, { item, level }) {
|
||||
return html`<a
|
||||
data-part="anchor"
|
||||
|
|
@ -226,16 +246,19 @@ UIPortalMainNav.provideStylesAndMarkup({
|
|||
uiPortalMainNavBurgerCss,
|
||||
css`
|
||||
:host {
|
||||
--_width-l0: var(--size-12);
|
||||
--_width-l1: var(--size-13);
|
||||
height: 100vh;
|
||||
/** Make this the positioning parent of l0 and l1 */
|
||||
position: relative;
|
||||
width: var(--_width-l0);
|
||||
display: block;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
#l1-wrapper {
|
||||
display: flex;
|
||||
:host([data-layout='inline-columns'][data-wide='true']) {
|
||||
width: calc(var(--_width-l0) + var(--_width-l1));
|
||||
}
|
||||
|
||||
:host [data-part='nav'] {
|
||||
|
|
@ -247,21 +270,18 @@ UIPortalMainNav.provideStylesAndMarkup({
|
|||
padding-block-start: var(--size-6);
|
||||
padding-inline: var(--size-2);
|
||||
overflow-y: scroll;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
:host [data-part='level'][data-level='1'] {
|
||||
width: 160px;
|
||||
width: var(--_width-l0);
|
||||
height: 100vh;
|
||||
border-right: 1px solid #ccc;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
:host [data-part='level'][data-level='2'] {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
/**
|
||||
* When a l0 child is active, or a l1 child => 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);
|
||||
}
|
||||
`,
|
||||
],
|
||||
|
|
|
|||
Loading…
Reference in a new issue