📌 ISSUE-#5 - Adjust blog interface for mobile devices

FernandoCelmer · Jan 19, 2023 · 03b7169 · 03b7169
1 parent c264635
commit 03b7169
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 4 deletions.
diff --git a/mkdocs_simple_blog/assets/stylesheets/theme.css b/mkdocs_simple_blog/assets/stylesheets/theme.css
@@ -75,7 +75,7 @@ pre {
 
 @media only screen and (min-device-width:320px) and (max-device-width:480px) {
 body {
- font-size: 1.4em;
+ font-size: 1.0em;
  line-height: 1.6em;
 } 
 }
@@ -606,3 +606,37 @@ table tr td:last-child,table tr th:last-child {
 .overline {
  text-decoration: overline;
 }
+
+@media only screen and (max-width: 680px) {
+ .site-name {
+ font-size: 14px !important;
+ }
+
+ .title {
+ font-size: 18px !important;
+ }
+
+ .container {
+ padding-left: 5% !important;
+ padding-right: 5% !important;
+ }
+
+ main {
+ margin-left: 0% !important;
+ margin-right: 0% !important;
+ line-height: 1.8 !important
+ }
+
+ h1,h2,h3,h4,h5,h6 {
+ font-size: 18px !important;
+ margin-top: 1.0rem !important;
+ margin-bottom: 1rem !important;
+ }
+
+ p, a, li, code, small {
+ font-size: 12px !important;
+ margin-top: 1.0rem !important;
+ margin-bottom: 1rem !important;
+ }
+
+ }
diff --git a/mkdocs_simple_blog/modules/header.html b/mkdocs_simple_blog/modules/header.html
@@ -4,7 +4,7 @@
  {% if config.theme.logo %}
  <img class="logo" src="{{ config.theme.logo|url }}">
  {% endif %}
- <span class="fs-4 {{ config.theme.title_style }} title-color" id="title" style="text-transform: uppercase;">{{ config.site_name }}</span>
+ <span class="fs-4 {{ config.theme.title_style }} title-color site-name" id="title" style="text-transform: uppercase;">{{ config.site_name }}</span>
 
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsMenu"
  aria-controls="navbarsMenu" aria-expanded="false" aria-label="Toggle navigation">

diff --git a/mkdocs_simple_blog/modules/preview.html b/mkdocs_simple_blog/modules/preview.html
@@ -4,13 +4,13 @@
  <div class="row row-cols-md-3 text-center pt-md-3">
  <div class="col themed-grid-col">
  <a rel="prev" {% if page.previous_page %}href="{{ page.previous_page.url|url }}" class="nav-link"{% else %}class="nav-link disabled"{% endif %}>
- <i class="fa fa-arrow-left"></i>Previous
+ <i class="fa fa-arrow-left"></i> Previous
  </a>
  </div>
  <div class="col themed-grid-col"></div>
  <div class="col themed-grid-col">
  <a rel="next" {% if page.next_page %}href="{{ page.next_page.url|url }}" class="nav-link"{% else %}class="nav-link disabled"{% endif %}>
- Next<i class="fa fa-arrow-right"></i>
+ Next <i class="fa fa-arrow-right"></i>
  </a>
  </div>
  </div>