Changing CSS files in varnish source code doesn't change the callout colors

[SaraMorsy]

Hi I hope you are fine. I am creating our lessons in the new carpentry workbench format and I wanted to change the colors of the callout.
I edited the CSS files in ~/source/stylesheets/callout.scss replaced the colors with this color code #021c35

/* Challenge */

.challenge {
  border-left: 10px solid #021c35;
}

.challenge .callout-square {
  background: #021c35;
  color: #021c35;
}
/* Challenge Accordion */
.challenge-accordion {
  margin: -25px 0 25px 0;
  .accordion-button {
    background: #021c35;
    height: 43px;
    padding-left: 25px;
    color: #021c35;
    //box-shadow: none;
    &:hover {
      text-decoration:underline;
    }
    &:focus {
      box-shadow: var(--bs-primary-rgb) 0px 0px 0px 4px;
    }
    &.collapsed {
      //box-shadow: none;
    }
  }
  .accordion-item {
    border-color: $black;
    font-family: Mulish;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    &:first-of-type .accordion-button {
      border-radius: 0;
    }
    &:last-of-type .accordion-button.collapsed {
      border-bottom-right-radius: 0px;
      border-bottom-left-radius: 0px;
    }
  }
  accordion-header {
    font-family: Mulish;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
  }
  .accordion-body {
    padding-left: 35px;
    padding-top: 25px;
    padding-bottom: 25px;
    background: $light-gray;
    li {
      list-style-type: inherit; 
      list-style-position: inside;
      margin-left: 0px;
      margin-top:10px;
      margin-bottom:20px;
    }
  }
  h2 {
    border-left: 10px #021c35 solid;
  }

then, installed this version

remotes::install_github("saramorsy/varnish")

and then deployed the website using

library(varnish)
sandpaper::serve()

Nothing changed, colors of the box are the same

the R session info

R version 4.1.2 (2021-11-01)
Platform: x86_64-w64-mingw32/x64 (64-bit)
Running under: Windows 10 x64 (build 19044)

Matrix products: default

locale:
[1] LC_COLLATE=English_United Kingdom.1252  LC_CTYPE=English_United Kingdom.1252    LC_MONETARY=English_United Kingdom.1252
[4] LC_NUMERIC=C                            LC_TIME=English_United Kingdom.1252    

attached base packages:
[1] stats     graphics  grDevices utils     datasets  methods   base     

other attached packages:
[1] varnish_0.2.4

loaded via a namespace (and not attached):
 [1] xslt_1.4.3        tidyselect_1.1.1  xfun_0.31         purrr_0.3.4       vctrs_0.4.1       generics_0.1.1    htmltools_0.5.3  
 [8] yaml_2.3.5        utf8_1.2.2        rlang_1.0.4       gert_1.6.0        pkgdown_2.0.6     pillar_1.8.0      later_1.3.0      
[15] glue_1.6.2        sandpaper_0.9.3   withr_2.5.0       lifecycle_1.0.1   stringr_1.4.0     commonmark_1.8.0  evaluate_0.15    
[22] memoise_2.0.1     knitr_1.39        callr_3.7.1       fastmap_1.1.0     httpuv_1.6.5      ps_1.7.1          sys_3.4          
[29] fansi_1.0.3       Rcpp_1.0.9        openssl_2.0.2     promises_1.2.0.1  cachem_1.0.6      desc_1.4.1        jsonlite_1.8.0   
[36] mime_0.12         fs_1.5.2          credentials_1.3.2 servr_0.24        askpass_1.1       digest_0.6.29     stringi_1.7.6    
[43] pegboard_0.3.0    processx_3.7.0    dplyr_1.0.7       rprojroot_2.0.3   cli_3.3.0         tools_4.1.2       magrittr_2.0.3   
[50] tibble_3.1.8      tinkr_0.0.0.9002  whisker_0.4       pkgconfig_2.0.3   downlit_0.4.2     xml2_1.3.3        assertthat_0.2.1 
[57] rmarkdown_2.14    rstudioapi_0.13   R6_2.5.1          compiler_4.1.2   

[zkamvar]

Hi @SaraMorsy!

Thank you for opening this issue because it shows me exactly where I need to shore up my documentation 😅

{varnish} uses the compiled and minified sources for the lesson styling, which are built with GitHub actions every time something in the source/ folder is changed.

I took a look at your fork of {varnish} and I suspect what might be happening is that you need to enable GitHub Actions for your repo. I believe, if you visit https://github.com/SaraMorsy/varnish/actions, you will get a prompt to enable Actions, but here is some documentation if it requires a bit more.

In the future, I will transition this to build locally with R so this sort of let down doesn't happen.

[zkamvar]

Additionally, I have a couple of pointers because my documentation is in need of updating:

1. the colours are defined inside source/stylesheets/variables.scss, so if you want to modify the look of your lessons, you can change them there.
2. you do not need to modify the _pkgdown.yml file in varnish itself. That file is there so that we can get a documentation website for the {varnish} package. If you want to use your version of varnish in a workbench lesson on GitHub, you can write varnish: SaraMorsy/varnish in your lesson's config.yaml file (as described in https://github.com/carpentries/sandpaper/pull/270, which I did not document anywhere in the official documentation 😓).

I hope these help. Please let me know if I can help further in any way 😃

[SaraMorsy]

Thank you, It worked! Apologies for late response