spip-contrib-themes
/
spipr_v2_patisson
47
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

mise en forme de la home

svn/root
Cerdic 1 year ago
parent
69436ec9d6
commit
ed2689b58c
7 changed files with 287 additions and 40 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 14
      body.html
  2. 44
      content/sommaire.html
  3. 6
      css/_variables.scss
  4. 2
      css/components/_forms.scss
  5. 99
      css/components/_list.scss
  6. 147
      css/pages/sommaire.scss
  7. 15
      inclure/article-hero.html

14
body.html
View File

@ -19,12 +19,18 @@
<div class="col-12 col-lg-10">
<INCLURE{fond=cartouche/#ENV{type-page},env} />
</div>
<div class="content col-md-9 col-lg-8" id="content">
<div class="content col-content col-md-9 col-lg-8" id="content">
<INCLURE{fond=content/#ENV{type-page},env, cartouche=0} />
</div>
<div class="aside secondary col-md-3" id="aside">
<INCLURE{fond=aside/#ENV{type-page},env} />
<INCLURE{fond=extra/#ENV{type-page},env} />
<div class="col-secondary col-md-3">
<div class="row">
<div class="aside secondary col-12 col-sm-6 col-md-12" id="aside">
<INCLURE{fond=aside/#ENV{type-page},env} />
</div>
<div class="extra secondary col-12 col-sm-6 col-md-12" id="extra">
<INCLURE{fond=extra/#ENV{type-page},env} />
</div>
</div>
</div>
</div>
</div>

44
content/sommaire.html
View File

@ -0,0 +1,44 @@
<section>
[(#ENV{cartouche,1}|oui)<INCLURE{fond=cartouche/#ENV{type-page},env} />]
<div class="main">
[<div id="descriptif_site_spip">(#DESCRIPTIF_SITE_SPIP)</div>]
#SET{exclus,#ARRAY}
<div class="liste-items home-grid mb-3">
<div class="row">
<div class="col-lg-6">
<BOUCLE_art1(ARTICLES){!par date}{0,1}{doublons}>
<div class="item item-first thumb">
<INCLURE{fond=inclure/resume/article,id_article,largeur_logo=1400,hauteur_logo=1400,env} />
</div>
#SET{exclus,#GET{exclus}|push{#ID_ARTICLE}}
</BOUCLE_art1>
</div>
<div class="col-lg-6">
<div class="row">
<BOUCLE_art2(ARTICLES){!par date}{0,4}{doublons}>
<div class="col-sm-6">
<div class="item item-second thumb">
<INCLURE{fond=inclure/resume/article,id_article,largeur_logo=700,hauteur_logo=700,env} />
</div>
#SET{exclus,#GET{exclus}|push{#ID_ARTICLE}}
</div>
</BOUCLE_art2>
</div>
</div>
</div>
</div>
<BOUCLE_art(ARTICLES){!par date}{0,1}{doublons}>
<INCLURE{fond=inclure/article-hero,id_article,env,ajax} />
#SET{exclus,#GET{exclus}|push{#ID_ARTICLE}}
</BOUCLE_art>
<div class="liste long articles">
<INCLURE{fond=liste/articles-resume,articles_exclus=#GET{exclus},env,ajax} />
</div>
</div>
</section>

6
css/_variables.scss
View File

@ -118,7 +118,8 @@ $grid-breakpoints: (
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px
xl: 1200px,
xxl: 1440px
) !default;
// Grid containers
@ -129,7 +130,8 @@ $container-max-widths: (
sm: 540px,
md: 750px,
lg: 960px,
xl: 1140px
xl: 1140px,
xxl: 1400px
) !default;

2
css/components/_forms.scss
View File

@ -1,6 +1,7 @@
.formulaire_spip {
padding: 0;
overflow: hidden;
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
@ -50,6 +51,7 @@
}
.secondary .formulaire_spip {
padding: 0;
overflow: hidden;
font-size: 16em/18;
.boutons {
margin: 0;

99
css/components/_list.scss
View File

@ -1,34 +1,73 @@
@import "bootstrap/css/_card";
.secondary .liste {
@extend .card;
@extend %islato;
padding: $card-spacer-x;
background-color: $well-bg;
margin-bottom: $rem-vert-margin;
padding-bottom: .5rem;
.h2 {
@extend %islato;
font-size: 15rem / 18;
text-align: center;
margin: 0 auto;
font-weight: normal;
line-height: 1.5;
margin-top: -$card-spacer-x - 1rem;
background-color: $well-bg;
padding: 0.25rem 1rem;
}
.liste-items {
margin: 1rem 0 0;
}
.item {
text-transform: none;
font-size: 14rem / 18;
padding: 0.75rem 0;
border:none;
& + .item {
border-top: 1px solid $border-color;
}
}
@extend .card;
@extend %islato;
padding: $card-spacer-x;
background-color: $well-bg;
margin-bottom: $rem-vert-margin;
padding-bottom: .5rem;
.h2 {
@extend %islato;
font-size: 15rem / 18;
text-align: center;
margin: 0 auto;
font-weight: normal;
line-height: 1.5;
margin-top: -$card-spacer-x - 1rem;
background-color: $well-bg;
padding: 0.25rem 1rem;
}
.liste-items {
margin: 1rem 0 0;
}
.item {
text-transform: none;
font-size: 14rem / 18;
padding: 0.75rem 0;
border: none;
& + .item {
border-top: 1px solid $border-color;
}
}
}
.liste-items {
.item {
.spip_logo {
position: relative;
&:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
background-color: $gray-900;
opacity: 0;
transition: all 350ms cubic-bezier(.33, 0, .2, 1);
}
}
.entry-title a {
@include hover-focus-active() {
.spip_logo {
&:before {
opacity: 0.3;
}
}
}
}
}
.thumb .item,.item.thumb {
.spip_logo {
position: absolute;
}
}
}

147
css/pages/sommaire.scss
View File

@ -1,5 +1,144 @@
.jumbotron {
h1:first-child {
margin-top: 0;
.page_sommaire {
.col-content, .col-secondary {
flex-basis: 100%;
max-width: none;
}
}
@include media-breakpoint-up(sm) {
.col-secondary {
.secondary {
flex-basis: 50%;
max-width: 50%;
}
}
}
#content {
margin-bottom: 2 * $spacer;
}
.jumbotron {
h1:first-child {
margin-top: 0;
}
&.jumbotron-home {
background: transparent;
padding-left: 0;
padding-right: 0;
z-index: 2;
position: relative;
&>.row>* {
position: static;
}
.logo-bg {
display: flex;
align-items: center;
position: absolute;
top:0;
height: 100%;
left: 50%;
width: 100vw;
margin-left: -50vw;
overflow: hidden;
z-index: -1;
.spip_logo {
width: 100%;
float: none;
height: auto;
margin: 0;
}
}
.jumbotron-inner {
background: $body-bg;
padding: $jumbotron-padding;
}
}
}
.home-grid {
.item-first {
.publication {
display: block;
}
}
.item-second {
.entry-title {
font-size: inherit;
}
.publication {
display: block;
}
.entry-content {
display: none;
}
}
}
.liste.articles {
h2 {
text-align: center;
font-family: $font-family-alt;
text-transform: uppercase;
font-size: $h3-font-size;
}
.liste-items {
.item {
border-top: 0;
position: relative;
overflow: visible;
padding-top:$spacer;
padding-bottom:$spacer;
.entry {
@include clearfix();
}
&:before {
content:'';
display: block;
position: absolute;
top:0;
left:50%;
width: 100vw;
margin-left: -50vw;
border-top:1px solid $gray-150;
}
&:last-child {
border-bottom: 0;
&:after {
content:'';
display: block;
position: absolute;
bottom:0;
left:50%;
width: 100vw;
margin-left: -50vw;
border-top:1px solid $gray-150;
}
}
@each $bkpt, $max-width in $container-max-widths {
@include media-breakpoint-up($bkpt) {
$col-width: $max-width / $grid-columns;
.entry {
padding-left: 3 * $col-width;
.spip_logo {
float: left;
margin-left: -3 * $col-width;
width: 3 * $col-width - $grid-gutter-width !important;
height: auto;
position: relative;
.img {
padding-bottom: 66% !important;
background-size: cover !important;
}
}
}
}
}
}
}
}
}

15
inclure/article-hero.html
View File

@ -0,0 +1,15 @@
<BOUCLE_hero(ARTICLES){id_article}>
<div class="jumbotron jumbotron-home item hentry">
<div class="row">
<div class="col-12 col-lg-8 col-xl-7 col-xxl-6">
<div class="jumbotron-inner">
<h1 class="entry-title"><a href="#URL_ARTICLE" rel="bookmark">#TITRE[<span class="logo-bg">(#LOGO_ARTICLE_RUBRIQUE|adaptive_images{1900})</span>]</a></h1>
[<div class="#EDIT{intro} introduction entry-content">(#INTRODUCTION)</div>]
<p class="postmeta">
<a class="btn btn-primary btn-large lire-la-suite" href="#URL_ARTICLE" title="<:zcore:lire_la_suite|attribut_html:> <:zcore:lire_la_suite_de|attribut_html:> [(#TITRE|attribut_html)]"><:zcore:lire_la_suite:></a>
</p>
</div>
</div>
</div>
</div>
</BOUCLE_hero>
Write Preview
Loading…
Cancel
Save