Skip to content

Commit

Permalink
Adapt markup of templates to work properly under Bootstrap 5.3, mostl…
Browse files Browse the repository at this point in the history 
…y affecting cards. Remove some css classes that are not needed anymore. Fix issues with hero image.
  • Loading branch information
@conradolandia
conradolandia committed Jan 22, 2024
1 parent 1daf26d commit 22e74a0
Show file tree
Hide file tree
Showing 6 changed files with 113 additions and 121 deletions.
17 changes: 1 addition & 16 deletions assets/static/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -168,8 +168,7 @@ h6,
font-family: var(--main-font);
font-weight: 500;
line-height: 1.1;
margin: 0;
margin-bottom: 30px;
margin-bottom: 20px;
}

@media screen and (max-width: 480px) {
Expand Down Expand Up @@ -2330,20 +2329,6 @@ button:hover:disabled,
margin-top: 1em;
}

/* Center cards and kill whitespace */

.center-container {
font-size: 0;
text-align: center;
}

.center-container > .center-inner {
display: inline-block;
float: none;
font-size: 1rem;
vertical-align: middle;
}

/* Set up links for cards */

a.card-link-full {
Expand Down
53 changes: 28 additions & 25 deletions templates/blocks/dashboard.html
View file
Original file line number Diff line number Diff line change
@@ -1,33 +1,36 @@
{%- if this.widgets %}
<div class="container center-container">
{%- for widget in this.widgets.blocks %}
<div class="col-md-4 card-outer center-inner">
{%- if widget.url and widget.url.url != '' and this.link_whole_card %}
<a href="{{ widget.url }}" class="card-link-full">
{%- endif %}
<div class="card card-item widget {% if this.transparent_bg %}transparent-bg{%- else %}offset-bg{%- endif %}">
<div class="card-inner">
{%- if widget.content %}
<div class="widget-content">
{{ widget.content }}
<div class="container-xxl">
<div class="row row-cols-1 row-cols-lg-2 row-cols-xl-3 g-4 justify-content-center">
{%- for widget in this.widgets.blocks %}
<div class="col">
{%- if widget.url and widget.url.url != '' and this.link_whole_card %}
<a href="{{ widget.url }}" class="card-link-full">
{%- endif %}
<div class="card h-100 card-item widget {% if this.transparent_bg %}transparent-bg{%- else %}offset-bg{%- endif %}">
<div class="card-body">
{%- if widget.content %}
<div class="widget-content">
{{ widget.content }}
</div>
{%- endif %}
{%- if widget.title %}
{%- if widget.url and widget.url.url != '' and not this.link_whole_card %}
<a href="{{ widget.url }}" class="card-link-title">
<h3 class="card-title">{{ widget.title }}</h3>
</a>
{%- else %}
<h3 class="card-title">{{ widget.title }}</h3>
{%- endif %}
{%- endif %}
<p class="card-text">
{{ widget.description }}
</p>
</div>
{%- endif %}
{%- if widget.title %}
{%- if widget.url and widget.url.url != '' and not this.link_whole_card %}
<a href="{{ widget.url }}" class="card-link-title">
<h3>{{ widget.title }}</h3>
</a>
{%- else %}
<h3>{{ widget.title }}</h3>
{%- endif %}
{%- endif %}
{{ widget.description }}
</div>
<div class="card-spacer"></div>
{%- if widget.url and widget.url.url != '' and this.link_whole_card %}</a>{%- endif %}
</div>
{%- if widget.url and widget.url.url != '' and this.link_whole_card %}</a>{%- endif %}
{%- endfor %}
</div>
{%- endfor %}
</div>
{%- endif %}
{%- if this.update_script %}
Expand Down
45 changes: 24 additions & 21 deletions templates/blocks/services.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,14 @@
</div>
{%- endif %}
{%- if this.services %}
<div class="container center-container">
{%- for service in this.services.blocks %}
<div class="col-md-4 card-outer center-inner">
{%- if service.url and service.url.url != '' and this.link_whole_card %}
<a href="{{ service.url }}" class="card-link-full">
{%- endif %}
<div class="card card-item service {% if this.transparent_bg %}transparent-bg{%- else %}offset-bg{%- endif %}">
<div class="card-inner">
<div class="container-xxl">
<div class="row row-cols-1 row-cols-lg-2 row-cols-xl-3 g-4 justify-content-center">
{%- for service in this.services.blocks %}
<div class="col">
{%- if service.url and service.url.url != '' and this.link_whole_card %}
<a href="{{ service.url }}" class="card-link-full">
{%- endif %}
<div class="card h-100 card-item service {% if this.transparent_bg %}transparent-bg{%- else %}offset-bg{%- endif %}">
{%- if service.icon %}
{%- set service_img_file = record.attachments.get(service.icon) %}
<div class="icon">
Expand All @@ -23,21 +23,24 @@
{%- endif %}
</div>
{%- endif %}
{%- if service.title %}
{%- if service.url and service.url.url != '' and not this.link_whole_card %}
<a href="{{ service.url }}" class="card-link-title">
<h3>{{ service.title }}</h3>
</a>
{%- else %}
<h3>{{ service.title }}</h3>
{%- endif %}
{%- endif %}
{{ service.description }}
<div class="card-body">
{%- if service.title %}
{%- if service.url and service.url.url != '' and not this.link_whole_card %}
<a href="{{ service.url }}">
<h3 class="card-title">{{ service.title }}</h3>
</a>
{%- else %}
<h3 class="card-title">{{ service.title }}</h3>
{%- endif %}
{%- endif %}
<p class="card-text">
{{ service.description }}
</p>
</div>
</div>
<div class="card-spacer"></div>
{%- if service.url and service.url.url != '' and this.link_whole_card %}</a>{%- endif %}
</div>
{%- if service.url and service.url.url != '' and this.link_whole_card %}</a>{%- endif %}
{%- endfor %}
</div>
{%- endfor %}
</div>
{%- endif %}
83 changes: 43 additions & 40 deletions templates/blocks/team.html
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
{%- if this.members %}
<div class="container center-container">
{%- for member in this.members.blocks %}
<div class="col-md-4 card-outer center-inner">
{%- if member.url and member.url.url != '' and this.link_whole_card %}
<a href="{{ member.url }}" class="card-link-full">
{%- endif %}
<div class="card person {% if this.transparent_bg %}transparent-bg{%- else %}offset-bg{%- endif %}">
<div class="card-inner">
<div class="container-xxl">
<div class="row row-cols-1 row-cols-lg-2 row-cols-xl-3 g-4 justify-content-center">
{%- for member in this.members.blocks %}
<div class="col">
{%- if member.url and member.url.url != '' and this.link_whole_card %}
<a href="{{ member.url }}" class="card-link-full">
{%- endif %}
<div class="card h-100 card-item person {% if this.transparent_bg %}transparent-bg{%- else %}offset-bg{%- endif %}">
{%- if member.image %}
{%- set member_img_file = record.attachments.get(member.image) %}
{%- endif %}
Expand All @@ -17,42 +17,45 @@
{%- else %}
<img alt="Placeholder person" src="{{ '/static/images/placeholder_person.png' | asseturl }}" class="img-responsive">
{%- endif %}
{%- if member.name %}
{%- if member.url and member.url.url != '' and not this.link_whole_card %}
<a href="{{ member.url }}" class="card-link-title">
<h3>{{ member.name }}</h3>
</a>
{%- else %}
<h3>{{ member.name }}</h3>
{%- endif %}
{%- endif %}
<h4>{{ member.position | replace('<p>', '') | replace('</p>', '') | safe | trim }}</h4>
{{ member.description }}
<ul class="social">
{%- if member.website and member.website.url != '' %}
<li><a href="{{ member.website }}" aria-label="Website"><i class="icon-globe2"></i></a></li>
{%- endif %}
{%- if member.facebook and member.facebook.url != '' %}
<li><a href="{{ member.facebook }}" aria-label="Facebook"><i class="icon-facebook"></i></a></li>
{%- endif %}
{%- if member.twitter and member.twitter.url != '' %}
<li><a href="{{ member.twitter }}" aria-label="Twitter"><i class="icon-twitter"></i></a></li>
{%- endif %}
{%- if member.instagram and member.instagram.url != '' %}
<li><a href="{{ member.instagram }}" aria-label="Instagram"><i class="icon-instagram"></i></a></li>
{%- endif %}
{%- if member.github and member.github.url != '' %}
<li><a href="{{ member.github }}" aria-label="Github"><i class="icon-github"></i></a></li>
<div class="card-body">
{%- if member.name %}
{%- if member.url and member.url.url != '' and not this.link_whole_card %}
<a href="{{ member.url }}">
<h3 class="card-title">{{ member.name }}</h3>
</a>
{%- else %}
<h3 class="card-title">{{ member.name }}</h3>
{%- endif %}
{%- if member.github and member.linkedin.url != '' %}
<li><a href="{{ member.linkedin }}" aria-label="Linkedin"><i class="icon-linkedin"></i></a></li>
{%- endif %}
</ul>
<h4>{{ member.position | replace('<p>', '') | replace('</p>', '') | safe | trim }}</h4>
<p class="card-text">
{{ member.description }}
</p>
<ul class="social">
{%- if member.website and member.website.url != '' %}
<li><a href="{{ member.website }}" aria-label="Website"><i class="icon-globe2"></i></a></li>
{%- endif %}
{%- if member.facebook and member.facebook.url != '' %}
<li><a href="{{ member.facebook }}" aria-label="Facebook"><i class="icon-facebook"></i></a></li>
{%- endif %}
{%- if member.twitter and member.twitter.url != '' %}
<li><a href="{{ member.twitter }}" aria-label="Twitter"><i class="icon-twitter"></i></a></li>
{%- endif %}
{%- if member.instagram and member.instagram.url != '' %}
<li><a href="{{ member.instagram }}" aria-label="Instagram"><i class="icon-instagram"></i></a></li>
{%- endif %}
{%- if member.github and member.github.url != '' %}
<li><a href="{{ member.github }}" aria-label="Github"><i class="icon-github"></i></a></li>
{%- endif %}
{%- if member.github and member.linkedin.url != '' %}
<li><a href="{{ member.linkedin }}" aria-label="Linkedin"><i class="icon-linkedin"></i></a></li>
{%- endif %}
</ul>
</div>
</div>
<div class="card-spacer"></div>
{%- if member.url and member.url.url != '' and this.link_whole_card %}</a>{%- endif %}
</div>
{%- if member.url and member.url.url != '' and this.link_whole_card %}</a>{%- endif %}
{%- endfor %}
</div>
{%- endfor %}
</div>
{%- endif %}
30 changes: 14 additions & 16 deletions templates/macros/blog.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,28 +15,26 @@ <h2><a href="{{ post | url }}">{{ post.title }}</a></h2>
<h1>{{ post.title }}</h1>
{%- endif %}

<div class="row">
<div class="row align-items-center mb-2 g-2">
{%- if author.image %}
<div class="col-auto">
<div class="meta-blog-author">
<img alt="{{ author.name | striptags | striptags }} photo" class="author-img" src="{{ (author.path ~ '/' ~ author.image) | url }}">
</div>
</div>
{%- endif %}
<div class="col">
<div class="meta-blog-index">
<p>
{%- if author.name %}
{{ author.name }}<br>
{%- elif author %}
{{ author }}<br>
{%- endif %}
{%- if post.pub_date %}
<span class="small">{{ post.pub_date.strftime('%Y-%m-%d') }}</span>
{%- endif %}
</p>
</div>
{%- endif %}
<div class="col">
<div class="meta-blog-index">
{%- if author.name %}
{{ author.name }}<br>
{%- elif author %}
{{ author }}<br>
{%- endif %}
{%- if post.pub_date %}
<span class="small">{{ post.pub_date.strftime('%Y-%m-%d') }}</span>
{%- endif %}
</div>
</div>
</div>
</div>

Expand All @@ -48,7 +46,7 @@ <h1>{{ post.title }}</h1>
{%- if post.summary %}
{{ post.summary }}
{%- endif %}
<p class="float-end">
<p class="text-end">
<a href="{{ post | url }}">Read more...</a>
</p>
{%- endif %}
Expand Down
6 changes: 3 additions & 3 deletions templates/single-layout.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,10 +67,10 @@
{%- if this.hero_image %}
<div id="section-home" class="js-fullheight-home hero-section" data-section="home" data-stellar-background-ratio="0.5">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="row row-cols-1 row-cols-lg-2 g-4 justify-content-center justify-content-lg-start">
<div class="col">
<div class="js-fullheight-home fh5co-copy">
<div class="js-fullheight-home fh5co-copy-inner">
<div class="js-fullheight-home fh5co-copy-inner text-center text-lg-start">
{%- if this.hero_title %}
<h1>{{ this.hero_title }}</h1>
{%- endif %}
Expand Down

0 comments on commit 22e74a0

Please sign in to comment.