David/Style.css: Difference between revisions

From LiberationMUSH Wiki
No edit summary
No edit summary
 
(38 intermediate revisions by the same user not shown)
Line 1: Line 1:
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;700&display=swap');\
 
.mw-editsection {
display: none;
}


.head {
.head {
Line 13: Line 17:
#mainpage {
#mainpage {
position: relative;
position: relative;
width: 100%;
width: calc(100% - 20px);
padding: 10px;
background: #ffffff;
background: #ffffff;
text: #000000;
text: #000000;


font-family: Sora, Helvetica, Arial, sans;
font-family: Sora, Helvetica, Arial, sans;
font-size: 14px;
}
 
#mainpage .mw-headline {
font-family: Sora, Helvetica, Arial, sans;
}
}


Line 33: Line 41:
}
}


#avatar {
#avatar-wrapper {
position: relative;
position: relative;
height: 100px;
height: 110px;
width: 100px;
width: 110px;
left: 50%;
left: 50%;
top: -70px;
top: -70px;
transform: translate(-50%, 0);
transform: translate(-50%, 0);
 
}
background: #000000;
#avatar {
 
height: 100px;
width: 100px;
border-radius: 50px;
border-radius: 50px;
border: solid 3px white;
border: solid 3px white;
}
#avatar-wrapper img {
position: absolute;
top: 0;
left: 0;
z-index: -1;
transform: translate(-2px, -5px) scale(.95);
clip-path: circle(50% at 50% 50%);
}
}


Line 75: Line 92:
align-items: center;
align-items: center;
margin-top: -40px;
margin-top: -40px;
}
@media (min-width: 991px) {
#membership {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: stretch;
justify-content: space-evenly;
}
#membership .box {
max-width: 25%;
margin-right: 0;
}
}
@media (max-width: 990px) {
#membership {
display: flex;
flex-direction: column;
align-items: center;
}}
}
}


#membership {
#membership {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
width: 100%;
width: 100%;
justify-content: space-evenly;
}
}


#membership .box {
#membership .box {
width: 30%;
text-align: center;
text-align: center;
}
}


#membership .box .icon {
height: 100px;
width: 100px;
margin: 0 auto;
background-color: #b0ffb0;
font-size: 72px;
}
#membership .box ul {
margin: 0;
}
#membership .box ul li {
list-style-type: none;
list-style-image: none;
}
@media (max-width: 990px) {
.box {
width: 75%;
}
}
@media (min-width: 991px) {
.box {
width: 50%;
}
}
.box {
.box {
border: solid 1px #999999;
border: solid 1px #999999;
text-align: left;
text-align: left;
width: 50%;
padding: 30px;
padding: 10px;
margin-bottom: 15px;
}
}

Latest revision as of 01:58, 15 July 2021

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;700&display=swap');\

.mw-editsection { display: none; }

.head { font-weight: bolder; font-size: 2em; }

.subhead { font-weight: bold; font-size: 1.5em; }

  1. mainpage {

position: relative; width: calc(100% - 20px); padding: 10px; background: #ffffff; text: #000000;

font-family: Sora, Helvetica, Arial, sans; }

  1. mainpage .mw-headline {

font-family: Sora, Helvetica, Arial, sans; }

  1. header {

position: relative; top: 0; height: 300px; width: 100%; background-color: hsl(2, 57%, 40%); background-image: repeating-linear-gradient(transparent, transparent 50px, rgba(0,0,0,.4) 50px, rgba(0,0,0,.4) 53px, transparent 53px, transparent 63px, rgba(0,0,0,.4) 63px, rgba(0,0,0,.4) 66px, transparent 66px, transparent 116px, rgba(0,0,0,.5) 116px, rgba(0,0,0,.5) 166px, rgba(255,255,255,.2) 166px, rgba(255,255,255,.2) 169px, rgba(0,0,0,.5) 169px, rgba(0,0,0,.5) 179px, rgba(255,255,255,.2) 179px, rgba(255,255,255,.2) 182px, rgba(0,0,0,.5) 182px, rgba(0,0,0,.5) 232px, transparent 232px), repeating-linear-gradient(270deg, transparent, transparent 50px, rgba(0,0,0,.4) 50px, rgba(0,0,0,.4) 53px, transparent 53px, transparent 63px, rgba(0,0,0,.4) 63px, rgba(0,0,0,.4) 66px, transparent 66px, transparent 116px, rgba(0,0,0,.5) 116px, rgba(0,0,0,.5) 166px, rgba(255,255,255,.2) 166px, rgba(255,255,255,.2) 169px, rgba(0,0,0,.5) 169px, rgba(0,0,0,.5) 179px, rgba(255,255,255,.2) 179px, rgba(255,255,255,.2) 182px, rgba(0,0,0,.5) 182px, rgba(0,0,0,.5) 232px, transparent 232px), repeating-linear-gradient(125deg, transparent, transparent 2px, rgba(0,0,0,.2) 2px, rgba(0,0,0,.2) 3px, transparent 3px, transparent 5px, rgba(0,0,0,.2) 5px); filter: grayscale(50%); }

  1. avatar-wrapper {

position: relative; height: 110px; width: 110px; left: 50%; top: -70px; transform: translate(-50%, 0); }

  1. avatar {

height: 100px; width: 100px; border-radius: 50px; border: solid 3px white; }

  1. avatar-wrapper img {

position: absolute; top: 0; left: 0; z-index: -1; transform: translate(-2px, -5px) scale(.95); clip-path: circle(50% at 50% 50%); }

  1. name {

position: relative; top: -60px; left: 50%; transform: translate(-50%, 0); width: 100%; background: #ffffff; text: #000000;

text-align: center; }

  1. name .main {

font-weight: bold; font-size: 1.6em; }

  1. name .sub {

color: #666666; font-weight: lighter; }

  1. body {

display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; margin-top: -40px; }

@media (min-width: 991px) { #membership { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; justify-content: space-evenly; } #membership .box { max-width: 25%; margin-right: 0; } }

@media (max-width: 990px) { #membership { display: flex; flex-direction: column; align-items: center; }} }

  1. membership {

width: 100%; }

  1. membership .box {

text-align: center; }

  1. membership .box .icon {

height: 100px; width: 100px; margin: 0 auto; background-color: #b0ffb0; font-size: 72px; }

  1. membership .box ul {

margin: 0; }

  1. membership .box ul li {

list-style-type: none; list-style-image: none; }

@media (max-width: 990px) { .box { width: 75%; } } @media (min-width: 991px) { .box { width: 50%; } } .box { border: solid 1px #999999; text-align: left; padding: 30px; margin-bottom: 15px; }

Retrieved from "https://liberationmush.site/liberationwiki/index.php?title=David/Style.css&oldid=1893"