Browse Source
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
5 years ago
127 changed files with 6790 additions and 0 deletions
@ -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 |
||||
|
||||
@ -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 ? |
||||
@ -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> |
||||
@ -0,0 +1,3 @@
|
||||
<BOUCLE_principale_auteur(AUTEURS){id_auteur}> |
||||
<INCLURE{fond=structure,env,type-page=auteur,composition=#COMPOSITION} /> |
||||
</BOUCLE_principale_auteur> |
||||
@ -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> |
||||
@ -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> |
||||
@ -0,0 +1,5 @@
|
||||
[(#REM) Fil d'Ariane ] |
||||
<nav class="arbo"> |
||||
<a href="#URL_SITE_SPIP/"><:accueil_site:></a> <span class="divider"> > </span> |
||||
<span class="active"><:pass_erreur:>[ (#ENV{status})]</span> |
||||
</nav> |
||||
@ -0,0 +1,5 @@
|
||||
[(#REM) Fil d'Ariane ] |
||||
<nav class="arbo"> |
||||
<a href="#URL_SITE_SPIP/"><:accueil_site:></a> <span class="divider"> > </span> |
||||
<span class="active"><:pass_erreur:> 404</span> |
||||
</nav> |
||||
@ -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"> > </span> |
||||
<:info_auteurs:><span class="divider"> > </span> |
||||
[<span class="active">(#NOM|couper{80})</span>] |
||||
</nav> |
||||
</BOUCLE_content> |
||||
@ -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> |
||||
@ -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"> > </span> |
||||
] |
||||
<BOUCLE_for(FORUMS){id_forum}> |
||||
<a href="#URL_FORUM">[(#TITRE|couper{80})]</a><span class="divider"> > </span> |
||||
</BOUCLE_for> |
||||
|
||||
<span class="active"><:poster_message:></span> |
||||
</nav> |
||||
@ -0,0 +1,7 @@
|
||||
<a href="#URL_SITE_SPIP/"><:accueil_site:></a><span class="divider"> > </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"> > </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)> </span>] |
||||
@ -0,0 +1,5 @@
|
||||
<span class="breadcrumb"> |
||||
<span class="expose"> |
||||
<strong class="on">#ENV{titre}</strong> |
||||
</span> |
||||
</span> |
||||
@ -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"> > </span><strong class="on">(#GET{prive}|?{<:login_acces_prive:>,<:lien_connecter:>})</strong>] |
||||
</nav> |
||||
@ -0,0 +1,8 @@
|
||||
<BOUCLE_content(MOTS) {id_mot} {doublons}> |
||||
<nav class="arbo"> |
||||
<a href="#URL_SITE_SPIP/"><:accueil_site:></a><span class="divider"> > </span> |
||||
<span><:mots_clefs:></span><span class="divider"> > </span> |
||||
<BOUCLE_ariane(GROUPES_MOTS){id_groupe}><span>[(#TITRE|couper{80})]</span><span class="divider"> > </span></BOUCLE_ariane> |
||||
<span class="active">[(#TITRE|couper{80})]</span> |
||||
</nav> |
||||
</BOUCLE_content> |
||||
@ -0,0 +1,4 @@
|
||||
<nav class="arbo"> |
||||
<a href="#URL_SITE_SPIP/"><:accueil_site:></a><span class="divider"> > </span> |
||||
<span class="active"><:plan_site:></span> |
||||
</nav> |
||||
@ -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> |
||||
@ -0,0 +1,8 @@
|
||||
<section> |
||||
<header class="main"> |
||||
<h1>401</h1> |
||||
</header> |
||||
|
||||
#FORMULAIRE_LOGIN{#ENV{cible},'',0} |
||||
|
||||
</section> |
||||
@ -0,0 +1,8 @@
|
||||
<section> |
||||
<header class="main"> |
||||
<h1>404</h1> |
||||
</header> |
||||
|
||||
#FORMULAIRE_RECHERCHE |
||||
|
||||
</section> |
||||
@ -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> |
||||
@ -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> |
||||
@ -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> |
||||
@ -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> |
||||
@ -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> |
||||
@ -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'); |
||||
} |
||||
} |
||||
|
||||
} |
||||
@ -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; |
||||
} |
||||
@ -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; |
||||
} |
||||
} |
||||
@ -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; |
||||
} |
||||
} |
||||
@ -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; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -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 |
||||
}*/ |
||||
@ -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; |
||||
} |
||||
@ -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; |
||||
} |
||||
} |
||||
@ -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 { |
||||