Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

First prototype of an improved theme/style #18

Merged
merged 5 commits into from
May 21, 2024
Merged

First prototype of an improved theme/style #18

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a1182df
First prototype of an improved theme/style
gmantele May 20, 2024
2ab40e7
Fix URL of CSS stylesheets and JS scripts
gmantele May 20, 2024
52fe00e
Improve title of footer sections
gmantele May 21, 2024
4d0c7c5
Change layout of the carrousel + news section on the home page
gmantele May 21, 2024
d32ed83
Fix font-size and width of the carrousel on home page
gmantele May 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Change layout of the carrousel + news section on the home page
  • Loading branch information
@gmantele
gmantele committed May 21, 2024
commit 4d0c7c5e1bce57a6e7fe6052afa532c4185263aa
65 changes: 32 additions & 33 deletions layouts/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,45 +1,40 @@
{{ define "main" }}

<div class="carrousel">
{{ range $elem_index, $elem_val := where .Site.Pages "Params.tags" "intersect" (slice "banner") }}
{{ if (eq $elem_index 0)}}
<div id="carrousel-{{$elem_index}}" class="carrousel-item active">
{{ else }}
<div id="carrousel-{{$elem_index}}" class="carrousel-item">
{{ end }}
<section class="with-only-right-aside">
<main class="carrousel">
{{ range $elem_index, $elem_val := where .Site.Pages "Params.tags" "intersect" (slice "banner") }}
{{ if (eq $elem_index 0)}}
<div id="carrousel-{{$elem_index}}" class="carrousel-item active">
{{ else }}
<div id="carrousel-{{$elem_index}}" class="carrousel-item">
{{ end }}

{{ $featured_image := partial "func/GetFeaturedImage.html" . }}
<img class="carrousel-img" src="{{ $featured_image }}" />
{{ $featured_image := partial "func/GetFeaturedImage.html" . }}
<img class="carrousel-img" src="{{ $featured_image }}" />

<div class="carrousel-title">{{ .Title }}</div>
<div class="carrousel-title">{{ .Title }}</div>

{{ with .Params.author | default .Site.Params.author }}
<div class="carrousel-author">{{.}}</div>
{{end}}
{{ with .Params.author | default .Site.Params.author }}
<div class="carrousel-author">{{.}}</div>
{{end}}

<a href="{{ .RelPermalink }}" class="carrousel-action">
READ <i class="fa-solid fa-arrow-right"></i>
</a>
<a href="{{ .RelPermalink }}" class="carrousel-action">
READ <i class="fa-solid fa-arrow-right"></i>
</a>

</div>
{{ end }}

<div class="carrousel-btn carrousel-btn-left" id="carrousel-left">
<i class="fa-solid fa-chevron-left"></i>
</div>
</div>
{{ end }}

<div class="carrousel-btn carrousel-btn-right" id="carrousel-right">
<i class="fa-solid fa-chevron-right"></i>
</div>
</div>
<div class="carrousel-btn carrousel-btn-left" id="carrousel-left">
<i class="fa-solid fa-chevron-left"></i>
</div>

<!-- rendered content from content/_index.html -->
<div class="horizontal-blocks">
<div>
{{- .Content -}}
</div>
<div class="carrousel-btn carrousel-btn-right" id="carrousel-right">
<i class="fa-solid fa-chevron-right"></i>
</div>
</main>

<div class="vertical cards">
<aside class="right cards">
<div class="card">
<div class="card-title">
IVOA News & Upcoming Meetings
Expand All @@ -53,8 +48,12 @@
</div>

</div>
</aside>
</section>

</div>
<!-- rendered content from content/_index.html -->
<div>
{{- .Content -}}
</div>

{{ end }}
58 changes: 52 additions & 6 deletions static/css/ivoa.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,12 +42,6 @@ article {
margin: 2em auto;
}

.horizontal-blocks {
display: flex;
flex-direction: row;
column-gap: 1em;
}

table {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
Expand Down Expand Up @@ -184,6 +178,58 @@ body > footer a:hover {
body > footer { text-align: right }


/* =============================================================================
SECTION WITH HEADER, MAIN, LEFT-/RIGHT ASIDE AND FOOTER
*/

section {
display : grid;
grid-template-columns: 1fr auto 1fr;
grid-template-rows : auto;
grid-template-areas :
"header header header"
"left-aside main right-aside"
"footer footer footer";

/* Use all the section container width: */
justify-content: stretch;
/* Place this section at the top of the section container: */
align-content: start;

/* Use all the section inner width for its content: */
justify-items: stretch;
/* Use all the section inner height for its content: */
align-items : stretch;
}

section.with-only-right-aside {
grid-template-columns: auto 1fr;
grid-template-areas:
"header header"
"main right-aside"
"footer footer";
}

section.with-only-left-aside {
grid-template-columns: 1fr auto;
grid-template-areas:
"header header"
"left-aside main"
"footer footer";
}

section > header { grid-area: header }
section > main { grid-area: main }
section > aside.left { grid-area: left-aside }
section > aside.right { grid-area: right-aside }
section > footer { grid-area: footer }

section > header + main { margin-bottom: 1em }
section > main + footer { margin-top: 1em }
section > aside + main { margin-right: 1em }
section > main + aside { margin-left: 1em }


/* =============================================================================
PAGE CREATION AND UPDATED DATES
*/
Expand Down