Add responsive design
This commit is contained in:
parent
50f87589cb
commit
feca9ba8a6
|
@ -4,7 +4,7 @@
|
|||
<h1>{{ .Title }}</h1>
|
||||
|
||||
<div class="e-content">
|
||||
{{.Content}}
|
||||
{{ .Content }}
|
||||
|
||||
<p><i class="fas fa-language"></i> <strong>Available languages:</strong></p>
|
||||
|
||||
|
|
|
@ -6,7 +6,7 @@
|
|||
</div>
|
||||
</a>
|
||||
|
||||
<p class="legal" style="float: right; text-align: right">
|
||||
<p class="legal legal--right">
|
||||
<a href='https://joinmastodon.org'>Join Mastodon</a> · <a href='https://bridge.joinmastodon.org'>Find Twitter friends</a> · <a href='https://blog.joinmastodon.org'>Blog</a> · <a href='https://mastodon.social/@Mastodon' target='_blank'><i class='fab fa-mastodon'></i></a> · <a href='https://twitter.com/MastodonProject' rel='nofollow' target='_blank'><i class='fab fa-twitter'></i></a> · <a href='https://facebook.com/joinmastodon' rel='nofollow' target='_blank'><i class='fab fa-facebook'></i></a>
|
||||
</p>
|
||||
|
||||
|
|
|
@ -77,7 +77,13 @@ body {
|
|||
grid-template-columns: 260px minmax(300px, 700px);
|
||||
grid-template-rows: auto;
|
||||
margin-bottom: 30px; }
|
||||
@media screen and (max-width: 600px) {
|
||||
.sidebar-layout {
|
||||
display: block; } }
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.sidebar {
|
||||
margin-bottom: 60px; } }
|
||||
.sidebar .brand {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
|
@ -89,6 +95,11 @@ body {
|
|||
position: relative;
|
||||
left: -14px;
|
||||
top: -4px; }
|
||||
@media screen and (max-width: 600px) {
|
||||
.sidebar .brand {
|
||||
justify-content: center; }
|
||||
.sidebar .brand img {
|
||||
position: static; } }
|
||||
.sidebar a {
|
||||
display: inline-block;
|
||||
color: #9baec8;
|
||||
|
@ -113,13 +124,20 @@ body {
|
|||
padding-bottom: 30px; }
|
||||
.footer .legal {
|
||||
margin-top: 30px; }
|
||||
.footer .legal--right {
|
||||
float: right;
|
||||
text-align: right; }
|
||||
@media screen and (max-width: 600px) {
|
||||
.footer .legal--right {
|
||||
float: none;
|
||||
text-align: left; } }
|
||||
.footer .legal a {
|
||||
color: #687590;
|
||||
text-decoration: none; }
|
||||
|
||||
main h1 {
|
||||
font-size: 36px;
|
||||
line-height: 1.08;
|
||||
line-height: 1.48;
|
||||
font-weight: 600;
|
||||
color: #d9e1e8;
|
||||
padding-bottom: 35px;
|
||||
|
@ -305,6 +323,9 @@ main iframe {
|
|||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
margin-bottom: 60px; }
|
||||
@media screen and (max-width: 600px) {
|
||||
.mascot {
|
||||
display: none; } }
|
||||
|
||||
#TableOfContents {
|
||||
color: #9baec8;
|
||||
|
@ -331,6 +352,9 @@ main iframe {
|
|||
background-repeat: no-repeat;
|
||||
background-position: top right;
|
||||
text-align: left; }
|
||||
@media screen and (max-width: 600px) {
|
||||
.panel {
|
||||
background-size: contain; } }
|
||||
.panel .overlay {
|
||||
padding: 20px; }
|
||||
.panel h5 {
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -16,6 +16,7 @@ $transition-in: 100ms linear;
|
|||
$transition-out: 250ms linear;
|
||||
|
||||
$content-width: 960px;
|
||||
$mobile-width: 600px;
|
||||
|
||||
/* http://meyerweb.com/eric/tools/css/reset/
|
||||
v2.0 | 20110126
|
||||
|
@ -95,7 +96,7 @@ body {
|
|||
max-width: $content-width;
|
||||
margin: 0 auto;
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
padding: 0 20px;
|
||||
}
|
||||
}
|
||||
|
@ -106,9 +107,17 @@ body {
|
|||
grid-template-columns: 260px minmax(300px, ($content-width - 260px));
|
||||
grid-template-rows: auto;
|
||||
margin-bottom: 30px;
|
||||
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.brand {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
|
@ -122,6 +131,14 @@ body {
|
|||
left: -14px;
|
||||
top: -4px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
justify-content: center;
|
||||
|
||||
img {
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
|
@ -164,6 +181,16 @@ body {
|
|||
.legal {
|
||||
margin-top: 30px;
|
||||
|
||||
&--right {
|
||||
float: right;
|
||||
text-align: right;
|
||||
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
float: none;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: $darker;
|
||||
text-decoration: none;
|
||||
|
@ -174,7 +201,7 @@ body {
|
|||
main {
|
||||
h1 {
|
||||
font-size: 36px;
|
||||
line-height: 1.08;
|
||||
line-height: 1.48;
|
||||
font-weight: 600;
|
||||
color: $lightest;
|
||||
padding-bottom: 35px;
|
||||
|
@ -427,6 +454,10 @@ main {
|
|||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
margin-bottom: 60px;
|
||||
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
#TableOfContents {
|
||||
|
@ -463,9 +494,12 @@ main {
|
|||
background-size: 60%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: top right;
|
||||
|
||||
text-align: left;
|
||||
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
padding: 20px;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue