diff --git a/R/lesson.R b/R/lesson.R index c3c0395..ee57259 100644 --- a/R/lesson.R +++ b/R/lesson.R @@ -28,7 +28,7 @@ rstudio4edu_lesson = function(toc = TRUE, ...) { code_download = TRUE, number_sections = FALSE, css = css, - includes = rmarkdown::includes(after_body = footer), + #includes = rmarkdown::includes(after_body = footer), ... ) } diff --git a/inst/rmarkdown/templates/lesson/resources/footer.html b/inst/rmarkdown/templates/lesson/resources/footer.html index 8e42df3..7df6471 100755 --- a/inst/rmarkdown/templates/lesson/resources/footer.html +++ b/inst/rmarkdown/templates/lesson/resources/footer.html @@ -1,4 +1,10 @@ - -
-
Created with an rstudio4edu template. +
+ +
+ +

+ +

This site was created with an  rstudio4edu template.

+ +
diff --git a/inst/rmarkdown/templates/lesson/resources/style.css b/inst/rmarkdown/templates/lesson/resources/style.css index 2e35b30..6e5ee32 100755 --- a/inst/rmarkdown/templates/lesson/resources/style.css +++ b/inst/rmarkdown/templates/lesson/resources/style.css @@ -174,36 +174,44 @@ a:hover { } -/*-------------FOOTER-------------- */ +/*------------FOOTER----------*/ + +/* Divider line above footer */ +.footer hr{ + width: 100%; + padding-bottom: 1em; +} .footer { - font-size: .6em; - text-transform: uppercase; + margin: 3em 0 !important; + font-size: 16px; color: #808080; text-align: center; width: 90%; - margin: 3rem auto; font-weight: 300; } -/* Divider line above footer */ -.footer hr{ - margin-top: 7em; - width: 100%; +.rstudio4edu-footer { + font-size: 12px; + text-transform: uppercase; } -/* rstudio4edu text link */ -.rstudio4edu { +.rstudio4edu-link { color: #3fb5bd; font-family: "Lora"; - font-size: 1.25em; - font-weight: 600; text-transform: none; - text-decoration: none; + font-weight: 600; + font-size: 1.25em; display: inline-block; + +} + +.rstudio4edu-link:hover { + text-decoration: none; + color: #5ebccf; } -.footer.logo { - width: 40px; - margin-right: 4px; +.rstudio4edu-footer-logo { + width: 25px; + margin: 0px; } diff --git a/inst/rmarkdown/templates/lesson/skeleton/skeleton.Rmd b/inst/rmarkdown/templates/lesson/skeleton/skeleton.Rmd index 79793eb..94a278f 100644 --- a/inst/rmarkdown/templates/lesson/skeleton/skeleton.Rmd +++ b/inst/rmarkdown/templates/lesson/skeleton/skeleton.Rmd @@ -34,7 +34,10 @@ To add a logo, do one of two things: knitr::include_graphics("rstudio4edu-logo.png") ``` - Pretty, right? We like it. Feel free to use it. + Pretty, right? We like it. Feel free to use it. +\ + +*\*If you don't want a logo at all--then delete the code chunk or set it to* `eval = FALSE`. # Adding questions @@ -60,8 +63,27 @@ You can add text here too. 1. Your second question here.
+# Add a footer + +If you want a custom footer, then add your footer text within the designated `

` `

` tags at the bottom of this lesson. + # Goodbye! Check out our online book at [rstudio4edu](https://rstudio4edu.github.io/rstudio4edu-book/). Don't forget to delete all this text before you release your lesson out into the wild - happy educating! + + + + + +
+ +
+ +

+ +

This site was created with an  rstudio4edu template.

+ + +
diff --git a/inst/rstudio/templates/project/book/assets/style.css b/inst/rstudio/templates/project/book/assets/style.css index 0f8a3ed..babde8b 100755 --- a/inst/rstudio/templates/project/book/assets/style.css +++ b/inst/rstudio/templates/project/book/assets/style.css @@ -28,6 +28,17 @@ pre code { 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 below chunk as a

would */ +} + + /*------------- Body and header text---------------- */ .book.font-family-1 { @@ -52,23 +63,23 @@ h1, h2, h3, h4 { /*--- LOGO ---*/ - + .toc-logo { width: 200px !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; + height: auto !important; } - + /*-----Body Links-------*/ @@ -80,8 +91,8 @@ h1, h2, h3, h4 { color: #1f5386; /* darker color when hovering */ text-decoration: none; } - - + + /* The next two rules make the horizontal line go straight across in top navbar */ .summary > li:first-child { @@ -211,7 +222,7 @@ a.anchor { } /* all TOC list items, basically */ - .book .book-summary ul.summary li a, + .book .book-summary ul.summary li a, .book .book-summary ul.summary li span { padding-top: 8px; padding-bottom: 8px; @@ -222,21 +233,24 @@ a.anchor { .summary a:hover { color: #778ca5 !important; - } + } .book .book-summary ul.summary li.active>a { /*active TOC links*/ color: #5699cc !important; border-left: solid 4px; border-color: #5699cc; padding-left: 11px !important; - } - + } + li.appendix span, li.part span { /* for TOC part names */ margin-top: 1em; color: #778ca5; opacity: 1 !important; text-transform: uppercase; } - - + + /* grabs first .chapter immediately after .part...but only those ch without numbers */ + .part + li[data-level=""] { + text-transform: uppercase; + } diff --git a/inst/rstudio/templates/project/rmdsite/_site.yml b/inst/rstudio/templates/project/rmdsite/_site.yml index 20c1a90..f945ed8 100755 --- a/inst/rstudio/templates/project/rmdsite/_site.yml +++ b/inst/rstudio/templates/project/rmdsite/_site.yml @@ -37,6 +37,6 @@ output: toc: true toc_float: true includes: + in_header: assets/header.html after_body: assets/footer.html css: assets/style.css - \ No newline at end of file diff --git a/inst/rstudio/templates/project/rmdsite/assets/footer.html b/inst/rstudio/templates/project/rmdsite/assets/footer.html index 3e41b61..52fcd32 100755 --- a/inst/rstudio/templates/project/rmdsite/assets/footer.html +++ b/inst/rstudio/templates/project/rmdsite/assets/footer.html @@ -1,8 +1,10 @@ -

+
-
+
-

Created with an rstudio4edu template.

+

+

This site was created with an  rstudio4edu template.

-
\ No newline at end of file + +
diff --git a/inst/rstudio/templates/project/rmdsite/assets/header.html b/inst/rstudio/templates/project/rmdsite/assets/header.html new file mode 100644 index 0000000..2db9631 --- /dev/null +++ b/inst/rstudio/templates/project/rmdsite/assets/header.html @@ -0,0 +1 @@ + diff --git a/inst/rstudio/templates/project/rmdsite/assets/style.css b/inst/rstudio/templates/project/rmdsite/assets/style.css index c339563..8863615 100755 --- a/inst/rstudio/templates/project/rmdsite/assets/style.css +++ b/inst/rstudio/templates/project/rmdsite/assets/style.css @@ -1,4 +1,4 @@ -@import url('https://fonts.googleapis.com/css?family=Muli:400,400i,700&display=swap'); +@import url('https://fonts.googleapis.com/css?family=Lora|Muli:400,400i,700&display=swap'); /*------------- Whole Document---------------- */ @@ -9,7 +9,7 @@ body { /* links */ -a { +a { color: #5ebccf; } @@ -26,10 +26,10 @@ a:hover { } .section h1, -.section h2, -.section h3, -.section h4, -.section h5 { +.section h2, +.section h3, +.section h4, +.section h5 { padding-top: 3em !important; /*adding so much padding because theme adds a margin-top: -65px by default */ margin-bottom: 0.75em; } @@ -58,8 +58,8 @@ a:hover { background-position: center center; background-repeat: no-repeat; } - - + + /* 2: For logo above title in upper righthand corner, inline with Title and Author, use style rule below. Otherwise comment out*/ /* @@ -68,7 +68,7 @@ a:hover { height: 150px; width: 150px; float: right; - background-image: url("logo-black.png"); + background-image: url("../images/logo-black.png"); background-size: contain; background-position: center center; background-repeat: no-repeat; @@ -80,7 +80,7 @@ a:hover { /* .upper-right-logo { margin-top: 20px; - background-image: url("logo-black.png"); + background-image: url("../images/logo-black.png"); height: 150px; background-size: contain; background-position: right; @@ -95,7 +95,7 @@ a:hover { .hero-image { position: relative; /* liner gradient tints the image darker for readability*/ - background-image: linear-gradient( rgba(0,0,0,.2), rgba(0,0,0,.2) ), url(../images/hero.jpg); + background-image: linear-gradient( rgba(0,0,0,.2), rgba(0,0,0,.2) ), url(../images/hero-navy.jpg); height: 400px; background-size: cover; background-color: #141c25f2; @@ -126,7 +126,7 @@ a:hover { color: #ffffff; margin-bottom: 2.5rem; font-weight: bold; -} +} /*-----------------TOC----------------*/ @@ -139,7 +139,7 @@ a:hover { .tocify { position: -webkit-sticky; - position: sticky; + position: sticky; top: 120px; /*Controls where TOC stops when sticky */ width: 100% !important; border: none; @@ -152,7 +152,7 @@ a:hover { .col-xs-12.col-sm-4.col-md-3 { display: none; } - + .top-text { font-size: 25px; } @@ -160,7 +160,7 @@ a:hover { .bottom-text { font-size: 40px; } - + } /* TOC links */ @@ -176,7 +176,7 @@ a:hover { border: none; } -.list-group-item:hover, +.list-group-item:hover, .list-group-item.active:hover { color: #131b23; background-color: white; @@ -188,8 +188,8 @@ a:hover { background-color: #141c25f2; } -.navbar-default .navbar-nav>.open>a, -.navbar-default .navbar-nav>.active>a, +.navbar-default .navbar-nav>.open>a, +.navbar-default .navbar-nav>.active>a, a.dropdown-toggle:hover { background-color: #141c25 !important; } @@ -199,15 +199,17 @@ a.dropdown-toggle:hover { background-color: #141c25; } + /* Dropdown menu hover color */ .navbar-default .dropdown-menu>li>a:hover { background-color: #202831f2; } /* Navbar Links when hovered*/ -.navbar-default .navbar-nav>.active>a:hover, -.navbar-default .navbar-nav:hover, -.navbar-default .navbar-nav>li>a:hover, +.navbar-default .dropdown-menu>.active>a +.navbar-default .navbar-nav>.active>a:hover, +.navbar-default .navbar-nav:hover, +.navbar-default .navbar-nav>li>a:hover, a.navbar-brand:hover { color: #ffffffab !important; background-color: #141c25; @@ -254,30 +256,49 @@ a.navbar-brand:hover { } +/*------------FOOTER----------*/ + /* Divider line above footer */ .footer hr{ width: 100%; + padding-bottom: 1em; } .footer { + margin: 3em 0 !important; font-size: 16px; color: #808080; text-align: center; width: 90%; - margin: 3rem auto; font-weight: 300; } -.footer.logo { - width: 25px; - margin: 0px !important; -} - .rstudio4edu-footer { font-size: 12px; text-transform: uppercase; } +.rstudio4edu-link { + color: #3fb5bd; + font-family: "Lora"; + text-transform: none; + font-weight: 600; + font-size: 1.25em; + display: inline-block; + +} + +.rstudio4edu-link:hover { + text-decoration: none; + color: #5ebccf; +} + +.rstudio4edu-footer-logo { + width: 25px; + margin: 0px; +} + .tocify-extend-page { height: 0px !important; /* Gets rid of extra space after footer*/ -} \ No newline at end of file +} + diff --git a/inst/rstudio/templates/project/rmdsite/hero-image.html b/inst/rstudio/templates/project/rmdsite/hero-image.html deleted file mode 100755 index 24ee07d..0000000 --- a/inst/rstudio/templates/project/rmdsite/hero-image.html +++ /dev/null @@ -1,11 +0,0 @@ - - - - - -
- -
-
YUM-101 Delicious Foods
-
-
\ No newline at end of file diff --git a/inst/rstudio/templates/project/rmdsite/images/favicon.ico b/inst/rstudio/templates/project/rmdsite/images/favicon.ico new file mode 100755 index 0000000..99456f6 Binary files /dev/null and b/inst/rstudio/templates/project/rmdsite/images/favicon.ico differ diff --git a/inst/rstudio/templates/project/rmdsite/images/hero-beige.jpg b/inst/rstudio/templates/project/rmdsite/images/hero-beige.jpg new file mode 100644 index 0000000..6941e57 Binary files /dev/null and b/inst/rstudio/templates/project/rmdsite/images/hero-beige.jpg differ diff --git a/inst/rstudio/templates/project/rmdsite/images/hero-coral.jpg b/inst/rstudio/templates/project/rmdsite/images/hero-coral.jpg new file mode 100644 index 0000000..4f23823 Binary files /dev/null and b/inst/rstudio/templates/project/rmdsite/images/hero-coral.jpg differ diff --git a/inst/rstudio/templates/project/rmdsite/images/hero-grey.jpg b/inst/rstudio/templates/project/rmdsite/images/hero-grey.jpg new file mode 100644 index 0000000..be14ce1 Binary files /dev/null and b/inst/rstudio/templates/project/rmdsite/images/hero-grey.jpg differ diff --git a/inst/rstudio/templates/project/rmdsite/images/hero-image.html b/inst/rstudio/templates/project/rmdsite/images/hero-image.html new file mode 100644 index 0000000..dd88013 --- /dev/null +++ b/inst/rstudio/templates/project/rmdsite/images/hero-image.html @@ -0,0 +1,6 @@ +
+
+
DATA 101
+
Intro to Data Science
+
+
\ No newline at end of file diff --git a/inst/rstudio/templates/project/rmdsite/images/hero.jpg b/inst/rstudio/templates/project/rmdsite/images/hero-navy.jpg old mode 100755 new mode 100644 similarity index 98% rename from inst/rstudio/templates/project/rmdsite/images/hero.jpg rename to inst/rstudio/templates/project/rmdsite/images/hero-navy.jpg index 1facf9c..3c91b9d Binary files a/inst/rstudio/templates/project/rmdsite/images/hero.jpg and b/inst/rstudio/templates/project/rmdsite/images/hero-navy.jpg differ diff --git a/inst/rstudio/templates/project/rmdsite/images/hero-pink.jpg b/inst/rstudio/templates/project/rmdsite/images/hero-pink.jpg new file mode 100644 index 0000000..902fb27 Binary files /dev/null and b/inst/rstudio/templates/project/rmdsite/images/hero-pink.jpg differ diff --git a/inst/rstudio/templates/project/rmdsite/images/hero-purple.jpg b/inst/rstudio/templates/project/rmdsite/images/hero-purple.jpg new file mode 100644 index 0000000..9920295 Binary files /dev/null and b/inst/rstudio/templates/project/rmdsite/images/hero-purple.jpg differ diff --git a/inst/rstudio/templates/project/rmdsite/images/hero-transparent.png b/inst/rstudio/templates/project/rmdsite/images/hero-transparent.png new file mode 100644 index 0000000..1eb7833 Binary files /dev/null and b/inst/rstudio/templates/project/rmdsite/images/hero-transparent.png differ diff --git a/inst/rstudio/templates/project/rmdsite/images/hero-watercolor.jpg b/inst/rstudio/templates/project/rmdsite/images/hero-watercolor.jpg new file mode 100644 index 0000000..6c754c5 Binary files /dev/null and b/inst/rstudio/templates/project/rmdsite/images/hero-watercolor.jpg differ diff --git a/inst/rstudio/templates/project/rmdsite/images/hero-yellow.jpg b/inst/rstudio/templates/project/rmdsite/images/hero-yellow.jpg new file mode 100644 index 0000000..9019df2 Binary files /dev/null and b/inst/rstudio/templates/project/rmdsite/images/hero-yellow.jpg differ diff --git a/inst/rstudio/templates/project/rmdsite/style.css b/inst/rstudio/templates/project/rmdsite/style.css deleted file mode 100755 index 7c82c74..0000000 --- a/inst/rstudio/templates/project/rmdsite/style.css +++ /dev/null @@ -1,422 +0,0 @@ -/* Whole document: */ - -@import url('https://fonts.googleapis.com/css?family=Abril+Fatface|Karla:400,400i,700,700i|Lora:400,400i,700,700i&display=swap'); - -.navbar-default { - background-color: rgba(0, 0, 0, 0.5); - border: none; -} - - - -body { - font-size: 19px; -} - -h1 h2 h3 h4 { - padding-top: 2em !important; - margin-top: -1em !important; -} - - - -.alert-info { - padding: 1.5em; - background-color: #a0d1ef !important; -} - -.alert-note { - color: #777777; - background-color: #f6f3f3; - width: 90%; - margin: 0 auto; -} - - -blockquote { - margin: 0 0 0 0 !important; - padding: 0.5px 21px; /* I changed from default of 10.5px 21px*/ -} - -.blockquote-note { - color: #777777; - background-color: #f6f3f3; - width: 90%; - margin: 0 auto; -} - - - .container-fluid { /* margin: 0 Left-aligns container; margin: auto to "center" (Default)*/ - margin-right: auto !important; - margin-left: auto !important; -} - - -.row-fluid{ - display: flex; - position: relative; -} - -/* -.col-xs-12 .col-sm-4 .col-md-3{ - width: 25%; - position: relative; -} - -/*TOCIFY code*/ - - -div.tocify { - width: 100% !important; - max-width: 260px; - max-height: 85%; - font-size: 16px; -} - - -.tocify { - border: none; - position: -webkit-sticky; - position: sticky; - top: 60px; - width: 100%; -} - -#TOC { - position: -webkit-sticky !important; - position: sticky !important; -} - - -.toc-content { - width: 75%; - font-family: Lora; -} - - -.list-group-item { - position: relative; - display: block; - padding: 10px 15px; - margin-bottom: -1px; - background-color: white; - border: none; - color: gray; -} - -.list-group-item:hover { - z-index: 2; - color: DarkSlateGray; - background-color: white; - border: none; -} - -.list-group-item.active{ - z-index: 2; - color: black; - background-color: white; - border: none; -} - -.list-group-item.active:focus { - z-index: 2; - color: black; - background-color: white; - border: none; -} - -.list-group-item.active:hover { - z-index: 2; - color: DarkSlateGray; - background-color: white; - border: none; -} - - -.foot_image { - width: 50px; - filter: grayscale(0%); - margin-left: 1em; - margin-right: 1em; -} - -.foot { - font-size: .75em; - text-transform: uppercase; - color: #808080; - text-align: center; -} - -.foot hr{ - width: 80%; -} - - -.tocify-extend-page { - height: 0px !important; /* Gets rid of extra space after footer*/ -} - - - -/* LARGE IMAGE AT TOP OF EACH MODULE PAGE*/ -.image-descript { - position: relative; -} - - -.button { - border: 2px solid white; - background-color: #0000001a; - text-align: center; - color: white; - padding: 1rem; - font-size: 2rem; - cursor: pointer; - margin: 0 auto; - width: 150px; - text-transform: uppercase; -} - -.button:hover { - background-color: white; - color: DarkSlateGray; - text-decoration: none !important; -} - -a.button-landing-page { - color: white !important; - border: none; - text-decoration: none !important; -} - - -a.button-landing-page:focus{ - z-index: 2; - color: DarkSlateGray; - border: none; - text-decoration: none !important; -} - -a.button-landing-page:hover{ - z-index: 2; - color: DarkSlateGray; - border: none; - text-decoration: none !important; -} - -body, html { - height: 100%; -} - - - -/*.big_image is for module pages*/ - -.big_image { - margin-top: -50px; - margin-bottom: 2em; - width: 100%; - height: 600px; - object-fit: cover; -} - -.image-text{ - position: absolute; - top:30%; - left:0; - right:0; - bottom:0; - } - -.lil-image-text { - color: white; - margin-top: 0px; - margin-right: auto; - margin-bottom: 20px; - margin-left: auto; - padding-top: 0px; - text-align: center; - display:block; - font-family: 'Lora', serif; - font-size: 22px; - font-weight: 500; - line-height: 1.5em; - letter-spacing: 1px; - font-style: italic; - font-weight: normal; - color: #fff; - } - - -/*@media screen and (max-width: 300px) { - .image-descript { - display: none; - }*/ - -.big-image-text { - letter-spacing: 0.065em; - line-height: 1em; - font-size: 68px; - text-transform: uppercase; - text-align: center; - display:block; - color: #fff; - margin-bottom: 3rem; -} - -.color-overlay { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - background-color: rgba(0,0,0,.1); -} - - -/* SMARTPHONES PORTRAIT */ -@media only screen and (min-width: 300px) and (max-width: 479px) { -.lil-image-text { - font-size: 1rem; - } - - .big-image-text { - line-height: normal; - font-size: 1.5rem; - } - - .back-panel { - margin-top: 0; - } - .back-panel-contents { - display: block; - } - - .landing-subimage { - width: 75%; - margin: 0 auto; - } - - .color-textbox { - width: 100%; - padding: 1.25rem; - margin-bottom: 1.5rem; - } - - .color-textbox-title{ - font-size: 2rem; - margin-bottom: 1.5rem; - padding: 0rem; - } - - .color-textbox-text{ - font-size: 1.5rem; - padding: 0rem; - } - -} - -/* Tablet */ -@media only screen and (min-width: 480px) and (max-width: 540px) { - .color-textbox-title{ - font-size: 1.5rem; - padding: 2.25rem 0rem 0em 0rem; - } - - .color-textbox-text{ - font-size: 1.4rem; - padding: 1rem 5rem 0rem 5rem; - } - - .toc-content { - width: 100%; - } -} - -@media only screen and (min-width: 541px) and (max-width: 649px) { - .color-textbox-title{ - font-size: 2rem; - padding: 2.5rem 0rem 0em 0rem; - } - - .color-textbox-text{ - font-size: 1.75rem; - padding: 1rem 5rem 0rem 5rem; - } - - .toc-content { - width: 100%; - } -} - - -@media only screen and (min-width: 650px) and (max-width: 767px) { - .color-textbox-title{ - font-size: 2rem; - padding: 4rem 0rem 0em 0rem; - } - - .color-textbox-text{ - font-size: 2rem; - padding: 1rem 5rem 0rem 5rem; - } - - .toc-content { - width: 100%; - } -} - - -/*iPad portrait*/ - -@media only screen and (min-width: 768px) and (max-width: 1023px) { - .color-textbox-title{ - font-size: 2.35rem; - padding: 6rem 0rem 0rem 0rem; - } - - .color-textbox-text{ - font-size: 2.25rem; - padding: 1rem 5rem 0rem 5rem; - } - - .toc-content { - width: 100%; - } -} - - -/*iPad Pro portarit */ - -@media only screen and (min-width: 1024px) and (max-width: 1225px) { - .color-textbox-title{ - font-size: 3rem; - padding: 6rem 0rem 0rem 0rem; - } - - .color-textbox-text{ - font-size: 3rem; - padding: 1rem 5rem 0rem 5rem; - } - - .toc-content { - width: 100%; - } -} - - - -@media only screen and (max-width: 768px) { - .lil-image-text { - font-size: 15px; - } - - .big-image-text { - line-height: normal; - font-size: 31px; - } - - .col-xs-12.col-sm-4.col-md-3 { - display: none !important; - } -}