Merge pull request #195 from nunocoracao/194-background-homepage-need…

…s-a-max-width updates to the homepage background setup
nunocoracao · Nov 6, 2022 · 9848ca7 · 9848ca7
2 parents 642db32 + 8f588f5
commit 9848ca7
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 8 deletions.
diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css
@@ -1743,6 +1743,10 @@ select {
   max-width: 65ch;
 }
 
+.max-w-\[1600px\] {
+  max-width: 1600px;
+}
+
 .max-w-3xl {
   max-width: 48rem;
 }
@@ -3065,7 +3069,7 @@ body:has(#menu-controller:checked) {
 }
 
 .thumbnail_card {
-  height: 300px;
+  height: 250px;
   background-repeat:no-repeat;
   background-size:cover;
   background-position:center;

diff --git a/assets/css/main.css b/assets/css/main.css
@@ -348,7 +348,7 @@ body:has(#menu-controller:checked) {
 }
 
 .thumbnail_card {
-  height: 300px;
+  height: 250px;
   background-repeat:no-repeat;
   background-size:cover; 
   background-position:center;

diff --git a/exampleSite/assets/js/home.js b/exampleSite/assets/js/home.js
@@ -35,8 +35,8 @@ window.addEventListener("DOMContentLoaded", (event) => {
 });
 
 var list_config = [
-  "CardViewProse",
   "CardViewScreenWidth",
+  "CardViewProse",
   "NormalView"
 ]
 

diff --git a/exampleSite/config/_default/params.toml b/exampleSite/config/_default/params.toml
@@ -26,7 +26,7 @@ mainSections = ["docs"]
   layout = "custom" # valid options: page, profile, hero, card, background, custom
   homepageImage = "/img/iceland.jpg" # used in: hero, and card
   showRecent = false
-  showRecentItems = 9
+  showRecentItems = 10
   showMoreLink = true
   showMoreLinkDest = "docs"
   cardView = true

diff --git a/exampleSite/layouts/partials/recent-articles-demo.html b/exampleSite/layouts/partials/recent-articles-demo.html
@@ -16,7 +16,7 @@ <h2 class="mt-8 text-2xl font-extrabold mb-10">{{ i18n "shortcode.recent_article
     </span>
 </div>
 
-<div id="CardViewProse" class="">
+<div id="CardViewProse" class="hidden h-full">
     <section class="w-full">
         <div class="flex flex-wrap">
             {{ range first $recentArticles (.Paginate (where .Site.RegularPages "Type" "in"
@@ -28,8 +28,9 @@ <h2 class="mt-8 text-2xl font-extrabold mb-10">{{ i18n "shortcode.recent_article
         </div>
     </section>
 </div>
-<div id="CardViewScreenWidth" class="hidden h-full">
-    <section class="relative w-screen" style="left: calc(-50vw + 50%);">
+
+<div id="CardViewScreenWidth" class="">
+    <section class="relative w-screen max-w-[1600px]" style="left: calc(max(-50vw,-800px) + 50%);">
         <div class="flex flex-wrap pl-8 pr-8">
             {{ range first $recentArticles (.Paginate (where .Site.RegularPages "Type" "in"
             .Site.Params.mainSections)).Pages }}
@@ -40,6 +41,7 @@ <h2 class="mt-8 text-2xl font-extrabold mb-10">{{ i18n "shortcode.recent_article
         </div>
     </section>
 </div>
+
 <div id="NormalView" class="hidden h-full">
     <section class="space-y-10 w-full">
         {{ range first $recentArticles (.Paginate (where .Site.RegularPages "Type" "in"

diff --git a/layouts/partials/recent-articles.html b/layouts/partials/recent-articles.html
@@ -8,7 +8,7 @@ <h2 class="mt-8 text-2xl font-extrabold mb-10">{{ i18n "shortcode.recent_article
 
 {{ if .Site.Params.homepage.cardView | default false }}
 {{ if .Site.Params.homepage.cardViewScreenWidth | default false }}
-<section class="relative w-screen" style="left: calc(-50vw + 50%);">
+<section class="relative w-screen max-w-[1600px]" style="left: calc(max(-50vw,-800px) + 50%);">
   <div class="flex flex-wrap pl-8 pr-8">
     {{ else }}
     <section class="w-full">