You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

398 lines
9.1 KiB

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)
5 years ago
/// Makes an element's :before pseudoelement a FontAwesome icon.
/// @param {string} $content Optional content value to use.
/// @param {string} $where Optional pseudoelement to target (before or after).
@mixin icon($content: false, $where: before) {
text-decoration: none;
&:#{$where} {
@if $content {
content: $content;
}
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-transform: none !important;
}
}
/// Applies padding to an element, taking the current element-margin value into account.
/// @param {mixed} $tb Top/bottom padding.
/// @param {mixed} $lr Left/right padding.
/// @param {list} $pad Optional extra padding (in the following order top, right, bottom, left)
/// @param {bool} $important If true, adds !important.
@mixin padding($tb, $lr, $pad: (0,0,0,0), $important: null) {
@if $important {
$important: '!important';
}
$x: 0.1em;
@if unit(_size(element-margin)) == 'rem' {
$x: 0.1rem;
}
padding: ($tb + nth($pad,1)) ($lr + nth($pad,2)) max($x, $tb - _size(element-margin) + nth($pad,3)) ($lr + nth($pad,4)) #{$important};
}
/// Encodes a SVG data URL so IE doesn't choke (via codepen.io/jakob-e/pen/YXXBrp).
/// @param {string} $svg SVG data URL.
/// @return {string} Encoded SVG data URL.
@function svg-url($svg) {
$svg: str-replace($svg, '"', '\'');
$svg: str-replace($svg, '%', '%25');
$svg: str-replace($svg, '<', '%3C');
$svg: str-replace($svg, '>', '%3E');
$svg: str-replace($svg, '&', '%26');
$svg: str-replace($svg, '#', '%23');
$svg: str-replace($svg, '{', '%7B');
$svg: str-replace($svg, '}', '%7D');
$svg: str-replace($svg, ';', '%3B');
@return url("data:image/svg+xml;charset=utf8,#{$svg}");
}
/// Initializes base flexgrid classes.
/// @param {string} $vertical-align Vertical alignment of cells.
/// @param {string} $horizontal-align Horizontal alignment of cells.
@mixin flexgrid-base($vertical-align: null, $horizontal-align: null) {
// Grid.
@include vendor('display', 'flex');
@include vendor('flex-wrap', 'wrap');
// Vertical alignment.
@if ($vertical-align == top) {
@include vendor('align-items', 'flex-start');
}
@else if ($vertical-align == bottom) {
@include vendor('align-items', 'flex-end');
}
@else if ($vertical-align == center) {
@include vendor('align-items', 'center');
}
@else {
@include vendor('align-items', 'stretch');
}
// Horizontal alignment.
@if ($horizontal-align != null) {
text-align: $horizontal-align;
}
// Cells.
> * {
@include vendor('flex-shrink', '1');
@include vendor('flex-grow', '0');
}
}
/// Sets up flexgrid columns.
/// @param {integer} $columns Columns.
@mixin flexgrid-columns($columns) {
> * {
$cell-width: 100% / $columns;
width: #{$cell-width};
}
}
/// Sets up flexgrid gutters.
/// @param {integer} $columns Columns.
/// @param {number} $gutters Gutters.
@mixin flexgrid-gutters($columns, $gutters) {
// Apply padding.
> * {
$cell-width: 100% / $columns;
padding: ($gutters * 0.5);
width: $cell-width;
}
}
/// Sets up flexgrid gutters (flush).
/// @param {integer} $columns Columns.
/// @param {number} $gutters Gutters.
@mixin flexgrid-gutters-flush($columns, $gutters) {
// Apply padding.
> * {
$cell-width: 100% / $columns;
$cell-width-pad: $gutters / $columns;
padding: ($gutters * 0.5);
width: calc(#{$cell-width} + #{$cell-width-pad});
}
// Clear top/bottom gutters.
> :nth-child(-n + #{$columns}) {
padding-top: 0;
}
> :nth-last-child(-n + #{$columns}) {
padding-bottom: 0;
}
// Clear left/right gutters.
> :nth-child(#{$columns}n + 1) {
padding-left: 0;
}
> :nth-child(#{$columns}n) {
padding-right: 0;
}
// Adjust widths of leftmost and rightmost cells.
> :nth-child(#{$columns}n + 1),
> :nth-child(#{$columns}n) {
$cell-width: 100% / $columns;
$cell-width-pad: ($gutters / $columns) - ($gutters / 2);
width: calc(#{$cell-width} + #{$cell-width-pad});
}
}
/// Reset flexgrid gutters (flush only).
/// Used to override a previous set of flexgrid gutter classes.
/// @param {integer} $columns Columns.
/// @param {number} $gutters Gutters.
/// @param {integer} $prev-columns Previous columns.
@mixin flexgrid-gutters-flush-reset($columns, $gutters, $prev-columns) {
// Apply padding.
> * {
$cell-width: 100% / $prev-columns;
$cell-width-pad: $gutters / $prev-columns;
padding: ($gutters * 0.5);
width: calc(#{$cell-width} + #{$cell-width-pad});
}
// Clear top/bottom gutters.
> :nth-child(-n + #{$prev-columns}) {
padding-top: ($gutters * 0.5);
}
> :nth-last-child(-n + #{$prev-columns}) {
padding-bottom: ($gutters * 0.5);
}
// Clear left/right gutters.
> :nth-child(#{$prev-columns}n + 1) {
padding-left: ($gutters * 0.5);
}
> :nth-child(#{$prev-columns}n) {
padding-right: ($gutters * 0.5);
}
// Adjust widths of leftmost and rightmost cells.
> :nth-child(#{$prev-columns}n + 1),
> :nth-child(#{$prev-columns}n) {
$cell-width: 100% / $columns;
$cell-width-pad: $gutters / $columns;
padding: ($gutters * 0.5);
width: calc(#{$cell-width} + #{$cell-width-pad});
}
}
/// Adds debug styles to current flexgrid element.
@mixin flexgrid-debug() {
box-shadow: 0 0 0 1px red;
> * {
box-shadow: inset 0 0 0 1px blue;
position: relative;
> * {
position: relative;
box-shadow: inset 0 0 0 1px green;
}
}
}
/// Initializes the current element as a flexgrid.
/// @param {integer} $columns Columns (optional).
/// @param {number} $gutters Gutters (optional).
/// @param {bool} $flush If true, clears padding around the very edge of the grid.
@mixin flexgrid($settings: ()) {
// Settings.
// Debug.
$debug: false;
@if (map-has-key($settings, 'debug')) {
$debug: map-get($settings, 'debug');
}
// Vertical align.
$vertical-align: null;
@if (map-has-key($settings, 'vertical-align')) {
$vertical-align: map-get($settings, 'vertical-align');
}
// Horizontal align.
$horizontal-align: null;
@if (map-has-key($settings, 'horizontal-align')) {
$horizontal-align: map-get($settings, 'horizontal-align');
}
// Columns.
$columns: null;
@if (map-has-key($settings, 'columns')) {
$columns: map-get($settings, 'columns');
}
// Gutters.
$gutters: 0;
@if (map-has-key($settings, 'gutters')) {
$gutters: map-get($settings, 'gutters');
}
// Flush.
$flush: true;
@if (map-has-key($settings, 'flush')) {
$flush: map-get($settings, 'flush');
}
// Initialize base grid.
@include flexgrid-base($vertical-align, $horizontal-align);
// Debug?
@if ($debug) {
@include flexgrid-debug;
}
// Columns specified?
@if ($columns != null) {
// Initialize columns.
@include flexgrid-columns($columns);
// Gutters specified?
@if ($gutters > 0) {
// Flush gutters?
@if ($flush) {
// Initialize gutters (flush).
@include flexgrid-gutters-flush($columns, $gutters);
}
// Otherwise ...
@else {
// Initialize gutters.
@include flexgrid-gutters($columns, $gutters);
}
}
}
}
/// Resizes a previously-initialized grid.
/// @param {integer} $columns Columns.
/// @param {number} $gutters Gutters (optional).
/// @param {list} $reset A list of previously-initialized grid columns (only if $flush is true).
/// @param {bool} $flush If true, clears padding around the very edge of the grid.
@mixin flexgrid-resize($settings: ()) {
// Settings.
// Columns.
$columns: 1;
@if (map-has-key($settings, 'columns')) {
$columns: map-get($settings, 'columns');
}
// Gutters.
$gutters: 0;
@if (map-has-key($settings, 'gutters')) {
$gutters: map-get($settings, 'gutters');
}
// Previous columns.
$prev-columns: false;
@if (map-has-key($settings, 'prev-columns')) {
$prev-columns: map-get($settings, 'prev-columns');
}
// Flush.
$flush: true;
@if (map-has-key($settings, 'flush')) {
$flush: map-get($settings, 'flush');
}
// Resize columns.
@include flexgrid-columns($columns);
// Gutters specified?
@if ($gutters > 0) {
// Flush gutters?
@if ($flush) {
// Previous columns specified?
@if ($prev-columns) {
// Convert to list if it isn't one already.
@if (type-of($prev-columns) != list) {
$prev-columns: ($prev-columns);
}
// Step through list of previous columns and reset them.
@each $x in $prev-columns {
@include flexgrid-gutters-flush-reset($columns, $gutters, $x);
}
}
// Resize gutters (flush).
@include flexgrid-gutters-flush($columns, $gutters);
}
// Otherwise ...
@else {
// Resize gutters.
@include flexgrid-gutters($columns, $gutters);
}
}
}