1. Impaginazione Easy con Homebrewery
    Sfruttare l'utilissimo tool di NaturalCrit senza lo stile 5e + Bonus

     
    Like       0 Comments   318 Views
    .

    Nel gruppo Telegram @osrItalia ho promesso una guida per sfruttare l'ottimo Homebrewery, un ottimo tool (che trovate gratuitamente QUI) per impaginare velocemente il vostro materiale senza doversi impelagare in
    apprendimento di strumenti più complessi (anche se più completi).

    Premetto che per usufruire a pieno della guida e personalizzare quanto più possibile lo stile di impaginazione è necessaria una certa conoscenza di base di HTML e CSS. Per tutti gli altri che non hanno tempo o non vogliono apprendere questo stile di markdown sarà sufficiente copiare lo stile di base che inserirò alla fine dell'articolo. Cominciamo!

    Homebrewery sfrutta il Markdown HTML per generare in tempo reale una pagina stilizzata. Il markdown di base presente sulla pagina è stato creato per rassomigliare quanto più possibile ad un manuale ufficiale di 5a edizione, ma non è quello il nostro target.

    Per cominciare basta inserire in cima alla pagina di editing il tag di styling
    CITAZIONE
    <style>

    </style>

    Tutto quello che andremo a mettere li dentro verrà applicato come foglio di stile all'interno della pagina di anteprima.
    Andando all'interno dei DevTools (F12 su Chrome), sarà immediatamente possibile notare come ogni singolo elemento presente nella pagina di anteprima ha gia al suo interno un qualche tipo di classe , per esempio il contenitore principale è marcato come <div class="phb" id="p1">

    All'interno del tag di stile possiamo quindi effettuare la nostra prima modifica
    CITAZIONE
    .phb{ background : white; color:black }

    Questo semplice snippet di codice rimuove dallo sfondo l'immagine pergamena e ci da la libertà di inserire qualsiasi sfondo vogliamo alla nostra pagina.

    La classe "phb" è molto importante, perché è quella che contiene tutti gli altri tag che andrete ad inserire nella pagina, quindi è consigliabile, quando si effettua una modifica anteporlo a qualsiasi tag a cui vogliamo applicare qualche stile.

    E' possibile scrivere le proprie classi custom CSS ed applicarle all'interno del testo semplicemente inserendole nel tag di Style con la nomenclatura .Nomeclasse e poi applicarla ad un frammento di testo tramite un div

    CITAZIONE
    <style>
    .esempio {
    color:red
    }
    </style>

    < div class="esempio" >
    Questo è un testo che voglio rosso
    < /div >

    E' inoltre possibile inserire font custom a patto che siano ottenibili tramite URL, Inserendone il LINK sopra al tag di Style, per esempio
    CITAZIONE
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">

    e poi applicarlo alle parti del testo che vogliamo modificare, ad esempio i paragrafi. IMPORTANTE: per far si che il font sia applicato vanno inseriti i tag a cui il font va applicato uno ad uno. Non sono ancora riuscito a scoprire come mai inserendo il font-family nel body esso non venga aggiunto a tutti i tag figli.

    CITAZIONE
    <style>

    p {
    font-family: 'Sofia';
    }
    </style>

    In tutto questo Homebrewery fornisce di base un layout a due colonne con strumenti intuitivi per inserire interruzioni, tabelle, stat block etc.

    Di seguito trovate invece uno stile di default per impaginazione in bianco e nero, ottimo per avere qualcosa di leggibile in poco tempo in puro stile vecchia scuola

    CITAZIONE
    <style>

    .phb{ background : white; color:black }
    .phb img{display: block;
    margin-left: auto;
    margin-right: auto;}
    .phb hr+blockquote {background : white;}
    .phb h1 { color:black; border-bottom: 2px solid black;}
    .phb h2 { color:black;}
    .phb h3 { color:black; border-bottom: 2px solid black;}
    .phb h4 { color:black;}
    .phb h5 { color:black;}
    .phb table { border:1px solid black;}
    .phb table thead th {
    color:black;
    }

    .phb table tbody tr:nth-child(odd){
    background-color: #cecece;
    color: black;
    }

    .phb .footnote {
    color: black;
    }

    .phb:after {
    filter:grayscale(100%);
    }

    .phb .pageNumber {
    color:black;
    }

    .phb .classTable {
    filter: grayscale(100%);
    }

    .phb hr+blockquote {
    filter: grayscale(100%);
    }

    .phb hr+blockquote hr {
    filter: grayscale(100%);
    }

    .phb hr+blockquote hr+ul {
    color: black;
    }

    .phb blockquote {
    filter: grayscale(100%);
    margin:10px;
    }

    .phb .descriptive {
    filter: grayscale(100%);
    background-color:#cecece;
    }

    .right{
    float:right;
    }

    </style>

    <style>

    .phb#p1:after{ display:none; }
    </style>

    Un esempio creato al volo per questa guida da un idea del possibile risultato ottenibile in pochi minuti
    H27j3uy

    E questo il semplice codice sorgente (ottenibile tramite i pulsanti superiori in modo semplice e veloce)

    CITAZIONE
    > ## La lama del Derviscio
    >*Spada a due mani*
    > ___
    > - **Danni**: 2d6 taglienti
    > - **Aura Magica**: Abiurazione
    > - **Raggio**: 1,5m
    > - **Peso**: 1,5 kg
    > - **Valore** 350 mo
    > ___
    > ***Descrizione.***: La Lama del Derviscio è una lama a due mani con il manico di cuoio fregiato da solchi ornamentali che ritraggono scene di danza. E' cosi chiamata poichè normalmente accompagna la danza di guerra di questi incredibili guerrieri del deserto. Se mossa correttamente, gli anelli sul dorso colpiscono ritmicamente la lama, permettendo di generare una melodia semplicemente agitandola e colpendo nel modo giusto.
    > ### Effetto
    > Se la creatura che impugna quest'arma si è mossa di almeno 3 metri in questo turno, essa può effettuare attacchi usando il Carisma come statistica per tiro per colpire e danni al posto della Forza. Fornisce un utilizzo giornaliero in più di qualsiasi feature ottenuta tramite livelli da Bardo.
    >
    >

    La cosa migliore di tutte ? Come scritto sulla pagina principale:
    L'Homebrewery è concessa in licenza utilizzando la [Licenza MIT] (https://github.com/naturalcrit/homebrewery.../master/license). Il che significa che sei libero di usare The Homebrewery in qualsiasi modo tu voglia, tranne che per affermare di averla fatta da solo.

    Se desideri vendere o in qualche modo trarre profitto da ciò che viene creato su quel sito, è tua responsabilità assicurarti di avere le licenze / i diritti appropriati per qualsiasi immagine o risorsa utilizzata.


      Share  
     
    .