Menü aufrufen
Persönliches Menü aufrufen
Nicht angemeldet
Ihre IP-Adresse wird öffentlich sichtbar sein, wenn Sie Änderungen vornehmen.

ProleWiki:Main page/styles.css

Aus ProleWiki
Version vom 4. November 2024, 11:30 Uhr von Jaiden (Diskussion | Beiträge) (Die Seite wurde neu angelegt: „→‎* * * NEW CSS FOR NEW HOMEPAGE * *: .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; } .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: …“)
(Unterschied) ← Nächstältere Version | Aktuelle Version (Unterschied) | Nächstjüngere Version → (Unterschied)

/*

  • NEW CSS FOR NEW HOMEPAGE
  • /

.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;

}

.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*/

}

  1. 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;

}

  1. homepage-search img{

user-select:none;

}

  1. 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;

}

  1. homepage-testimonial{

text-align:justify;

text-justify:auto;

font-size:0.9em;

padding:2em;

padding-top:1em;

}

  1. 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;

}

.cotd figcaption{

display:none;

}

.catlinks.catlinks{

display:none;

}

/*featured essay styling*/

.featured-essay .frame-body{

max-height:unset!important;

}

.featured-essay .essay-content p{

margin-top:0;

}

/* Need to bring back the "disappear" classes from the essays homepage

so we don't have to import the entire 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: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;

}

/*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

}

  1. 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;

/**/

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;

}

}