new style overhaul, better navigation options

css/dark.css

@@ -1,9 +1,10 @@
-body {
+html {
     background-color: #34495e;
 }
 
 body,
 .title,
+.themeBtn,
 a {
     color: #ecf0f1;
 }
@@ -21,12 +22,7 @@ thead tr {
     background-color: #34495e;
 }
 
-.outline-2,
+#content,
-#footnotes,
+#postamble{
-#postamble {
     background-color: #2c3e50;
 }
-
-.themeBtn {
-    color: #ecf0f1;
-}

css/light.css

@@ -1,9 +1,10 @@
-body {
+html {
     background-color: #eee;
 }
 
 body,
 .title,
+.themeBtn,
 a {
     color: #444;
 }
@@ -21,12 +22,7 @@ thead tr {
     background-color: #ddd;
 }
 
-.outline-2,
+#content,
-#footnotes,
 #postamble {
     background-color: #eee;
 }
-
-.themeBtn {
-    color: #ecf0f1;
-}

css/main.css

@@ -12,28 +12,57 @@
     src: url("../fonts/NotoSansRunic-Regular.ttf");
 }
 
-:root {
-    --after-rotation: 90deg;
-}
-
 body {
     font-family: "Noto Sans Runes", "DoulosSIL", "Lato", "proxima-nova", "Helvetica Neue", Arial, sans-serif;
     font-weight: normal;
     overflow-x: hidden;
     font-size: 105%;
     height: 100%;
-    margin: 0;
+    margin: 10px;
+}
+
+#postamble {
+    text-align: center;
 }
 
 #content {
     max-width: 1100px;
-    margin: 0 auto;
+    margin: 20px auto;
-    padding: 2px;
+    padding: 10px;
+    box-shadow: 5px 5px 7px rgba(1, 1, 1, .6);
 }
 
