Fix search and event covers CSS

themes/academic/assets/scss/ansol.scss

@@ -178,11 +178,11 @@ nav.main .nav-search:hover {
 .events-list li {
   min-width: 300px;
   display: grid;
-  grid-template-areas: "img headline" "img subheader";
+  grid-template-areas: "img text";
   justify-content: left;
   background-color: white;
-  padding: 20px;
   width: calc(50% - 50px);
+  column-gap: 1rem;
 }
 
 .events-list.events-list-full-width li {
@@ -190,19 +190,17 @@ nav.main .nav-search:hover {
 }
 
 .events-list .event-cover {
-  margin-top: -20px;
-  margin-left: -20px;
-  margin-bottom: -20px;
-  margin-right: 15px;
   width: 90px;
   height: 90px;
   object-fit: cover;
+  display: block;
+  background-color: white;
 }
 
-.events-list .img { grid-area: img; margin-right: 10px; }
+.events-list .img { grid-area: img; }
-.events-list .headline { grid-area: headline; }
+.events-list .text { grid-area: text; margin-top: 5px; }
-.events-list .date { grid-area: date; }
+.events-list .date { }
-.events-list .subheader { grid-area: subheader; font-size: 0.8rem; margin-top: 10px; }
+.events-list .subheader { font-size: 0.8rem; margin-top: 10px; }
 
 .events-list .title { font-size: 1.25rem; }
 
@@ -275,11 +273,11 @@ p { margin: 0px; }
 .news-section { background-color: #f7f7f7; }
 .events-section { background-color: #f7f7f7; }
 
-section h2 {
+main section h2 {
   position: relative;
 }
 
-section h2::before {
+main section h2::before {
   content: "";
   background-size: 40px 40px;
   width: 40px;
@@ -293,11 +291,11 @@ section h2::before {
 .campaigns-section h2::before { background-image: var(--campaigns-icon); }
 .events-section h2::before { background-image: var(--events-icon); }
 
-section {
+main section {
   padding: 40px 0px;
 }
 
-section.news-section { margin-top: 20px; }
+main section.news-section { margin-top: 20px; }
 
 .about { margin-top: 40px; max-width: 660px; }
 
@@ -328,7 +326,13 @@ article.article h1 {
   line-height: 2.5rem;
 }
 
+/* Search */
+
 .searching .search-results { display: block; }
+.searching nav.main { display: none; }
+.searching main { display: none; }
+.searching footer { display: none; }
+
 .search-results { display: none; }
 
 .search-results {
@@ -339,5 +343,27 @@ article.article h1 {
   right: 0;
   overflow: scroll;
   background-color: white;
+  padding: 20px;
 }
 
+.search-results h1 {
+  font-size: 2.25rem;
+  font-weight: 300;
+  line-height: 2.5rem;
+}
+
+.search-results h3 {
+  font-size: 1.5rem;
+  font-weight: 300;
+}
+
+.search-results .search-hit {
+  padding: 20px 0px;
+}
+
+.search-results .search-hit-description {
+  margin-top: 10px;
+}
+
+.search-results .search-title { display: flex; align-items: center; justify-content: space-between; }
+.search-results .search-close { font-size: 1.5rem; }

themes/academic/layouts/eventos/list.html

@@ -13,6 +13,7 @@
         {{ end }}
         <img class='event-cover' src="{{ $cover.Permalink }}" />
       </a>
+      <div class="text">
         <p class="headline">
           <a class="title" href="{{ .Permalink }}">{{ .Title }}</a>
         </p>
@@ -37,6 +38,7 @@
           &mdash;
           <span class='location'>{{ .Params.metadata.event.location }}</span>
         </p>
+      </div>
     </li>
   {{ end }}
 

themes/academic/layouts/index.html

@@ -43,7 +43,7 @@
         {{ end }}
       </ul>
       <p class="see-more body-width">
-        <a href="{{ (site.GetPage "Section" "post").Permalink }}">Ver mais notícias</a>
+        <a href="{{ (site.GetPage "noticias").Permalink }}">Ver mais notícias</a>
       </p>
     </section>
 
@@ -80,6 +80,7 @@
               <img class='event-cover' src="{{ .Permalink }}" />
             {{ end }}
           </a>
+          <div class="text">
             <p class="headline">
               <a class="title" href="{{ .Permalink }}">{{ .Title }}</a>
             </p>
@@ -104,6 +105,7 @@
               &mdash;
               <span class='location'>{{ .Params.metadata.event.location }}</span>
             </p>
+          </div>
         </li>
         {{ end }}
       </ul>

themes/academic/layouts/partials/search.html

@@ -2,22 +2,20 @@
       <div class="container">
         <section class="search-header">
 
-          <div class="row no-gutters justify-content-between mb-3">
+          <div class="search-title">
-            <div class="col-6">
             <h1>{{ i18n "search" }}</h1>
-            </div>
+            <a class="search-close" href="#" onclick="document.querySelector('body').classList.toggle('searching'); return false;">Fechar</a>
-            <div class="col-6 col-search-close">
-              <a class="js-search" href="#" onclick="document.querySelector('body').classList.toggle('searching'); return false;">Fechar</a>
-            </div>
           </div>
 
           <div id="search-box">
-            {{ if eq site.Params.search.engine 1 }}
+            <input
-            <input name="q" id="search-query" placeholder="{{i18n "search_placeholder"}}" autocapitalize="off"
+                name="q" id="search-query"
-            autocomplete="off" autocorrect="off" spellcheck="false" type="search">
+                placeholder="{{i18n "search_placeholder"}}"
-            {{ else }}
+                autocapitalize="off"
-            <!-- Search box will appear here -->
+                autocomplete="off"
-            {{ end }}
+                autocorrect="off"
+                spellcheck="false" type="search"
+            >
           </div>
 
         </section>