sam_oneal/fx_cast
1
0
Fork 0
mirror of https://github.com/hensm/fx_cast.git synced 2026-06-12 18:39:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add responsive site design

Browse Source
This commit is contained in:
hensm
2019-07-26 08:30:47 +01:00
parent 2dd2990efc
commit 79fd72022b
2 changed files with 87 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
docs/index.css
View File

@@ -44,10 +44,9 @@ body {
.container { .container {
display: grid; display: grid;
font-size: 15px; font-size: 1.5rem;
margin: auto; margin: auto;
margin-top: initial; margin-top: initial;
min-width: 480px;
grid-row-gap: 2rem; grid-row-gap: 2rem;
grid-template-areas: grid-template-areas:
"header preview" "header preview"
@@ -81,7 +80,7 @@ body {
.site-header__subtitle { .site-header__subtitle {
background-color: var(--text-color-secondary); background-color: var(--text-color-secondary);
color: var(--page-color); color: var(--page-color);
font-size: 2.75rem; font-size: 2.5rem;
padding: 0.25rem 1rem; padding: 0.25rem 1rem;
margin-right: -1rem; margin-right: -1rem;
} }
@@ -95,7 +94,7 @@ body {
grid-area: description; grid-area: description;
padding-right: 4rem; padding-right: 4rem;
text-align: right; text-align: right;
width: 45rem; max-width: 45rem;
} }
.description__disclaimer { .description__disclaimer {
color: var(--text-color-secondary); color: var(--text-color-secondary);
@@ -295,7 +294,8 @@ body {
.faq__content code { .faq__content code {
background-color: var(--grey-90-a10); background-color: var(--grey-90-a10);
border-radius: 3px; 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 { :root.theme-dark .links__link-github img {
filter: invert(1); 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;
}
}

8
docs/index.html
View File

@@ -2,6 +2,7 @@
<html class="theme-dark"> <html class="theme-dark">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>fx_cast</title> <title>fx_cast</title>
<link rel="stylesheet" href="fonts/stylesheet.css"> <link rel="stylesheet" href="fonts/stylesheet.css">
@@ -15,7 +16,7 @@
<div class="container"> <div class="container">
<header class="site-header"> <header class="site-header">
<h1 class="site-header__title">fx_cast</h1> <h1 class="site-header__title">fx_cast</h1>
<p class="site-header__subtitle">chromecast for firefox</p> <p class="site-header__subtitle">chromecast <nobr>for firefox</nobr></p>
</header> </header>
<main class="site-content"> <main class="site-content">
<section class="description"> <section class="description">
@@ -56,9 +57,6 @@
</div> </div>
</div> </div>
</details> </details>
</section>
<section class="other-downloads">
</section> </section>
<section class="faqs"> <section class="faqs">
<h1>FAQs</h1> <h1>FAQs</h1>
@@ -271,7 +269,7 @@
media="(prefers-color-scheme: light)"> media="(prefers-color-scheme: light)">
<img class="preview preview--fg" <img class="preview preview--fg"
alt="Media context menu" alt="Media context menu"
width="462" width="462" height="275"
src="images/preview-fg_macOS_dark.png" src="images/preview-fg_macOS_dark.png"
srcset="images/preview-fg_macOS_dark.png, srcset="images/preview-fg_macOS_dark.png,
images/preview-fg_macOS_dark@2x.png 2x"> images/preview-fg_macOS_dark@2x.png 2x">