From 7211d1ef635980fefc9241ab88e940d0ccc8f728 Mon Sep 17 00:00:00 2001
From: Roy Francis <roymathewfrancis@gmail.com>
Date: Sun, 7 Jan 2024 19:57:10 +0100
Subject: [PATCH] Update website image and theme settings

- Font size fix
- Fixed button style
- Fixed typo
- Updated site image
- Output table changed to paged
---
 _quarto.yml                   |  6 ++--
 assets/css/styles.scss        | 52 ++++++++++++++++++++++++-----------
 assets/include_head.html      |  2 +-
 reports/demo-with-r/index.qmd | 20 ++++++++++++++
 4 files changed, 60 insertions(+), 20 deletions(-)

diff --git a/_quarto.yml b/_quarto.yml
index 1be69d3..15d2a1e 100644
--- a/_quarto.yml
+++ b/_quarto.yml
@@ -3,7 +3,7 @@ project:
   output-dir: docs
 
 website:
-  image: "assets/logos/nbis-scilifelab.png"
+  image: "assets/images/featured.jpg"
   favicon: "assets/favicon.png"
   navbar:
     logo: "assets/logos/nbis-scilifelab.png"
@@ -59,7 +59,7 @@ format:
     include-before-body: "assets/include_body_before.html"
     include_after_body: "assets/include_body_after.html"
     theme: ["default","assets/css/slides.scss"]
-    df-print: kable
+    df-print: paged
     width: 1280
     height: 720
     transition: "fade"
@@ -81,7 +81,7 @@ format:
       data-background-image: "assets/images/cover.jpg"
       data-background-size: "cover"
       data-background-opacity: "1"
-    subtitle: "Abstrave quarto theme"
+    subtitle: "Specky quarto theme"
     header-logo-left: ../../assets/logos/nbis.png
     header-logo-left-height: 25px
     header-logo-left-url: https://royfrancis.github.io/specky/home_contents.html
diff --git a/assets/css/styles.scss b/assets/css/styles.scss
index c30fdfd..5c10b2f 100644
--- a/assets/css/styles.scss
+++ b/assets/css/styles.scss
@@ -7,8 +7,9 @@
 @import url('https://fonts.googleapis.com/css2?family=Fira+Mono&family=Nunito:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&display=swap');
 
 $primary: #95b540;
-$secondary: #E9F2D1;
-$link-color: #96b43f;
+$secondary: #BDD775;
+$tertiary: #E9F2D1;
+$link-color: $primary;
 $body-color: #1c2833;
 $code-color: #496985;
 $code-block-bg: WhiteSmoke;
@@ -24,12 +25,11 @@ $h4-font-size: 1.266rem;
 $h5-font-size: 1.125rem;
 $h6-font-size: 1rem;
 $code-block-border-color: none;
-$code-font-size: 0.90rem;
 $code-bg: $code-block-bg; /* inline code */
 /*$code-color: ; */
 
 /* site */
-$navbar-bg: $secondary;
+$navbar-bg: $tertiary;
 $footer-bg: white;
 $footer-fg: DimGray;
 
@@ -43,14 +43,6 @@ $footer-fg: DimGray;
 .smaller { font-size: 0.64em;}
 .smallest { font-size: 0.512em;}
 
-.badge, .badge-primary {
-  background-color: $primary;
-}
-
-.badge-secondary {
-  background-color: $secondary;
-}
-
 /* site ---------------------------------------------------------------------- */
 
 .fourofour {
@@ -78,10 +70,27 @@ $footer-fg: DimGray;
   object-fit: cover;
 }
 
-.shadow{
-  box-shadow: 2px 2px 10px lightgray;
+/* buttons and badges */
+
+.badge,
+.badge-primary {
+  background-color: $primary;
+}
+
+.badge-secondary {
+  background-color: $secondary;
+}
+
+.btn {
+  background-color: $secondary;
+}
+
+.btn:hover {
+  background-color: $tertiary;
 }
 
+/* alert */
+
 .alert {
   border-radius: 0;
 }
@@ -93,11 +102,22 @@ $footer-fg: DimGray;
 /* code */
 
 pre {
+  // font-size: 1.05rem !important;
+  line-height: 1.4;
   background-color: $code-block-bg;
   border-radius: 0.25rem;
 }
 
+pre:not(.sourceCode), pre:not([class]) {
+  padding: 0.4em;
+}
+
+div.code-with-filename-file pre {
+  padding: 0;
+}
+
 code {
+  // font-size: 0.85em !important;
   color: $code-color;
 }
 
@@ -112,8 +132,8 @@ code {
   border: solid silver 1px !important;
 }
 
-div.callout-note.callout-style-default .callout-title {
-  background-color: $secondary;
+div.callout-note.callout-style-default > .callout-header {
+  background-color: $tertiary;
 }
 
 div.callout-note .callout-icon::before {
diff --git a/assets/include_head.html b/assets/include_head.html
index 93d7af0..6acdb50 100644
--- a/assets/include_head.html
+++ b/assets/include_head.html
@@ -1,3 +1,3 @@
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=Ubuntu+Mono&display=swap" rel="stylesheet">
\ No newline at end of file
+<link href="https://fonts.googleapis.com/css2?family=Fira+Mono&family=Nunito:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&display=swap" rel="stylesheet">
\ No newline at end of file
diff --git a/reports/demo-with-r/index.qmd b/reports/demo-with-r/index.qmd
index b41c418..3f85fd8 100644
--- a/reports/demo-with-r/index.qmd
+++ b/reports/demo-with-r/index.qmd
@@ -121,6 +121,26 @@ Sys.Date()
 sessionInfo()
 ```
 
+An advanced example showing bash code generated from R.
+
+````
+```{{r}}
+#| attr-output: "filename='bash'"
+#| class-output: bash
+#| echo: false
+d <- "custom"
+cat(paste("mkdir​", d))
+```
+````
+
+```{r}
+#| attr-output: "filename='bash'"
+#| class-output: bash
+#| echo: false
+d <- "custom"
+cat(paste("mkdir​", d))
+```
+
 Code chunk attributes are documented [here](https://quarto.org/docs/output-formats/html-code.html).
 
 ## Tables