Merge pull request #1 from epicentre-msf/hugz

New features

README.md

@@ -2,7 +2,7 @@
 
 ## Adding an item to the gallery
 
-New items can be added to the [`items.yml`](items.yml) file after which they will automatically appear on the website gallery when it is next generated.
+New items can be added to the [`gallery.yml`](items/gallery.yml) file after which they will automatically appear on the website gallery when it is next generated.
 
 Below is an example of an item entry:
 

_quarto.yml

@@ -5,15 +5,22 @@ website:
   title: "Epicentre Data Science"
   search: false
   navbar:
+    background: primary
     left:
-      - href: index.qmd
+      - href: gallery.qmd
+        icon: search
         text: Gallery
+      - href: software.qmd
+        icon: code-slash
+        text: Software
 
 execute:
   freeze: auto
 
 format:
-  html: 
-    theme: cosmo
+  html:
+    theme:
+      - default
+      - styles.scss
     css: styles.css
     toc: true

epicentre_qmd_style.scss

@@ -0,0 +1,148 @@
+/*-- scss:defaults --*/
+
+$col-primary: #2E4473;
+$col-primary-light: #E4EDF3;
+$col-secondary: #A1B8CF;
+$col-secondary-bg: #F5F9FB;
+$col-dark-grey: #C5C5C5;
+$col-light-grey: #F8F8F8;
+$col-red-prim : #C0392B;
+$col-red-sec : #F9EBEA;
+$col-yellow-prim : #FAB872;
+$col-yellow-sec : #FEF6E7;
+
+/* Table of content */
+
+$toc-color: $col-primary;
+$toc-inactive-color: $col-light-grey;
+$content-padding-top: 1px;
+
+/* titles font size and weight*/
+$h1-font-size: 30px;
+$h1-font-weight: 400;
+
+$h2-font-size: 27px;
+$h2-font-weight: 300;
+
+$h3-font-size: 25px;
+$h3-font-weight: 300;
+
+$h4-font-size: 23px;
+$h4-font-weight: 300;
+
+/* font-weights */
+
+$weight-title: 600;
+
+$navbar-bg: $col-secondary-bg;
+
+/* inline code */
+
+$code-bg: $col-primary-light;
+$code-color: $col-primary;
+
+/* code block */
+$code-block-bg: $col-primary-light ;
+
+/*-- scss:rules --*/
+
+h1, h2, h3 {
+  color: $col-primary;
+}
+
+h1.title {
+  font-size: 50px;
+  font-weight: 600;
+  color: $col-primary;
+}
+
+h1 {
+    font-weight: $h1-font-weight;
+}
+
+h2 {
+    font-weight: $h2-font-weight;
+}
+
+h3 {
+    font-weight: $h3-font-weight;
+}
+
+h4{
+    font-weight: $h4-font-weight;
+}
+
+p.subtitle {
+  font-style: italic;
+  color: darken($col-dark-grey, 50%);
+}
+
+/* BLOCKQUOTE */
+.blockquote {
+  font-size: 1em;
+  color: $col-primary;
+  border-left-color: $col-primary;
+}
+
+/* Inline code */
+code {
+  border-radius: 5px;
+
+}
+
+/* Inline code */
+.quarto-title-block .quarto-title-banner {
+  background-image: url(assets/img/logo_epicentre.png);
+  background-size: 250px;
+  background-position: left;
+  background-repeat: no-repeat;
+  padding-left: 50px;
+  padding-right: 50px;
+  background-origin: content-box;
+}
+
+/* Customize code block and output */
+.code {
+
+  border-radius: 1px;
+}
+
+/* call outs style */
+
+div.callout-note.callout{
+  border-left-color: $col-primary;
+  background-color: $col-secondary-bg;
+  border-radius: 10px;
+}
+
+div.callout-caution.callout{
+  border-left-color: $col-yellow-prim;
+  background-color: $col-yellow-sec;
+  border-radius: 10px;
+}
+
+div.callout-important.callout{
+  border-left-color: $col-red-prim;
+  background-color: $col-red-sec;
+  border-radius: 10px;
+}
+
+/* TOC styling */
+
+h2#toc-title{
+  font-weight: 700;
+}
+
+.nav-link {
+  border-left-color: $col-primary ;
+  border-left-width: thick;
+  border-radius: 3px;
+}
+
+.nav-link:hover, .nav-link:focus, .nav-link.active {
+  color: $col-primary;
+  background-color: $col-secondary-bg;
+  font-weight: 700;
+}
+
+

