Adapted to mobile

Tweaking style for mobile device

5 files changed, 40 insertions, 6 deletions

diff --git a/layouts/index.html b/layouts/index.html
index 5806ecf..770ffe1 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -10,7 +10,7 @@
 
   <!-- Add your site or application content here -->
     <div class="flex-column">
-        <div class="ads"></div>
+        {{ partial "banner.html" . }}
         <div class="home">
             <div class="logo">
                 <h1><a href="/">{{.Title}}</a></h1>
@@ -46,7 +46,7 @@
             <div class="line-dotted"></div>
             {{ partial "footer.html" . }}
         </div>
-        <div class="ads"></div>
+        {{ partial "banner.html" . }}
     </div>
 
 
diff --git a/layouts/partials/banner.html b/layouts/partials/banner.html
new file mode 100644
index 0000000..856122a
--- /dev/null
+++ b/layouts/partials/banner.html
@@ -0,0 +1,4 @@
+<div class="ads">
+    {{ if .Site.Params.google_ad_client }}
+    {{ end }}
+</div>
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index b64d145..dad95ad 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -4,11 +4,11 @@
     {{ partial "title.html" . }}
     <meta name="keywords" content="{{ with .Keywords }} {{- delimit . ", " -}} {{ end }}">
     <meta name="description" content="{{ with .Description }} {{- . -}} {{ end }}">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1">
     <link rel="stylesheet" href="{{.Site.BaseURL | relLangURL}}css/highlight.min.css">
     <link rel="stylesheet" href="{{.Site.BaseURL | relLangURL}}css/normalize.css">
-    <link rel="stylesheet" href="{{.Site.BaseURL | relLangURL}}css/main.css">
     <link rel="stylesheet" href="{{.Site.BaseURL | relLangURL}}css/diello.css">
+    <link rel="stylesheet" href="{{.Site.BaseURL | relLangURL}}css/main.css">
     {{ if .Site.Params.google_ad_client }}
     <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
     <script>
diff --git a/layouts/post/single.html b/layouts/post/single.html
index 7451490..1ffa7af 100644
--- a/layouts/post/single.html
+++ b/layouts/post/single.html
@@ -10,7 +10,7 @@
 
   <!-- Add your site or application content here -->
     <div class="flex-column">
-        <div class="ads"></div>
+        {{ partial "banner.html" . }}
         <div class="home">
             <div class="logo">
                 <h1><a href="/">{{.Site.Title}}</a></h1>
@@ -34,7 +34,7 @@
             </div>
             {{ partial "footer.html" . }}
         </div>
-        <div class="ads"></div>
+        {{ partial "banner.html" . }}
     </div>
 
 
diff --git a/static/css/main.css b/static/css/main.css
index 86293f5..2c15e1a 100755
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -203,6 +203,36 @@ textarea {
     /* Style adjustments for viewports that meet the condition */
 }
 
+@media only screen and (max-width: 30em) {
+    /* Style adjustments for viewports that meet the condition */
+    html, body {
+        width   : 100vw;
+    }
+    .flex-column {
+        display         : -webkit-flex;
+        display         : flex;
+        flex-direction  : column;
+        flex-wrap       : nowrap;
+        justify-content : flex-start;
+    }
+    img {
+        max-width       : 90vw;
+    }
+    .ads {
+        display         : -webkit-flex;
+        display         : flex;
+        flex-direction  : column;
+        flex-wrap       : nowrap;
+        justify-content : center;
+        align-items     : center;
+        padding         : 0px;
+    }
+    .home {
+        flex-basis  : 98%;
+        padding     : 0 10px;
+    }
+}
+
 @media print,
        (-webkit-min-device-pixel-ratio: 1.25),
        (min-resolution: 1.25dppx),