Fix books images width

Fix books images min & max width, also on small screens
OSGeo · Sep 13, 2020 · 059061a · 059061a
1 parent 5d182df
commit 059061a
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 16 deletions.
diff --git a/content/learn/books.md b/content/learn/books.md
@@ -1,7 +1,7 @@
 ---
 title: "GRASS GIS books"
 date: 2020-04-29T11:02:05+06:00
-layout: "overview"
+layout: "books"
 ---
 
 | | |

diff --git a/themes/grass/assets/css/style.css b/themes/grass/assets/css/style.css
@@ -331,6 +331,18 @@ table tr td {
 table img {
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.07) !important;
 }
+
+#books table tr td:first-child {
+  width: 10rem;
+  min-width: 10rem;
+  max-width: 10rem;
+  word-break: break-all;
+}
+
+#books table img {
+    max-width:7rem !important;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.07) !important;
+}
 .github {
   background: var(--grass-color-light);
 }
@@ -1343,6 +1355,23 @@ code{
     font-size: 14px !important;
   }
 
+  #books table tr td:first-child {
+  width: 5rem !important;
+  min-width: 5rem  !important;
+  max-width:5rem  !important;
+  word-break: break-all;
+  }
+
+  #books table img {
+   max-width:4rem !important;
+  }
+
+  #books table tr td {
+   padding: 0 !important;
+   font-size: 0.85em !important;
+  }
+
+
 }
 
 @media (min-width: 600px) {

diff --git a/themes/grass/layouts/learn/books.html b/themes/grass/layouts/learn/books.html
@@ -1,5 +1,6 @@
 {{ partial "head.html" . }}
 
+
 {{ "<!-- navigation -->" | safeHTML }}
 <header class="shadow-bottom position-relative">
   <div class="container">
@@ -9,24 +10,28 @@
 {{ "<!-- /navigation -->" | safeHTML }}
 
 
-<!-- details page -->
-<section class="single pt-5 bg-gray">
+<!-- page title -->
+<section class="section bg-lgr">
   <div class="container">
     <div class="row">
-      <div class="col-lg-4">
-        <div class="p-4 bg-book sticky-top text-center">
-             <img src="/images/grasslogo.svg" width="45%" alt="GRASS GIS" />
-        </div>
-      </div>
-      <div class="col-lg-8">
-        <div class="p-5 bg-white">
-            <h2 class="page-title">{{ .Title }}</h2>
-            {{ .Content }}
-        </div>
+    <div class="col-lg-8 mx-auto text-center">   
+       <h1 class="grass-green cap">{{.Section}}</h1>
       </div>
     </div>
   </div>
 </section>
+<section class="bg-white pb-0">
+ {{ partial "breadcrumb.html" . }}
+</section>
+<section class="single section bg-gray pb-0">
+  <div class="container">
+      <div id="books" class="col-lg-12 p-5 bg-white">	
+	<h2 class="page-title">{{ .Title }}</h2>
+        {{ .Content }}
+      </div>
+  </div>
+</section>
 <!-- /details page -->
 
+
 {{ partial "footer.html" . }}
diff --git a/themes/grass/layouts/partials/head.html b/themes/grass/layouts/partials/head.html
@@ -2,9 +2,8 @@
 <html lang="{{ with .Site.LanguageCode }}{{.}}{{else }}en-US{{ end }}">
 <head>
   <title>{{ .Title }}</title>
-  {{ if .Params.description }}
-  <meta charset="utf-8" name="description" content="{{ .Params.description }}">
-  {{ else if .Site.Params.description }}<meta charset="utf-8" name="description" content="{{ .Site.Params.description }}">{{ end }}
+  <meta name="description" content="{{ if .Params.summary }}{{ .Params.summary }}{{ else if .Site.Params.Description }}{{ .Site.Params.Description }}{{ end }}"
+   />
   <meta name="keywords" content="{{.Site.Params.Keywords }}">
   <meta property="og:url" content="{{.Site.BaseURL}}">
   <meta property="og:image" content="{{.Site.BaseURL}}images/other/share-img.png">