-img,
+hr {
-table {
+    display: block;
-    margin: auto;
+    margin-top: 0.5em;
+    margin-bottom: 0.5em;
+    margin-left: auto;
+    margin-right: auto;
+    border-style: inset;
+    border-width: 1px;
+}
+
+.outline-2,
+.outline-3,
+.outline-4,
+.outline-5,
+.outline-6,
+.outline-text-2,
+.outline-text-3,
+.outline-text-4,
+.outline-text-5,
+.outline-text-6 {
+    margin: 0 2px;
+    padding: 0 10px;
+}
+
+.outline-text-2,
+.outline-text-3,
+.outline-text-4,
+.outline-text-5,
+.outline-text-6,
+#postamble {
+    margin-bottom: 20px;
 }
 
 a {
@@ -47,6 +76,26 @@ a:hover {
     transition: all .3s ease-in;
 }
 
+a[href^="img/"],
+a[href^="img/"]:hover {
+    box-shadow: 0 0;
+}
+
+.figure p {
+    margin: 0 0;
+}
+
+.largetable,
+.figure {
+    display: block;
+    overflow-x: auto;
+}
+
+img,
+table {
+    margin: auto;
+}
+
 table {
     border-collapse: collapse;
 }
@@ -61,9 +110,8 @@ td {
     text-align: right;
 }
 
-.title {
+p {
-    padding: 0 20px;
+    text-align: justify;
-    text-align: left;
 }
 
 h1,
@@ -72,12 +120,9 @@ h3,
 h4,
 h5,
 legend {
-    display: inline-block;
-    position: relative;
     font-family: "Roboto Slab", "ff-tisa-web-pro", "Georgia", Arial, sans-serif;
     font-weight: 700;
-    margin-top: 0;
+    display: inline-block;
-    z-index: 20;
 }
 
 h1 {
@@ -110,92 +155,7 @@ h5 {
     font-weight: 300;
 }
 
-h2,
+/* Theme switcher ************************************************************/
-h3,
-h4,
-h5 {
-    cursor: pointer;
-}
-
-h2::after,
-h3::after,
-h4::after,
-h5::after {
-    content: "➤";
-    margin-left: 20px;
-    display: inline-block;
-}
-
-.footnotes {
-    cursor: default !important;
-}
-
-.footnotes::after {
-    content: "" !important;
-    margin: 0 !important;
-}
-
-.rotated::after {
-    -webkit-transform: rotate(var(--after-rotation));
-    -moz-transform: rotate(var(--after-rotation));
-    -o-transform: rotate(var(--after-rotation));
-    -ms-transform: rotate(var(--after-rotation));
-    transform: rotate(var(--after-rotation));
-}
-
-.outline-2,
-.outline-3,
-.outline-4,
-.outline-5,
-.outline-6,
-.outline-text-2,
-.outline-text-3,
-.outline-text-4,
-.outline-text-5,
-.outline-text-6 {
-    margin: 0 2px;
-    padding: 0 10px;
-}
-
-.outline-text-2,
-.outline-text-3,
-.outline-text-4,
-.outline-text-5,
-.outline-text-6 {
-    margin-bottom: 20px;
-}
-
-.outline-2,
-#footnotes,
-#postamble {
-    box-shadow: 5px 5px 7px rgba(1, 1, 1, .6);
-    margin: 20px;
-    padding: 20px;
-}
-
-.outline-3,
-.outline-4,
-.outline-5,
-.outline-6,
-.outline-text-2,
-.outline-text-3,
-.outline-text-4,
-.outline-text-5,
-.outline-text-6,
-#table-of-contents {
-    display: none;
-}
-
-.largetable,
-.figure {
-    display: block;
-    overflow-x: auto;
-}
-
-a.footref {
-    padding: 0 1px;
-    margin: 0 2px;
-}
 
 .themeBtn {
     position: fixed;

eittlanda.org

@@ -1,15 +1,13 @@
 # -*- org-confirm-babel-evaluate: nil -*-
-#+include: headers/head-lvl0.org
 #+TITLE: Une Grammaire de l’Eittlandais
+#+include: headers/head-lvl0.org
 #+HTML_HEAD: <meta name="description" content="Grammaire détaillée de l’Eittlandais" />
 #+HTML_HEAD: <meta property="og:title" content="Grammaire de l’Eittlandais" />
 #+HTML_HEAD: <meta property="og:description" content="Grammaire détaillée de l’idéolangue Eittlandaise" />
-#+LATEX_CLASS: conlang
 #+LATEX_HEADER: \usepackage{allrunes}
 #+MACRO: rune-manual @@latex:\textara{$1}@@ @@html:$2@@
 #+MACRO: rune (eval (conlanging/eittlanda-org-export-runes "$1"))
 #+STARTUP: align shrink
-#+OPTIONS: auto-id:t
 #+KEYWORDS: eittland eittlande einnland einnlande nordique viking islande norrois
 
 * Propos préliminaires
@@ -489,7 +487,6 @@
     |   e   |       -       |      -       |       +        |      -       |       +        |
     |   ɑ   |       -       |      -       |       -        |      +       |       -        |
 
-
 *** Diphtongues
     :PROPERTIES:
     :CUSTOM_ID: h-c44d50b3-b107-44fb-8b12-c2fbbd159f31

headers/head-lvl0.org

@@ -4,7 +4,7 @@
 # ### STYLE ####################################################################
 
 #+HTML_HEAD: <link rel="stylesheet" href="./css/htmlize.min.css"/>
-#+HTML_HEAD: <link rel="stylesheet" href="./css/style.css"/>
+#+HTML_HEAD_EXTRA: <link rel="stylesheet" href="./css/main.css"/>
 
 #+HTML_HEAD: <script src="./js/jquery.min.js"></script>
 #+HTML_HEAD: <script src="./js/main.js"></script>

headers/head-lvl1.org

@@ -4,7 +4,7 @@
 # ### STYLE ####################################################################
 
 #+HTML_HEAD: <link rel="stylesheet" href="../css/htmlize.min.css"/>
-#+HTML_HEAD: <link rel="stylesheet" href="../css/style.css"/>
+#+HTML_HEAD: <link rel="stylesheet" href="../css/main.css"/>
 
 #+HTML_HEAD: <script src="../js/jquery.min.js"></script>
 #+HTML_HEAD: <script src="../js/main.js"></script>

headers/headers.org

@@ -1,9 +1,10 @@
-# -*- mode: org; -*-
+# -*- mode: org; org-confirm-babel-evaluate: nil -*-
 #+AUTHOR: Lucien Cartier-Tilet
 #+EMAIL: phundrak@phundrak.fr
 #+CREATOR: Lucien Cartier-Tilet
 #+LANGUAGE: fr
 
+# ### ORG OPTIONS ##############################################################
 
 #+OPTIONS: H:4 broken_links:mark email:t ^:{} tex:dvisvgm
 #+KEYWORDS: conlang idéolangue langue langues linguistique phundrak drakpa
@@ -12,7 +13,7 @@
 
 #+name: setup
 #+begin_src emacs-lisp :results silent :exports none
-  (unless (find "per-file-class" org-latex-classes :key 'car
+  (unless (find "conlang" org-latex-classes :key 'car
             :test 'equal)
     (add-to-list 'org-latex-classes
                  '("conlang"
@@ -91,6 +92,7 @@
 #+LATEX_HEADER_EXTRA: \usepackage{multicol}
 #+LATEX_HEADER_EXTRA: \usepackage{indentfirst}
 #+LATEX_HEADER_EXTRA: \sloppy
+#+INFOJS_OPT: view:info toc:1
 
 # ### HTML #####################################################################
 

hjalpi.org

@@ -1,5 +1,5 @@
-#+include: headers/head-lvl0.org
 #+TITLE: Grammaire du Hjalpi’
+#+include: headers/head-lvl0.org
 #+HTML_HEAD: <meta name="description" content="Grammaire détaillée de la langue construite du Hjalpi’" />
 #+HTML_HEAD: <meta property="og:title" content="Grammaire du Hjalpi’" />
 #+HTML_HEAD: <meta property="og:description" content="Grammaire détaillée de la langue construite du Hjalpi’" />

hjelp.org

@@ -1,5 +1,5 @@
-#+include: headers/head-lvl0.org
 #+TITLE: Une Grammaire du Hjelp
+#+include: headers/head-lvl0.org
 #+HTML_HEAD: <meta name="description" content="Grammaire détaillée de la langue construite du Hjelp" />
 #+HTML_HEAD: <meta property="og:title" content="Grammaire du Hjelp" />
 #+HTML_HEAD: <meta property="og:description" content="Grammaire détaillée de la langue construite du Hjelp" />
@@ -187,7 +187,7 @@ Voici ci-dessous la description de chacune de ces voyelles :
    Le Hjelp est une langue tonale disposant de sept tons différents portant sur une syllabe entière. Un ton est une variation de hauteur non pas absolue comme peuvent l’être les notes d’une chanson, mais plutôt des variations de hauteur relative à la hauteur standard du locuteur. Voici ci-dessous une illustration des sept tons du Hjelp, avec pour hauteur de référence du locuteur le ton nº1 :
 
 #+CAPTION: Les sept tons du Hjelp
-[[./img/hjelp_tones.jpg]]
+[[./img/hjelp/tones.jpg]]
 
    Comme vous pouvez le constater, trois des tons du Hjelp sont constants. Le premier est, comme indiqué précédemment, le ton de référence du locuteur et est désigné comme étant le ton neutre. Le second ton est le ton bas, le troisième est le ton haut, prononcés respectivement avec une hauteur plus grave et plus haute que le ton neutre. Les deux tons suivants sont des tons de hauteur changeante, mais avec la variation constante. Le quatrième ton est un ton montant, tandis que le cinquième ton est descendant. Les deux tons suivants sont un peu plus complexes, et par conséquent plus rares, le sixième ton étant montant puis descendant, et le septième étant descendant puis montant.
 

index.org

@@ -1,5 +1,6 @@
-#+include: headers/head-lvl0.org
 #+TITLE: Langues construites de P’undrak
+#+INFOJS_OPT: view:showall toc:1
+#+include: headers/head-lvl0.org
 #+HTML_HEAD: <meta name="description" content="Collection de documents et pages webs de linguistique et de langues construites de P’undrak" />
 #+HTML_HEAD: <meta property="og:title" content="Langues construites de P’undrak" />
 #+HTML_HEAD: <meta property="og:description" content="Collection de documents et pages webs de linguistique et de langues construites de P’undrak" />

js/main.js

@@ -3,38 +3,11 @@
 window.onload = function() {
     reorganize_html();
     create_theme_switcher();
-    roll_elems();
 };
 
-function roll_elems() {
-    // Make the rollable headers actually rollable and rolled
-    $(".outline-2").each(function() {
-        ['h2', 'h3', 'h4', 'h5', 'h6'].forEach(htitle => {
-            $(this).find(htitle).each(function($header) {
-                $header = $(this);
-                if (isEmpty($header.next())) {
-                    $header.next().remove();
-                }
-                $header.click(function() {
-                    $header.nextAll().each(function() {
-                        $(this).slideToggle(500);
-                    });
-                    $header.toggleClass('rotated');
-                });
-            });
-        });
-    });
-}
-
 function reorganize_html() {
-    // Remove table of contents
-    $("#table-of-contents").remove();
-
-    // Move the title out of the content div
-    $('#content').before('<div class="h1-container"><div class="highlight-h1"></div></div>');
-    $('.title').prependTo($('.h1-container'));
-
     // Move the postamble in the content div
+    $('#content').append('<hr>');
     $('#postamble').appendTo($('#content'));
 
     // Move each table in a div to handle large tables' overflow

matter-grammar.org

@@ -1,12 +1,8 @@
-#+include: headers/head-lvl0.org
 #+TITLE: Une Grammaire du Mattér
+#+include: headers/head-lvl0.org
 #+HTML_HEAD: <meta name="description" content="Grammaire détaillée de la langue construite du Mattér" />
 #+HTML_HEAD: <meta property="og:title" content="Grammaire du Mattér" />
 #+HTML_HEAD: <meta property="og:description" content="Grammaire détaillée de la langue construite du Mattér" />
-#+OPTIONS: H:4 toc:nil auto-id:t
-src_latex{\newpage}
-#+TOC: headlines
-src_latex{\newpage}
 
 * Avant-propos
   :PROPERTIES:

matter.org

@@ -1,16 +1,12 @@
 # -*- org-confirm-babel-evaluate: nil -*-
-#+include: headers/head-lvl0.org
 #+TITLE: Une Grammaire du Mattér
+#+include: headers/head-lvl0.org
 #+HTML_HEAD: <meta name="description" content="Grammaire détaillée de la langue construite Mattér" />
 #+HTML_HEAD: <meta property="og:title" content="Grammaire du Mattér" />
 #+HTML_HEAD: <meta property="og:description" content="Grammaire détaillée de la langue construite Mattér" />
 #+LATEX_HEADER: \usepackage{allrunes}
-#+OPTIONS: H:4 toc:nil auto-id:t
 #+MACRO: rune-manual @@latex:\textara{$1}@@ @@html:$2@@
 #+MACRO: rune (eval (conlanging/matter-org-export-runes "$1"))
-src_latex{\newpage}
-#+TOC: headlines
-src_latex{\newpage}
 
 * Avant-propos
   :PROPERTIES:
@@ -73,9 +69,9 @@ src_latex{\newpage}
    :CUSTOM_ID: h-8791c7f7-9030-42a4-b625-9f3c31462621
    :END:
    <<intro-demography>>
-   #+attr_html: :alt Carte d’Éïnlante :align center
+   #+attr_html: :alt Carte d’Éïnlante
    #+CAPTION: Carte du XIX^{ème} siècle d’Éïnlante
-   [[file:./img/matter_einlant-old-map.jpg]]
+   [[file:./img/matter/einlant-old-map.jpg]]
 
    Le Mattér  est parlé par  un peuple imaginaire  vivant sur une  île également
    imaginaire nommée Éïnlante (/terre  solitaire/, /Einlant/ en Mattér), peuplée

nyqy.org

@@ -1,15 +1,9 @@
 # -*- org-confirm-babel-evaluate: nil -*-
-#+include: headers/head-lvl0.org
 #+TITLE: Une Grammaire du Ňyqy
+#+include: headers/head-lvl0.org
 #+HTML_HEAD: <meta name="description" content="Grammaire détaillée de la langue construite Ňyqy" />
 #+HTML_HEAD: <meta property="og:title" content="Grammaire du Ňyqy" />
 #+HTML_HEAD: <meta property="og:description" content="Grammaire détaillée de la langue construite Ňyqy" />
-#+LATEX_CLASS: article
-#+LATEX_HEAD: \usepackage{tocloft}
-#+LATEX_HEAD: \setlength{\cftchapnumwidth}{3em}
-#+OPTIONS: H:4 toc:nil ^:{}
-#+OPTIONS: auto-id:t
-#+TOC: headlines
 # To be used at https://jasontank.net/wordgen.html
 #+NAME: wordgen-backup
 #+BEGIN_SRC text :exports none
@@ -224,7 +218,7 @@
 
     #+RESULTS[3cdf83976255f554cbde3c9c60d3c98fe3ff6f7c]: cons-tree
 
-    #+BEGIN_SRC dot :file img/nyqy-consonant-feature-tree.png :var input=cons-tree :exports results :eval yes :cache yes
+    #+BEGIN_SRC dot :file img/nyqy/consonant-feature-tree.svg :var input=cons-tree :exports results :eval yes :cache yes
       $input
     #+END_SRC
     #+NAME: arbre:cons
@@ -336,7 +330,7 @@
       (tree-to-dot vowels)
     #+END_SRC
 
-    #+BEGIN_SRC dot :file img/nyqy-vowel-feature-tree.png :var input=vow-tree :exports results :eval yes :cache yes
+    #+BEGIN_SRC dot :file img/nyqy/vowel-feature-tree.svg :var input=vow-tree :exports results :eval yes :cache yes
       $input
     #+END_SRC
     #+NAME: arbre:vowels
@@ -737,7 +731,7 @@
     (tree-to-dot syntax-tree)
   #+END_SRC
 
-  #+BEGIN_SRC dot :file img/nyqy-basic-syntax.png :var input=basic-syntax-tree :exports results :eval yes :cache yes
+  #+BEGIN_SRC dot :file img/nyqy/basic-syntax.svg :var input=basic-syntax-tree :exports results :eval yes :cache yes
     $input
   #+END_SRC
   #+NAME: arbre:syntaxe:basique

nyqy2.org

@@ -1,12 +1,9 @@
 # -*- org-confirm-babel-evaluate: nil -*-
-#+include: headers/head-lvl0.org
 #+TITLE: Une Grammaire du Ňyqy
+#+include: headers/head-lvl0.org
 #+HTML_HEAD: <meta name="description" content="Grammaire détaillée de la langue construite Ňyqy" />
 #+HTML_HEAD: <meta property="og:title" content="Grammaire du Ňyqy" />
 #+HTML_HEAD: <meta property="og:description" content="Grammaire détaillée de la langue construite Ňyqy" />
-#+LATEX_CLASS: book
-#+OPTIONS: auto-id:t
-#+TOC: headlines
 # To be used at https://jasontank.net/wordgen.html
 #+NAME: wordgen-backup
 #+BEGIN_SRC text :exports none

taso.org

@@ -1,15 +1,9 @@
 # -*- org-confirm-babel-evaluate: nil -*-
-#+include: headers/head-lvl0.org
 #+TITLE: Une Grammaire du Tãso
+#+include: headers/head-lvl0.org
 #+HTML_HEAD: <meta name="description" content="Grammaire détaillée de la langue construite Tãso" />
 #+HTML_HEAD: <meta property="og:title" content="Grammaire du Tãso" />
 #+HTML_HEAD: <meta property="og:description" content="Grammaire détaillée de la langue construite Tãso" />
-#+LATEX_CLASS: article
-#+LATEX_HEAD: \usepackage{tocloft}
-#+LATEX_HEAD: \setlength{\cftchapnumwidth}{3em}
-#+OPTIONS: H:4 toc:nil ^:{}
-#+OPTIONS: auto-id:t
-#+TOC: headlines
 
 * Avant-propos
   :PROPERTIES:
@@ -132,7 +126,7 @@
       (tree-to-dot consonants)
     #+END_SRC
 
-    #+BEGIN_SRC dot :file img/taso-consonant-feature-tree.png :var input=cons-tree :exports results :eval yes :cache yes
+    #+BEGIN_SRC dot :file img/taso/consonant-feature-tree.svg :var input=cons-tree :exports results :eval yes :cache yes
       $input
     #+END_SRC
     #+NAME: arbre:cons
@@ -193,7 +187,7 @@
       (tree-to-dot vowels)
     #+END_SRC
 
-    #+BEGIN_SRC dot :file img/taso-vowel-feature-tree.png :var input=vowel-tree :exports results :eval yes :cache yes
+    #+BEGIN_SRC dot :file img/taso/vowel-feature-tree.svg :var input=vowel-tree :exports results :eval yes :cache yes
       $input
     #+END_SRC
     #+NAME: arbre:cons

template.org

@@ -1,13 +1,9 @@
 # -*- org-confirm-babel-evaluate: nil -*-
-#+include: headers/head-lvl0.org
 #+TITLE: Une Grammaire du TEMPLATE
+#+include: headers/head-lvl0.org
 #+HTML_HEAD: <meta name="description" content="Grammaire détaillée de la langue construite TEMPLATE" />
 #+HTML_HEAD: <meta property="og:title" content="Grammaire du TEMPLATE" />
 #+HTML_HEAD: <meta property="og:description" content="Grammaire détaillée de la langue construite TEMPLATE" />
-#+LATEX_CLASS: book
-#+LATEX_HEAD: \usepackage{tocloft} \setlength{\cftchapnumwidth}{3em}
-#+OPTIONS: H:4 toc:nil ^:{} auto-id:t
-#+TOC: headlines
 
 * Propos préliminaires
   :PROPERTIES: