I'm looking to create reusable sections for my bookdown project.
Successes: I've created a style.css including:
.titeldefbox{
display: flex;
width: 100%;
left: 0;
top: 0;
position: absolute;
background-color: darkslategray;
height: 30px;
color: white;
border-radius: 10px 10px 0 0;
padding: 10px 0 10px 0;
}
.defbox{
background-position: 0px;
background: linear-gradient(
315deg,
hsl(240deg 50% 95%) 0%,
hsl(158deg 13% 64%) 100%);
padding: 1em 1em 1em 1em;
border-radius: 10px;
position: relative;
}
.svgdefbox{
width: auto;
height: 25px;
padding-left: 1em;
}
.defbox h2{
font-size: 16px;
margin-top: 0px;
width: 100%;
height: 20px;
padding: 5px 0 10px 15px;
}
.defbox p{
margin-top: 40px;
padding: 10px 10px 0 0;
}
In each .Rmd file, I can use the following code snippet to call a div span:
::::: {.defbox}
A **definition** is a statement of the meaning of a term.
:::::
This will render as:
https://i.sstatic.net/0a21Y.png
Challenges: Attempting to implement a titled box with an SVG image as seen in various places like this example.
https://i.sstatic.net/nFbRX.png
The following structure:
<div class="defbox">
<div class="titeldefbox">
<svg class="svgdefbox" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 382.59 429.36"><defs><style>.cls-1{fill:#ffffff;}</style></defs><g id="Ebene_2" data-name="Ebene 2"><g id="Ebene_6" data-name="Ebene 6"><g id="definition"><path class="cls-1" d="M81.17,128.33c3.88-2.38,7.76-4.4,11.64-6.29,1.94-1,3.88-1.82,5.82-2.74s3.88-1.7,5.82-2.5a5.39,5.39,0,0,1,2.9,0,23.59,23.59,0,0,0,2.91.1l5.81,0,11.61,0,46...
is meant to render as:
https://i.sstatic.net/8gi6c.png
However, implementing it within my markdown structure has proven to be a challenge. I could either utilize pure css in the YAML header or include an entire .html file using the includes option such as:
output:
bookdown::gitbook:
includes:
before_body: top_message.html