Commit feca9ba8 authored by Eugen Rochko's avatar Eugen Rochko

Add responsive design

parent 50f87589
Pipeline #313 passed with stages
in 16 seconds
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<h1>{{ .Title }}</h1> <h1>{{ .Title }}</h1>
<div class="e-content"> <div class="e-content">
{{.Content}} {{ .Content }}
<p><i class="fas fa-language"></i> <strong>Available languages:</strong></p> <p><i class="fas fa-language"></i> <strong>Available languages:</strong></p>
......
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
</div> </div>
</a> </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> <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> </p>
......
...@@ -77,7 +77,13 @@ body { ...@@ -77,7 +77,13 @@ body {
grid-template-columns: 260px minmax(300px, 700px); grid-template-columns: 260px minmax(300px, 700px);
grid-template-rows: auto; grid-template-rows: auto;
margin-bottom: 30px; } 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 { .sidebar .brand {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
...@@ -89,6 +95,11 @@ body { ...@@ -89,6 +95,11 @@ body {
position: relative; position: relative;
left: -14px; left: -14px;
top: -4px; } top: -4px; }
@media screen and (max-width: 600px) {
.sidebar .brand {
justify-content: center; }
.sidebar .brand img {
position: static; } }
.sidebar a { .sidebar a {
display: inline-block; display: inline-block;
color: #9baec8; color: #9baec8;
...@@ -113,13 +124,20 @@ body { ...@@ -113,13 +124,20 @@ body {
padding-bottom: 30px; } padding-bottom: 30px; }
.footer .legal { .footer .legal {
margin-top: 30px; } 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 { .footer .legal a {
color: #687590; color: #687590;
text-decoration: none; } text-decoration: none; }
main h1 { main h1 {
font-size: 36px; font-size: 36px;
line-height: 1.08; line-height: 1.48;
font-weight: 600; font-weight: 600;
color: #d9e1e8; color: #d9e1e8;
padding-bottom: 35px; padding-bottom: 35px;
...@@ -305,6 +323,9 @@ main iframe { ...@@ -305,6 +323,9 @@ main iframe {
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
margin-bottom: 60px; } margin-bottom: 60px; }
@media screen and (max-width: 600px) {
.mascot {
display: none; } }
#TableOfContents { #TableOfContents {
color: #9baec8; color: #9baec8;
...@@ -331,6 +352,9 @@ main iframe { ...@@ -331,6 +352,9 @@ main iframe {
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: top right; background-position: top right;
text-align: left; } text-align: left; }
@media screen and (max-width: 600px) {
.panel {
background-size: contain; } }
.panel .overlay { .panel .overlay {
padding: 20px; } padding: 20px; }
.panel h5 { .panel h5 {
......
This diff is collapsed.
...@@ -16,6 +16,7 @@ $transition-in: 100ms linear; ...@@ -16,6 +16,7 @@ $transition-in: 100ms linear;
$transition-out: 250ms linear; $transition-out: 250ms linear;
$content-width: 960px; $content-width: 960px;
$mobile-width: 600px;
/* http://meyerweb.com/eric/tools/css/reset/ /* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126 v2.0 | 20110126
...@@ -95,7 +96,7 @@ body { ...@@ -95,7 +96,7 @@ body {
max-width: $content-width; max-width: $content-width;
margin: 0 auto; margin: 0 auto;
@media screen and (max-width: 600px) { @media screen and (max-width: $mobile-width) {
padding: 0 20px; padding: 0 20px;
} }
} }
...@@ -106,9 +107,17 @@ body { ...@@ -106,9 +107,17 @@ body {
grid-template-columns: 260px minmax(300px, ($content-width - 260px)); grid-template-columns: 260px minmax(300px, ($content-width - 260px));
grid-template-rows: auto; grid-template-rows: auto;
margin-bottom: 30px; margin-bottom: 30px;
@media screen and (max-width: $mobile-width) {
display: block;
}
} }
.sidebar { .sidebar {
@media screen and (max-width: $mobile-width) {
margin-bottom: 60px;
}
.brand { .brand {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
...@@ -122,6 +131,14 @@ body { ...@@ -122,6 +131,14 @@ body {
left: -14px; left: -14px;
top: -4px; top: -4px;
} }
@media screen and (max-width: $mobile-width) {
justify-content: center;
img {
position: static;
}
}
} }
a { a {
...@@ -164,6 +181,16 @@ body { ...@@ -164,6 +181,16 @@ body {
.legal { .legal {
margin-top: 30px; margin-top: 30px;
&--right {
float: right;
text-align: right;
@media screen and (max-width: $mobile-width) {
float: none;
text-align: left;
}
}
a { a {
color: $darker; color: $darker;
text-decoration: none; text-decoration: none;
...@@ -174,7 +201,7 @@ body { ...@@ -174,7 +201,7 @@ body {
main { main {
h1 { h1 {
font-size: 36px; font-size: 36px;
line-height: 1.08; line-height: 1.48;
font-weight: 600; font-weight: 600;
color: $lightest; color: $lightest;
padding-bottom: 35px; padding-bottom: 35px;
...@@ -427,6 +454,10 @@ main { ...@@ -427,6 +454,10 @@ main {
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
margin-bottom: 60px; margin-bottom: 60px;
@media screen and (max-width: $mobile-width) {
display: none;
}
} }
#TableOfContents { #TableOfContents {
...@@ -463,9 +494,12 @@ main { ...@@ -463,9 +494,12 @@ main {
background-size: 60%; background-size: 60%;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: top right; background-position: top right;
text-align: left; text-align: left;
@media screen and (max-width: $mobile-width) {
background-size: contain;
}
.overlay { .overlay {
padding: 20px; 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