ΠρολεΒίκι:Αρχική σελίδα/styles.css: Διαφορά μεταξύ των αναθεωρήσεων
Από την ΠρολεΒίκι, την προλεταριακή εγκυκλοπαίδεια
More languages
More actions
(Ο ComradeSyntrofos άλλαξε το πρότυπο περιεχομένου της σελίδας ΠρολεΒίκι:Αρχική σελίδα/styles.css από «Sanitized CSS» σε «CSS») Ετικέτα: αλλαγή μοντέλου περιεχομένου |
Χωρίς σύνοψη επεξεργασίας |
||
Γραμμή 1: | Γραμμή 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 { | .mainpage-body { | ||
margin:auto; | margin:auto; | ||
} | |||
.firstHeading, #siteSub { | |||
display:none | |||
} | } | ||
Γραμμή 9: | Γραμμή 344: | ||
display: inline-block; | display: inline-block; | ||
width: 100%; | width: 100%; | ||
content: url(/pw-conf/img/mainpage/ | content: url(/pw-conf/img/mainpage/en.png); | ||
border-radius:12px; | border-radius:12px; | ||
Γραμμή 18: | Γραμμή 353: | ||
width: 100%; | 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 { | .mainpage-header { | ||
Γραμμή 122: | Γραμμή 472: | ||
.frame-container{ | .frame-container{ | ||
margin-bottom:15px; /* should be same as flex gap */ | 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; | |||
} | } | ||
} | } |
Αναθεώρηση της 20:27, 7 Νοεμβρίου 2024
/*
*
*
* 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;
}
}