Simplify design

_header.html

@@ -5,11 +5,6 @@
 <script src="scripts/fuse-6.6.2.min.js"></script>
 <script src="scripts/autocomplete-0.38.1.min.js"></script>
 <script src="scripts/packages.js"></script>
-<link rel="stylesheet" href="style.css">
-
-<!-- Isotope -->
-<script src="scripts/isotope-3.0.6.min.js"></script>
-<script src="scripts/imagesloaded-5.0.0.min.js"></script>
 
 <!-- Matomo -->
 <script src="https://www.tesselle.org/scripts/unicorn.js"></script>

_quarto.yml

@@ -2,22 +2,80 @@ project:
   type: website
 
 website:
-  title: "tesselle"
+  title: "packages.tesselle"
+
   site-url: https://www.tesselle.org
   repo-url: https://github.com/tesselle/packages
-  image: https://www.tesselle.org/images/tesselle.png
-  favicon: https://www.tesselle.org/images/icons/favicon.ico
-  twitter-card:
-    site: "@nfrerebeau"
-    creator: "@nfrerebeau"
-  open-graph: true
+  repo-actions: [edit, issue]
+
+  favicon: images/icons/favicon.ico
+  image: images/card.png
+  margin-header: |
+    ![](/images/tesselle.png)
+  open-graph:
+    image: https://www.tesselle.org/images/card.png
+
   search: false
+  navbar:
+    background: "#ffd402ff"
+    pinned: true
+    right:
+      - icon: house
+        text: Homepage
+        href: "https://www.tesselle.org"
+      - sidebar:packages
+      - icon: github
+        text: Github
+        href: https://github.com/tesselle/
+      - icon: download
+        text: R-universe
+        href: https://tesselle.r-universe.dev/
+
+  sidebar:
+    - id: packages
+      title: "Packages"
+      collapse-level: 1
+      contents:
+        - section: "Count data"
+          contents:
+            - text: tabula
+              url:  https://packages.tesselle.org/tabula/
+        - section: "Compositional data"
+          contents:
+            - text: nexus
+              url:  https://packages.tesselle.org/nexus/
+        - section: "Chronological data"
+          contents:
+            - text: aion
+              url:  https://packages.tesselle.org/aion/
+            - text: kairos
+              url:  https://packages.tesselle.org/kairos/
+        - section: "Multivariate data"
+          contents:
+            - text: arkhe
+              url:  https://packages.tesselle.org/arkhe/
+            - text: dimensio
+              url:  https://packages.tesselle.org/dimensio/
+        - section: "Signal processing"
+          contents:
+            - text: alkahest
+              url:  https://packages.tesselle.org/alkahest/
+        - section: "Data visualization"
+          contents:
+            - text: khroma
+              url:  https://packages.tesselle.org/khroma/
+            - text: isopleuros
+              url:  https://packages.tesselle.org/isopleuros/
+        - section: "Datasets"
+          contents:
+            - text: folio
+              url:  https://packages.tesselle.org/folio/
   page-footer:
     center: |
-      <a href="https://www.u-bordeaux-montainge.fr"><img src="https://www.tesselle.org/images/UBM.jpg" class="logo-institution" /></a><a href="https://www.cnrs.fr"><img src="https://www.tesselle.org/images/CNRS.png" class="logo-institution" /></a>
+      <a href="https://www.u-bordeaux-montainge.fr"><img src="https://www.tesselle.org/images/logo-ubm.svg" class="logo-institution" /></a><a href="https://www.cnrs.fr"><img src="https://www.tesselle.org/images/logo-cnrs.svg" class="logo-institution" /></a>
       <br>The tesselle project is supported by <a href="https://www.archeosciences-bordeaux.fr/" target="_blank">Archéosciences Bordeaux</a>, the <a href="https://mshs.univ-toulouse.fr/" target="_blank"><abbr title="Centre de Recherche et d'Études pour l'Art Préhistorique">CREAP</abbr></a> and the <a href="https://www.huma-num.fr/" target="_blank"><abbr title="Très Grande Infrastructure de Recherche">TGIR</abbr> Huma-Num</a>.
 
 format:
   html:
-    theme: default
+    theme: custom.scss
     include-in-header: _header.html

style.css → custom.scss

@@ -1,3 +1,29 @@
+/*-- scss:defaults --*/
+$theme: "cosmo" !default;
+
+@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');
+
+$headings-font-family: "ubuntu", sans-serif;
+$font-family-base: "roboto", sans-serif;
+$font-family-sans-serif: "roboto", sans-serif;
+
+/*-- Additional custom styles --*/
+p {
+  font-family: $font-family-sans-serif;
+}
+
+/* Add any additional CSS rules below  */
+.quarto-title-banner {
+  color: black !important;
+  background-color: white !important;
+}
+.quarto-title-banner a {
+  color: black !important;
+  text-decoration: underline !important;
+}
+
+/* Forms */
 form {
   margin: 1em 0.5em;
 }

index.qmd

@@ -1,32 +1,13 @@
 ---
-title: "tesselle"
+title: "R Packages & Archaeology"
 description: |
