Merge pull request #8 from piazzai/develop

Revamp website and make many small fixes

README.md

@@ -2,10 +2,10 @@
 
 Nagymaros is a [Jekyll](https://jekyllrb.com) theme designed for conferences, workshops, meetings, and similar events. It has a simple and intuitive structure featuring four pages that provide key information about the event:
 
-- An index, meant for basic details and links to external sources, such as submission systems.
+- An index for alerts, basic details, and links to external sources such as submission systems.
 - A program, allowing for single or multi-day schedules and color-coded event categories.
 - A map of conference locations, customizable with markers, areas, and tooltips.
-- An alphabetical list of contributors, with optional roles and email addresses.
+- An alphabetical list of participants, with optional roles, affiliations, and email addresses.
 
 The theme is based on [Bootstrap 5](https://getbootstrap.com/), which makes it mobile-first and fully responsive. Body text is set in Inter, a clean sans-serif typeface that guarantees readability at small screen sizes. A slab-serif typeface, Zilla Slab, is used instead in display headings. The layout is adapted from [jekyll-conference-theme](https://github.com/DigitaleGesellschaft/jekyll-theme-conference) and remains quite similar to it, but compared to this theme, Nagymaros aims to be simpler and easier to customize.
 
@@ -23,15 +23,15 @@ If you choose to install the theme as a gem, your site should include at a minim
 .
 ├── 404.md
 ├── _config.yml
-├── contributors.md
 ├── _data
-│   ├── contributors.yml
 │   ├── index.yml
-│   ├── locations.yml
+│   ├── map.yml
+│   ├── participants.yml
 │   └── program.yml
 ├── Gemfile
 ├── index.md
-├── locations.md
+├── map.md
+├── participants.md
 └── program.md
 
 ```
@@ -61,7 +61,11 @@ To customize hidden files, you can create new files with the same names and path
 
 ## Usage
 
-Core customization occurs in `_config.yml`. Aside from the usual configuration variables, you can set a value for `copyright`, which corresponds to the name of the copyright holder in the notice within the theme's footer. If no value is provided for this variable, the whole copyright notice is suppressed (this is the default). Finally, you can set a value for `indexing`, which tells search engine crawlers whether to index your site. The default value is `false`, and in this case the following code is included in the head of every page:
+Core customization occurs in `_config.yml`. Aside from the usual configuration variables, you can set a value for `home`, which will determine the destination of the site title button in the header, as well as the return link from the 404 page. Only use this if you want these buttons to lead somewhere different than the index.
+
+Next, you can set a value for `copyright`, which corresponds to the name of the copyright holder in the notice within the theme's footer. If no value is provided for this variable, the whole copyright notice is suppressed (default).
+
+Finally, you can set a value for `indexing`, which tells search engine crawlers whether to index your site. The default value is `false`, and in this case the following code is included in the head of every page:
 
 ```html
 <meta name="robots" content="none">
@@ -75,7 +79,7 @@ The order of appearance of pages in the theme's navigation bar is determined by
 
 Customizing the CSS is possible by creating a file `_sass/_custom.scss`. You can use this both to define new styles or to overwrite the theme's defaults. The file will be automatically compiled during build.
 
-For convenience, customization of the theme's color scheme is also possible via YAML. In this case, create a file called `skin.yml` in your `_data` folder and assign new colors from the [Open Color](https://yeun.github.io/open-color) library to various HTML elements using the color-number convention. Here is an example:
+For convenience, customization of the theme's color scheme is also possible via YAML. In this case, create a file `_data/skin.yml` and assign new colors from the [Open Color](https://yeun.github.io/open-color) library to various HTML elements. Make sure to stick to the library's color-number naming convention. Here is an example:
 
 ```yaml
 a:

_includes/footer.html

@@ -1,6 +1,6 @@
 {% assign year = site.time | date: '%Y' %}
 {% if site.copyright and site.copyright != '' %}
 <footer class="container mb-4">
-    <small class="text-muted">&copy; {{ year }} {{ site.copyright }}. All rights reserved.</small>
+    <small class="text-muted">&copy;{{ year }} {{ site.copyright }}. All rights reserved.</small>
 </footer>
 {% endif %}

_includes/head.html

@@ -11,8 +11,12 @@
     <title>{{ site.title | append: ' | ' | append: site.description }}</title>
     {% endif %}
     {% endif %}
-    <link rel="stylesheet" href="{{ '/assets/css/bootstrap.css' | prepend: site.url }}">
-    <link rel="stylesheet" href="{{ '/assets/css/leaflet.css' | prepend: site.url }}">
-    <link rel="stylesheet" href="{{ '/assets/css/open-color.css' | prepend: site.url }}">
-    <link rel="stylesheet" href="{{ '/assets/css/styles.css' | prepend: site.url }}">
+    <link rel="apple-touch-icon" sizes="180x180" href="{{ 'assets/icons/apple-touch-icon.png' | relative_url }}">
+    <link rel="icon" type="image/png" sizes="32x32" href="{{ 'assets/icons/favicon-32x32.png' | relative_url }}">
+    <link rel="icon" type="image/png" sizes="16x16" href="{{ 'assets/icons/favicon-16x16.png' | relative_url }}">
+    <link rel="manifest" href="{{ 'assets/icons/site.webmanifest' | relative_url }}">
+    <link rel="stylesheet" href="{{ 'assets/css/bootstrap.css' | relative_url }}">
+    <link rel="stylesheet" href="{{ 'assets/css/leaflet.css' | relative_url }}">
+    <link rel="stylesheet" href="{{ 'assets/css/open-color.css' | relative_url }}">
+    <link rel="stylesheet" href="{{ 'assets/css/styles.css' | relative_url }}">
 </head>

_includes/header.html

@@ -1,7 +1,13 @@
+{% if site.home %}
+{% assign return = site.home | relative_url %}
+{% else %}
+{% assign return = '/' | relative_url %}
+{% endif %}
+
 <header class="bg-{{ site.data.skin.header.bg | default: 'gray-4' }}">
     <div class="container">
         <nav class="navbar navbar-expand-sm">
-            <a class="navbar-brand" href="{{ site.url }}">{{ site.title }}</a>
+            <a class="navbar-brand" href="{{ return }}">{{ site.title }}</a>
             <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navigation" aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation">
                 <span class="navbar-toggler-icon"></span>
             </button>
@@ -11,7 +17,7 @@
                     {% for link in links %}
                     {% if link.navorder %}
                     {% assign current = link.name | split: '.' | first %}
-                    {% assign href = link.url | prepend: site.url %}
+                    {% assign href = link.url | relative_url %}
                     {% if page.layout == current %}
                     <a class="nav-link active" aria-current="page" href="{{ href }}">{{ link.title }}</a>
                     {% else %}

_layouts/404.html

@@ -4,6 +4,11 @@
 
 {% include metadata.liquid %}
 {% assign digit_bg = site.data.skin.digit.bg | default: 'gray-3' %}
+{% if site.home %}
+{% assign return = site.home | relative_url %}
+{% else %}
+{% assign return = '/' | relative_url %}
+{% endif %}
 
 <main>
     <div class="container text-center">
@@ -12,6 +17,6 @@
         <span {{ span }}>0</span>
         <span {{ span }}>4</span>
         <h1 class="display-5">{{ title }}</h1>
-        <p class="fs-5"><a href="{{ site.url }}">Return to the homepage</a></p>
+        <p class="fs-5"><a href="{{ return }}">Return to the homepage</a></p>
     </div>
 </main>

_layouts/default.html

@@ -5,9 +5,9 @@
 
 <body>
     {{ content }}
-    <script src="{{ '/assets/js/bootstrap.js' | prepend: site.url }}"></script>
-    <script src="{{ '/assets/js/leaflet.js' | prepend: site.url }}"></script>
-    <script src="{{ '/assets/js/main.js' | prepend: site.url }}"></script>
+    <script src="{{ 'assets/js/bootstrap.js' | relative_url }}"></script>
+    <script src="{{ 'assets/js/leaflet.js' | relative_url }}"></script>
+    <script src="{{ 'assets/js/main.js' | relative_url }}"></script>
 </body>
 
 </html>

_layouts/index.html

@@ -6,6 +6,24 @@
 {% include header.html %}
 {% assign index_bg = site.data.skin.index.bg  | default: 'gray-2' %}
 
+<div class="container">
+    {% assign alerts = site.data.index.alerts %}
+    {% for alert in alerts %}
+    {% assign classes = 'mt-4' %}
+    {% unless forloop.first %}
+    {% assign classes = 'mt-2' %}
+    {% endunless %}
+    {% assign color = alert.color | default: 'yellow-1' %}
+    <div class="{{ classes }}">
+        <div class="alert alert-primary bg-{{ color }} alert-dismissible m-0 fade show text-center small" role="alert">
+            <strong>{{ alert.title }}</strong>
+            <span>{{ alert.text }}</span>
+            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+        </div>
+    </div>
+    {% endfor %}
+</div>
+
 <main class="my-4">
     <div class="container px-5 py-3 bg-{{ index_bg }} rounded">
         <h1 class="display-3">{{ title }}</h1>
@@ -16,9 +34,9 @@ <h1 class="display-3">{{ title }}</h1>
         <div class="btn-group-lg mt-4 mb-3" role="group">
             {% assign buttons = site.data.index.buttons %}
             {% for button in buttons %}
-            {% assign classes = 'btn btn-primary d-block d-lg-inline-block my-lg-0' %}
-            {% unless forloop.first or forloop.last %}
-            {% assign classes = classes | append: ' my-2 mx-lg-2' %}
+            {% assign classes = 'btn btn-primary d-block d-lg-inline-block my-lg-0 my-2' %}
+            {% unless forloop.last %}
+            {% assign classes = classes | append: ' me-lg-2' %}
             {% endunless %}
             {% if button.disabled %}
             {% assign classes = classes | append: ' disabled' %}

_layouts/locations.html → _layouts/map.html

@@ -9,7 +9,7 @@
     <div class="container">
         <h1 class="display-5">{{ title }}</h1>
         {{ content }}
-        {% if site.data.locations %}
+        {% if site.data.map %}
         <hr class="my-4">
         <div id="map"></div>
         {% endif %}

_layouts/contributors.html → _layouts/participants.html

@@ -9,9 +9,9 @@
     <div class="container">
         <h1 class="display-5">{{ title }}</h1>
         {{ content }}
-        {% if site.data.contributors %}
+        {% if site.data.participants %}
         <hr class="my-4">
-        {% assign groups = site.data.contributors.groups %}
+        {% assign groups = site.data.participants.groups %}
         {% for group in groups %}
         {% if group.title %}
         <h5 class="fw-normal">{{ group.title }}</h5>
@@ -23,13 +23,18 @@ <h5 class="fw-normal">{{ group.title }}</h5>
         {% endif %}
         <div {{ div }}>
             <ul class="list-unstyled">
-                {% assign members = group.members | sort_natural: 'surname' %}
+                {% if group.sort %}
+                {% assign members = group.members | sort_natural: 'name' %}
+                {% else %}
+                {% assign members = group.members %}
+                {% endif %}
                 {% for member in members %}
                 {% assign full = member.name | append: ' ' | append: member.surname %}
+                {% assign affil = member.affil %}
                 {% if member.email %}
-                <li class="fw-light"><a href="mailto:{{ member.email }}">{{ full }}</a></li>
+                <li><a href="mailto:{{ member.email }}">{{ full }}</a> <small class="text-muted">{{ affil }}</small></li>
                 {% else %}
-                <li class="fw-light">{{ full }}</li>
+                <li>{{ full }} <small class="text-muted">{{ affil }}</small></li>
                 {% endif %}
                 {% endfor %}
             </ul>

_layouts/program.html

@@ -27,8 +27,7 @@ <h5 class="accordion-header">
                             <ul class="list-unstyled ms-3 ms-lg-0 lh-sm">
                                 {% for event in day.events %}
                                 {% if event.category %}
-                                {% assign category = categories | find: 'name', event.category %}
-                                {% assign color = category.color %}
+                                {% assign color = categories | where: 'name', event.category | map: 'color' | first %}
                                 {% else %}
                                 {% assign color = 'gray-4' %}
                                 {% endif %}
@@ -48,24 +47,24 @@ <h5 class="fw-normal m-0 mb-2">{{ event.title }}</h5>
                                         <p class="fw-light m-0">
                                         {% if event.paper.first %}
                                             {% for paper in event.paper %}
-                                            <a href="{{ paper }}" target="_blank">[Paper {{ forloop.index }}]</a>
+                                            <a href="{{ paper | relative_url }}">[Paper {{ forloop.index }}]</a>
                                             {% endfor %}
                                         {% elsif event.paper %}
-                                        <a href="{{ event.paper }}" target="_blank">[Paper]</a>
+                                        <a href="{{ event.paper | relative_url }}">[Paper]</a>
                                         {% endif %}
                                         {% if event.poster.first %}
                                             {% for poster in event.poster %}
-                                            <a href="{{ poster }}" target="_blank">[Poster {{ forloop.index }}]</a>
+                                            <a href="{{ poster | relative_url }}">[Poster {{ forloop.index }}]</a>
                                             {% endfor %}
                                         {% elsif event.poster %}
-                                        <a href="{{ event.poster }}" target="_blank">[Poster]</a>
+                                        <a href="{{ event.poster | relative_url }}">[Poster]</a>
                                         {% endif %}
                                         {% if event.slides.first %}
                                             {% for slides in event.slides %}
-                                            <a href="{{ slides }}" target="_blank">[Slides {{ forloop.index }}]</a>
+                                            <a href="{{ slides | relative_url }}">[Slides {{ forloop.index }}]</a>
                                             {% endfor %}
                                         {% elsif event.slides %}
-                                        <a href="{{ event.slides }}" target="_blank">[Slides]</a>
+                                        <a href="{{ event.slides | relative_url }}">[Slides]</a>
                                         {% endif %}
                                         </p>
                                     </div>

_sass/_fonts.scss

@@ -1,46 +1,27 @@
-$weights: (
-  "Light": 300,
-  "Medium": 500,
-  "Bold": 700,
-);
-
-$styles: (
-  normal: "",
-  italic: "Italic",
-);
-
-@each $style, $style-value in $styles {
-  @font-face {
-    font-family: "Zilla Slab";
-    font-display: swap;
-    font-style: #{$style};
-    font-weight: 300;
-    src: url("../webfonts/ZillaSlab-Light#{$style-value}.woff2") format("woff2");
-  }
+@font-face {
+  font-family: InterVariable;
+  font-style: normal;
+  font-weight: 100 900;
+  src: url("../fonts/InterVariable.woff2?v=4.0") format("woff2");
+}
 
-  @each $weight, $weight-value in $weights {
-    @font-face {
-      font-family: "Inter";
-      font-display: swap;
-      font-style: #{$style};
-      font-weight: #{$weight-value};
-      src: url("../webfonts/Inter-#{$weight}#{$style-value}.woff2") format("woff2");
-    }
-  }
+@font-face {
+  font-family: InterVariable;
+  font-style: italic;
+  font-weight: 100 900;
+  src: url("../fonts/InterVariable-Italic.woff2?v=4.0") format("woff2");
 }
 
 @font-face {
-  font-family: "Inter";
-  font-display: swap;
+  font-family: "Zilla Slab";
   font-style: normal;
-  font-weight: 400;
-  src: url("../webfonts/Inter-Regular.woff2") format("woff2");
+  font-weight: 300;
+  src: url("../fonts/ZillaSlab-Light.woff2") format("woff2");
 }
 
 @font-face {
-  font-family: "Inter";
-  font-display: swap;
+  font-family: "Zilla Slab";
   font-style: italic;
-  font-weight: 400;
-  src: url("../webfonts/Inter-Italic.woff2") format("woff2");
-}
+  font-weight: 300;
+  src: url("../fonts/ZillaSlab-LightItalic.woff2") format("woff2");
+}

_sass/overrides/_bootstrap.scss

@@ -7,13 +7,6 @@ a {
   }
 }
 
-.accordion-item {
-  border-color: $accordion-item_border;
-  border-width: 0.15rem;
-  color: inherit;
-  background-color: transparent;
-}
-
 .accordion-button {
   color: inherit;
   background-color: $accordion-button_bg;
@@ -29,6 +22,13 @@ a {
   }
 }
 
+.accordion-item {
+  border-color: $accordion-item_border;
+  border-width: 0.15rem;
+  color: inherit;
+  background-color: transparent;
+}
+
 .alert-primary {
   background-color: $alert-primary_bg;
   border-color: transparent !important;
@@ -38,7 +38,7 @@ a {
 body {
   background-color: $body_bg;
   color: $body_color;
-  font-family: "Inter", var(--bs-font-sans-serif);
+  font-family: "InterVariable", var(--bs-font-sans-serif);
   font-size: 1.15rem;
 }
 
@@ -183,4 +183,4 @@ svg {
       color: $text-muted_hover;
     }
   }
-}
+}