Return the default CSS document used in the parallaxr package

This returns a character vector of length 1 containing the default CSS document used to generate the parallax scroll document.

default_css(path = NULL)

Arguments

path

character. Path to where the CSS file should be saved, including a file name with the ".css" file extension. Defaults to NULL, where the css will be displayed on the console instead.

Examples

default_css()
#>  /* Specifications for the scroll effects */
#> 
#>  * {
#>    box-sizing: border-box;
#>  }
#> 
#>  body {
#>    font-size: 30px;
#>    padding: 0;
#>    margin: 0;
#>  }
#> 
#>  .scrollHalf {
#>    position: relative
#>  }
#> 
#>  /*.scrollHalf__group { opacity: calc(1/(1+(var(--visible-y)*var(--visible-y)*var(--visible-y)*var(--visible-y)))); transition: all 200ms ease-in-out;}*/
#> 
#>  .scrollHalf__group {
#>    transition: all 200ms ease-in-out;
#>  }
#> 
#>  .scrollHalf__group__imagen {
#>    overflow: hidden;
#>  }
#> 
#>  .scrollHalf__group__content {
#>    padding: 3rem;
#>  }
#> 
#>  .scrollHalf__group[data-scroll="out"] {
#>    opacity: 0;
#>  }
#> 
#>  .scrollHalf__group[data-scroll="in"] {
#>    opacity: calc(var(--visible-y)*1.9);
#>  }
#> 
#>  @media screen and (min-width:900px) {
#>    .scrollHalf__group {
#>      min-height: 100vh;
#>    }
#>    .scrollHalf__group__imagen {
#>      position: fixed;
#>      top: 0;
#>      left: 0;
#>      width: 50vw;
#>    }
#>    .scrollHalf__group__imagen img {
#>      min-height: 100vh;
#>      min-width: 50vw;
#>    }
#>    .scrollHalf__group__content {
#>      margin: 0 3vw 0 52vw;
#>    }
#>  }
#> 
#>  .halfScroll {
#>    position: relative
#>  }
#> 
#>  .halfScroll__group {
#>    transition: all 200ms ease-in-out;
#>  }
#> 
#>  .halfScroll__group__imagen {
#>    overflow: hidden;
#>  }
#> 
#>  .halfScroll__group__content {
#>    padding: 3rem;
#>  }
#> 
#>  .halfScroll__group[data-scroll="out"] {
#>    opacity: 0;
#>  }
#> 
#>  .halfScroll__group[data-scroll="in"] {
#>    opacity: calc(var(--visible-y)*1.9);
#>  }
#> 
#>  @media screen and (min-width:900px) {
#>    .halfScroll__group {
#>      min-height: 100vh;
#>    }
#>    .halfScroll__group__content {
#>      position: fixed;
#>      top: 0;
#>      left: 0;
#>      width: 52vw;
#>    }
#>    .halfScroll__group__imagen img {
#>      min-height: 100vh;
#>      min-width: 52vw;
#>    }
#>    .halfScroll__group__imagen {
#>      margin: 0 0vw 0 50vw;
#>    }
#>  }
#> 
#> /* Fonts */
#> 
#>  body{
#>   font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
#>   font-size: 16px;
#>   color: #2e2e2e;
#> }
#> 
#> h1, h2, h3, h4, h5, h6{
#>   font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
#>   font-weight: 600;
#>   color: #000000;
#> }
#> 
#> p{
#>   font-size: 16px;
#>   color: #666666;
#> }
#> 
#> h1{
#>   font-size: 60px;
#> }
#> 
#> h2{
#>   font-size: 50px;
#> }
#> 
#> h3{
#>   font-size: 30px;
#> }
#> 
#> h4{
#>   font-size: 25px;
#> }
#> 
#> h5{
#>   font-size: 18px;
#> }
#> 
#> h6{
#>   font-size: 15px;
#>   font-weight: 300;
#> }