-  [**tesselle**](https://www.tesselle.org/) is a collection of 
-  [R](https://www.r-project.org/) packages for research and teaching in 
-  archaeology. These packages focus on quantitative analysis methods developed 
-  for archaeology. The **tesselle** packages are designed to work seamlessly 
-  together and to complement general-purpose and other specialized statistical 
-  packages. These packages can be used to explore and analyze common data types 
-  in archaeology: count data, compositional data and chronological data.
-about:
-  id: hero-heading
-  template: jolla
-  image: https://www.tesselle.org/images/tesselle.png
-  image-shape: rectangle
-  links:
-    - icon: house
-      text: Homepage
-      href: "https://www.tesselle.org"
-    - icon: github
-      text: Github
-      href: https://github.com/tesselle/
-    - icon: download
-      text: R-universe
-      href: https://tesselle.r-universe.dev/
-listing:
-  - id: gallery
-    template: packages.ejs
-    contents: packages.yml
+  **tesselle** is a collection of [R](https://www.r-project.org/) packages for 
+  research and teaching in archaeology. These packages focus on quantitative 
+  analysis methods developed for archaeology. The **tesselle** packages are 
+  designed to work seamlessly together and to complement general-purpose and 
+  other specialized statistical packages. Learn more at 
+  [tesselle.org](https://www.tesselle.org).
+title-block-banner: true
 ---
 
 ```{r}
@@ -88,114 +69,13 @@ cat(rjson::toJSON(search_pkg), file = "_site/packages.json", append = FALSE)
 cat(rjson::toJSON(search_ref), file = "_site/references.json", append = FALSE)
 ```
 
-:::{#hero-heading}
-:::
+## Read the doc
 
-::: {.callout-note appearance="minimal"}
-Quickly discover relevant content by [searching the documentation](#sec-doc), [filtering packages](#sec-packages) by topic or exploring the [project bibliography](https://www.zotero.org/groups/2894473/tesselle/library). 
-:::
-
-## Read the doc {#sec-doc}
+Quickly discover relevant content by searching the documentation or exploring the [project bibliography](https://www.zotero.org/groups/2894473/tesselle/library).
 
 <form role="search">
 <div class="form-group">
 <label for="search-packages"><strong>Search in the documentation</strong></label>
 <input type="search" class="form-control" aria-label="Search for..." name="search-packages" data-search-index="/packages.json" id="search-packages" placeholder="e.g. seriation" autocomplete="off">
 </div>
 </form>
-
-## Explore {#sec-packages}
-
-```{r}
-#| label: doc 
-#| echo: false
-#| eval: false
-az <- order(pkg$Package)
-info <- pkg[az, c("Package", "Version", "Depends", "License")]
-url_doc <- "<a href=\"%s/\" title=\"Read the doc of %s (stable)\">%s</a>"
-url_dev <- "<a href=\"%s/dev/\" title=\"Read the doc of %s (dev)\">%s</a>"
-
-version_stable <- sub(".9[0-9]{3}", "", info$Version)
-version_stable[version_stable == "0.0.0"] <- "no stable release"
-link_doc <- sprintf(url_doc, url_pkg[az], info$Package, version_stable)
-link_dev <- sprintf(url_dev, url_pkg[az], info$Package, info$Version)
-
-data <- data.frame(
-  Package = info$Package,
-  Stable = link_doc,
-  Development = link_dev
-)
-knitr::kable(
-  x = data,
-  row.names = FALSE,
-  escape = FALSE,
-  booktab = TRUE
-)
-```
-
-```{=html}
-<style>
-.grid-sizer, .grid-item { 
-  width: 100%;
-  margin: 1px auto;
-}
-@media only screen and (min-width: 600px) {
-  .grid-sizer, .grid-item { 
-    width: calc(50% - 5px);
-    margin: 1px auto;
-  }
-}
-@media only screen and (min-width: 768px) {
-  .grid-sizer, .grid-item { 
-    width: calc(33% - 5px);
-    margin: 1px auto;
-  }
-}
-</style>
-
-<label for="isotope-select-filter" class="form-label">Filter packages:</label>
-<select id="isotope-select-filter" class="form-select btn-outline-secondary filters-select">
-  <option value="*" selected>show all</option>
-  <option value=".count-data">count data</option>
-  <option value=".compositional-data">compositionnal data</option>
-  <option value=".chronological-data">chronological data</option>
-  <option value=".multivariate-data">multivariate data analysis</option>
-  <option value=".signal-processing">signal processing</option>
-  <option value=".data-visualization">data visualization</option>
-</select>
-```
-
-::: {.column-page}
-
-::: {#gallery}
-:::
-
-:::
-
-```{=html}
-<script>
-// init Isotope
-var $grid = $('.grid').isotope({
-  // options
-  sortBy: 'random',
-  itemSelector: '.card',
-  percentPosition: true,
-  masonry: {
-    // use outer width of grid-sizer for columnWidth
-    columnWidth: '.grid-sizer',
-    gutter: 1
-  }
-});
-
-// layout Isotope after each image loads
-$grid.imagesLoaded().progress( function() {
-  $grid.isotope('layout');
-});
-
-$('.filters-select').on( 'change', function() {
-  // get filter value from option value
-  var filterValue = this.value;
-  $grid.isotope({ filter: filterValue });
-});
-</script>
-```