gallery.Rproj

@@ -5,9 +5,13 @@ SaveWorkspace: No
 AlwaysSaveHistory: Default
 
 EnableCodeIndexing: Yes
+UseSpacesForTab: Yes
+NumSpacesForTab: 2
 Encoding: UTF-8
 
+RnwWeave: Sweave
+LaTeX: pdfLaTeX
+
 AutoAppendNewline: Yes
 StripTrailingWhitespace: Yes
 LineEndingConversion: Posix
-

gallery.qmd

@@ -0,0 +1,35 @@
+---
+page-layout: full
+toc: false
+listing:
+  id: gallery
+  template: epi-grid.ejs
+  contents: items/gallery.yml
+  categories: true
+  page-size: 1000
+  sort: 
+    - "status" 
+    - "date-modified desc"
+  sort-ui: [title, date-created, date-modified]
+  filter-ui: true
+  field-required: [title, href, status, access, author, date-created, date-modified]
+  field-types:
+    date-created: date
+    date-modified: date
+  field-display-names:
+    status: "Status"
+    access: "Access"
+    date-created: "Published"
+    date-modified: "Updated"
+---
+
+## Data Visualisation Gallery
+
+Below is our collection of our interactive dashboards, reports and tools. Use the search bar and categories menu to filter to your areas of interest.
+
+Items labelled as [INTERNAL]{.tag .status-internal} will require a login. If you are a member of the MSF network and have an msf.org email address you can [create an account to access our dashboards on our sign-up page](https://reports.msf.net/signup/){target="_blank"}. Note that some dashboards are limited to specific OCs, individual personel or project partners, so not all content will be accessible with your account.
+
+---
+
+::: {#gallery}
+:::

index.qmd

@@ -1,37 +1,22 @@
 ---
-page-layout: full
-toc: false
-listing:
-  id: gallery
-  template: epi-grid.ejs
-  contents: items.yml
-  categories: true
-  page-size: 1000
-  sort: 
-    - "status" 
-    - "date-modified desc"
-  sort-ui: [title, date-created, date-modified]
-  filter-ui: true
-  field-required: [title, href, status, access, author, date-created, date-modified]
-  field-types:
-    date-created: date
-    date-modified: date
-  field-display-names:
-    status: "Status"
-    access: "Access"
-    date-created: "Published"
-    date-modified: "Updated"
+title: "Data Science Team"
+about:
+  template: jolla
+  image: assets/img/logo_epicentre.png
+  image-shape: rectangle
+  image-width: 600px
+  links:
+    - icon: twitter
+      text: twitter
+      href: https://twitter.com/@Epicentre_MSF
+    - icon: github
+      text: Github
+      href: https://github.com/epicentre-msf
+    - icon: website
+      text: Website
+      href: https://epicentre.msf.org/
 ---
 
-## Data Visualisation Gallery
+From outbreaks to clinical trials, Epicentre's data science team (Epi DS) leverages its expertise in epidemiology, statistical analysis, GIS, programming and data visualisation to drive actionable insight from public health data.
 
-From outbreaks to clinical trials, Epicentre's data science team (Epi DS) leverages its expertise in epidemiology, statistical analysis, programming and data visualisation to drive actionable insight from public health data.
-
-Below is our collection of our interactive dashboards and reports. Use the search bar and categories menu to filter to your areas of interest.
-
-Items labelled as [INTERNAL]{.tag .status-internal} will require a login. If you are a member of the MSF network and have an msf.org email address you can [create an account to access our dashboards on our sign-up page](https://reports.msf.net/signup/){target="_blank"}. Note that some dashboards are limited to specific OCs, individual personel or project partners, so not all content will be accessible with your account.
-
----
-
-::: {#gallery}
-:::
+Explore our collection of web-apps, tools, interactive dashboards and reports on our [gallery page](/gallery.html), and our open-source software repository on our [software page](/software.html).