Browse Source

mise en forme de la home

svn/root
Cerdic 1 year ago
parent
commit
ed2689b58c
  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

@ -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

@ -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

@ -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

@ -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

@ -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

@ -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

@ -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>
Loading…
Cancel
Save