Update website (#175)

* Update website

* Remove bookdown.Rmd; edit .gitignore to add HTML file

* Put title in different lines and make sidebar smaller

* Remove edge favicon and update path

* Small edit to CSS

* add highlight style

* Remove dark mode and edit Prerequisities heading

---------

Co-authored-by: Stephanie Zimmer <[email protected]>

.gitignore

@@ -17,6 +17,7 @@ libs/
 # ignore all html files except:
 !**/mathjax_header.html
 !**/plausible.html
+!**/hero-image.html
 # R and Rstudio specific files
 .Rproj.user
 .Rhistory

_output.yml

@@ -1,15 +1,19 @@
 bookdown::gitbook:
   css: css/style.css
+  highlight: kate
   includes:
     in_header: plausible.html
+    before_body: assets/hero-image.html
   config:
     toc:
       collapse: section
       before: |
-        <li><a href="./">Exploring Complex Survey Data Analysis Using R</a></li>
+        <li><a href="./">Exploring<br>Complex Survey<br>Data Analysis Using R</a></li>
+        <li class="toc-logo"><a href="./"><img src="images/logo.png"></a></li>
       after: |
         <li><a href="https://bookdown.org" target="blank">Published with bookdown</a></li>
     download: no
+    fontsettings: no
     view: https://github.com/tidy-survey-r/tidy-survey-book/blob/main/%s
     sharing:
       facebook: false

assets/hero-image.html

@@ -0,0 +1,4 @@
+<link href="style.css" rel="stylesheet">
+<div class="hero-image-container"> 
+  <img class= "hero-image" src="../images/header.png">
+</div>

css/style.css

@@ -1,77 +1,214 @@
-@import url('https://fonts.googleapis.com/css2?family=Telex&family=Ubuntu:wght@300&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Telex&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
+
+/* The next two rules make the horizontal line go straight across in top navbar */
+
+.summary > li:first-child {
+    height: 50px;
+    padding-top: 10px;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
+}
+
+.book .book-summary ul.summary li.divider {
+    height: 0px;
+}
+
+/*____Code Chunks____*/
+.sourceCode pre {
+    margin: 0 !important; /* makes space above and below symmetrical */
+}
+
+.sourceCode {
+    margin-bottom: 0.85em; /* adds same amount of margin as a <p> would */
+}
 
 p.caption {
-  color: #777;
-  margin-top: 10px;
+    color: #777;
+    margin-top: 10px;
 }
+
 p code {
-  white-space: inherit;
+    white-space: inherit;
 }
+
 pre {
-  word-break: normal;
-  word-wrap: normal;
+    word-break: normal;
+    word-wrap: normal;
 }
+
 pre code {
-  white-space: inherit;
+    white-space: inherit;
 }
+
 p.flushright {
-  text-align: right;
+    text-align: right;
 }
+
 blockquote > p:last-child {
-  text-align: right;
+    text-align: right;
 }
+
 blockquote > p:first-child {
-  text-align: inherit;
+    text-align: inherit;
 }
+
 p, div {
-  font-family: 'Telex', sans-serif;
+    font-family: 'Telex', sans-serif;
+}
+
+.title {
+    font-family: 'Ubuntu', serif;
+    font-size: 2em !important;
+    text-transform: uppercase;
+    color: #0B3954;
 }
-h1, h2, h3, h4, h5, h6 { 
-  font-family: 'Ubuntu', sans-serif;
+
+.subtitle {
+    font-family: 'Ubuntu', serif;
+    text-transform: none;
+    font-weight: 400;
+    color: #0B3954;
+    font-style: normal !important;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    font-family: 'Ubuntu', sans-serif;
+    color: #0B3954;
+    text-transform: uppercase;
+    font-weight: 700;
 }
+
 ul.ro {
-  list-style-type: circle;
+    list-style-type: circle;
 }
-li.ro::marker{
-	font-size: 150%
+
+li.ro::marker {
+    font-size: 150%;
 }
 
 .prereqbox {
-  padding: 1em;
-  background: #C6E0E6;
-  color: black;
-  border: 2px solid #087E8B;
-  border-bottom-left-radius: 10px;
-  border-bottom-right-radius: 10px;
+    padding: 1em;
+    background: #C6E0E6;
+    color: black;
+    border: 2px solid #087E8B;
+    border-bottom-left-radius: 10px;
+    border-bottom-right-radius: 10px;
 }
 
 .prereqbox-header {
-  padding-left: 1em;
-  padding-right: 1em;
-  background: #087E8B;
-  color: white;
-  border: 2px solid #087E8B;
-  border-top-left-radius: 10px;
-  border-top-right-radius: 10px;
+    padding-left: 1em;
+    padding-right: 1em;
+    background: #087E8B;
+    color: white;
+    border: 2px solid #087E8B;
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
 }
 
 h3.hasAnchor#prereq3 #prereq4 #prereq5 #prereq6 #prereq7 #prereq8 #prereq9 #prereq10 {
-  margin-top: 0em !important;
-  margin-bottom: 0em !important;
+    margin-top: 0em !important;
+    margin-bottom: 0em !important;
+}
+
+.summary {
+    font-family: 'Ubuntu', sans-serif;
 }
 
 .book .book-summary {
-  font-family: "Ubuntu";
+    background: white;
+    border-right: none;
 }
 
 .book.with-summary .book-header.fixed {
-    left: 370px;
+    left: 350px;
 }
 
 .book.with-summary .book-body {
-    left: 370px;
+    left: 350px;
 }
 
 .book .book-summary {
-    width: 370px;
-}
+    width: 350px;
+}
+
+/*-----Body Links-------*/
+.book .book-body .page-wrapper .page-inner section.normal a {
+    color: #419599;
+}
+
+.book .book-body .page-wrapper .page-inner section.normal a:hover {
+    color: #19757F; /* darker color when hovering */
+    text-decoration: none;
+}
+
+/* HERO IMAGE */
+.hero-image-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 390px;
+    background-color: #0b3954;
+}
+
+.hero-image {
+    width: 100%;
+    height: 390px;
+    object-fit: cover;
+}
+
+.page-inner {
+    padding-top: 400px !important;
+}
+
+.book .book-summary ul.summary li a, 
+.book .book-summary ul.summary li span {
+    padding-top: 8px;
+    padding-bottom: 8px;
+    padding-left: 15px;
+    padding-right: 15px;
+    color: #0b3954;
+}
+
+.summary a:hover {
+    color: #19757F !important;
+}
+
+.book .book-summary ul.summary li.active>a { /*active TOC links*/
+    color: #8d5b94 !important;
+    border-left: solid 4px;
+    border-color: #0b3954;
+    padding-left: 11px !important;
+}
+
+li.appendix span, li.part span { /* for TOC part names */
+    margin-top: 1em;
+    color: #1c3046 !important;
+    opacity: 1 !important;
+    text-transform: uppercase;
+}
+
+/*--- LOGO ---*/
+.toc-logo {
+    width: 150px !important;
+    object-fit: contain;
+    margin: 0 auto;
+    display: block;
+}
+
+.toc-logo img {
+    max-width: 100%;
+    margin-bottom: -10px;
+}
+
+.summary > li:first-child {
+    height: auto !important;
+}
+
+em {
+  font-style: normal !important;
+}
+
+.prereqbox-header h3 {
+    color: white !important;
+}
+

index.Rmd

@@ -14,7 +14,8 @@ site: bookdown::bookdown_site
 description: "Exploring Complex Survey Data Analysis Using R: A Tidy Introduction with {srvyr} and {survey}"
 github-repo: tidy-survey-r/tidy-survey-book
 graphics: yes
-cover-image: images/BookCover_Final.jpg
+favicon: images/favicon.png
+cover-image: images/cover.png
 header-includes:
    - \usepackage[titles]{tocloft}
 ---
@@ -86,7 +87,7 @@ print_gt_book <- function(gtobj, ref){
 #| echo: false
 #| results: asis
 
-printversion_text <- "This is the online version of the book published by CRC Press in November 2024.  You can purchase a copy of this book directly from [Routledge](https://www.routledge.com/Exploring-Complex-Survey-Data-Analysis-Using-R-A-Tidy-Introduction-with-srvyr-and-survey/Zimmer-Powell-Velasquez/p/book/9781032302867) or your preferred bookstore. Cover artwork designed and created by [Allison Horst](https://allisonhorst.com/)."
+printversion_text <- "This is the online version of the book published by CRC Press in November 2024.  You can purchase a copy of this book directly from [Routledge](https://www.routledge.com/Exploring-Complex-Survey-Data-Analysis-Using-R-A-Tidy-Introduction-with-srvyr-and-survey/Zimmer-Powell-Velasquez/p/book/9781032302867) or your preferred bookstore. The cover artwork was designed and created by [Allison Horst](https://allisonhorst.com/)."
 
 if (knitr:::is_html_output()){
   cat(printversion_text)
@@ -105,7 +106,7 @@ rm(printversion_text)
 #| fig.align: center
 
 if (knitr:::is_html_output()){
-  knitr::include_graphics(path="images/BookCover_Final.jpg")
+  knitr::include_graphics(path="images/cover.png")
 }
 ```