ProleWiki:Page principale styles.css

/*

NOUVEAU CSS POUR LA NOUVELLE PAGE D'ACCUEIL
/

p{ text-align:left!important; }

.homepage-logo span a img{ filter:invert(0) contrast(70%); }

.mainpage-header-img { display: inline-block; width: 100%; content: url("/pw-conf/img/mainpage/main_page_header.webp"); border-radius: 48px; }

.heading-hyperlink{ display:none; }

.error.mw-ext-cite-error{ /Cela pourrait supprimer TOUTES les erreurs de l'affichage sur la page d'accueil, mais nécessaire pour les inclusions DPL/ display:none; }

/ en-tête / .frame-container.header-part{ text-align:center; justify-content:center; flex-flow:column nowrap; gap:0; }

/barre de recherche sur la page d'accueil/ .search-bar{ justify-content:center; }

.search-bar .search-icon-homepage{ filter:contrast(10%); /désactivez l'icône de la loupe dans la barre de recherche de la page d'accueil/ }

homepage-search{

border:1px transparent solid; border-radius:160px; padding:1rem 0; margin-top:1.5rem; margin-bottom:1.2rem; text-align:center; cursor:pointer; user-select:none; }

homepage-search img{

user-select:none; }

homepage-search:hover{

/background-color: variable placée dans Common.css/ }

/ corps de la page d'accueil / .new-homepage .mainpage-frame{ border-radius:8px; } .new-homepage .frame-header{ border-radius:8px 8px 0 0; }

.new-homepage .frame-body{ max-height:500px; overflow-y:scroll; }

/style de l'infobox de la bibliothèque/ .book-discovery .infobox.vcard{ width:100%!important; padding:0; }

.book-discovery .infobox{ border:transparent!important; margin:0!important; }

.book-discovery .infobox tbody tr .logo img{ min-height:1px; max-height:170px; width:auto; }

/style de l'adhésion/ .join-us .join-stats{ box-shadow:none!important; line-height:1.5em; text-align:center; }

.join-us .join-stats > p{ text-align:center!important; }

.join-us .join-stats span{ color:gray; }

homepage-testimonial{

text-align:justify; text-justify:auto; font-size:0.9em; padding:2em; padding-top:1em; line-height:1.2em; color:var(--color-subtle); }

/style du communiste du jour/ .cotd .infobox.vcard{ background-color:transparent!important; border:none; }

.cotd .mw-parser-output.mbox,.cotd .frame-body > blockquote{ display:none; }

/tricher l'affichage de l'infobox sur cotd/

.cotd .frame-body img { max-width:250px; width:250px; height:auto; border-radius:6px; }

.cotd .frame-body > p{ /n'afficher que le premier paragraphe de l'introduction dans le communiste du jour/ display:none; }

.cotd .frame-body > p:last-of-type, .cotd .frame-body > p:nth-of-type(-n + 2) { /n'afficher que le premier paragraphe de l'introduction dans le communiste du jour et le lien "lire plus"/ display:inline!important; }

.cotd .frame-body table.infobox.vcard{ line-height:0; width:unset!important; margin:0!important; padding: 0 0 0 3em; }

.cotd .frame-body table.infobox.vcard tr{ font-size:0; overflow:hidden; }

.cotd .frame-body table.infobox.vcard img{ display:block!important; }

.cotd figcaption{ display:none; }

.catlinks.catlinks{ display:none; }

/style de la colonne latérale des actualités/ .news-homepage ul:first-of-type{ margin-top:0; }

/style de l'essai en vedette/ .featured-essay .frame-body{ max-height:unset!important; }

.featured-essay .essay-content p{ margin-top:0; }

/* Il faut rétablir les classes "disparaître" de la page d'accueil des essais afin de ne pas avoir à importer l'ensemble du modèle */ .essay-disappear{ display:block!important; }

.essay-disappear2{ display:none; }

/changement de la disposition de l'infobox de l'essai en vedette/ .featured-essay .essay-template-title{ border-bottom:none; }

.featured-essay .frame-body .infobox-essay .essay-flex{ flex-direction:row; justify-content:flex-start; align-items:flex-start; }

.featured-essay .frame-body .infobox-essay .essay-flex .essay-picture{ width:35%; height:100%; max-height:350px; margin-right:25px; margin-top:0!important; overflow:hidden; }

.featured-essay .frame-body .infobox-essay .essay-flex .essay-picture img{ object-fit:contain; height:inherit; width:auto; max-height:350px; }

.featured-essay .essay-offset{ margin-left:0; }

/contributions/ .contributions-homepage .frame-body{ max-height:unset!important; }

.contributions-homepage h4:first-of-type{ margin-top:0; }

/soutenir-nous/ .support-us .frame-body{ max-height:unset!important; }

