From 79fd72022b91af47298738eae6beb7736690a595 Mon Sep 17 00:00:00 2001 From: hensm Date: Fri, 26 Jul 2019 08:30:47 +0100 Subject: [PATCH] Add responsive site design --- docs/index.css | 89 ++++++++++++++++++++++++++++++++++++++++++++++--- docs/index.html | 8 ++--- 2 files changed, 87 insertions(+), 10 deletions(-) diff --git a/docs/index.css b/docs/index.css index 32a4a90..ffd055c 100755 --- a/docs/index.css +++ b/docs/index.css @@ -44,10 +44,9 @@ body { .container { display: grid; - font-size: 15px; + font-size: 1.5rem; margin: auto; margin-top: initial; - min-width: 480px; grid-row-gap: 2rem; grid-template-areas: "header preview" @@ -81,7 +80,7 @@ body { .site-header__subtitle { background-color: var(--text-color-secondary); color: var(--page-color); - font-size: 2.75rem; + font-size: 2.5rem; padding: 0.25rem 1rem; margin-right: -1rem; } @@ -95,7 +94,7 @@ body { grid-area: description; padding-right: 4rem; text-align: right; - width: 45rem; + max-width: 45rem; } .description__disclaimer { color: var(--text-color-secondary); @@ -295,7 +294,8 @@ body { .faq__content code { background-color: var(--grey-90-a10); border-radius: 3px; - white-space: nowrap; + vertical-align: top; + word-break: break-all; } @@ -331,3 +331,82 @@ body { :root.theme-dark .links__link-github img { filter: invert(1); } + + +@media (max-width: 700px) { + .container { + align-items: center; + display: flex; + flex-direction: column; + gap: 0; + padding: initial; + } + + .site-content > section { + padding: 2rem; + } + + .site-header, + .preview--fg { + order: -1; + } + + .preview--bg { + display: none; + } + + .preview--fg { + align-self: center; + margin: initial; + margin-bottom: -50px; + max-width: 100vw; + object-fit: cover; + overflow: visible; + transform: initial !important; + } + + .site-header { + align-items: center; + align-self: center; + height: initial; + margin-top: 2rem; + } + + .site-header__subtitle { + margin-right: initial; + text-align: center; + width: 100vw; + } + + .description { + padding-right: initial; + text-align: center; + width: initial; + } + + .download { + align-items: center; + margin: initial; + } + + .faq__content { + display: flex; + flex-direction: column; + } + + .faq__content p { + margin: 0.5rem 0; + } + + .faq__content img, + .faq__content picture { + display: block; + float: none !important; + margin: 0 auto; + order: 1; + } + + .footer { + margin-bottom: 5rem; + } +} diff --git a/docs/index.html b/docs/index.html index 82b00d3..ec97e4e 100755 --- a/docs/index.html +++ b/docs/index.html @@ -2,6 +2,7 @@ + fx_cast @@ -15,7 +16,7 @@

fx_cast

-

chromecast for firefox

+

chromecast for firefox

@@ -56,9 +57,6 @@
- -
-

FAQs

@@ -271,7 +269,7 @@ media="(prefers-color-scheme: light)"> Media context menu