David/Style.css
@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; }
- mainpage {
position: relative; width: calc(100% - 20px); padding: 10px; background: #ffffff; text: #000000;
font-family: Sora, Helvetica, Arial, sans; }
- mainpage .mw-headline {
font-family: Sora, Helvetica, Arial, sans; }
- 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%); }
- avatar-wrapper {
position: relative; height: 110px; width: 110px; left: 50%; top: -70px; transform: translate(-50%, 0); }
- avatar {
height: 100px; width: 100px; border-radius: 50px; 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%); }
- name {
position: relative; top: -60px; left: 50%; transform: translate(-50%, 0); width: 100%; background: #ffffff; text: #000000;
text-align: center; }
- name .main {
font-weight: bold; font-size: 1.6em; }
- name .sub {
color: #666666; font-weight: lighter; }
- 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; }} }
- membership {
width: 100%; }
- membership .box {
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 { border: solid 1px #999999; text-align: left; padding: 30px; margin-bottom: 15px; }
