@ -1,8 +1,12 @@ | |||
<section> | |||
<article id="main"> | |||
<header class="main"> | |||
<h1>401</h1> | |||
<!-- breadcrumb --> | |||
<INCLURE{fond=breadcrumb/#ENV{type-page},env} /> | |||
</header> | |||
#FORMULAIRE_LOGIN{#ENV{cible},'',0} | |||
</section> | |||
<section class="wrapper style5"> | |||
<div class="inner"> | |||
#FORMULAIRE_RECHERCHE | |||
</div> | |||
</section> | |||
</article> |
@ -1,8 +1,12 @@ | |||
<section> | |||
<article id="main"> | |||
<header class="main"> | |||
<h1>404</h1> | |||
<!-- breadcrumb --> | |||
<INCLURE{fond=breadcrumb/#ENV{type-page},env} /> | |||
</header> | |||
#FORMULAIRE_RECHERCHE | |||
</section> | |||
<section class="wrapper style5"> | |||
<div class="inner"> | |||
#FORMULAIRE_RECHERCHE | |||
</div> | |||
</section> | |||
</article> |
@ -1,18 +1,19 @@ | |||
<BOUCLE_content(AUTEURS){id_auteur}> | |||
<section> | |||
<article id="main"> | |||
<header class="main"> | |||
<h1 class="#EDIT{qui} fn" itemprop="name">[(#LOGO_AUTEUR|image_reduire|inserer_attribut{itemprop,image})]#NOM</h1> | |||
[<h1 class="#EDIT{titre}">(#TITRE)</h1>] | |||
<!-- breadcrumb --> | |||
<INCLURE{fond=breadcrumb/auteur,env} /> | |||
</header> | |||
<section class="wrapper style5"> | |||
<div class="inner"> | |||
[<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>] | |||
[<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 | |||
#FORMULAIRE_ECRIRE_AUTEUR | |||
[<div class="notes"><h2><:info_notes:></h2>(#NOTES)</div>] | |||
</section> | |||
[<div class="notes"><h2><:info_notes:></h2>(#NOTES)</div>] | |||
</div> | |||
</section> | |||
</article> | |||
</BOUCLE_content> |
@ -1,21 +1,22 @@ | |||
<BOUCLE_mot(MOTS){id_mot}> | |||
<section> | |||
<article id="main"> | |||
<header class="main"> | |||
[<h1 class="#EDIT{titre}">(#TITRE)</h1>] | |||
<!-- breadcrumb --> | |||
<INCLURE{fond=breadcrumb/mot,env} /> | |||
</header> | |||
<section class="wrapper style5"> | |||
<div class="inner"> | |||
[<div class="texte #EDIT{texte}">(#TEXTE|adaptive_images)</div>] | |||
<INCLURE{fond=inclure/liste/articles,id_mot,ajax,env,parpage=6} /> | |||
[<div class="texte #EDIT{texte}">(#TEXTE|adaptive_images)</div>] | |||
<INCLURE{fond=inclure/documents,id_mot,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_mot,ajax,env,parpage=6} /> | |||
</section> | |||
<section> | |||
<INCLURE{fond=inclure/liste/mots,id_mot,ajax,env,parpage=6} /> | |||
</section> | |||
<INCLURE{fond=inclure/liste/rubriques,id_mot,ajax,env,parpage=6} /> | |||
<INCLURE{fond=inclure/liste/mots,id_mot,ajax,env,parpage=6} /> | |||
[<div class="notes"><h2><:info_notes:></h2>(#NOTES)</div>] | |||
</div> | |||
</section> | |||
</article> | |||
</BOUCLE_mot> |
@ -1,44 +1,49 @@ | |||
<section> | |||
<article id="main"> | |||
<header class="main"> | |||
[<p class="surtitre">(#SURTITRE)</p>] | |||
[<h1>(#TITRE)</h1>] | |||
[<p class="soustitre">(#SOUSTITRE)</p>] | |||
<h1><:plan_site:></h1> | |||
<!-- breadcrumb --> | |||
<INCLURE{fond=breadcrumb/#ENV{type-page},env} /> | |||
</header> | |||
<section class="wrapper style5"> | |||
<div class="inner"> | |||
<BOUCLE_rubriques(RUBRIQUES){par num titre, titre}{racine}> | |||
<BOUCLE_srubriques(RUBRIQUES){id_rubrique}> | |||
<BOUCLE_rubriques(RUBRIQUES){par num titre, titre}{racine}> | |||
<BOUCLE_srubriques(RUBRIQUES){id_rubrique}> | |||
<h2 class="h2"><a href="#URL_RUBRIQUE">#TITRE</a></h2> | |||
<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> | |||
[(#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_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> | |||
<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> | |||
<BOUCLE_sous_rubriques(BOUCLE_ssrubriques)></BOUCLE_sous_rubriques> | |||
</li> | |||
</BOUCLE_ssrubriques> | |||
</ul> | |||
</B_ssrubriques> | |||
</BOUCLE_srubriques> | |||
</BOUCLE_rubriques> | |||
</div> | |||
</section> | |||
</article> | |||
</section> |
@ -1,10 +0,0 @@ | |||
<!-- recherche --> | |||
[(#ENV{recherche}|oui) | |||
<section class="wrapper"> | |||
<div class="inner"> | |||
<h3 class="major"><:resultats_recherche:> [« <strong class="on">(#RECHERCHE)</strong> »]</h3> | |||
<INCLURE{fond=inclure/liste/articles-recherche, env, ajax} /> | |||
<INCLURE{fond=inclure/liste/rubriques-recherche, env, ajax} /> | |||
</div> | |||
</section> | |||
] |
@ -0,0 +1,29 @@ | |||
/* open sans */ | |||
@font-face { | |||
font-family: "Open Sans"; | |||
font-style:normal; | |||
font-weight:700; | |||
src: url("../webfonts/OpenSans-bold-webfont.woff2") format("woff2"), | |||
url("../webfonts/opensans-bold-webfont.woff") format("woff"); | |||
} | |||
@font-face { | |||
font-family: "Open Sans"; | |||
font-style:italic; | |||
font-weight:700; | |||
src: url("../webfonts/OpenSans-bolditalic-webfont.woff2") format("woff2"), | |||
url("../webfonts/opensans-bolditalic-webfont.woff") format("woff"); | |||
} | |||
@font-face { | |||
font-family: "Open Sans"; | |||
font-style:normal; | |||
font-weight:400; | |||
src: url("../webfonts/OpenSans-regular-webfont.woff2") format("woff2"), | |||
url("../webfonts/opensans-regular-webfont.woff") format("woff"); | |||
} | |||
@font-face { | |||
font-family: "Open Sans"; | |||
font-style:italic; | |||
font-weight:400; | |||
src: url("../webfonts/OpenSans-regularitalic-webfont.woff2") format("woff2"), | |||
url("../webfonts/opensans-regularitalic-webfont.woff") format("woff"); | |||
} |
@ -1,23 +0,0 @@ | |||
/// Font Face | |||
/// https://gist.github.com/jonathantneal/d0460e5c2d5d7f9bc5e6#file-_mixins-scss | |||
/// simplification pour uniquement woff2 et woff | |||
@mixin font-face($name, $path, $weight: null, $style: null, $exts: woff2 woff) { | |||
$src: null; | |||
@each $ext in $exts { | |||
$src: append($src, url(quote($path + "." + $ext)) format(quote($ext)), comma); | |||
} | |||
@font-face { | |||
font-family: quote($name); | |||
font-style: $style; | |||
font-weight: $weight; | |||
src: $src; | |||
} | |||
} | |||
@include font-face(Roboto Slab, fonts/robotoslab-regular-webfont, 400, normal); | |||
@include font-face(Roboto Slab, fonts/robotoslab-bold-webfont, 700, bold); | |||
@include font-face(Open Sans, fonts/opensans-regular-webfont, 400, normal); | |||
@include font-face(Open Sans, fonts/opensans-semibold-webfont, 600, normal); | |||
@include font-face(Open Sans, fonts/opensans-italic-webfont, 400, italic); | |||
@include font-face(Open Sans, fonts/opensans-semibolditalic-webfont, 600, italic); |
@ -1,39 +0,0 @@ | |||
/// | |||
/// 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'); | |||
} | |||
} | |||
} |
@ -1,186 +0,0 @@ | |||
/// | |||
/// 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; | |||
} |
@ -1,26 +0,0 @@ | |||
/// | |||
/// 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; | |||
} | |||
} |
@ -1,87 +0,0 @@ | |||
/// | |||
/// 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; | |||
} | |||
} |
@ -1,156 +0,0 @@ | |||
/// | |||
/// 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; | |||
} | |||
} | |||
} | |||
} | |||
} |
@ -1,37 +0,0 @@ | |||
@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 | |||
}*/ |
@ -1,182 +0,0 @@ | |||
/// | |||
/// 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; | |||
} |
@ -1,17 +0,0 @@ | |||
/// | |||
/// 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; | |||
} | |||
} |
@ -1,74 +0,0 @@ | |||
/// | |||
/// 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)'); | |||
} | |||
} | |||
} |
@ -1,255 +0,0 @@ | |||
/// | |||
/// 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.5em; | |||
text-align: center; | |||
&.active { | |||
background-color: _palette(accent); | |||
color: _palette(bg) !important; | |||
&:hover { | |||
background-color: lighten(_palette(accent), 3); | |||
} | |||
&:active { | |||
background-color: darken(_palette(accent), 3); | |||
} | |||
} | |||
} | |||
&:first-child { | |||
padding-right: 0.75em; | |||
} | |||
&:last-child { | |||
padding-left: 0.75em; | |||
} | |||
} | |||
/* @include breakpoint(xsmall) { | |||
li { | |||
&:nth-child(n+2):nth-last-child(n+2) { | |||
display: none; | |||
} | |||
&:first-child { | |||
padding-right: 0; | |||
} | |||
} | |||
}*/ | |||
} | |||
} | |||
dl { | |||
margin: 0 0 _size(element-margin) 0; | |||
dt { | |||
display: block; | |||
font-weight: _font(weight-bold); | |||
margin: 0 0 (_size(element-margin) * 0.5) 0; | |||
} | |||
dd { | |||
margin-left: _size(element-margin); | |||
} | |||
} |
@ -1,31 +0,0 @@ | |||
/// | |||
/// Editorial by HTML5 UP | |||
/// html5up.net | @ajlkn | |||
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) | |||
/// | |||
/* Mini Posts */ | |||
.mini-posts { | |||
article { | |||
border-top: solid 1px _palette(border); | |||
margin-top: _size(element-margin); | |||
padding-top: _size(element-margin); | |||
.image { | |||
display: block; | |||
margin: 0 0 (_size(element-margin) * 0.75) 0; | |||
img { | |||
display: block; | |||
width: 100%; | |||
} | |||
} | |||
&:first-child { | |||
border-top: 0; | |||
margin-top: 0; | |||
padding-top: 0; | |||
} | |||
} | |||
} |
@ -1,179 +0,0 @@ | |||
/// | |||
/// Editorial by HTML5 UP | |||
/// html5up.net | @ajlkn | |||
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) | |||
/// | |||
/* Posts */ | |||
.posts { | |||
$gutter: (_size(gutter) * 2); | |||
@include vendor('display', 'flex'); | |||
@include vendor('flex-wrap', 'wrap'); | |||
margin: 0 0 _size(element-margin) ($gutter * -1); | |||
width: calc(100% + #{$gutter}); | |||
article { | |||
@include vendor('flex-grow', '0'); | |||
@include vendor('flex-shrink', '1'); | |||
margin: 0 0 $gutter $gutter; | |||
position: relative; | |||
width: calc(#{(100% / 3)} - #{$gutter}); | |||
&:before { | |||
background: _palette(border); | |||
content: ''; | |||
display: block; | |||
height: calc(100% + #{$gutter}); | |||
left: ($gutter * -0.5); | |||
position: absolute; | |||
top: 0; | |||
width: 1px; | |||
} | |||
&:after { | |||
background: _palette(border); | |||
bottom: ($gutter * -0.5); | |||
content: ''; | |||
display: block; | |||
height: 1px; | |||
position: absolute; | |||
right: 0; | |||
width: calc(100% + #{$gutter}); | |||
} | |||
> :last-child { | |||
margin-bottom: 0; | |||
} | |||
.image { | |||
display: block; | |||
margin: 0 0 _size(element-margin) 0; | |||
img { | |||
display: block; | |||
width: 100%; | |||
} | |||
} | |||
} | |||
@include breakpoint(xlarge-to-max) { | |||
article { | |||
&:nth-child(3n + 1) { | |||
&:before { | |||
display: none; | |||
} | |||
&:after { | |||
width: 100%; | |||
} | |||
} | |||
&:nth-last-child(1), | |||
&:nth-last-child(2), | |||
&:nth-last-child(3) { | |||
margin-bottom: 0; | |||
&:before { | |||
height: 100%; | |||
} | |||
&:after { | |||
display: none; | |||
} | |||
} | |||
} | |||
} | |||
@include breakpoint(xlarge) { | |||
article { | |||
width: calc(50% - #{$gutter}); | |||
&:nth-last-child(3) { | |||
margin-bottom: $gutter; | |||
} | |||
} | |||
} | |||
@include breakpoint(small-to-xlarge) { | |||
article { | |||
&:nth-child(2n + 1) { | |||
&:before { | |||
display: none; | |||
} | |||
&:after { | |||
width: 100%; | |||
} | |||
} | |||
&:nth-last-child(1), | |||
&:nth-last-child(2) { | |||
margin-bottom: 0; | |||
&:before { | |||
height: 100%; | |||
} | |||
&:after { | |||
display: none; | |||
} | |||
} | |||
} | |||
} | |||
@include breakpoint(small) { | |||
$gutter: _size(gutter) * 1.5; | |||
margin: 0 0 _size(element-margin) ($gutter * -1); | |||
width: calc(100% + #{$gutter}); | |||
article { | |||
margin: 0 0 $gutter $gutter; | |||
width: calc(50% - #{$gutter}); | |||
&:before { | |||
height: calc(100% + #{$gutter}); | |||
left: ($gutter * -0.5); | |||
} | |||
&:after { | |||
bottom: ($gutter * -0.5); | |||
width: calc(100% + #{$gutter}); | |||
} | |||