mirror of
https://gitlab.com/ansol/web-ansol.org.git
synced 2024-11-21 22:01:31 +00:00
Fix search and event covers CSS
This commit is contained in:
parent
e4f3b52b36
commit
2e3f7e956e
Binary file not shown.
After Width: | Height: | Size: 15 KiB |
@ -178,11 +178,11 @@ nav.main .nav-search:hover {
|
|||||||
.events-list li {
|
.events-list li {
|
||||||
min-width: 300px;
|
min-width: 300px;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-areas: "img headline" "img subheader";
|
grid-template-areas: "img text";
|
||||||
justify-content: left;
|
justify-content: left;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
padding: 20px;
|
|
||||||
width: calc(50% - 50px);
|
width: calc(50% - 50px);
|
||||||
|
column-gap: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.events-list.events-list-full-width li {
|
.events-list.events-list-full-width li {
|
||||||
@ -190,19 +190,17 @@ nav.main .nav-search:hover {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.events-list .event-cover {
|
.events-list .event-cover {
|
||||||
margin-top: -20px;
|
|
||||||
margin-left: -20px;
|
|
||||||
margin-bottom: -20px;
|
|
||||||
margin-right: 15px;
|
|
||||||
width: 90px;
|
width: 90px;
|
||||||
height: 90px;
|
height: 90px;
|
||||||
object-fit: cover;
|
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; }
|
.events-list .title { font-size: 1.25rem; }
|
||||||
|
|
||||||
@ -275,11 +273,11 @@ p { margin: 0px; }
|
|||||||
.news-section { background-color: #f7f7f7; }
|
.news-section { background-color: #f7f7f7; }
|
||||||
.events-section { background-color: #f7f7f7; }
|
.events-section { background-color: #f7f7f7; }
|
||||||
|
|
||||||
section h2 {
|
main section h2 {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
section h2::before {
|
main section h2::before {
|
||||||
content: "";
|
content: "";
|
||||||
background-size: 40px 40px;
|
background-size: 40px 40px;
|
||||||
width: 40px;
|
width: 40px;
|
||||||
@ -293,11 +291,11 @@ section h2::before {
|
|||||||
.campaigns-section h2::before { background-image: var(--campaigns-icon); }
|
.campaigns-section h2::before { background-image: var(--campaigns-icon); }
|
||||||
.events-section h2::before { background-image: var(--events-icon); }
|
.events-section h2::before { background-image: var(--events-icon); }
|
||||||
|
|
||||||
section {
|
main section {
|
||||||
padding: 40px 0px;
|
padding: 40px 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
section.news-section { margin-top: 20px; }
|
main section.news-section { margin-top: 20px; }
|
||||||
|
|
||||||
.about { margin-top: 40px; max-width: 660px; }
|
.about { margin-top: 40px; max-width: 660px; }
|
||||||
|
|
||||||
@ -328,7 +326,13 @@ article.article h1 {
|
|||||||
line-height: 2.5rem;
|
line-height: 2.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Search */
|
||||||
|
|
||||||
.searching .search-results { display: block; }
|
.searching .search-results { display: block; }
|
||||||
|
.searching nav.main { display: none; }
|
||||||
|
.searching main { display: none; }
|
||||||
|
.searching footer { display: none; }
|
||||||
|
|
||||||
.search-results { display: none; }
|
.search-results { display: none; }
|
||||||
|
|
||||||
.search-results {
|
.search-results {
|
||||||
@ -339,5 +343,27 @@ article.article h1 {
|
|||||||
right: 0;
|
right: 0;
|
||||||
overflow: scroll;
|
overflow: scroll;
|
||||||
background-color: white;
|
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; }
|
||||||
|
@ -13,30 +13,32 @@
|
|||||||
{{ end }}
|
{{ end }}
|
||||||
<img class='event-cover' src="{{ $cover.Permalink }}" />
|
<img class='event-cover' src="{{ $cover.Permalink }}" />
|
||||||
</a>
|
</a>
|
||||||
<p class="headline">
|
<div class="text">
|
||||||
<a class="title" href="{{ .Permalink }}">{{ .Title }}</a>
|
<p class="headline">
|
||||||
</p>
|
<a class="title" href="{{ .Permalink }}">{{ .Title }}</a>
|
||||||
<p class="subheader">
|
</p>
|
||||||
<span class="date">
|
<p class="subheader">
|
||||||
{{ with .Params.metadata.event.date }}
|
<span class="date">
|
||||||
{{ if eq (time.Format "2 January 2006" .start) (time.Format "2 January 2006" .finish) }}
|
{{ with .Params.metadata.event.date }}
|
||||||
{{ if eq (time.Format "15:04" .start) (time.Format "15:04" .finish) }}
|
{{ if eq (time.Format "2 January 2006" .start) (time.Format "2 January 2006" .finish) }}
|
||||||
{{ time.Format "2 de January de 2006" .start }}
|
{{ if eq (time.Format "15:04" .start) (time.Format "15:04" .finish) }}
|
||||||
|
{{ time.Format "2 de January de 2006" .start }}
|
||||||
|
{{ else }}
|
||||||
|
{{ time.Format "2 de January de 2006" .start }} das
|
||||||
|
{{ time.Format "15:04" .start }} às
|
||||||
|
{{ time.Format "15:04" .finish }}
|
||||||
|
{{ end }}
|
||||||
|
{{ else if eq (time.Format "January 2006" .start) (time.Format "January 2006" .finish) }}
|
||||||
|
De {{ time.Format "2" .start }} a {{ time.Format "2 de January de 2006" .finish }}
|
||||||
{{ else }}
|
{{ else }}
|
||||||
{{ time.Format "2 de January de 2006" .start }} das
|
De {{ time.Format "2 de January de 2006" .start }} a {{ time.Format "2 de January de 2006" .finish }}
|
||||||
{{ time.Format "15:04" .start }} às
|
|
||||||
{{ time.Format "15:04" .finish }}
|
|
||||||
{{ end }}
|
{{ end }}
|
||||||
{{ else if eq (time.Format "January 2006" .start) (time.Format "January 2006" .finish) }}
|
|
||||||
De {{ time.Format "2" .start }} a {{ time.Format "2 de January de 2006" .finish }}
|
|
||||||
{{ else }}
|
|
||||||
De {{ time.Format "2 de January de 2006" .start }} a {{ time.Format "2 de January de 2006" .finish }}
|
|
||||||
{{ end }}
|
{{ end }}
|
||||||
{{ end }}
|
</span>
|
||||||
</span>
|
—
|
||||||
—
|
<span class='location'>{{ .Params.metadata.event.location }}</span>
|
||||||
<span class='location'>{{ .Params.metadata.event.location }}</span>
|
</p>
|
||||||
</p>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
||||||
|
@ -43,7 +43,7 @@
|
|||||||
{{ end }}
|
{{ end }}
|
||||||
</ul>
|
</ul>
|
||||||
<p class="see-more body-width">
|
<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>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
@ -80,30 +80,32 @@
|
|||||||
<img class='event-cover' src="{{ .Permalink }}" />
|
<img class='event-cover' src="{{ .Permalink }}" />
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</a>
|
</a>
|
||||||
<p class="headline">
|
<div class="text">
|
||||||
<a class="title" href="{{ .Permalink }}">{{ .Title }}</a>
|
<p class="headline">
|
||||||
</p>
|
<a class="title" href="{{ .Permalink }}">{{ .Title }}</a>
|
||||||
<p class="subheader">
|
</p>
|
||||||
<span class="date">
|
<p class="subheader">
|
||||||
{{ with .Params.metadata.event.date }}
|
<span class="date">
|
||||||
{{ if eq (time.Format "2 January 2006" .start) (time.Format "2 January 2006" .finish) }}
|
{{ with .Params.metadata.event.date }}
|
||||||
{{ if eq (time.Format "15:04" .start) (time.Format "15:04" .finish) }}
|
{{ if eq (time.Format "2 January 2006" .start) (time.Format "2 January 2006" .finish) }}
|
||||||
{{ time.Format "2 de January de 2006" .start }}
|
{{ if eq (time.Format "15:04" .start) (time.Format "15:04" .finish) }}
|
||||||
|
{{ time.Format "2 de January de 2006" .start }}
|
||||||
|
{{ else }}
|
||||||
|
{{ time.Format "2 de January de 2006" .start }} das
|
||||||
|
{{ time.Format "15:04" .start }} às
|
||||||
|
{{ time.Format "15:04" .finish }}
|
||||||
|
{{ end }}
|
||||||
|
{{ else if eq (time.Format "January 2006" .start) (time.Format "January 2006" .finish) }}
|
||||||
|
De {{ time.Format "2" .start }} a {{ time.Format "2 de January de 2006" .finish }}
|
||||||
{{ else }}
|
{{ else }}
|
||||||
{{ time.Format "2 de January de 2006" .start }} das
|
De {{ time.Format "2 de January de 2006" .start }} a {{ time.Format "2 de January de 2006" .finish }}
|
||||||
{{ time.Format "15:04" .start }} às
|
|
||||||
{{ time.Format "15:04" .finish }}
|
|
||||||
{{ end }}
|
{{ end }}
|
||||||
{{ else if eq (time.Format "January 2006" .start) (time.Format "January 2006" .finish) }}
|
|
||||||
De {{ time.Format "2" .start }} a {{ time.Format "2 de January de 2006" .finish }}
|
|
||||||
{{ else }}
|
|
||||||
De {{ time.Format "2 de January de 2006" .start }} a {{ time.Format "2 de January de 2006" .finish }}
|
|
||||||
{{ end }}
|
{{ end }}
|
||||||
{{ end }}
|
</span>
|
||||||
</span>
|
—
|
||||||
—
|
<span class='location'>{{ .Params.metadata.event.location }}</span>
|
||||||
<span class='location'>{{ .Params.metadata.event.location }}</span>
|
</p>
|
||||||
</p>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</ul>
|
</ul>
|
||||||
|
@ -2,22 +2,20 @@
|
|||||||
<div class="container">
|
<div class="container">
|
||||||
<section class="search-header">
|
<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>
|
||||||
<h1>{{ i18n "search" }}</h1>
|
<a class="search-close" href="#" onclick="document.querySelector('body').classList.toggle('searching'); return false;">Fechar</a>
|
||||||
</div>
|
|
||||||
<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>
|
||||||
|
|
||||||
<div id="search-box">
|
<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>
|
</div>
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
Loading…
Reference in New Issue
Block a user