.support-us h3:first-of-type{ margin-top:0; }

/nouveaux pillboxes/ .pills-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); grid-auto-rows:3em; gap: 0.7em 0.5em; margin:2em 0; }

.pill{ overflow:hidden; border-radius:6px; position:relative; }

.pill-image{ position:absolute; top:0; left:0; bottom:0; right:0; }

.pill-image::after { content: ""; position: absolute; top:0; left:0; bottom:0; right:0; background: linear-gradient(to right,#000 -30%,transparent); transition: transform 250ms ease; /pointer-events:none; IN COMMON.CSS/ }

.pill-image:hover:after{ transform:translateX(-100%); }

.pill-image img{ width:100%; height:100%; object-fit:cover; transition:150ms cubic-bezier(0.215,0.61,0.355,1); transition-property:transform; }

.pill-image img:hover{ transform:scale(1.05); }

.pill > p{ position: absolute; display: flex; align-items:center; top:0; bottom:0; left:0; right:0; padding-left:1rem; margin:0; color: white; height: 100%; font-size:0.9em; color:white; text-shadow:-1px 0 .2em #000,0 1px .2em #000,1px 0 .2em #000,0 -1px .2em #000; }

.pill > p:hover{ color:white; }

/fix references being carried over to homepage from DPL transclusions/ .mw-references-wrap, .reference,sup.pw-helper{ display:none; }

@media screen and (max-width:768px){ .new-homepage .frame-body{

max-height:unset!important;

}

.frame-container.header-part{

flex-flow:row wrap;

}

.cotd .frame-body table.infobox.vcard{

padding:0;

}

.featured-essay .frame-body .infobox-essay .essay-flex .essay-picture{

width:auto;
max-height:250px;
margin-right:0;

} }

/*

LÉGACITÉ - NE PAS TOUCHER
/

.mainpage-body { margin:auto; }

.firstHeading, #siteSub {

display:none

}

mainpage-banner span

{ display: inline-block; width: 100%; content: url(/pw-conf/img/mainpage/en.png); border-radius:12px;

} .mainpage-banner-overlay { position: absolute; top: 65px; width: 100%; }

.contrib-table{ overflow:scroll; }

/adding icons to new quick links/ .mainpage-articles>:after{ content:"";} .mainpage-library{ content:""; } .mainpage-essays{ content:"";} .mainpage-categories{ content:"";}

.mainpage-header {

display: flex;

margin: 2em 5em; align-items:baseline; }

.header-intro {

flex: 2;

}

.header-intro h1 {

font-size: 2.5em;
border: none;
margin: 0 0 .15em;

}

.header-intro p {

font-size: 1.1em;
line-height: 1.7em;

}

.header-stats {

display: flex;
align-items: center;
margin:auto;

} .header-stats ul {

list-style: none;

}

@media screen and (max-width: 800px) { .mainpage-header {

flex-direction: column;
margin:2em;

} }

.mainpage-frame { box-shadow: 0 0 .3em #999; border-radius: 1em; width:100%; } .mainpage-frame:after { display: block; content: ""; clear: both; } .separator { width:5%; margin:1em auto; } .frame-header { background-color:#b50014; border-radius: 1em 1em 0.25em 0.25em; color: #fff; padding: .2em .8em; font-weight: bold; } .frame-header:before { display: inline-block; / Add some content in order to get normal line height, then make it transparent / content: "x"; color: transparent; width: 20px; margin-right:5px; opacity: .7; // background-image: url(https://shared.prolewiki.org/uploads/3/3d/Hamsickwhite.svg); background-size: contain; background-repeat: no-repeat; background-position: left center; } .frame-body { padding: 1em; }

/bringing some of the bootstrap framework/

.frame-container{ / ideally this should be the first

tag on the page and EVERYTHING is contained in it /

display:flex; align-self:flex-start; flex-flow:row wrap; gap:15px; margin-bottom:2rem; }

.col-1{flex:0 0 auto;width:8%} .col-2{flex:0 0 auto;width:15%} .col-3{flex:0 0 auto;width:24%} .col-4{flex:0 0 auto;width:32%} .col-5{flex:0 0 auto;width:40%} .col-6{flex:0 0 auto;width:49%} .col-7{flex:0 0 auto;width:57%} .col-8{flex:0 0 auto;width:65%} .col-9{flex:0 0 auto;width:76%} .col-10{flex:0 0 auto;width:84%} .col-11{flex:0 0 auto;width:90%} .col-12{flex:0 0 auto;width:100%}

@media only screen and (max-width:768px){ .col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12{

width:100%;

} .frame-container{

margin-bottom:15px; / should be same as flex gap /

} .quick-links-table tbody tr td{

padding-right:10px;

} .quick-links-table tbody tr td:last-child{

padding-right:0;

} }