Skip to content

Commit

Permalink
Website makeover with hand-made CSS (#42)
Browse files Browse the repository at this point in the history 
Redo the entire design of the website using only vanilla CSS. Removed
all javascript and Bootstrap. Responsive columns are achieved through
flexbox and setting a minwidth on one of the columns. The CSS is much
simpler and easier to maintain. Updated some parts of the lab manual.
Got rid of some pages to make the website a bit more compact. Took a lot
of inspiration from these writings by Andy Bell:

* https://andy-bell.co.uk/cube-css/
* https://andy-bell.co.uk/a-modern-css-reset/
* https://set.studio/some-simple-ways-to-make-content-look-good/
  • Loading branch information
@leouieda
leouieda authored Oct 11, 2023
1 parent 10c5a02 commit 959fff5
Show file tree
Hide file tree
Showing 127 changed files with 10,687 additions and 5,603 deletions.
203 changes: 97 additions & 106 deletions _templates/base.html
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,7 @@
{%- import "macros.html" as macros -%}

<!DOCTYPE html>
<html lang="{{ config.language }}">

{%- macro make_nav_link(item, page, site) %}
{% set aria = "" %}
{% set class = "nav-link" %}
{% if page.id == item.id or page.parent == item.id|replace('/index', '') %}
{% set class = class + " active" %}
{% set aria = 'aria-current="page"' %}
{% endif %}
<a class="{{ class }}" {{ aria }} href="{{ site[item.id].path|relative_to(page.path) }}">{{ item.name }}</a>
{%- endmacro %}

<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Expand All @@ -23,137 +14,137 @@
<title>{{ title }}</title>

{%- if config.favicon is defined %}
<link rel="shortcut icon" href="{{ config.favicon|e|relative_to(page.path) }}"/>
<link rel="shortcut icon" href="{{ config.favicon|relative_to(page.path)|e }}"/>
{%- endif %}

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="{{ "css/bootstrap-5.1/bootstrap.min.css"|relative_to(page.path) }}">
<!-- Atkinson Hyperlegible font -->
<link rel="stylesheet" href="{{ "pkg/atkinson-hyperlegible/fonts.css"|relative_to(page.path) }}" />

<!-- Ubuntu Mono font -->
<link rel="stylesheet" href="{{ "pkg/ubuntu-mono/fonts.css"|relative_to(page.path) }}" />

<!-- FontAwsome icons -->
<link rel="stylesheet" href="{{ "css/fontawesome/css/all.css"|relative_to(page.path) }}">
<link rel="stylesheet" href="{{ "pkg/fontawesome/css/all.css"|relative_to(page.path) }}">

<!-- Academicons icons -->
<link rel="stylesheet" href="{{ "css/academicons-1.9.1/css/academicons.min.css"|relative_to(page.path) }}">
<!-- Animate.css -->
<link rel="stylesheet" href="{{ "css/animate.css"|relative_to(page.path) }}">
<link rel="stylesheet" href="{{ "pkg/academicons-1.9.1/css/academicons.min.css"|relative_to(page.path) }}">

<!-- Andy Bell's CSS reset -->
<link rel="stylesheet" href="{{ "css/reset.css"|relative_to(page.path) }}" />

<!-- Main CSS stylesheet -->
<link rel="stylesheet" href="{{ "css/style.css"|relative_to(page.path) }}">

<!-- Plausible analytics for anonymous usage statistics -->
<script defer data-domain="compgeolab.org" src="https://plausible.io/js/plausible.js"></script>

{%- block extrahead %}{% endblock %}

</head>

<body>
{%- if page.banner_title is defined %}
{%- set header_class = "full-height" %}
{%- else %}
{%- set header_class = "" %}
{%- endif %}
<header class="{{ header_class }}">
<nav class="navbar navbar-expand-lg navbar-dark" aria-label="primary-navigation">
<div class="container align-middle">
<span class="navbar-brand">
<img alt="{{ config.site_name }}" src="{{ config.brand|relative_to(page.path) }}">
</span>
<button class="navbar-toggler" type="button"
data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false"
aria-label="Toggle navigation">
<span><i class="fas fa-bars" aria-hidden="true"></i> Menu</span>
</button>
<div class="collapse navbar-collapse align-middle" id="navbarNav">
<ul class="navbar-nav ms-lg-auto text-end">
{%- for item in config.navigation %}
<li class="nav-item">
{{ make_nav_link(item, page, site) }}
<header>
<div class="spread content-wide">
<a href="{{ site['index'].path|relative_to(page.path) }}">
<img src="{{ config.brand|relative_to(page.path) }}" alt="{{ config.site_name }}">
</a>
<nav aria-label="Main">
<ul class="list-inline" role="list">
{%- for item in config.navigation %}
<li>
{{ macros.nav_link(item, page, site) }}
</li>
{%- endfor %}
</ul>
</nav>
</div>
</header>

<main class="flow">
{%- if page.banner_image is defined %}
<div class="banner" style="background-image: url({{ page.banner_image|relative_to(page.path) }})" >
<div class="flow content">
<h1>{{ page.banner_title }}</h1>
<p>{{ page.banner_subtitle }}</p>
<ul class="list-inline" role="list">
{%- for item in page.banner_links %}
<li>
{%- if item.id[:4] == "http" %}
<a href="{{ item.id }}" target="_blank">{{ item.name }}</a>
{%- else %}
{{ macros.nav_link(item, page, site) }}
{%- endif %}
</li>
{%- endfor %}
</ul>
</div>
</div>
</nav>
{%- if page.banner_title is defined %}
<div class="container text-center banner">
<div class="banner-title">
<h1>
{{ page.banner_title }}
</h1>
{%- if page.banner_subtitle is defined %}
<p>
{{ page.banner_subtitle }}
</p>
{%- endif %}
</div>
<a class="downward-link" href="#scroll-anchor"><i class="fas fa-chevron-down" aria-hidden="true"></i></a>
</div>
{%- endif %}
<div id="scroll-anchor"></div>
</header>
<main>
<div class="container page-content overflow-hidden">
<div class="content flow extra-space">
{%- block content %}
{{ page.body }}
{%- endblock %}
</div>
</main>

<footer>
<div class="container text-center">
<nav class="footer-nav mb-4" aria-label="secondary-navigation">
<ul class="nav">
{%- for item in config.navigation %}
<li class="nav-item">
{{ make_nav_link(item, page, site) }}
</li>
{%- endfor %}
<div class="content-wide flow flow-large">
<nav aria-label="Main">
<ul class="list-inline" role="list">
{%- for item in config.navigation %}
<li>
{{ macros.nav_link(item, page, site) }}
</li>
{%- endfor %}
</ul>
</nav>
<ul class="list-inline mb-5">
<li class="list-inline-item">
<a aria-label="GitHub" href="https://github.com/{{ config.github }}" target="_blank"><i class="fab fa-github fa-lg mx-3" title="GitHub" aria-hidden="true"></i></a>
<ul class="list-inline" role="list">
<li>Follow the lab:</li>
<li>
<a href="https://github.com/{{ config.github }}" rel="me" target="_blank">
GitHub
</a>
</li>
<li class="list-inline-item">
<!-- The rel="me" attribute verifies for Mastodon that I own this domain -->
<a aria-label="Mastodon" href="https://{{ config.mastodon_server }}/@{{ config.mastodon }}" target="_blank" rel="me"><i class="fab fa-mastodon fa-lg mx-3" title="Mastodon" aria-hidden="true"></i></a>
<li>
<a href="{{ config.researchgate }}" rel="me" target="_blank">
ResearchGate
</a>
</li>
<li class="list-inline-item">
<a aria-label="LinkedIn" href="https://www.linkedin.com/in/{{ config.linkedin }}" target="_blank"><i class="fab fa-linkedin fa-lg mx-3" title="LinkedIn" aria-hidden="true"></i></a>
<li>
<a href="https://{{ config.mastodon_server }}/@{{ config.mastodon }}" rel="me" target="_blank">
Mastodon
</a>
</li>
<li class="list-inline-item">
<a aria-label="ORCID" href="https://orcid.org/{{ config.orcid }}" target="_blank"><i class="ai ai-orcid fa-lg mx-3" title="ORCID" aria-hidden="true"></i></a>
<li>
<a href="https://www.linkedin.com/in/{{ config.linkedin }}" rel="me" target="_blank">
LinkedIn
</a>
</li>
</ul>
<p>
{{ config.location.department }}
•
{{ config.location.school }}
•
{{ config.location.university }}
•
{{ config.location.country }}
</p>
<p>
Last updated {{ build.today.strftime('%Y/%m/%d') }} from commit
<a href="https://github.com/{{ config.repository }}/commit/{{ build.commit }}"><code>{{ build.commit }}</code></a>.
Built with <a href="https://nene.leouieda.com">Nēnē</a> {{ build.nene_version }}.
</p>
<p>
Source code used to build this site: <a href="https://github.com/{{ config.repository }}"><code>{{ config.repository }}</code></a>.
</p>
<p>
Copyright &copy; {{ build.today.year }} {{ config.author }}
</p>
<div class="font-small">
<p>
{{ config.location.department }}
•
{{ config.location.school }}
•
{{ config.location.university }}
•
{{ config.location.country }}
</p>
<p>
Last updated {{ build.today.strftime('%Y/%m/%d') }} from source code
at
<i class="fab fa-github" aria-label="hidden"></i>
<a href="https://github.com/{{ config.repository }}/commit/{{ build.commit }}">
{{ config.repository }}@{{ build.commit }}
</a>
</p>
<p>
Copyright &copy; {{ build.today.year }} {{ config.author }}
</p>
</div>
</div>
</footer>

<!-- Bootstrap bundled Javascript (with their dependencies) -->
<script src="{{ "js/bootstrap-5.1/bootstrap.bundle.min.js"|relative_to(page.path) }}"
integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"
crossorigin="anonymous"></script>
<!-- Altmetric badge -->
<script src='https://d1bxh8uas1mnw7.cloudfront.net/assets/embed.js'></script>
<!-- Dimensions badge -->
<script async src="https://badge.dimensions.ai/badge.js" charset="utf-8"></script>

</body>
</html>
26 changes: 26 additions & 0 deletions _templates/home.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
{% extends "base.html" %}

{%- import "macros.html" as macros %}

{%- block content %}
{{ page.body }}
<h2>News from the lab</h2>
<p>
The latest news and updates from CompGeoLab members.
</p>
<ul class="flow fa-ul">
{%- for item in (site["news/index"]["siblings"]|sort(attribute="date", reverse=True)|list)[:4] %}
<li>
<i class="fa-li far fa-arrow-alt-circle-right fa-fw" aria-hidden="true"></i>
<a class="text-bold" href="{{ item.path|relative_to(page.path) }}">{{ item.title }}</a>
<br>
<span class="font-small text-muted">{{ item.body|striptags|trim|truncate(200) }}</span>
</li>
{%- endfor %}
</ul>
<p>
Older news items: {{ macros.page_link("news/index", page, site) }}
</p>
{%- endblock %}


32 changes: 0 additions & 32 deletions _templates/index.html
View file

This file was deleted.

Loading

0 comments on commit 959fff5

Please sign in to comment.