kjuulh/dagger
Archived
1
0
Fork 0
Code Issues 1 Pull Requests 1 Projects Releases Wiki Activity

docs: 🐛 fix css for mobile devices

Browse Source 
Signed-off-by: jffarge <jf@dagger.io>
This commit is contained in:
jffarge 2021-08-25 09:38:34 +02:00
parent a8b3d9325d
commit 2c7b8575ca
2 changed files with 117 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
website/.prettierrc
View File

@ -4,6 +4,6 @@
"jsxBracketSameLine": true, "jsxBracketSameLine": true,
"printWidth": 80, "printWidth": 80,
"proseWrap": "never", "proseWrap": "never",
"singleQuote": true, "singleQuote": false,
"trailingComma": "all" "trailingComma": "all"
} }

171
website/src/css/custom.scss
View File

@ -1,4 +1,25 @@
@use "sass:meta"; @use "sass:meta";
$tablet-width: 996px;
$desktop-width: 997px;
$desktop-xl-width: 1160px;
@mixin tablet {
@media (max-width: #{$tablet-width}) {
@content;
}
}
@mixin desktop {
@media (min-width: #{$desktop-width}) {
@content;
}
}
@mixin desktopWide {
@media (min-width: #{$desktop-xl-width}) {
@content;
}
}
/* stylelint-disable docusaurus/copyright-header */ /* stylelint-disable docusaurus/copyright-header */
/** /**
@ -52,6 +73,7 @@
html[data-theme="dark"] { html[data-theme="dark"] {
--ifm-background-color: var(--ifm-color-primary-dark); --ifm-background-color: var(--ifm-color-primary-dark);
--ifm-navbar-background-color: var(--ifm-color-primary-darker); --ifm-navbar-background-color: var(--ifm-color-primary-darker);
--ifm-menu-color: var(--ifm-color-primary-light);
--ifm-menu-color-active: var(--ifm-color-primary-light); --ifm-menu-color-active: var(--ifm-color-primary-light);
--ifm-menu-color-background-active: var(--ifm-color-primary); --ifm-menu-color-background-active: var(--ifm-color-primary);
--ifm-link-color: var(--ifm-color-primary-light); --ifm-link-color: var(--ifm-color-primary-light);
@ -205,7 +227,10 @@ h1[class^="h1Heading"] {
/* navbar */ /* navbar */
.navbar__brand { .navbar__brand {
height: 4rem; height: 3rem;
@include desktop {
height: 4rem;
}
} }
.navbar { .navbar {
@ -220,34 +245,47 @@ h1[class^="h1Heading"] {
padding: 1rem; padding: 1rem;
} }
.navbar__logo {
@include tablet {
height: auto;
}
}
.react-toggle { .react-toggle {
margin: 0 0.75rem; margin: 0 0.75rem;
} }
.header-discord-link, .header-discord-link,
.header-github-link { .header-github-link {
width: 48px;
height: 48px; height: 48px;
padding: 0; padding: 0;
span {
display: none; @include desktop {
width: 48px;
span {
display: none;
}
} }
} }
.header-github-link { .header-github-link {
background: url("/img/github-icon.svg"); background: url("/img/github-icon.svg") no-repeat;
} }
.header-discord-link { .header-discord-link {
background: url("/img/discord-icon.svg"); background: url("/img/discord-icon.svg") no-repeat;
} }
.navbar .button svg { .navbar .button svg {
display: none; display: none;
} }
.navbar__toggle {
filter: brightness(19);
}
/* sidebar */ /* sidebar */
@media (min-width: 997px) { @include desktop {
aside[class^="docSidebarContainer"] { aside[class^="docSidebarContainer"] {
width: 340px; width: 340px;
@ -352,9 +390,11 @@ button[class^="copyButton"] {
.menu { .menu {
padding: 0 !important; padding: 0 !important;
& > ul > li:nth-child(1) > a:nth-child(1) { @include desktop {
padding-top: 2rem; & > ul > li:nth-child(1) > a:nth-child(1) {
border-top: 0; padding-top: 2rem;
border-top: 0;
}
} }
& > ul > li > a:nth-child(1) { & > ul > li > a:nth-child(1) {
@ -393,6 +433,16 @@ button[class^="copyButton"] {
border-radius: 0; border-radius: 0;
padding: 1rem; padding: 1rem;
@include tablet {
display: flex;
justify-content: center;
font-family: "Poppins", sans-serif;
font-size: 1rem;
font-style: normal;
font-weight: 700;
line-height: 1;
}
& + .menu__list & { & + .menu__list & {
padding-left: 2rem; padding-left: 2rem;
width: calc(100% - 1rem); width: calc(100% - 1rem);
@ -401,62 +451,64 @@ button[class^="copyButton"] {
&.active { &.active {
background-color: var(--ifm-color-primary-dark); background-color: var(--ifm-color-primary-dark);
color: var(--ifm-color-primary-light); color: var(--ifm-color-primary-light);
}
&.active {
font-weight: bold; font-weight: bold;
} }
html[data-theme="dark"] &:hover, &:focus,
html[data-theme="dark"] &.active { &:active {
background-color: var(--ifm-color-secondary); background-color: var(--ifm-color-primary-dark);
color: var(--ifm-color-primary-dark); color: var(--ifm-color-primary-light);
} }
&.menu__link--sublist:hover::after { &--active:not(.menu__link--sublist) {
filter: invert(100%) sepia(94%) saturate(17%) hue-rotate(223deg) background-color: var(--ifm-color-primary);
brightness(104%) contrast(98%); color: var(--ifm-color-primary-light);
html[data-theme="dark"] & {
background-color: var(--ifm-menu-color-background-hover);
color: var(--ifm-color-primary);
}
} }
}
&--active:not(.menu__link--sublist) { html[data-theme="dark"] &,
background-color: var(--ifm-color-primary); html[data-theme="dark"] &:not([href]),
color: var(--ifm-color-primary-light); html[data-theme="dark"] &:focus {
color: var(--ifm-color-primary-light);
}
html[data-theme="dark"] & { html[data-theme="dark"] &:not(.menu__link--active):hover {
background-color: var(--ifm-menu-color-background-hover); background-color: var(--ifm-color-primary);
}
html[data-theme="dark"] &:not(.menu__link--active):active {
background-color: var(--ifm-color-primary-light);
color: var(--ifm-color-primary); color: var(--ifm-color-primary);
} }
}
html[data-theme="dark"] &, &.menu__link--sublist {
html[data-theme="dark"] &:not([href]), color: var(--ifm-color-primary-dark);
html[data-theme="dark"] &:focus {
color: var(--ifm-color-primary-light);
}
html[data-theme="dark"] &:not(.menu__link--active):hover { &:active,
background-color: var(--ifm-color-primary); &:focus {
} background-color: var(--ifm-color-primary-light);
}
html[data-theme="dark"] &:not(.menu__link--active):active { &:hover {
background-color: var(--ifm-color-primary-light); background-color: var(--ifm-menu-color-background-hover);
color: var(--ifm-color-primary); }
}
&.menu__link--sublist { html[data-theme="dark"] & {
color: var(--ifm-color-primary-dark); color: var(--ifm-color-primary-light);
padding-right: 2rem; }
html[data-theme="dark"] &:active,
&:hover { html[data-theme="dark"] &:focus,
background-color: var(--ifm-color-primary-light); html[data-theme="dark"] &:hover {
} color: var(--ifm-color-primary-light);
background-color: var(--ifm-color-primary);
html[data-theme="dark"] & { }
color: var(--ifm-color-primary-light);
}
html[data-theme="dark"] &:active,
html[data-theme="dark"] &:focus,
html[data-theme="dark"] &:hover {
color: var(--ifm-color-primary-light);
background-color: var(--ifm-color-primary);
} }
} }
} }
@ -473,10 +525,19 @@ button[class^="copyButton"] {
display: block; display: block;
width: 20px; width: 20px;
height: 20px; height: 20px;
}
}
html[data-theme="dark"] & { .DocSearch-Button {
background-color: var(--ifm-color-primary-light); margin-right: 2rem !important;
} @include desktop {
width: 200px;
}
@include desktopWide {
width: 350px;
}
html[data-theme="dark"] & {
background-color: white;
} }
} }