Remove space between top of photo and navbar on distill website postcards

Question

I have built a website -- j-dunning.net -- using distill for R Markdown. Although I can tweak the CSS code for the website generally, how can I tweak the postcard landing page in isolation?

I would specifically like to remove of the space between the nav bar and the top of my image, and, change the colour of the hyperlink at the foot of the bio.

Any help welcome

Jamie

Answer 1

Global versus local styles

For an all across the site change, add a style sheet to _site.yml. To change an individual page, add a style sheet to the individual page. With the library distill, you can run the function create_theme(name = themeMePlease) in the console. It will create a .css style sheet in your project environment. It will have prefilled content, based on other elements you've indicated in your YAML (YAMLs...?), as well.

If you want the changes to be global (the whole website) add the theme to the _site.yml. Obviously include the name, title, and whatever other settings you have. Just keep in mind this is not indented. It should be flush left.

name: "siteDistill"
title: "Answering SOQ questions"
theme: themeMePlease.css

If you want to apply this style sheet to a specific page, add it to that page's YAML. Don't add it to global and another page's YAML. You could add it to more than one page's YAML if it's not in the _site.yml.

To change the hyperlink color, open that style sheet. At the bottom, add the following to control the settings for <a> tags. (That's a hyperlink tag.)

/* Change link appearance */
d-article a {
  border-bottom: 2px solid #ffd8db;
  text-decoration: none;
  color: #B21E28;
}

That worked for everything except the postcards built about page. Personal themes, global themes, and in-line styling won't work for this script. The only thing I found that worked was inline Javascript.

Take that postcards! (I still win.)

---

Reduce the whitespace between the postcard and the navigation bar

In the RMarkdown script that you have your postcard in (most likely about.Rmd), add the following to add a margin to the bottom of the postcard. You won't need to add any libraries, packages, et cetera for this to work. The units em are relative, so it should work well when the screen size changes or if more content is added. You can certainly change the units or amount. I will encourage you to avoid px and try to stick with vh, rem, or em, since they're relative sizes.

```{r iWin,results="asis",engine="js",echo=FALSE}
// look for the element to modify
elem = document.querySelector('body > div > div > div');

sAdd = "padding-bottom: 15em;";  // this will be added
                         // em is relative, will adjust with other flexing

// extract any inline attributes already present
styler = elem.getAttribute("style");
if (styler==undefined || styler==null) {  // if there are no HTML styles set
      styler = "";  
}
elem.setAttribute("style",styler+sAdd);
```

---

Changing the Postcards about page hyperlink color

To change the hyperlink color for the postcards generated script, use the following code. Change #B21E28 for the color you want. I recommend using RGB, HSL, or HEX-coded colors.

```{r iWinAgain,results="asis",engine="js",echo=FALSE}
// look for the element to modify
elem2 = document.querySelector('p > a');

sAdd2 = "color: #B21E28;";  // this will be added

// extract any inline attributes already present
styler2 = elem2.getAttribute("style");
if (styler2==undefined || styler2==null) {  // if there are no HTML styles set
      styler2 = "";  
}
elem2.setAttribute("style",styler2+sAdd2);
```

This is a snapshot using the default distill webpage and the default postcards build, perhaps some of your site content, along with the changes in this answer: