diff --git a/website/src/components/DocsSidebar.css b/website/src/components/DocsSidebar.css index 7e2a8228..7aa81d19 100644 --- a/website/src/components/DocsSidebar.css +++ b/website/src/components/DocsSidebar.css @@ -7,7 +7,7 @@ * of patent rights can be found in the PATENTS file in the same directory. */ - .DocsSidebar { +.DocsSidebar { height: 100%; width: 450px; padding: 36px; @@ -24,3 +24,14 @@ margin-top: 10px; margin-bottom: 5px; } + +@media only screen and (max-width: 1200px) { + .DocsSidebar { + width: 100%; + padding: 20px; + padding-top: 0px; + border: none; + } +} + + diff --git a/website/src/components/Padded.css b/website/src/components/Padded.css index 5eb9cb2c..831c48f8 100644 --- a/website/src/components/Padded.css +++ b/website/src/components/Padded.css @@ -7,10 +7,16 @@ * of patent rights can be found in the PATENTS file in the same directory. */ - .Padded { +.Padded { width: 100%; max-width: 1200px; padding: 0 50px; margin-left: auto; margin-right: auto; } + +@media only screen and (max-width: 576px) { + .Padded { + padding: 0 20px; + } +} \ No newline at end of file diff --git a/website/src/components/Toolbar.css b/website/src/components/Toolbar.css index e9afaf5d..82b366a0 100644 --- a/website/src/components/Toolbar.css +++ b/website/src/components/Toolbar.css @@ -42,3 +42,18 @@ .Toolbar .ToolbarToggle i { margin-right: 5px; } + +@media only screen and (max-width: 576px) { + .Toolbar { + padding: 10px 5px; + } + + .Toolbar a { + margin: 0 10px; + font-size: 12px; + } + + .Toolbar .ToolbarToggle { + font-size: 12px; + } +} diff --git a/website/src/pages/docs/index.css b/website/src/pages/docs/index.css index a94522f8..ce2875f7 100644 --- a/website/src/pages/docs/index.css +++ b/website/src/pages/docs/index.css @@ -47,4 +47,29 @@ .category a:hover { color: #6BCEBB; text-decoration: underline; -} \ No newline at end of file +} + +@media only screen and (max-width: 576px) { + .docs-landing .heading { + padding-top: 20px; + padding-bottom: 20px; + } + + .docs-landing h1 { + font-size: 32px; + font-weight: 400; + } + + .docs-landing p { + line-height: 160%; + font-size: 14px; + } + + .category { + margin-bottom: 20px; + } + + .category a { + line-height: 200%; + } +} diff --git a/website/src/pages/index.css b/website/src/pages/index.css index ad33fe7d..0cfecfcc 100644 --- a/website/src/pages/index.css +++ b/website/src/pages/index.css @@ -7,7 +7,7 @@ * of patent rights can be found in the PATENTS file in the same directory. */ - .landing-page .hero { +.landing-page .hero { padding-top: 100px; padding-bottom: 100px; display: flex; @@ -145,6 +145,7 @@ font-size: 14px; font-weight: 600; margin-top: 20px; + text-align: center; } footer { @@ -164,3 +165,60 @@ footer a { footer a:hover { color: #6BCEBB; } + +@media only screen and (max-width: 576px) { + .landing-page .hero { + padding-top: 20px; + padding-bottom: 20px; + } + + .landing-page .hero h3 { + font-size: 14px; + } + + .landing-page .hero h1 { + font-size: 32px; + font-weight: 400; + } + + .landing-page .hero p { + line-height: 160%; + font-size: 14px; + } + + .landing-page .about-section { + padding-top: 50px; + padding-bottom: 50px; + } + + .landing-page .about-section h1 { + font-size: 24px; + line-height: 120%; + } + + .landing-page .about-section h3 { + font-size: 14px; + margin-top: 20px; + } + + .landing-page .about-section p { + line-height: 160%; + font-size: 14px; + } + + .landing-page .logo-group .logo { + width: 33%; + padding: 20px; + margin-right: 0px; + } + + .landing-page .logo-group img { + height: auto; + width: 100%; + } + + .landing-page .logo-group .logo h3 { + font-size: 10px; + margin-top: 10px; + } +} diff --git a/website/src/templates/index.css b/website/src/templates/index.css index 5d54afe1..4732abf4 100644 --- a/website/src/templates/index.css +++ b/website/src/templates/index.css @@ -77,4 +77,66 @@ border-radius: 3px; padding-left: 3px; padding-right: 3px; -} \ No newline at end of file +} + +@media only screen and (max-width: 1200px) { + .playground .Playground { + display: none; + } + + .playground controls { + display: none; + } +} + +@media only screen and (max-width: 576px) { + .no-playground .markdown { + padding-top: 15px; + } + + .doc-block .markdown { + padding-bottom: 10px; + } + + .doc-block .overview { + font-size: 12px; + font-weight: 600; + padding-bottom: 10px; + } + + .doc-block h1 { + font-size: 32px; + font-weight: 400; + } + + .doc-block h2 { + font-size: 24px; + margin-top: 20px; + } + + .doc-block h3 { + font-size: 16px; + } + + .doc-block p { + line-height: 160%; + font-size: 14px; + } + + .doc-block li { + font-size: 14px; + margin-bottom: 5px; + } + + .doc-block .prop { + margin-bottom: 10px; + } + + .doc-block pre { + padding: 5px !important; + } + + .doc-block code { + font-size: 12px; + } +}