Difference between revisions of "WangYue.css"

From City of Hope MUSH
Jump to navigation Jump to search
 
(55 intermediate revisions by the same user not shown)
Line 2: Line 2:
 
display: flex;
 
display: flex;
 
justify-content: center;
 
justify-content: center;
−
width: 1000px;
+
width: 100%;
 
height: auto;
 
height: auto;
 
margin: auto;
 
margin: auto;
 
display: flex;
 
display: flex;
 
flex-direction: column;
 
flex-direction: column;
−
font-family: "Brush Script MT";
+
font-family: "Arial";
 +
font-size: 1em;
 
background-color: #F7F6f4;
 
background-color: #F7F6f4;
 
}
 
}
Line 24: Line 25:
 
.header-title {
 
.header-title {
 
width: 94%;
 
width: 94%;
−
font-size: 50px;
+
font-size: 70px;
 
letter-spacing: 2px;
 
letter-spacing: 2px;
 
word-spacing: 2px;
 
word-spacing: 2px;
−
color: #000000;
 
 
font-weight: 700;
 
font-weight: 700;
 
text-decoration: none;
 
text-decoration: none;
Line 33: Line 33:
 
font-variant: normal;
 
font-variant: normal;
 
text-transform: none;
 
text-transform: none;
 +
}
 +
 +
.quote {
 +
font-size: 30px;
 +
text-align: center;
 
}
 
}
 
 
Line 38: Line 43:
 
width: 30%;
 
width: 30%;
 
height: auto;
 
height: auto;
−
background-color: #eeeeee;
+
font-size:1.2em;
−
border: 0.75em;
 
−
border-style: solid;
 
−
border-color: black;
 
−
border-bottom-style: hidden;
 
−
font-size:1.7em;
 
 
}
 
}
 
 
Line 60: Line 60:
 
width: 100%;
 
width: 100%;
 
height: auto;
 
height: auto;
−
margin-bottom: 1em;
+
margin-bottom: 1.2em;
 +
}
 +
 
 +
.hr-image {
 +
width 100px;
 +
height: auto;
 +
text-align: center;
 
}
 
}
 
 
 
.info-table {
 
.info-table {
 
margin: auto;
 
margin: auto;
−
width: 100%;
+
width: 30%;
−
padding: 0 1em;
+
padding: 0 1.2em;
 
}
 
}
 
 
Line 76: Line 82:
 
.icon {
 
.icon {
 
display: flex;
 
display: flex;
−
justify-content: center;
+
margin-left: auto;
 +
margin-right: auto;
 
}
 
}
 
 
−
.photo-banner {
+
.biography-container {
−
width: 100%;
+
width: 94%;
−
}
+
padding: 1.2em 3%;
−
 
−
.photo-banner img {
 
−
width: 100%;
 
−
height: auto;
 
−
}
 
−
 
−
.mid-banner {
 
−
margin-bottom: -1em;
 
 
}
 
}
 
 
−
.biography-container {
+
.appearance-container {
 
width: 94%;
 
width: 94%;
−
padding: 1em 3%;
+
padding: 1.2em 3%;
−
font-size: 1.7em;
 
 
}
 
}
−
+
 
 
.center {
 
.center {
 
text-align: center;
 
text-align: center;
−
}
 
−
 
−
.underline {
 
−
border-bottom-style: solid;
 
−
border-bottom-width: 0.1em;
 
−
border-color: black;
 
−
padding-bottom: 0.5em;
 
 
}
 
}
 
 
 
.label {
 
.label {
 
margin: 0.2em 0;
 
margin: 0.2em 0;
−
font-size: 1.7em;
 
 
font-weight: 600;
 
font-weight: 600;
−
font-style: italic;
 
−
}
 
−
 
−
.white {
 
−
color: lightgray;
 
−
border-color: lightgray;
 
 
}
 
}
 
 
 
