syntaxerrormmm/proxmoxve-enthome
1
0
Fork 0
Code Issues Pull requests Releases 1 Activity Actions

Arricchimento con temi e plugin di Marpit.

Browse source
This commit is contained in:
Emiliano Vavassori 2025-05-08 22:47:54 +02:00
parent 2033c88557
commit 6087a83b6f
12 changed files with 1883 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

844
style/structure.css Normal file
View file

@ -0,0 +1,844 @@
/* @theme structure */
/*
============================================
Created by Paulo Cunha
version: 1.75
update: 06.mai.2024
update: 23.jun.2023
update: 12.mai.2022
update: 30.dez.2021
============================================
You may use freely (MIT license) provided
due credits are granted to the authors.
CLASSES:
<!-- _class: biblio -->
<!-- _class: blockquote -->
<!-- _class: cite -->
<!-- _class: columns -->
<!-- _class: columns3 -->
<!-- _class: columns-center -->
<!-- _class: columns3-center -->
<!-- _class: cool-list -->
<!-- _class: cool-list2 -->
<!-- _class: table -->
<!-- _class: transition -->
<!-- _class: titlepage -->
Credits: https://catalin.red/css3-ordered-list-styles/
for cool-list anda cool-list2.
*/
/***************** COMMON STRUCTURE **********************/
h1 {
color: var(--h1-color);
border-bottom: 1px solid var(--border-color);
}
section p {
margin-top: 0.5em;
margin-bottom: 0.25em;
line-height: 1.3em;
font-size: 32px;
}
section li {
margin-top: 0.5em;
margin-bottom: 0.25em;
line-height: 1.2em;
font-size: 105%;
color: val(--list-item-color);
}
section li:hover {
/* margin-top: 1em; */
/* margin-bottom: 1em; */
/* font-size: 150% !important; */
/* font-weight: 600 !important; */
/* color: #000000 !important; */
/* border: 1px solid rgb(8, 8, 8); */
background-color: rgb(250, 233, 2);
color: black !important;
background-color: rgb(208, 253, 6);
border-end-start-radius: 10pt;
border-start-end-radius: 10pt;
border-end-end-radius: 10pt;
border-start-start-radius: 10pt;
}
/* Definition for emphasis */
section em {
color: var(--italic-color);
background: var(--italic-background-color);
font-style: normal;
font-weight: bold;
font-family: sans-serif;
padding-top: 6px;
padding-left: 6px;
padding-right: 6px;
padding-bottom: 6px;
}
/* Definition for bold text */
section strong {
color: var(--bold-color);
padding-left: 5px;
padding-right: 5px;
font-weight: 600;
}
section figcaption{
font-size: 80%;
padding-top: 16px;
/* text-align: center; */
}
/* May append some string to page number */
/* Uses format "page-number / total pages" */
section::after {
color: rgb(51, 59, 77);
font-size: 0.8em;
content: ' ' attr(data-marpit-pagination) '/'
attr(data-marpit-pagination-total) ' ';
}
.small {
font-size: 24px;
}
/**------------------- TABLE -----------------------------*/
/*
Tables are always centered.
Credits: Juan Vera del Campo
Locus: https://github.com/Juanvvc
*/
section table {
margin-top: 40px;
/* width: auto; (24.01.2025 paulo.cunha) */
border: 0;
font-size: 24px;
margin-right: auto !important;
margin-left: auto !important;
}
section table th {
background-color: var(--table-header-color);
color: var(--table-header-font-color);
border: 1;
border-top: var(--table-border-top) solid 2px;
}
section table td {
border: 0;
}
section table tr:nth-child(2) {
background-color: #c4c6c6;
}
section table tr:last-child {
border-bottom: var(--table-border-bottom) solid 1px;
}
tr:nth-child(even) {
background-color: var(--table-nth-child-color) !important;
}
tr:hover {
color: var(--table-hover-color) !important;
background-color: var(--table-hover-background-color) !important;
font-weight: bold !important;
}
/**------------------- BLOCK QUOTE -----------------------------*/
/*
Block quote: used for footnote
substitution. Use as the last
element of a slide.
*/
section blockquote {
color: rgb(66, 66, 66);
font-size: 20px;
border-top: 0.1em dashed var(--extra-back-color);
margin-top: auto;
}
section blockquote p {
font-size: 1.12em !important;
letter-spacing: -0.5px !important;
}
section blockquote strong {
color: var(--blockquote-strong);
font-weight: bold;
font-size: 1.11em !important;
letter-spacing: -0.5px !important;
}
/**------------------- COLUMNS -----------------------------*/
/*
Adds two-columns class
*/
.columns {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.5rem;
/* justify-content: center !important; */
}
.columns p {
margin-top: 0.5em;
margin-bottom: 0.25em;
line-height: 1.16em;
font-size: 30px;
}
.columns ol,
ul {
margin-top: 0.15em;
margin-bottom: 0.25em;
line-height: 1.73em !important;
font-size: 26px;
color: var();
}
/**------------------- COLUMNS CENTER ---------------------*/
/*
/*
Adds two-columns with centered contens class
*/
.columns-center {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
justify-items: center;
justify-content: center;
align-items: center;
}
/**------------------- THREE-COLUMNS -----------------------------*/
/*
Adds three-columns class
*/
.columns3 {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
/* justify-content: center !important; */
}
/**------------------- THREE-COLUMNS-CENTER ---------------------*/
/*
Adds three-columns with centered contens class
*/
.columns3-center {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
justify-items: center;
justify-content: center;
align-items: center;
}
/**------------------- TITLEPAGE -----------------------------*/
/*
Title Page Class: first slide in a deck.
Use:
<!-- _class: titlepage -->
# TTILE
## SUBTITLE
### AUTHOR
#### DATE
##### INSTITUTION
*/
section.titlepage {
background-color: var(--background-color);
}
/*
Titlepage informations
*/
section.titlepage .title {
font-size: var(--title-size);
font-weight: var(--title-font-weight);
color: var(--title-color);
border-bottom: 1px solid var(--border-color);
line-height: 1.2;
padding-bottom: 15px;
}
section.titlepage .subtitle {
font-size: var(--subtitle-size);
font-weight: var(--subtitle-font-weight);
line-height: 1.2;
color: var(--subtitle-color);
padding-top: 10px;
padding-bottom: 120px;
letter-spacing: var(--letter-spacing);
}
section.titlepage .author {
font-size: var(--author-size);
}
section.titlepage .date {
font-size: var(--date-size);
}
section.titlepage .organization {
font-size: var(--institute-size);
}
section.titlepage .author,
section.titlepage .date,
section.titlepage .organization {
font-weight: 400;
text-align: right;
color: var(--titlepage-color);
line-height: 1.25;
}
section.titlepage h3,
section.titlepage h4,
section.titlepage h5 {
font-weight: 400;
text-align: right;
color: var(--titlepage-color);
line-height: 0.45;
letter-spacing: var(--letter-spacing);
}
section.titlepage h1 {
font-size: var(--title-size) !important;
font-weight: var(--title-font-weight) !important;
text-align: left;
color: var(--title-color) !important;
border-bottom: 1px solid var(--border-color) !important;
line-height: 1.25;
/* padding-right: 20%; */
}
section.titlepage h2 {
font-size: var(--subtitle-size);
font-weight: var(--subtitle-font-weight);
text-align: left;
color: var(--subtitle-color) !important;
letter-spacing: var(--letter-spacing);
line-height: 1.2;
margin-top: -0.2em;
padding-bottom: 95px;
}
section.titlepage h3 {
font-size: var(--author-size);
}
section.titlepage h4 {
font-size: var(--date-size);
}
section.titlepage h5 {
font-size: var(--institute-size);
}
/* Omits page number in Title Page Slide */
section.titlepage footer,
section.titlepage header,
section.titlepage:after {
/* hide header, footer and pagination */
display: none;
}
/**------------------- TRANSITION -----------------------------*/
/*
transition class: first slide in a section. Use h1 as header.
Use:
<!-- _class: transition -->
# Header
*/
section.transition {
background-color: var(--transitionpage-color);
text-align: center !important;
font-weight: bold;
color: white;
padding-top: auto;
padding-buttom: auto;
}
section.transition h1,
section.transition h2,
section.transition p,
section.transition a {
color: rgb(243, 229, 212);
font-size: 200%;
border-bottom: none;
}
section.transition footer,
section.transition header,
section.transition:after {
/* hide header, footer and pagination */
display: none;
}
/**------------------- TRANSITION2 -----------------------------*/
/*
transition2 class: first slide in a section. Use h1 as header.
Use:
<!-- _class: transition2 -->
# Header
*/
section.transition2 {
background-color: rgb(137, 173, 207);
text-align: center !important;
font-weight: bold !important;
color: rgb(255, 255, 255);
padding-top: auto;
padding-buttom: auto;
}
section.transition2 h1,
section.transition2 h2,
section.transition2 p,
section.transition2 a {
color: rgb(217, 235, 247);
font-size: 200%;
border-bottom: none;
}
section.transition2 em {
background-color: rgb(60, 255, 0) !important;
}
section.transition2 footer,
section.transition2 header,
section.transition2:after {
/* hide header, footer and pagination */
display: none;
}
/**------------------- TRANSITION3 -----------------------------*/
/*
transition2 class: first slide in a section. Use h1 as header.
Use:
<!-- _class: transition3 -->
# Header
*/
section.transition3 {
background-color: rgb(66, 69, 71);
text-align: center !important;
font-weight: bold !important;
color: rgb(255, 255, 255);
padding-top: auto;
padding-buttom: auto;
}
section.transition3 h1,
section.transition3 h2,
section.transition3 p,
section.transition3 a {
color: rgb(244, 247, 217);
font-size: 200%;
border-bottom: none;
}
section.transition3 em {
background-color: rgb(60, 255, 0) !important;
}
section.transition3 strong {
color: rgb(71, 83, 90);
}
section.transition3 footer,
section.transition3 header,
section.transition3:after {
/* hide header, footer and pagination */
display: none;
}
/**------------------- CITE -----------------------------*/
/*
cite class: slide containg a citation
Use:
<!-- _class: cite -->
Text
*/
section.cite {
background-color: var(--background-color);
}
section.cite p {
color: black;
background-color: ;
letter-spacing: var(--letter-spacing);
font-size: 150%;
text-align: center;
line-height: 1.2em;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
/* font-style: oblique; */
padding-top: auto;
padding-bottom: auto;
padding-left: 100px;
padding-right: 100px;
}
section.cite strong {
color: var(--strong-color);
}
/* Omits page number in Title Page Slide */
section.cite footer,
section.cite header,
section.cite:after {
/* hide header, footer and pagination */
display: none;
}
/**------------------- BIBLIO -----------------------------*/
/*
slides containg bibliography
Use:
<!-- _class: biblio -->
# References
1. Item one
2. Item two
*/
section.biblio {
background-color: var(--biblio-background-color);
}
section.biblio p {
color: var(--text-color);
font-size: 80%;
font-weight: 300;
padding-left: 5px;
}
section.biblio h1 {
font-size: 35px;
color: var(--text-color);
border-bottom: 1px solid var(--border-color);
}
section.biblio strong {
color: var(--bold-color);
}
section.biblio a {
font-size: 31px;
font-weight: bold;
color: var(--bold-color);
}
section.biblio li {
color: var(--text-color);
}
section.biblio footer,
section.biblio header,
section.biblio:after {
/* hide header, footer and pagination */
display: none;
}
/**------------------- COOL-LIST -----------------------------**/
/*
Credits: https://catalin.red/css3-ordered-list-styles/
Use:
<!-- _class: cool-list -->
1. *Item One*
1. *Item two*
1. *Item two.one*
1. *Item two.two*
1. *Item two.three*
1. *Item Three*
*/
section.cool-list ol {
counter-reset: li;
/* Initiate a counter */
list-style: none;
/* Remove default numbering */
padding: 0;
/*text-shadow: 0 1px 0 rgba(255,255,255,.5);*/
}
section.cool-list li {
margin-bottom: 0.1em !important;
margin-top: 0.1em !important;
}
section.cool-list ol>li>em,
section.cool-list>ol>li>a {
position: relative;
display: block;
padding: 0.4em 0.4em 0.4em 2em;
margin: 0.5em 0;
background: #ddd;
color: #444;
text-decoration: none;
border-radius: 0.3em;
transition: all 0.3s ease-out;
font-style: normal;
}
section.cool-list ol>li>em:before,
section.cool-list>ol>li>a:before {
content: counter(li);
counter-increment: li;
position: absolute;
left: -1.3em;
top: 50%;
margin-top: -1.3em;
background: var(--cool-list-color);
height: 2em;
width: 2em;
line-height: 2em;
border: 0.3em solid #fff;
text-align: center;
font-weight: normal;
border-radius: 2em;
transition: all 0.3s ease-out;
color: white;
}
section.cool-list>ol>li>em:hover,
section.cool-list>ol>li>a:hover {
background: #eee;
font-weight: bolder;
}
/* Rotating effect */
/*
section.cool-list ol > li > em:hover:before,section.cool-list ol > li > a:hover:before{
transform: rotate(360deg);
}*/
/* Lists inside lists */
section.cool-list>ol ol {
margin: 0 0 0 2em;
/* Add some left margin for inner lists */
font-size: 75%;
counter-reset: li2;
/* Initiate a counter */
}
section.cool-list>ol ol>li>em:before,
section.cool-list>ol ol>li>a:before {
content: counter(li2);
counter-increment: li2;
}
section.cool-list>ol>li>ul {
list-style-type: disc;
margin: 0 0 0 1em;
font-size: 75%;
}
section.cool-list>ol ol>li>em {
background: #efefef;
}
/******************* cool-list2 *****************************/
/*
Credits: https://catalin.red/css3-ordered-list-styles/
Use:
<!-- _class: cool-list2 -->
1. *Item One*
1. *Item two*
1. *Item two.one*
1. *Item two.two*
1. *Item two.three*
1. *Item Three*
*/
section.cool-list2 ol {
counter-reset: li;
/* Initiate a counter */
list-style: none;
/* Remove default numbering */
padding: 0;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
section.cool-list2 ol ol {
margin: 0 0 0 2em;
/* Add some left margin for inner lists */
}
section.cool-list2 ol li em {
position: relative;
display: block;
padding: 0.4em 0.4em 0.4em 0.8em;
margin: 0.5em 0 0.5em 2.5em;
background: #ddd;
color: #444;
text-decoration: none;
transition: all 0.3s ease-out;
font-style: normal;
}
section.cool-list2 ol li em:hover {
background: #eee;
font-weight: bolder;
}
section.cool-list2 ol li em:before {
content: counter(li);
counter-increment: li;
position: absolute;
left: -2.5em;
top: 50%;
margin-top: -1em;
/* background: #fa8072; */
background: var(--lighter-color);
height: 2em;
width: 2em;
line-height: 2em;
text-align: center;
font-weight: bold;
}
section.cool-list2 ol li em:after {
position: absolute;
content: '';
border: 0.5em solid transparent;
left: -1em;
top: 50%;
margin-top: -0.5em;
transition: all 0.3s ease-out;
}
section.cool-list2 ol li em:hover:after {
left: -0.5em;
/* border-left-color: #fa8072; */
border-left-color: var(--lighter-color);
}
/* Lists inside lists */
section.cool-list2 ol ol {
margin: 0 0 0 2em;
/* Add some left margin for inner lists */
font-size: 75%;
counter-reset: li2;
/* Initiate a counter */
}
section.cool-list2 ol ol>li>em:before,
section.cool-list2 ol ol>li>a:before {
content: counter(li2);
counter-increment: li2;
background: lightgray;
}
section.cool-list2 ol ul {
list-style-type: disc;
margin: 0 0 0 1em;
font-size: 75%;
}
section.cool-list2 ol ol em {
background: #efefef;
}
/**------------------- POSITIONING - new 08.04.2025 -----------------------------*/
.topleft {
position: absolute;
top: 38px;
left: 26px;
}
.topright {
position: absolute;
top: 38px;
right: 26px;
}
.bottomleft {
position: absolute;
bottom: 38px;
left: 26px;
}
.bottomright {
position: absolute;
bottom: 38px;
right: 26px;
}
.centered {
position: absolute;
left: 0px;
right: 0pt;
top: 50%;
width: 100%;
text-align: center;
}
.center {
text-align: center;
}
.right {
text-align: right;
}