/*
*
*
* NEW CSS FOR NEW HOMEPAGE
*
*
*/
.skin-citizen-dark .homepage-logo span{
filter:invert(1) contrast(90%);
}
.homepage-logo span{
filter:invert(0) contrast(63%);
}
.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;
}
.new-homepage + p > .error.mw-ext-cite-error{ /*This might remove ALL errors from being displayed on the homepage, but necessary for the DPL inclusions*/
display:none;
}
/* header */
.frame-container.header-part{
text-align:center;
justify-content:center;
flex-flow:column nowrap;
gap:0;
}
/*search bar on homepage*/
.search-bar{
justify-content:center;
}
.search-bar .search-icon-homepage{
filter:contrast(10%); /*gray out the magnifying glass icon in the homepage search bar*/
}
#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 placed in Common.css*/
}
/* homepage body */
.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;
}
/*library infobox styling*/
.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;
}
/*join-us styling*/
.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;
}
#homepage-testimonial span{
color:#404040;
}
/*communist of the day styling*/
.cotd .infobox.vcard{
background-color:transparent!important;
border:none;
}
.cotd .mw-parser-output.mbox,.cotd .frame-body > blockquote{
display:none;
}
/*cheesing infobox display on cotd*/
.cotd .frame-body img {
max-width:250px;
width:250px;
height:auto;
border-radius:6px;
}
.cotd .frame-body > p{ /*only display first lede paragraph in communist of the day*/
display:none;
}
.cotd .frame-body > p:last-of-type, .cotd .frame-body > p:nth-of-type(-n + 2) { /*only display first lede paragraph in communist of the day and "read more" link*/
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;
}
/*featured essay styling*/
.featured-essay .frame-body{
max-height:unset!important;
}
/* Need to bring back the "disappear" classes from the essays homepage
so we don't have to import the entire {{essays homepage}} template*/
.essay-disappear{
display:block!important;
}
.essay-disappear2{
display:none;
}
/*changing layout of featured essay infobox*/
.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:auto;
margin-right:25px;
margin-top:0!important;
}
.featured-essay .essay-offset{
margin-left:0;
}
/*contributions*/
.contributions-homepage .frame-body{
max-height:unset!important;
}
/*support us*/
.support-us .frame-body{
max-height:unset!important;
}
/*new 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;
}
}
/*
*
*
* LEGACY - DO NOT TOUCH
*
*
*/
.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: .4em .8em .5em;
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: 40px;
opacity: .7;
/*[[File:Hamsickwhite.svg]]*/
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 <div> 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;
}
}
