|
|
| Zeile 1: |
Zeile 1: |
| /*
| |
|
| |
|
| *
| |
|
| |
| *
| |
|
| |
| * 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*/
| |
|
| |
| }
| |
|
| |
| #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;
| |
|
| |
| }
| |
|
| |
| .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 {{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: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
| |
|
| |
| }
| |
|
| |
| #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;
| |
|
| |
| }
| |
|
| |
| }
| |
