Szablon:Prouser/style.css
Przejdź do nawigacji
Przejdź do wyszukiwania
/**
WMPL and other users with some functions in fundation/company.
*/
@media screen and (min-width: 1001px) {
/* main layout */
.prouser-container {
display: grid;
grid-template-areas:
'colors colors colors'
'intro intro intro'
'about socStory contact'
;
grid-template-columns: repeat(3, 1fr);
gap: 1em;
}
.prouser-colors {
grid-area: colors;
}
.prouser-intro {
grid-area: intro;
}
.prouser-about {
grid-area: about;
}
.prouser-soc-story {
grid-area: socStory;
}
.prouser-contact {
grid-area: contact;
}
/* intro layout */
.prouser-intro {
display:grid;
grid-template-columns: 1fr min-content;
grid-template-areas: 'main photo';
}
.prouser-intro-main {
grid-area: main;
}
.prouser-photo {
grid-area: photo;
}
.prouser-photo img {
min-width: 150px;
}
/* minor */
.prouser-contact {
background: #F4F4F4;
padding: 0 1em;
}
}
/* margin from extra */
.prouser-logo {
margin-bottom: 1em;
}
/* headers */
.prouser-container .hX {
font-family:'Helvetica Neue', 'Lucida Grande', Tahoma, Verdana, sans-serif;
border-style: none;
padding: 0;
margin: .5em 0;
}
.prouser-intro .hX {
line-height: 1em;
font-size: 250%;
margin: 0;
overflow: unset;
}
.prouser-function {
font-size: 150%;
}
/* color accents */
.prouser-colors {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.prouser-colors div {
height: 4px;
width: 100%;
}
.prouser-colors div:nth-of-type(1) {background:#990000;}
.prouser-colors div:nth-of-type(2) {background:#339966;}
.prouser-colors div:nth-of-type(3) {background:#006699;}
.prouser-colors div:nth-of-type(4) {background:#666666;}
/* small screen */
@media screen and (max-width: 1000px) {
.prouser-intro .hX {
margin-top: 1em;
}
.prouser-photo img {
width: 40vw;
height: auto;
}
.prouser-intro {
position: relative;
}
.prouser-logo img {
position: absolute;
width: 40px;
height: auto;
top: 5px;
right: 5px;
filter: drop-shadow(0 0 8px white) drop-shadow(0 0 8px white);
}
div.prouser-container .prouser-photo .floatright {
float: right;
}
.prouser-intro-main {
display: table-cell; /* intro alignment */
}
}
/* thin screen */
@media screen and (max-width: 550px) {
.prouser-intro .hX {
font-size: 6vw;
}
.prouser-function {
font-size: 5vw;
}
.prouser-logo img {
width: 10vw;
}
.prouser-intro-main {
display: block;
}
}