mirror of
https://github.com/hensm/fx_cast.git
synced 2026-06-11 18:19:58 +00:00
Add responsive site design
This commit is contained in:
hensm
@@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@@ -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">
|
||||||
|
|||||||
Reference in New Issue
Block a user