Commit feca9ba8 authored by Eugen Rochko's avatar Eugen Rochko

Add responsive design

parent 50f87589
......@@ -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 {
......
This diff is collapsed.
......@@ -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;
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment