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,
"printWidth": 80,
"proseWrap": "never",
"singleQuote": true,
"singleQuote": false,
"trailingComma": "all"
}

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

@ -1,4 +1,25 @@
@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 */
/**
@ -52,6 +73,7 @@
html[data-theme="dark"] {
--ifm-background-color: var(--ifm-color-primary-dark);
--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-background-active: var(--ifm-color-primary);
--ifm-link-color: var(--ifm-color-primary-light);
@ -205,7 +227,10 @@ h1[class^="h1Heading"] {
/* navbar */
.navbar__brand {
height: 3rem;
@include desktop {
height: 4rem;
}
}
.navbar {
@ -220,34 +245,47 @@ h1[class^="h1Heading"] {
padding: 1rem;
}
.navbar__logo {
@include tablet {
height: auto;
}
}
.react-toggle {
margin: 0 0.75rem;
}
.header-discord-link,
.header-github-link {
width: 48px;
height: 48px;
padding: 0;
@include desktop {
width: 48px;
span {
display: none;
}
}
}
.header-github-link {
background: url("/img/github-icon.svg");
background: url("/img/github-icon.svg") no-repeat;
}
.header-discord-link {
background: url("/img/discord-icon.svg");
background: url("/img/discord-icon.svg") no-repeat;
}
.navbar .button svg {
display: none;
}
.navbar__toggle {
filter: brightness(19);
}
/* sidebar */
@media (min-width: 997px) {
@include desktop {
aside[class^="docSidebarContainer"] {
width: 340px;
@ -352,10 +390,12 @@ button[class^="copyButton"] {
.menu {
padding: 0 !important;
@include desktop {
& > ul > li:nth-child(1) > a:nth-child(1) {
padding-top: 2rem;
border-top: 0;
}
}
& > ul > li > a:nth-child(1) {
background-color: var(--ifm-color-primary-light);
@ -393,6 +433,16 @@ button[class^="copyButton"] {
border-radius: 0;
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 & {
padding-left: 2rem;
width: calc(100% - 1rem);
@ -401,19 +451,16 @@ button[class^="copyButton"] {
&.active {
background-color: var(--ifm-color-primary-dark);
color: var(--ifm-color-primary-light);
}
&.active {
font-weight: bold;
}
html[data-theme="dark"] &:hover,
html[data-theme="dark"] &.active {
background-color: var(--ifm-color-secondary);
color: var(--ifm-color-primary-dark);
}
&.menu__link--sublist:hover::after {
filter: invert(100%) sepia(94%) saturate(17%) hue-rotate(223deg)
brightness(104%) contrast(98%);
}
&:focus,
&:active {
background-color: var(--ifm-color-primary-dark);
color: var(--ifm-color-primary-light);
}
&--active:not(.menu__link--sublist) {
@ -443,10 +490,14 @@ button[class^="copyButton"] {
&.menu__link--sublist {
color: var(--ifm-color-primary-dark);
padding-right: 2rem;
&:active,
&:focus {
background-color: var(--ifm-color-primary-light);
}
&:hover {
background-color: var(--ifm-color-primary-light);
background-color: var(--ifm-menu-color-background-hover);
}
html[data-theme="dark"] & {
@ -459,6 +510,7 @@ button[class^="copyButton"] {
background-color: var(--ifm-color-primary);
}
}
}
}
/* docsearch */
@ -473,10 +525,19 @@ button[class^="copyButton"] {
display: block;
width: 20px;
height: 20px;
html[data-theme="dark"] & {
background-color: var(--ifm-color-primary-light);
}
}
.DocSearch-Button {
margin-right: 2rem !important;
@include desktop {
width: 200px;
}
@include desktopWide {
width: 350px;
}
html[data-theme="dark"] & {
background-color: white;
}
}