A Template for everithing

#+TITLE: 🦄 Esempio di Documento Org-mode
#+AUTHOR: Il Tuo Nome
#+DATE: [2024-10-09]
#+OPTIONS: toc:t num:t
#+LANGUAGE: it
# Rimuovi h2 'Indice' dalla tok
#+HTML_HEAD: <style>#table-of-contents h2 { display: none; }</style>
# Include CSS
#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="template.css">
# Include JavaScript
#+HTML_HEAD: <script type="text/javascript" src="template.js"></script>
# Crea pulsante hamburger (need template.js)
#+HTML: <button id="toc-toggle">☰ Menu</button>

* Introduzione
Org-mode è uno strumento versatile che ti permette di creare documenti organizzati, tenere traccia di progetti, scrivere codice eseguibile e molto altro. Questo documento mostra alcune delle sue funzionalità principali.

** Caratteristiche principali
  - Facile gestione di *task* e *progetti*.
  - Supporto per collegamenti e immagini.
  - Esportazione in vari formati come HTML, LaTeX, PDF, Markdown.
  - Esecuzione di codice in vari linguaggi.

* Liste
** Liste ordinate
  1. Primo elemento
  2. Secondo elemento
  3. Terzo elemento

** Liste non ordinate
  - Punto 1
  - Punto 2
    - Sottopunto 2.1
    - Sottopunto 2.2

* Tabelle
Org-mode supporta anche la creazione di tabelle formattate.

| Prodotto   | Prezzo | Quantità |
|------------|--------|----------|
| Penne      | 1.50€  | 10       |
| Quaderni   | 3.00€  | 5        |
| Matite     | 0.80€  | 20       |
| Totale     | 5.30€  | 35       |

* Collegamenti
Ecco un esempio di un collegamento a un altro file o sezione:
  - Vai alla sezione BibliotecaCasalinga

* Blocco di codice sorgente
Org-mode ti permette di scrivere e eseguire codice in vari linguaggi. Ecco un esempio in Python:

#+BEGIN_SRC python :results output :exports both
def somma(a, b):
    return a + b

print(somma(5, 7))
\\#+END_SRC

* Note a piè di pagina
Org-mode gestisce anche le note a piè di pagina facilmente.[fn:1]

* Esportazione in LaTeX
Se vuoi includere equazioni matematiche, puoi usare la sintassi LaTeX.

Esempio di equazione in linea: $E = mc^2$

Esempio di equazione bloccata:

\[
a^2 + b^2 = c^2
\]

* Immagini
Puoi includere immagini nel documento:

[[file:immagine.png]]

* Task Management
Org-mode ti permette di gestire *TODO* e *PROGRESS*:

** TODO Scrivere un articolo
DEADLINE: <2024-10-15>

** PROGRESS Studiare Org-mode
  - [X] Capire le basi
  - [ ] Approfondire le opzioni avanzate

* Conclusione
Org-mode è uno strumento estremamente potente per l'organizzazione delle informazioni e la produttività. Esplora ulteriormente le sue funzionalità per adattarlo alle tue esigenze!

*Note*
[fn:1] Questa è una nota a piè di pagina.

@import url("roboto/roboto.css");
body {
    font-family: "Roboto-Regular", sans-serif;
    background-color: #f4f4f9;
    color: #333;
    margin: 0;
    padding: 0;
    display: flex;
}

#table-of-contents {
    width: 250px;
    height: 100vh;
    overflow-y: auto;
    position: fixed;
    left: 0;
    top: 0;
    background-color: #ffffff;
    padding: 20px;
    box-shadow: 2px 0 5px rgba(0,0,0,0.1);
    transition: transform 0.3s ease-in-out;
}

#postamble {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 270px;
    background-color: #ffffff;
    padding: 10px;
    box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
    font-size: 0.9em;
    z-index: 1000;
}

#content {
    margin-left: 370px;
    padding: 20px;
    flex-grow: 1;
}

blockquote{
    width: 100%; 
    max-width: 1400px; 
    height: auto;
    border: 1px solid #ddd;
    padding: 10px;
    box-sizing: border-box;    
}

blockquote img {
    width: 100%; 
    height: auto; 
    display: block; 
}


h1 {
    color: #1E569F;
    font-size: 2.5em;
    text-align: center;
}

h2 {
    color: #2883FA;
    font-size: 2em;
    border-bottom: 2px solid #2a7ae2;
}

h3 {
    color: #388964;
}

ul {
    list-style-type: square;
    margin-left: 20px;
}

li {
    margin-bottom: 10px;
    padding: 5px;
    border-radius: 5px; 
    transition: background-color 0.3s ease, color 0.3s ease;
}

li:hover {
    background-color: #e0f0ff;
    color: #2a7ae2; 
}

li::marker {
    color: #2883FA; 
    font-size: 1.2em;  
}

tr {
    margin-bottom: 10px;
    padding: 5px;
    border-radius: 5px; 
    transition: background-color 0.3s ease, color 0.3s ease; 
}

tr:hover {
    background-color: #e0f0ff; 
    color: #2a7ae2; 
}

.checkbox {
    color: #e60000;
}

.done {
    color: green;
    text-decoration: line-through;
}

#text-table-of-contents ul {
    padding-left: 20px;
}

#text-table-of-contents ul li {
    margin-bottom: 5px;
}

#text-table-of-contents ul li a {
    text-decoration: none;
    color: #333;
}

#text-table-of-contents ul li a:hover {
    color: #2a7ae2;
}

#toc-toggle {
    position: fixed;  
    top: 10px;        
    left: 10px;       
    z-index: 2000;
    background-color: #2a7ae2;
    color: white;
    border: none;
    padding: 5px;
    cursor: pointer;
    transition: none;
    display: none;
}

/*------------- mobile -----------------------------------------------*/
@media (max-width: 768px) {
    body {
        flex-direction: column;
    }

    #toc-toggle {
        display: block;
    }

    #table-of-contents {
        width: 70%;
        max-width: 200px;
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;
        z-index: 1500;
    }

    #table-of-contents.active {
        transform: translateX(0);
    }

    #content.shift-right {
        transform: translateX(70%);
        transition: transform 0.3s ease-in-out;
    }

    #content {
        margin-left: 0;
        padding-top: 60px;
        width: 90%;
    }

    #postamble {
        transform: translateX(-100%);
        left: 0;
    }

    #toc-toggle {
        display: block;
    }
}

// simple management of responsive toc
document.addEventListener("DOMContentLoaded", function() {
    var tocToggle = document.getElementById("toc-toggle")
    var tableOfContents = document.getElementById("table-of-contents");
    tocToggle.addEventListener("click", function() {
        tableOfContents.classList.toggle("active");
    });
});