Browse Source

ajout du squelette html5up editorial

README.txt :
Squelette SPIP pour intégrer le modèle Editorial de HTML5UP
https://html5up.net/editorial
Le squelette Solid State https://zone.spip.org/trac/spip-zone/browser/_squelettes_/html5up_solid_state
a été pris pour commencer celui-ci.

v1.0.0
Ce squelette n'utilise pour l'instant que les articles et les rubriques racines, sans sous-rubrique.

Conseil : utiliser Court-Circuit pour éviter la page rubrique s'il n'y a qu'un seul article dans une rubrique.

La page de configuration permet quelques réglages. On y défini le contenu de la page d'accueil, le premier article est le "héro", le second est le "majeur".
L'article héro : le titre, un résumé + le logo + un bouton "Lire la suite"
L'article majeur : le titre + le champ texte intégral. Si cet article est une "page unique" (plugin "Pages") il n'apparaîtra pas dans le menu. Pour rédiger le texte, un modèle permet d'afficher comme dans le thème de départ une icône de FontAwesome et un texte en deux blocs par ligne. C'est le modèle <iconebloc|> qui prend quelques paramètres :
	|icone=fa-rocket (ou tout autre icone de FontAwesome http://fontawesome.io/icons/)
	|iconetitre=le titre
	|iconetexte=le texte
L'article héro de la colonne gauche est aussi désigné dans la page de configuration : on verra le titre, l'introduction et un lien vers la page. En utilisant le champ "Descriptif" des articles, on pourra rédiger le texte qui apparaît dans cette colonne gauche, qui pourra être différent des champs visible sur la page de l'article lui-même.
Le modèle <articleXX|resume> rendra le logo, le titre et un résumé de l'article XX, avec les parametres :
	|affichertitre=non
	|afficherlien=non	
Un autre modèle permet d'insérer n'importe quel icône de FontAwesome dans le flux d'un texte <icone> avec des parametres :
	|icone=fa-rocket (ou tout autre icone de FontAwesome http://fontawesome.io/icons/)
	|taille=3em (ou 60px ou 150%)

Un problème js empêchait aléatoirement le script javscript/main.js de retirer la classe "is-loading" qui est placé sur la balise body (par ce même script). Ce petit soucis cause des prblèmes plus gros dans l'interface.
Un petit bout de code dans javascript/perso.js permet de retirer cette classe de manière plus sûre, mais c'est une rustine en attendant mieux.

TODO
Vérifier et adapter les modèles où qu'on les insère.
Retrouver le multilinguisme 
Adapter les autres objets SPIP (mots, sites, brèves)
svn/attic/html5up_editorial/118729
chankalan@choc0.net 4 years ago
parent
commit
c528debc94
  1. 126
      .gitattributes
  2. 32
      README.txt
  3. 3
      article.html
  4. 3
      auteur.html
  5. 43
      backend.html
  6. 28
      body.html
  7. 5
      breadcrumb/401.html
  8. 5
      breadcrumb/404.html
  9. 8
      breadcrumb/auteur.html
  10. 15
      breadcrumb/dist.html
  11. 21
      breadcrumb/forum.html
  12. 7
      breadcrumb/inc-objet.html
  13. 5
      breadcrumb/inc-page.html
  14. 10
      breadcrumb/login.html
  15. 8
      breadcrumb/mot.html
  16. 4
      breadcrumb/plan.html
  17. 4
      breadcrumb/recherche.html
  18. 0
      breadcrumb/sommaire.html
  19. 3
      breve.html
  20. 8
      content/401.html
  21. 8
      content/404.html
  22. 17
      content/article.html
  23. 15
      content/auteur.html
  24. 44
      content/plan.html
  25. 10
      content/recherche.html
  26. 18
      content/rubrique.html
  27. 33
      content/sommaire.html
  28. 39
      css/base/_page.scss
  29. 186
      css/base/_typography.scss
  30. 26
      css/components/_box.scss
  31. 87
      css/components/_button.scss
  32. 156
      css/components/_features.scss
  33. 37
      css/components/_fonts.scss
  34. 182
      css/components/_form.scss
  35. 17
      css/components/_icon.scss
  36. 74
      css/components/_image.scss
  37. 255
      css/components/_list.scss
  38. 31
      css/components/_mini-posts.scss
  39. 179
      css/components/_posts.scss
  40. 39
      css/components/_section.scss
  41. 81
      css/components/_table.scss
  42. 4
      css/font-awesome.min.css
  43. 28
      css/ie8.scss
  44. 84
      css/ie9.scss
  45. 75
      css/layout/_banner.scss
  46. 18
      css/layout/_footer.scss
  47. 51
      css/layout/_header.scss
  48. 58
      css/layout/_main.scss
  49. 98
      css/layout/_menu.scss
  50. 222
      css/layout/_sidebar.scss
  51. 13
      css/layout/_wrapper.scss
  52. 34
      css/libs/_functions.scss
  53. 398
      css/libs/_mixins.scss
  54. 587
      css/libs/_skel.scss
  55. 44
      css/libs/_vars.scss
  56. 59
      css/main.scss
  57. 260
      css/spip.scss
  58. 134
      css/theme.scss
  59. 12
      css/vars_spip.scss.html
  60. BIN
      fonts/FontAwesome.otf
  61. BIN
      fonts/fontawesome-webfont.eot
  62. 685
      fonts/fontawesome-webfont.svg
  63. BIN
      fonts/fontawesome-webfont.ttf
  64. BIN
      fonts/fontawesome-webfont.woff
  65. BIN
      fonts/fontawesome-webfont.woff2
  66. 23
      footer/dist.html
  67. 93
      formulaires/configurer_html5up_editorial.html
  68. 7
      formulaires/recherche.html
  69. 42
      formulaires/recherche.php
  70. 5
      head/404.html
  71. 8
      head/article.html
  72. 11
      head/auteur.html
  73. 8
      head/breve.html
  74. 5
      head/dist.html
  75. 9
      head/mot.html
  76. 6
      head/plan.html
  77. 4
      head/recherche.html
  78. 9
      head/rubrique.html
  79. 7
      head/site.html
  80. 25
      head/sommaire.html
  81. 5
      header/dist.html
  82. 47
      html5up_editorial_administrations.php
  83. 40
      html5up_editorial_fonctions.php
  84. 18
      html5up_editorial_options.php
  85. 54
      images/spip.svg
  86. 15
      inclure/article-hero.html
  87. 37
      inclure/documents.html
  88. 33
      inclure/footer.html
  89. 49
      inclure/head.html
  90. 16
      inclure/liste/articles-recherche.html
  91. 16
      inclure/liste/articles.html
  92. 16
      inclure/liste/rubriques-recherche.html
  93. 14
      inclure/liste/rubriques.html
  94. 54
      inclure/logospip.html
  95. 14
      inclure/resume/article.html
  96. 14
      inclure/resume/rubrique.html
  97. 9
      inclure/rezo.html
  98. 58
      inclure/rss-item.html
  99. 47
      inclure/sidebar.html
  100. 3
      inclure/sidemenu-articles.html

126
.gitattributes

@ -1 +1,127 @@
* text=auto !eol
/README.txt -text
/article.html -text
/auteur.html -text
/backend.html -text
/body.html -text
breadcrumb/401.html -text
breadcrumb/404.html -text
breadcrumb/auteur.html -text
breadcrumb/dist.html -text
breadcrumb/forum.html -text
breadcrumb/inc-objet.html -text
breadcrumb/inc-page.html -text
breadcrumb/login.html -text
breadcrumb/mot.html -text
breadcrumb/plan.html -text
breadcrumb/recherche.html -text
breadcrumb/sommaire.html -text
/breve.html -text
content/401.html -text
content/404.html -text
content/article.html -text
content/auteur.html -text
content/plan.html -text
content/recherche.html -text
content/rubrique.html -text
content/sommaire.html -text
css/base/_page.scss -text
css/base/_typography.scss -text
css/components/_box.scss -text
css/components/_button.scss -text
css/components/_features.scss -text
css/components/_fonts.scss -text
css/components/_form.scss -text
css/components/_icon.scss -text
css/components/_image.scss -text
css/components/_list.scss -text
css/components/_mini-posts.scss -text
css/components/_posts.scss -text
css/components/_section.scss -text
css/components/_table.scss -text
css/font-awesome.min.css -text
css/ie8.scss -text
css/ie9.scss -text
css/layout/_banner.scss -text
css/layout/_footer.scss -text
css/layout/_header.scss -text
css/layout/_main.scss -text
css/layout/_menu.scss -text
css/layout/_sidebar.scss -text
css/layout/_wrapper.scss -text
css/libs/_functions.scss -text
css/libs/_mixins.scss -text
css/libs/_skel.scss -text
css/libs/_vars.scss -text
css/main.scss -text
css/spip.scss -text
css/theme.scss -text
css/vars_spip.scss.html -text
fonts/FontAwesome.otf -text
fonts/fontawesome-webfont.eot -text
fonts/fontawesome-webfont.svg -text
fonts/fontawesome-webfont.ttf -text
fonts/fontawesome-webfont.woff -text
fonts/fontawesome-webfont.woff2 -text
footer/dist.html -text
formulaires/configurer_html5up_editorial.html -text
formulaires/recherche.html -text
formulaires/recherche.php -text
head/404.html -text
head/article.html -text
head/auteur.html -text
head/breve.html -text
head/dist.html -text
head/mot.html -text
head/plan.html -text
head/recherche.html -text
head/rubrique.html -text
head/site.html -text
head/sommaire.html -text
header/dist.html -text
/html5up_editorial_administrations.php -text
/html5up_editorial_fonctions.php -text
/html5up_editorial_options.php -text
images/spip.svg -text
inclure/article-hero.html -text
inclure/documents.html -text
inclure/footer.html -text
inclure/head.html -text
inclure/liste/articles-recherche.html -text
inclure/liste/articles.html -text
inclure/liste/rubriques-recherche.html -text
inclure/liste/rubriques.html -text
inclure/logospip.html -text
inclure/resume/article.html -text
inclure/resume/rubrique.html -text
inclure/rezo.html -text
inclure/rss-item.html -text
inclure/sidebar.html -text
inclure/sidemenu-articles.html -text
inclure/sidemenu.html -text
javascript/ie/html5shiv.js -text
javascript/ie/respond.min.js -text
javascript/main.js -text
javascript/perso.js -text
javascript/skel.min.js -text
javascript/util.js -text
lang/html5up_editorial_en.php -text
lang/html5up_editorial_fr.php -text
lang/paquet-html5up_editorial_en.php -text
lang/paquet-html5up_editorial_fr.php -text
modeles/article_resume.html -text
modeles/icone.html -text
modeles/iconebloc.html -text
modeles/pagination_page.html -text
modeles/pagination_page_precedent_suivant.html -text
modeles/pagination_precedent_suivant.html -text
/mot.html -text
/paquet.xml -text
prive/squelettes/contenu/configurer_html5up_editorial.html -text
prive/squelettes/navigation/configurer_html5up_editorial.html -text
prive/themes/spip/images/html5up_solid_state-128.png -text
prive/themes/spip/images/html5up_solid_state-16.png -text
prive/themes/spip/images/html5up_solid_state-32.png -text
prive/themes/spip/images/html5up_solid_state-64.png -text
/rubrique.html -text
/site.html -text

32
README.txt

@ -0,0 +1,32 @@
Squelette SPIP pour intégrer le modèle Editorial de HTML5UP
https://html5up.net/editorial
Le squelette Solid State https://zone.spip.org/trac/spip-zone/browser/_squelettes_/html5up_solid_state
a été pris pour commencer celui-ci.
v1.0.0
Ce squelette n'utilise pour l'instant que les articles et les rubriques racines, sans sous-rubrique.
Conseil : utiliser Court-Circuit pour éviter la page rubrique s'il n'y a qu'un seul article dans une rubrique.
La page de configuration permet quelques réglages. On y défini le contenu de la page d'accueil, le premier article est le "héro", le second est le "majeur".
L'article héro : le titre, un résumé + le logo + un bouton "Lire la suite"
L'article majeur : le titre + le champ texte intégral. Si cet article est une "page unique" (plugin "Pages") il n'apparaîtra pas dans le menu. Pour rédiger le texte, un modèle permet d'afficher comme dans le thème de départ une icône de FontAwesome et un texte en deux blocs par ligne. C'est le modèle <iconebloc|> qui prend quelques paramètres :
|icone=fa-rocket (ou tout autre icone de FontAwesome http://fontawesome.io/icons/)
|iconetitre=le titre
|iconetexte=le texte
L'article héro de la colonne gauche est aussi désigné dans la page de configuration : on verra le titre, l'introduction et un lien vers la page. En utilisant le champ "Descriptif" des articles, on pourra rédiger le texte qui apparaît dans cette colonne gauche, qui pourra être différent des champs visible sur la page de l'article lui-même.
Le modèle <articleXX|resume> rendra le logo, le titre et un résumé de l'article XX, avec les parametres :
|affichertitre=non
|afficherlien=non
Un autre modèle permet d'insérer n'importe quel icône de FontAwesome dans le flux d'un texte <icone> avec des parametres :
|icone=fa-rocket (ou tout autre icone de FontAwesome http://fontawesome.io/icons/)
|taille=3em (ou 60px ou 150%)
Un problème js empêchait aléatoirement le script javscript/main.js de retirer la classe "is-loading" qui est placé sur la balise body (par ce même script). Ce petit soucis cause des prblèmes plus gros dans l'interface.
Un petit bout de code dans javascript/perso.js permet de retirer cette classe de manière plus sûre, mais c'est une rustine en attendant mieux.
TODO
Vérifier et adapter les modèles où qu'on les insère.
Retrouver le multilinguisme
Adapter les autres objets SPIP (mots, sites, brèves)
Se passer de google api pour les typos ?

3
article.html

@ -0,0 +1,3 @@
<BOUCLE_principale_article(ARTICLES){id_article}>
<INCLURE{fond=structure,env,id_rubrique=#ENV{id_rubrique,#ID_RUBRIQUE},id_secteur=#ID_SECTEUR,type-page=article,composition=#COMPOSITION} />
</BOUCLE_principale_article>

3
auteur.html

@ -0,0 +1,3 @@
<BOUCLE_principale_auteur(AUTEURS){id_auteur}>
<INCLURE{fond=structure,env,type-page=auteur,composition=#COMPOSITION} />
</BOUCLE_principale_auteur>

43
backend.html

@ -0,0 +1,43 @@
[(#REM)
Ce fichier sert à créer les flux RSS
qui permettent aux visiteurs de suivre l'actualité
de votre site depuis un lecteur de news.
Cette page génère un code XML/RSS adapté
][(#HTTP_HEADER{Content-type: text/xml[; charset=(#CHARSET)]})]<?xml
version="1.0"[ encoding="(#CHARSET)"]?>
<rss version="2.0" [(#REM) rss 2.0.9)]
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:content="http://purl.org/rss/1.0/modules/content/"
xmlns:atom="http://www.w3.org/2005/Atom"
>
<channel[ xml:lang="(#LANG)"]>
<title>[(#NOM_SITE_SPIP|textebrut|texte_backend)]</title>
<link>#URL_SITE_SPIP/</link>
[<description>(#DESCRIPTIF_SITE_SPIP|supprimer_tags|texte_backend)</description>]
<language>#LANG</language>
<generator>SPIP - www.spip.net</generator>
<atom:link href="[(#SELF|url_absolue)]" rel="self" type="application/rss+xml" />
[ <image>
<title>[(#NOM_SITE_SPIP|texte_backend)]</title>
<url>(#LOGO_SITE_SPIP|image_reduire{144,400}|extraire_attribut{src}|url_absolue|texte_backend)</url>
<link>#URL_SITE_SPIP/</link>
[<height>(#LOGO_SITE_SPIP|image_reduire{144,400}|extraire_attribut{height})</height>]
[<width>(#LOGO_SITE_SPIP|image_reduire{144,400}|extraire_attribut{width})</width>]
</image>
]
<BOUCLE_10recents(ARTICLES) {lang ?}{branche ?}{id_mot ?}{id_auteur ?} {par date}{inverse}{0,10}{unique}>
<INCLURE{fond=inclure/rss-item,id_article} />
</BOUCLE_10recents>
<BOUCLE_tres_recents(ARTICLES){lang ?}{branche ?}{id_mot ?}{id_auteur ?} {par date}{inverse}{age<3}{unique}>
<INCLURE{fond=inclure/rss-item,id_article} />
</BOUCLE_tres_recents>
</channel>
</rss>

28
body.html

@ -0,0 +1,28 @@
<body>
<div id="wrapper">
<div id="main">
<div class="inner">
<header id="header"[(#ENV{type-page}|=={sommaire}|oui) class="alt"]>
<INCLURE{fond=header/#ENV{type-page},env} />
[(#PLUGIN{sociaux}|oui)<INCLURE{fond=inclure/rezo} />]
<B_langues><p class="langues">
<BOUCLE_langues(ARTICLES){fusion lang}{par lang}{' | '}>[(#TOTAL_BOUCLE|>{1}|oui)
<a class="lang" href="#URL_SITE_SPIP/?lang=#LANG" rel="alternate"
hreflang="#LANG" dir="#LANG_DIR" lang="#LANG"
class="[(#LANG|=={#ENV{lang}}|?{on,''})]"
>[(#LANG)]</a>
]</BOUCLE_langues>
</p></B_langues>
</header>
<INCLURE{fond=breadcrumb/#ENV{type-page},env} />
<INCLURE{fond=content/#ENV{type-page},env} />
</div><!-- .inner -->
</div><!-- .main -->
<div id="sidebar">
<INCLURE{fond=inclure/sidebar,env} />
</div><!-- .sidebar -->
</div><!-- .wrapper -->
</body>

5
breadcrumb/401.html

@ -0,0 +1,5 @@
[(#REM) Fil d'Ariane ]
<nav class="arbo">
<a href="#URL_SITE_SPIP/"><:accueil_site:></a> <span class="divider"> &gt; </span>
<span class="active"><:pass_erreur:>[ (#ENV{status})]</span>
</nav>

5
breadcrumb/404.html

@ -0,0 +1,5 @@
[(#REM) Fil d'Ariane ]
<nav class="arbo">
<a href="#URL_SITE_SPIP/"><:accueil_site:></a> <span class="divider"> &gt; </span>
<span class="active"><:pass_erreur:> 404</span>
</nav>

8
breadcrumb/auteur.html

@ -0,0 +1,8 @@
<BOUCLE_content(AUTEURS){id_auteur}>
[(#REM) Fil d'Ariane ]
<nav class="arbo">
<a href="#URL_SITE_SPIP/"><:accueil_site:></a><span class="divider"> &gt; </span>
<:info_auteurs:><span class="divider"> &gt; </span>
[<span class="active">(#NOM|couper{80})</span>]
</nav>
</BOUCLE_content>

15
breadcrumb/dist.html

@ -0,0 +1,15 @@
<nav class="arbo">
#SET{objet,''}#SET{id_objet,''}
[(#ENV{id_rubrique}|oui)#SET{objet,rubrique}#SET{id_objet,#ENV{id_rubrique}}]
[(#ENV{id_syndic}|oui)#SET{objet,site}#SET{id_objet,#ENV{id_syndic}}]
[(#ENV{id_breve}|oui)#SET{objet,breve}#SET{id_objet,#ENV{id_breve}}]
[(#ENV{id_article}|oui)#SET{objet,article}#SET{id_objet,#ENV{id_article}}]
[(#ENV{id_objet}|oui)#SET{objet,#ENV{objet}}#SET{id_objet,#ENV{id_objet}}]
[(#GET{objet}|oui)
#INCLURE{fond=breadcrumb/inc-objet,id_objet=#GET{id_objet},objet=#GET{objet}}
][(#GET{objet}|non)
<a href="#URL_SITE_SPIP/"><:accueil_site:></a>
]
</nav>

21
breadcrumb/forum.html

@ -0,0 +1,21 @@
[(#REM) Fil d'Ariane ]
<nav class="arbo">
#SET{objet,''}#SET{id_objet,''}
[(#ENV{id_rubrique}|oui)#SET{objet,rubrique}#SET{id_objet,#ENV{id_rubrique}}]
[(#ENV{id_syndic}|oui)#SET{objet,site}#SET{id_objet,#ENV{id_syndic}}]
[(#ENV{id_breve}|oui)#SET{objet,breve}#SET{id_objet,#ENV{id_breve}}]
[(#ENV{id_article}|oui)#SET{objet,article}#SET{id_objet,#ENV{id_article}}]
[(#ENV{id_objet}|oui)#SET{objet,#ENV{objet}}#SET{id_objet,#ENV{id_objet}}]
[(#GET{objet}|oui)
#INCLURE{fond=breadcrumb/inc-objet,id_objet=#GET{id_objet},objet=#GET{objet},expose=''}
][(#GET{objet}|non)
<a href="#URL_SITE_SPIP/"><:accueil_site:></a><span class="divider"> &gt; </span>
]
<BOUCLE_for(FORUMS){id_forum}>
<a href="#URL_FORUM">[(#TITRE|couper{80})]</a><span class="divider"> &gt; </span>
</BOUCLE_for>
<span class="active"><:poster_message:></span>
</nav>

7
breadcrumb/inc-objet.html

@ -0,0 +1,7 @@
<a href="#URL_SITE_SPIP/"><:accueil_site:></a><span class="divider"> &gt; </span>
<BOUCLE_contexte_rubrique(RUBRIQUES) {id_rubrique=(#OBJET|=={rubrique}|?{#INFO_ID_PARENT{#OBJET,#ID_OBJET},#INFO_ID_RUBRIQUE{#OBJET,#ID_OBJET}})}>
<BOUCLE_ariane_hier(HIERARCHIE) {id_rubrique}{tout}>
<a href="#URL_RUBRIQUE">[(#TITRE|couper{80})]</a><span class="divider"> &gt; </span>
</BOUCLE_ariane_hier>
</BOUCLE_contexte_rubrique>
<span[(#ENV{expose,' '}|oui)class="active"]>[(#ID_OBJET|generer_url_entite{#OBJET}|lien_ou_expose{#INFO_TITRE{#OBJET,#ID_OBJET}|sinon{?}|couper{80},#ENV{expose,' '}|?{span}})]</span>[<span class="divider">(#ENV{expose,' '}|non)&gt; </span>]

5
breadcrumb/inc-page.html

@ -0,0 +1,5 @@
<span class="breadcrumb">
<span class="expose">
<strong class="on">#ENV{titre}</strong>
</span>
</span>

10
breadcrumb/login.html

@ -0,0 +1,10 @@
[(#REM)
Est-ce qu'on se connecte a l'espace prive ou pas ?
]#SET{prive,''}
[(#ENV{url}|=={''}|?{#SET{prive,' '}})]
[(#ENV{url}|match{^#EVAL{_DIR_RESTREINT_ABS}}|?{#SET{prive,' '}})]
[(#REM) Fil d'Ariane ]
<nav class="arbo"><a href="#URL_SITE_SPIP/"><:accueil_site:></a>
[<span class="divider"> &gt; </span><strong class="on">(#GET{prive}|?{<:login_acces_prive:>,<:lien_connecter:>})</strong>]
</nav>

8
breadcrumb/mot.html

@ -0,0 +1,8 @@
<BOUCLE_content(MOTS) {id_mot} {doublons}>
<nav class="arbo">
<a href="#URL_SITE_SPIP/"><:accueil_site:></a><span class="divider"> &gt; </span>
<span><:mots_clefs:></span><span class="divider"> &gt; </span>
<BOUCLE_ariane(GROUPES_MOTS){id_groupe}><span>[(#TITRE|couper{80})]</span><span class="divider"> &gt; </span></BOUCLE_ariane>
<span class="active">[(#TITRE|couper{80})]</span>
</nav>
</BOUCLE_content>

4
breadcrumb/plan.html

@ -0,0 +1,4 @@
<nav class="arbo">
<a href="#URL_SITE_SPIP/"><:accueil_site:></a><span class="divider"> &gt; </span>
<span class="active"><:plan_site:></span>
</nav>

4
breadcrumb/recherche.html

@ -0,0 +1,4 @@
<nav class="arbo">
<a href="#URL_SITE_SPIP/"><:accueil_site:></a><span class="divider"> &gt; </span>
<span class="active"><:info_rechercher:> [&laquo; <strong class="on">(#RECHERCHE)</strong> &raquo;]</span>
</nav>

0
breadcrumb/sommaire.html

3
breve.html

@ -0,0 +1,3 @@
<BOUCLE_breve_principal(BREVES) {id_breve}>
<INCLURE{fond=structure,env,id_rubrique=#ENV{id_rubrique,#ID_RUBRIQUE},id_secteur=#ID_SECTEUR,type-page=breve,composition=#COMPOSITION} />
</BOUCLE_breve_principal>

8
content/401.html

@ -0,0 +1,8 @@
<section>
<header class="main">
<h1>401</h1>
</header>
#FORMULAIRE_LOGIN{#ENV{cible},'',0}
</section>

8
content/404.html

@ -0,0 +1,8 @@
<section>
<header class="main">
<h1>404</h1>
</header>
#FORMULAIRE_RECHERCHE
</section>

17
content/article.html

@ -0,0 +1,17 @@
<BOUCLE_article(ARTICLES){id_article}>
<section>
<header class="main">
[<p class="surtitre">(#SURTITRE)</p>]
[<h1>(#TITRE)</h1>]
[<p class="soustitre">(#SOUSTITRE)</p>]
</header>
[<div class="chapo #EDIT{chapo}">(#CHAPO|adaptive_images{1280})</div>]
[<div class="texte #EDIT{texte}">(#TEXTE|adaptive_images)</div>]
[<div class="ps #EDIT{ps}">(#PS|adaptive_images)</div>]
[<div class="notes">(#NOTES)</div>]
<INCLURE{fond=inclure/documents,id_article,id_rubrique=#NULL,ajax,env} />
</section>
</BOUCLE_article>

15
content/auteur.html

@ -0,0 +1,15 @@
<BOUCLE_content(AUTEURS){id_auteur}>
<section>
<header class="main">
<h1 class="#EDIT{qui} fn" itemprop="name">[(#LOGO_AUTEUR|image_reduire|inserer_attribut{itemprop,image})]#NOM</h1>
</header>
[<div class="#EDIT{bio} texte bio">(#BIO)</div>]
[<p class="#EDIT{hyperlien} hyperlien"><:voir_en_ligne:> : <a href="(#URL_SITE)" class="url spip_out" itemprop="url">[(#NOM_SITE|sinon{[(#URL_SITE|couper{80})]})]</a></p>]
#FORMULAIRE_ECRIRE_AUTEUR
[<div class="notes"><h2><:info_notes:></h2>(#NOTES)</div>]
</section>
</BOUCLE_content>

44
content/plan.html

@ -0,0 +1,44 @@
<section>
<header class="main">
[<p class="surtitre">(#SURTITRE)</p>]
[<h1>(#TITRE)</h1>]
[<p class="soustitre">(#SOUSTITRE)</p>]
</header>
<BOUCLE_rubriques(RUBRIQUES){par num titre, titre}{racine}>
<BOUCLE_srubriques(RUBRIQUES){id_rubrique}>
<h2 class="h2"><a href="#URL_RUBRIQUE">#TITRE</a></h2>
[(#REM) Articles et sous-rubriques ]
<B_articles_racine>
<ul class="plan">
<BOUCLE_articles_racine(ARTICLES) {id_rubrique} {par titre}>
<li><a href="#URL_ARTICLE">#TITRE</a></li>
</BOUCLE_articles_racine>
</ul>
</B_articles_racine>
<B_ssrubriques>
<ul class="plan">
<BOUCLE_ssrubriques(RUBRIQUES) {id_parent} {par titre}>
<li>
<strong><a href="#URL_RUBRIQUE">#TITRE</a></strong>
<B_articles>
<ul>
<BOUCLE_articles(ARTICLES) {id_rubrique} {par titre}>
<li><a href="#URL_ARTICLE">#TITRE</a></li>
</BOUCLE_articles>
</ul>
</B_articles>
<BOUCLE_sous_rubriques(BOUCLE_ssrubriques)></BOUCLE_sous_rubriques>
</li>
</BOUCLE_ssrubriques>
</ul>
</B_ssrubriques>
</BOUCLE_srubriques>
</BOUCLE_rubriques>
</section>

10
content/recherche.html

@ -0,0 +1,10 @@
<!-- recherche -->
[(#ENV{recherche}|oui)
<section class="wrapper">
<div class="inner">
<h3 class="major"><:resultats_recherche:> [&laquo; <strong class="on">(#RECHERCHE)</strong> &raquo;]</h3>
<INCLURE{fond=inclure/liste/articles-recherche, env, ajax} />
<INCLURE{fond=inclure/liste/rubriques-recherche, env, ajax} />
</div>
</section>
]

18
content/rubrique.html

@ -0,0 +1,18 @@
<BOUCLE_rubrique(RUBRIQUES){id_rubrique}>
<section>
<header class="main">
[<h1 class="#EDIT{titre}">(#TITRE)</h1>]
</header>
[<div class="texte #EDIT{texte}">(#TEXTE|adaptive_images)</div>]
[<div class="notes">(#NOTES)</div>]
<INCLURE{fond=inclure/documents,id_rubrique,ajax,env} />
</section>
<section>[(#REM) grader la section ici pour eviter de la mettre dans une div ajaxee -> perte de la mise en forme]
<INCLURE{fond=inclure/liste/articles,id_rubrique,ajax,env,parpage=6} />
</section>
<section>
<INCLURE{fond=inclure/liste/rubriques,id_rubrique,ajax,env,parpage=6} />
</section>
</BOUCLE_rubrique>

33
content/sommaire.html

@ -0,0 +1,33 @@
#SET{exclus,#ARRAY}
<B_hero>
<section id="banner">
<BOUCLE_hero(ARTICLES){id_article IN #CONFIG{html5up_editorial/hero}|picker_selected{article}}>
<INCLURE{fond=inclure/article-hero,id_article} />#SET{exclus,#GET{exclus}|push{#ID_ARTICLE}}
</BOUCLE_hero>
</section>
</B_hero>
<B_major>
<section>
<BOUCLE_major(ARTICLES){id_article IN #CONFIG{html5up_editorial/major}|picker_selected{article}}>
[<header class="major">
<h2>(#TITRE)</h2>
</header>]
[<div class="features #EDIT{texte}">
(#TEXTE)
</div>]#SET{exclus,#GET{exclus}|push{#ID_ARTICLE}}
</BOUCLE_major>
</section>
</B_major>
<BOUCLE_heroside(ARTICLES){id_article IN #CONFIG{html5up_editorial/heroside}|picker_selected{article}}>
#SET{exclus,#GET{exclus}|push{#ID_ARTICLE}}
</BOUCLE_heroside>
<section>
<INCLURE{fond=inclure/liste/articles,env,ajax,
parpage=#CONFIG{html5up_editorial/suivants_parpage,6},
exclus=#GET{exclus},
total=#CONFIG{html5up_editorial/suivants_total,12},
titre=#CONFIG{html5up_editorial/suivants_titre}} />
</section>

39
css/base/_page.scss

@ -0,0 +1,39 @@
///
/// Editorial by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///
/* Basic */
// MSIE: Required for IEMobile.
@-ms-viewport {
width: device-width;
}
// MSIE: Prevents scrollbar from overlapping content.
body {
-ms-overflow-style: scrollbar;
}
// Ensures page width is always >=320px.
@include breakpoint(xsmall) {
html, body {
min-width: 320px;
}
}
body {
background: _palette(bg);
// Prevents animation/transition "flicker".
// Automatically added/removed by js/main.js.
&.is-loading,
&.is-resizing {
*, *:before, *:after {
@include vendor('animation', 'none !important');
@include vendor('transition', 'none !important');
}
}
}

186
css/base/_typography.scss

@ -0,0 +1,186 @@
///
/// Editorial by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///
/* Type */
body, input, select, textarea {
color: _palette(fg);
font-family: _font(family);
font-size: 13pt;
font-weight: _font(weight);
line-height: 1.65;
@include breakpoint(xlarge) {
font-size: 11pt;
}
@include breakpoint(large) {
font-size: 10pt;
}
@include breakpoint(xxsmall) {
font-size: 9pt;
}
}
a {
@include vendor('transition', (
'color #{_duration(transition)} ease-in-out',
'border-bottom-color #{_duration(transition)} ease-in-out'
));
border-bottom: dotted 1px;
color: _palette(accent);
text-decoration: none;
&:hover {
border-bottom-color: _palette(accent);
color: _palette(accent) !important;
strong {
color: inherit;
}
}
}
strong, b {
color: _palette(fg-bold);
font-weight: _font(weight-bold);
}
em, i {
font-style: italic;
}
p {
margin: 0 0 _size(element-margin) 0;
}
h1, h2, h3, h4, h5, h6 {
color: _palette(fg-bold);
font-family: _font(family-heading);
font-weight: _font(weight-heading);
line-height: 1.5;
margin: 0 0 (_size(element-margin) * 0.5) 0;
a {
color: inherit;
text-decoration: none;
}
}
h1 {
font-size: 4em;
margin: 0 0 (_size(element-margin) * 0.25) 0;
line-height: 1.3;
}
h2 {
font-size: 1.75em;
}
h3 {
font-size: 1.25em;
}
h4 {
font-size: 1.1em;
}
h5 {
font-size: 0.9em;
}
h6 {
font-size: 0.7em;
}
@include breakpoint(xlarge) {
h1 {
font-size: 3.5em;
}
}
@include breakpoint(medium) {
h1 {
font-size: 3.25em;
}
}
@include breakpoint(small) {
h1 {
font-size: 2em;
line-height: 1.4;
}
h2 {
font-size: 1.5em;
}
}
sub {
font-size: 0.8em;
position: relative;
top: 0.5em;
}
sup {
font-size: 0.8em;
position: relative;
top: -0.5em;
}
blockquote {
border-left: solid 3px _palette(border);
font-style: italic;
margin: 0 0 _size(element-margin) 0;
padding: (_size(element-margin) / 4) 0 (_size(element-margin) / 4) _size(element-margin);
}
code {
background: _palette(border-bg);
border-radius: _size(border-radius);
border: solid 1px _palette(border);
font-family: _font(family-fixed);
font-size: 0.9em;
margin: 0 0.25em;
padding: 0.25em 0.65em;
}
pre {
-webkit-overflow-scrolling: touch;
font-family: _font(family-fixed);
font-size: 0.9em;
margin: 0 0 _size(element-margin) 0;
code {
display: block;
line-height: 1.75;
padding: 1em 1.5em;
overflow-x: auto;
}
}
hr {
border: 0;
border-bottom: solid 1px _palette(border);
margin: _size(element-margin) 0;
&.major {
margin: (_size(element-margin) * 1.5) 0;
}
}
.align-left {
text-align: left;
}
.align-center {
text-align: center;
}
.align-right {
text-align: right;
}

26
css/components/_box.scss

@ -0,0 +1,26 @@
///
/// Editorial by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///
/* Box */
.box {
border-radius: _size(border-radius);
border: solid 1px _palette(border);
margin-bottom: _size(element-margin);
padding: 1.5em;
> :last-child,
> :last-child > :last-child,
> :last-child > :last-child > :last-child {
margin-bottom: 0;
}
&.alt {
border: 0;
border-radius: 0;
padding: 0;
}
}

87
css/components/_button.scss

@ -0,0 +1,87 @@
///
/// Editorial by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///
/* Button */
input[type="submit"],
input[type="reset"],
input[type="button"],
button,
.button {
@include vendor('appearance', 'none');
@include vendor('transition', (
'background-color #{_duration(transition)} ease-in-out',
'color #{_duration(transition)} ease-in-out'
));
background-color: transparent;
border-radius: _size(border-radius);
border: 0;
box-shadow: inset 0 0 0 2px _palette(accent);
color: _palette(accent) !important;
cursor: pointer;
display: inline-block;
font-family: _font(family-heading);
font-size: 0.8em;
font-weight: _font(weight-heading);
height: 3.5em;
letter-spacing: _font(kerning-heading);
line-height: 3.5em;
padding: 0 2.25em;
text-align: center;
text-decoration: none;
text-transform: uppercase;
white-space: nowrap;
&:hover {
background-color: transparentize(_palette(accent), 0.95);
}
&:active {
background-color: transparentize(_palette(accent), 0.85);
}
&.icon {
&:before {
margin-right: 0.5em;
}
}
&.fit {
display: block;
margin: 0 0 (_size(element-margin) * 0.5) 0;
width: 100%;
}
&.small {
font-size: 0.6em;
}
&.big {
font-size: 1em;
height: 3.65em;
line-height: 3.65em;
}
&.special {
background-color: _palette(accent);
box-shadow: none;
color: _palette(bg) !important;
&:hover {
background-color: lighten(_palette(accent), 3);
}
&:active {
background-color: darken(_palette(accent), 3);
}
}
&.disabled,
&:disabled {
@include vendor('pointer-events', 'none');
opacity: 0.25;
}
}

156
css/components/_features.scss

@ -0,0 +1,156 @@
///
/// Editorial by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///
/* Features */
.features {
$gutter: _size(gutter);
@include vendor('display', 'flex');
@include vendor('flex-wrap', 'wrap');
margin: 0 0 _size(element-margin) ($gutter * -1);
width: calc(100% + #{$gutter});
article {
@include vendor('align-items', 'center');
@include vendor('display', 'flex');
margin: 0 0 $gutter $gutter;
position: relative;
width: calc(50% - #{$gutter});
&:nth-child(2n - 1) {
margin-right: ($gutter * 0.5);
}
&:nth-child(2n) {
margin-left: ($gutter * 0.5);
}
&:nth-last-child(1),
&:nth-last-child(2) {
margin-bottom: 0;
}
.icon {
@include vendor('flex-grow', '0');
@include vendor('flex-shrink', '0');
display: block;
height: 10em;
line-height: 10em;
margin: 0 _size(element-margin) 0 0;
text-align: center;
width: 10em;
&:before {
color: _palette(accent);
font-size: 2.75rem;
position: relative;
top: 0.05em;
}
&:after {
@include vendor('transform', 'rotate(45deg)');
border-radius: 0.25rem;
border: solid 2px _palette(border);
content: '';
display: block;
height: 7em;
left: 50%;
margin: -3.5em 0 0 -3.5em;
position: absolute;
top: 50%;
width: 7em;
}
}
.content {
@include vendor('flex-grow', '1');
@include vendor('flex-shrink', '1');
width: 100%;
> :last-child {
margin-bottom: 0;
}
}
}
@include breakpoint(medium) {
margin: 0 0 _size(element-margin) 0;
width: 100%;
article {
margin: 0 0 $gutter 0;
width: 100%;
&:nth-child(2n - 1) {
margin-right: 0;
}
&:nth-child(2n) {
margin-left: 0;
}
&:nth-last-child(1),
&:nth-last-child(2) {
margin-bottom: $gutter;
}
&:last-child {
margin-bottom: 0;
}
.icon {
height: 8em;
line-height: 8em;
width: 8em;
&:before {
font-size: 2.25rem;
}
&:after {
height: 6em;
margin: -3em 0 0 -3em;
width: 6em;
}
}
}
}
@include breakpoint(xsmall) {
article {
@include vendor('flex-direction', 'column');
@include vendor('align-items', 'flex-start');
.icon {
height: 6em;
line-height: 6em;
margin: 0 0 (_size(element-margin) * 0.75) 0;
width: 6em;
&:before {
font-size: 1.5rem;
}
&:after {
height: 4em;
margin: -2em 0 0 -2em;
width: 4em;
}
}
}
}
@include breakpoint(xsmall) {
article {
.icon {
&:before {
font-size: 1.25rem;
}
}
}
}
}

37
css/components/_fonts.scss

@ -0,0 +1,37 @@
@font-face {
font-family: 'Open Sans';
src: url('fonts/opensans-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal
}
/*@font-face {
font-family: 'Open Sans';
src: url('fonts/opensans-semibold-webfont.woff') format('woff');
font-weight: 600;
font-style: normal
}
@font-face {
font-family: 'opensans';
src: url('fonts/opensans-italic-webfont.woff') format('woff');
font-weight: normal;
font-style: italic
}
@font-face {
font-family: 'Open Sans';
src: url('fonts/opensans-semibolditalic-webfont.woff') format('woff');
font-weight: 600;
font-style: italic
}*/
@font-face {
font-family: 'Roboto Slab';
src: url('../../fonts/robotoslab-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal
}
/*@font-face {
font-family: 'Roboto Slab';
src: url('fonts/robotoslab-bold-webfont.woff') format('woff');
font-weight: 700;
font-style: normal
}*/

182
css/components/_form.scss

@ -0,0 +1,182 @@
///
/// Editorial by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///
/* Form */
form {
margin: 0 0 _size(element-margin) 0;
}
label {
color: _palette(fg-bold);
display: block;
font-size: 0.9em;
font-weight: _font(weight-bold);
margin: 0 0 (_size(element-margin) * 0.5) 0;
}
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="url"],
select,
textarea {
@include vendor('appearance', 'none');
background: _palette(bg);
border-radius: _size(border-radius);
border: none;
border: solid 1px _palette(border);
color: inherit;
display: block;
outline: 0;
padding: 0 1em;
text-decoration: none;
width: 100%;
&:invalid {
box-shadow: none;
}
&:focus {
border-color: _palette(accent);
box-shadow: 0 0 0 1px _palette(accent);
}
}
.select-wrapper {
@include icon;
display: block;
position: relative;
&:before {
color: _palette(border);
content: '\f078';
display: block;
height: _size(element-height);
line-height: _size(element-height);
pointer-events: none;
position: absolute;
right: 0;
text-align: center;
top: 0;
width: _size(element-height);
}
select::-ms-expand {
display: none;
}
}
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="url"],
select {
height: _size(element-height);
}
textarea {
padding: 0.75em 1em;
}
input[type="checkbox"],
input[type="radio"], {
@include vendor('appearance', 'none');
display: block;
float: left;
margin-right: -2em;
opacity: 0;
width: 1em;
z-index: -1;
& + label {
@include icon;
color: _palette(fg);
cursor: pointer;
display: inline-block;
font-size: 1em;
font-weight: _font(weight);
padding-left: (_size(element-height) * 0.6) + 0.75em;
padding-right: 0.75em;
position: relative;
&:before {
background: _palette(bg);
border-radius: _size(border-radius);
border: solid 1px _palette(border);
content: '';
display: inline-block;
height: (_size(element-height) * 0.6);
left: 0;
line-height: (_size(element-height) * 0.575);
position: absolute;
text-align: center;
top: 0;
width: (_size(element-height) * 0.6);
}
}
&:checked + label {
&:before {
background: _palette(fg-bold);
border-color: _palette(fg-bold);
color: _palette(bg);
content: '\f00c';
}
}
&:focus + label {
&:before {
border-color: _palette(accent);
box-shadow: 0 0 0 1px _palette(accent);
}
}
}
input[type="checkbox"] {
& + label {
&:before {
border-radius: _size(border-radius);
}
}
}
input[type="radio"] {
& + label {
&:before {
border-radius: 100%;
}
}
}
::-webkit-input-placeholder {
color: _palette(fg-light) !important;
opacity: 1.0;
}
:-moz-placeholder {
color: _palette(fg-light) !important;
opacity: 1.0;
}
::-moz-placeholder {
color: _palette(fg-light) !important;
opacity: 1.0;
}
:-ms-input-placeholder {
color: _palette(fg-light) !important;
opacity: 1.0;
}
.formerize-placeholder {
color: _palette(fg-light) !important;
opacity: 1.0;
}

17
css/components/_icon.scss

@ -0,0 +1,17 @@
///
/// Editorial by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///
/* Icon */
.icon {
@include icon;
border-bottom: none;
position: relative;
> .label {
display: none;
}
}

74
css/components/_image.scss

@ -0,0 +1,74 @@
///
/// Editorial by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///
/* Image */
.image {
border-radius: _size(border-radius);
border: 0;
display: inline-block;
position: relative;
img {
border-radius: _size(border-radius);
display: block;
}
&.left,
&.right {
max-width: 40%;
img {
width: 100%;
}
}
&.left {
float: left;
padding: 0 1.5em 1em 0;
top: 0.25em;
}
&.right {
float: right;
padding: 0 0 1em 1.5em;
top: 0.25em;
}
&.fit {
display: block;
margin: 0 0 _size(element-margin) 0;
width: 100%;
img {
width: 100%;
}
}
&.main {
display: block;
margin: 0 0 (_size(element-margin) * 1.5) 0;
width: 100%;
img {
width: 100%;
}
}
}
a.image {
overflow: hidden;
img {
@include vendor('transition', 'transform #{_duration(transition)} ease');
}
&:hover {
img {
@include vendor('transform', 'scale(1.075)');
}
}
}

255
css/components/_list.scss

@ -0,0 +1,255 @@
///
/// Editorial by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///
/* List */
ol {
list-style: decimal;
margin: 0 0 _size(element-margin) 0;
padding-left: 1.25em;
li {
padding-left: 0.25em;
}
}
ul {
list-style: disc;
margin: 0 0 _size(element-margin) 0;
padding-left: 1em;
li {
padding-left: 0.5em;
}
&.alt {
list-style: none;
padding-left: 0;
li {
border-top: solid 1px _palette(border);
padding: 0.5em 0;
&:first-child {
border-top: 0;
padding-top: 0;
}
}
}
&.icons {
cursor: default;
list-style: none;
padding-left: 0;
li {
display: inline-block;
padding: 0 1em 0 0;
&:last-child {
padding-right: 0;
}
.icon {
color: inherit;
&:before {
font-size: 1.25em;
}
}
}
}
&.contact {
list-style: none;
padding: 0;
li {
@include icon;
border-top: solid 1px _palette(border);
margin: 1.5em 0 0 0;
padding: 1.5em 0 0 3em;
position: relative;
&:before {
color: _palette(accent);
display: inline-block;
font-size: 1.5em;
height: 1.125em;
left: 0;
line-height: 1.125em;
position: absolute;
text-align: center;
top: (1.5em / 1.5);
width: 1.5em;
}
&:first-child {
border-top: 0;
margin-top: 0;
padding-top: 0;
&:before {
top: 0;
}
}
a {
color: inherit;
}
}
}
&.actions {
cursor: default;
list-style: none;
padding-left: 0;
li {
display: inline-block;
padding: 0 (_size(element-margin) * 0.5) 0 0;
vertical-align: middle;
&:last-child {
padding-right: 0;
}
}
&.small {
li {
padding: 0 (_size(element-margin) * 0.25) 0 0;
}
}
&.vertical {
li {
display: block;
padding: (_size(element-margin) * 0.5) 0 0 0;
&:first-child {
padding-top: 0;
}
> * {
margin-bottom: 0;
}
}
&.small {
li {
padding: (_size(element-margin) * 0.25) 0 0 0;
&:first-child {
padding-top: 0;
}
}
}
}
&.fit {
display: table;
margin-left: (_size(element-margin) * -0.5);
padding: 0;
table-layout: fixed;
width: calc(100% + #{(_size(element-margin) * 0.5)});
li {
display: table-cell;
padding: 0 0 0 (_size(element-margin) * 0.5);
> * {
margin-bottom: 0;
}
}
&.small {
margin-left: (_size(element-margin) * -0.25);
width: calc(100% + #{(_size(element-margin) * 0.25)});
li {
padding: 0 0 0 (_size(element-margin) * 0.25);
}
}
}
}
&.pagination {
cursor: default;
list-style: none;
padding-left: 0;
li {
display: inline-block;
padding-left: 0;
vertical-align: middle;
> .page {
@include vendor('transition', (
'background-color #{_duration(transition)} ease-in-out',
'color #{_duration(transition)} ease-in-out'
));
border-bottom: 0;
border-radius: _size(border-radius);
display: inline-block;
font-size: 0.8em;
font-weight: _font(weight-bold);
height: 2em;
line-height: 2em;
margin: 0 0.125em;
min-width: 2em;
padding: 0 0.