Skip to content

Commit

Permalink
Pequeños cambios y creados los inlineboxes
Browse files Browse the repository at this point in the history 
Añadidos los commandbox, configdir, configfile, movie e inlineconsole.

Pequeños cambios en el menú de selección de theme.
  • Loading branch information
@yuki
yuki committed Oct 31, 2023
1 parent 035a3ab commit ac62994
Show file tree
Hide file tree
Showing 4 changed files with 99 additions and 29 deletions.
26 changes: 18 additions & 8 deletions 1.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,11 @@ Parte 1

# Pandoc template in Bootstrap 5

This template has been created to use [Pandoc](https://pandoc.org/) as a parser for Markdown files. The idea is to use it to create static HTML files from [my books](https://github.com/yuki/my-books). This template uses [Bootstrap 5](https://getbootstrap.com/).
This template has been created to use [Pandoc](https://pandoc.org/) as a parser for Markdown files. The idea is to use it to create static HTML files from [my books](https://github.com/yuki/my-books). This template uses [Bootstrap 5](https://getbootstrap.com/) and [Font Awesome](https://fontawesome.com/).


# Example of uses
Here there are some examples of how to use this template:
Here few examples of how to use this template:

## Images

Expand Down Expand Up @@ -79,24 +79,34 @@ root@1b29e46c10ae:/var/www/html# php artisan make:model Post -crms
```
:::

This is an infobox:
Sometimes we need inline console code like ```ls path```{.commandbox} , other times we need to talk about some configuration file like ```/etc/hosts```{.configfile} , config directory ```/etc```{.configdir} inline text ```help```{.inlineconsole} or a movie [The Imitation Game](https://www.imdb.com/title/tt2084970/){.movie}.

This is an **infobox**:

:::infobox
This is an info box!
This is an **infobox**!
:::

This is an **warnbox**:

:::warnbox
This is an warning box!
This is an **warningbox**!
:::

This is an **errorbox**:

:::errorbox
This is an error box!
This is an **errorbox**!
:::

This is an **questionbox**:

:::questionbox
This is an question box!
This is an **questionbox**!
:::

This is an **exercisebox**:

:::exercisebox
This is an exercise box!
This is an **exercisebox**!
:::
32 changes: 22 additions & 10 deletions example.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -288,7 +288,7 @@
<button class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle d-flex align-items-center theme-icon-active" id="bd-theme" type="button" aria-expanded="false" data-bs-toggle="dropdown" data-bs-display="static" href="fa-moon">
<i class="fas fa-moon"></i>
</button>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-theme" style="--bs-dropdown-min-width: 8rem;">
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-theme" style="--bs-dropdown-min-width: 8rem;" id="theme-selector-menu">
<li href="fa-sun" data-bs-theme-value="light">
<button type="button" class="dropdown-item d-flex align-items-center">
<i class="fa-solid fa-sun opacity-50 theme-icon"></i>
Expand Down Expand Up @@ -408,11 +408,11 @@ <h1 data-number="1" id="pandoc-template-in-bootstrap-5"><span
files. The idea is to use it to create static HTML files from
<a href="https://github.com/yuki/my-books">my books</a>. This
template uses <a href="https://getbootstrap.com/">Bootstrap
5</a>.</p>
5</a> and <a href="https://fontawesome.com/">Font
Awesome</a>.</p>
<h1 data-number="2" id="example-of-uses"><span
class="header-section-number">2</span> Example of uses</h1>
<p>Here there are some examples of how to use this
template:</p>
<p>Here few examples of how to use this template:</p>
<h2 data-number="2.1" id="images"><span
class="header-section-number">2.1</span> Images</h2>
<p>Here few examples of with images.</p>
Expand Down Expand Up @@ -518,21 +518,33 @@ <h2 data-number="2.3" id="custom-boxes"><span
<div class="sourceCode" id="cb2"><pre
class="sourceCode bash"><code class="sourceCode bash"><span id="cb2-1"><a href="#cb2-1" aria-hidden="true" tabindex="-1"></a><span class="ex">root@1b29e46c10ae:/var/www/html#</span> php artisan make:model Post <span class="at">-crms</span></span></code></pre></div>
</div>
<p>This is an infobox:</p>
<p>Sometimes we need inline console code like <code
class="commandbox">ls path</code> , other times we need to
talk about some configuration file like <code
class="configfile">/etc/hosts</code> , config directory <code
class="configdir">/etc</code> inline text <code
class="inlineconsole">help</code> or a movie <a
href="https://www.imdb.com/title/tt2084970/" class="movie">The
Imitation Game</a>.</p>
<p>This is an <strong>infobox</strong>:</p>
<div class="infobox">
<p>This is an info box!</p>
<p>This is an <strong>infobox</strong>!</p>
</div>
<p>This is an <strong>warnbox</strong>:</p>
<div class="warnbox">
<p>This is an warning box!</p>
<p>This is an <strong>warningbox</strong>!</p>
</div>
<p>This is an <strong>errorbox</strong>:</p>
<div class="errorbox">
<p>This is an error box!</p>
<p>This is an <strong>errorbox</strong>!</p>
</div>
<p>This is an <strong>questionbox</strong>:</p>
<div class="questionbox">
<p>This is an question box!</p>
<p>This is an <strong>questionbox</strong>!</p>
</div>
<p>This is an <strong>exercisebox</strong>:</p>
<div class="exercisebox">
<p>This is an exercise box!</p>
<p>This is an <strong>exercisebox</strong>!</p>
</div>
<div class="part">
<p>Parte 2</p>
Expand Down
68 changes: 58 additions & 10 deletions template/css/template.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,18 +54,18 @@
padding-left: 1rem;
}

#theme-selector li.active {
border-radius: 0.25rem;
background-color: var(--bs-danger)!important;
margin: 0 0.5rem;
#theme-selector-menu {
padding: 0;
}

#theme-selector li {
margin: 0.25rem;
}

/* TODO: create hover option */
/* #theme-selector button:hover {
#theme-selector li.active, #theme-selector-menu button:focus, #theme-selector-menu button:hover {
border-radius: 0.25rem;
background-color: var(--bs-info)!important;
margin: 0 0.5rem;
} */
background-color: var(--bs-danger);
}

.theme-icon {
width: 1rem;
Expand Down Expand Up @@ -105,7 +105,7 @@ figcaption{
padding-right: 1rem;
}

/* For custom-box */
/* CUSTOM BOXES */

.mycode {
border: 2px solid var(--bs-gray-700);
Expand Down Expand Up @@ -134,12 +134,60 @@ figcaption{
margin: 1em;
}

.inlineconsole, .commandbox, .configfile, .configdir {
border: 2px solid var(--bs-black);
border-radius: 0.5rem;
padding: 0.25rem 0.5rem;
background-color: var(--bs-gray-700);
color: var(--bs-white);
}

.commandbox::before, .configfile::before, .configdir::before {
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
display: inline-block;
padding-right: 1em;
}

.commandbox::before {
content: "\f120";
}

.configfile::before {
content: "\f15b";
}

.configdir::before {
content: "\f07c";
}

.movie {
border: 2px solid var(--bs-warning);
border-radius: 0.5rem;
padding: 0.25rem 0.5rem;
}

.movie::before {
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
display: inline-block;
content: "\f1c8";
padding-right: 1em;
}


.infobox, .warnbox, .errorbox, .questionbox, .exercisebox {
border-radius: 0.5rem;
margin-bottom: 2em;
}

.infobox strong, .warnbox strong, .errorbox strong, .questionbox strong, .exercisebox strong {
/* TODO: no entiendo por qué tengo que poner esto */
margin-left: 0.2em;
}

.infobox > p::before, .warnbox > p::before, .errorbox > p::before, .questionbox > p::before, .exercisebox > p::before {
font-family: FontAwesome;
font-weight: normal;
Expand Down
2 changes: 1 addition & 1 deletion template/yuki.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@
<button class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle d-flex align-items-center theme-icon-active" id="bd-theme" type="button" aria-expanded="false" data-bs-toggle="dropdown" data-bs-display="static" href="fa-moon">
<i class="fas fa-moon"></i>
</button>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-theme" style="--bs-dropdown-min-width: 8rem;">
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-theme" style="--bs-dropdown-min-width: 8rem;" id="theme-selector-menu">
<li href="fa-sun" data-bs-theme-value="light">
<button type="button" class="dropdown-item d-flex align-items-center">
<i class="fa-solid fa-sun opacity-50 theme-icon"></i>
Expand Down

0 comments on commit ac62994

Please sign in to comment.