.hooks-container {
 
.hooks-container {
−
background-color: black;
+
width: 90%;
−
color: lightgray;
+
padding: 1.2em 3%;
−
width: 94%;
 
−
padding: 1em 3%;
 
−
font-size: 1.7em;
 
 
display: flex;
 
display: flex;
 
flex-direction: column;
 
flex-direction: column;
Line 132: Line 113:
 
 
 
.hooks-container, .contacts-container .label {
 
.hooks-container, .contacts-container .label {
−
margin-bottom: 1em;
+
margin-bottom: 1.2em;
 
}
 
}
 
 
 
.contacts-container, .gallery-container, .logs-container {
 
.contacts-container, .gallery-container, .logs-container {
−
background-color: white;
 
−
color: black;
 
 
width: 94%;
 
width: 94%;
−
padding: 1em 3%;
+
padding: 1.2em 3%;
 
display: flex;
 
display: flex;
 
flex-direction: column;
 
flex-direction: column;
Line 147: Line 126:
 
width: 100%;
 
width: 100%;
 
display: flex;
 
display: flex;
 +
justify-content: center;
 
}
 
}
 
 
 
.hooks-table {
 
.hooks-table {
−
width: 70%;
+
width: 80%;
−
}
 
−
 
−
.hook-table-label {
 
−
color: white;
 
−
font-weight: 600;
 
−
padding-left: 0.5em;
 
−
}
 
−
 
−
.anim-gif {
 
−
width: 30%;
 
−
display: flex;
 
−
flex-direction: column;
 
 
justify-content: center;
 
justify-content: center;
 
}
 
}
 
 
−
.anim-gif img {
+
.hooks-table-label {
−
width: 100%;
+
font-weight: 900;
−
height: auto;
+
padding-left: 1.2em;
−
border-radius: 30%;
 
 
}
 
}
 
 
 
.contacts-container, .gallery-container {
 
.contacts-container, .gallery-container {
−
background-color: black;
 
−
color: lightgray;
 
 
width: 94%;
 
width: 94%;
−
padding: 1em 3%;
+
padding: 1.2em 3%;
 
display: flex;
 
display: flex;
 
flex-direction: column;
 
flex-direction: column;
Line 182: Line 147:
 
 
 
.contacts-container a {
 
.contacts-container a {
−
  color: white
+
color: blue
 
}
 
}
 
 
 
.contacts-container a:visited {
 
.contacts-container a:visited {
−
  color: white
+
color: purple
 
}
 
}
 
 
 
.contacts-container a:hover {
 
.contacts-container a:hover {
−
  color: darkred
+
color: darkred
 
}
 
}
 
 
 
.logs-container {
 
.logs-container {
−
  margin: 0 1em;
+
margin: 0 1.2em;
 
}
 
}
 
 
 
.logs-container a {
 
.logs-container a {
−
  color: black
+
color: blue
 
}
 
}
 
 
 
.logs-container a:visited {
 
.logs-container a:visited {
−
  color: black
+
color: purple
 
}
 
}
 
 
 
.logs-container a:hover {
 
.logs-container a:hover {
−
  color: darkred
+
color: darkred
 
}
 
}
 
 
−
.gallery-content ul {
+
.gallery-content {
−
  display: flex;
+
display: flex;
−
  flex-wrap: wrap;
+
flex-wrap: wrap;
−
  list-style-type: none;
+
justify-content: center;
−
  justify-content: center;
+
font-size: 15px;
 +
text-align: center;
 
}
 
}
 
 
 
.gallery-content img {
 
.gallery-content img {
 
height: 240px;
 
height: 240px;
−
width: 100%;
+
width: auto;
−
max-width: 100%;
 
 
}
 
}
 
 
 
.gallery-content a {
 
.gallery-content a {
−
  color: lightgray
+
color: blue
 
}
 
}
 
 
 
.gallery-content a:visited {
 
.gallery-content a:visited {
−
  color: lightgray
+
color: purple
 
}
 
}
 
 
 
.gallery-content a:hover {
 
.gallery-content a:hover {
−
  color: darkred
+
color: darkred
 
}
 
}

Latest revision as of 13:07, 21 November 2024

.container { display: flex; justify-content: center; width: 100%; height: auto; margin: auto; display: flex; flex-direction: column; font-family: "Arial"; font-size: 1em; background-color: #F7F6f4; }

.top-section { display: flex; }

.header-container { width: 100%; display: flex; justify-content: center; padding: 2em 0; }

.header-title { width: 94%; font-size: 70px; letter-spacing: 2px; word-spacing: 2px; font-weight: 700; text-decoration: none; font-style: normal; font-variant: normal; text-transform: none; }

.quote { font-size: 30px; text-align: center; }

.left-panel { width: 30%; height: auto; font-size:1.2em; }

.right-panel { width: 70%; display: flex; flex-direction: column; justify-content: center; }

.portrait-image { width: 100%; }

.portrait-image img { width: 100%; height: auto; margin-bottom: 1.2em; }

.hr-image { width 100px; height: auto; text-align: center; }

.info-table { margin: auto; width: 30%; padding: 0 1.2em; }

.info-table-label { font-weight: 600; width: 50%; }

.icon { display: flex; margin-left: auto; margin-right: auto; }

.biography-container { width: 94%; padding: 1.2em 3%; }

.appearance-container { width: 94%; padding: 1.2em 3%; }

.center { text-align: center; }

.label { margin: 0.2em 0; font-weight: 600; }

.hooks-container { width: 90%; padding: 1.2em 3%; display: flex; flex-direction: column; }

.hooks-container, .contacts-container .label { margin-bottom: 1.2em; }

.contacts-container, .gallery-container, .logs-container { width: 94%; padding: 1.2em 3%; display: flex; flex-direction: column; }

.hooks-content { width: 100%; display: flex; justify-content: center; }

.hooks-table { width: 80%; justify-content: center; }

.hooks-table-label { font-weight: 900; padding-left: 1.2em; }

.contacts-container, .gallery-container { width: 94%; padding: 1.2em 3%; display: flex; flex-direction: column; }

.contacts-container a { color: blue }

.contacts-container a:visited { color: purple }

.contacts-container a:hover { color: darkred }

.logs-container { margin: 0 1.2em; }

.logs-container a { color: blue }

.logs-container a:visited { color: purple }

.logs-container a:hover { color: darkred }

.gallery-content { display: flex; flex-wrap: wrap; justify-content: center; font-size: 15px; text-align: center; }

.gallery-content img { height: 240px; width: auto; }

.gallery-content a { color: blue }

.gallery-content a:visited { color: purple }

.gallery-content a:hover { color: darkred }

Retrieved from "https://cityofhopemush.net/index.php?title=WangYue.css&oldid=254947"