Rename .grid to .gn-grid to avoid conflicting classnames, and som…

…e additional styling so content doesn't break between columns.
MichelGabriel · Dec 18, 2023 · 4a71a09 · 4a71a09
1 parent bc20706
commit 4a71a09
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 12 deletions.
diff --git a/docs/manual/docs/index.fr.md b/docs/manual/docs/index.fr.md
@@ -7,7 +7,7 @@ hide:
 
 Bienvenue à GeoNetwork. Cette documentation est organisée en guides spécifiques destinés à différents publics.
 
-<div class="grid cards" markdown>
+<div class="gn-grid cards" markdown>
 
 :fontawesome-solid-signs-post: [Vue d'ensemble](overview/index.md)
 

diff --git a/docs/manual/docs/index.md b/docs/manual/docs/index.md
@@ -7,7 +7,7 @@ hide:
 
 Welcome to GeoNetwork. This documentation is organized into specific guides targeting different audience. 
 
-<div class="grid cards" markdown>
+<div class="gn-grid cards" markdown>
 
 :fontawesome-solid-signs-post:   [Overview](overview/index.md)
 

diff --git a/docs/manual/overrides/assets/stylesheets/extra.css b/docs/manual/overrides/assets/stylesheets/extra.css
@@ -10,43 +10,44 @@ img + em, .browser-border + em, .browser-mockup + em {
 }
 
 /* grid */
-.md-typeset .grid {
+.md-typeset .gn-grid {
   column-count: 2;
   column-gap: 2em;
   margin-bottom: 20px;
 }
-.md-typeset .grid dl {
+.md-typeset .gn-grid dl {
   display: grid;
   grid-template-columns: repeat(auto-fit,minmax(16rem,1fr));
   margin: 0;
 }
-.md-typeset .grid.cards dt, .md-typeset .grid.cards dd {
+.md-typeset .gn-grid.cards dt, .md-typeset .gn-grid.cards dd {
   border: 0.05rem solid var(--md-default-fg-color--lightest);
   border-radius: 0.1rem;
   display: block;
   margin: 0;
   padding: 0.8rem;
   transition: border .25s,box-shadow .25s;
+  break-inside: avoid;
 }
-.md-typeset .grid.cards dt {
+.md-typeset .gn-grid.cards dt {
   font-weight: bold;
+  margin-top: 0.5rem;
 }
-.md-typeset .grid.cards dt .twemoji {
+.md-typeset .gn-grid.cards dt .twemoji {
   margin-right: 5px;
 }
-.md-typeset .grid.cards dd {
-  margin-bottom: 0.8rem;
+.md-typeset .gn-grid.cards dd {
   margin-top: -1px;
 }
-.md-typeset .grid.cards dd p {
+.md-typeset .gn-grid.cards dd p {
   margin: 0;
 }
 @media (max-width: 768px) {
-  .md-typeset .grid dl {
+  .md-typeset .gn-grid dl {
     display: inline-block;
     margin-bottom: 20px;
   }
-  .md-typeset .grid.cards dt, .md-typeset .grid.cards dd {
+  .md-typeset .gn-grid.cards dt, .md-typeset .gn-grid.cards dd {
     width: calc(100vw - 1.2rem - 1.2rem);
   }
 }