Main Page/styles.css: Difference between revisions
No edit summary |
No edit summary |
||
| (26 intermediate revisions by the same user not shown) | |||
| Line 2: | Line 2: | ||
font-size:1.6em; | font-size:1.6em; | ||
font-weight: bold; | font-weight: bold; | ||
text-shadow: rgba(150, 150, 150, 0.6) 2px 1px 2px; | |||
} | } | ||
.text-container { | .text-container { | ||
| Line 53: | Line 54: | ||
/*什么*/ | /*什么*/ | ||
.textbox { | .textbox { | ||
width: | margin: 0 auto; | ||
max-width: 1320px; | |||
height: auto; | height: auto; | ||
padding: | padding: 20px 0; | ||
background-color: rgba(255, 255, 255, 0. | background-color: rgba(255, 255, 255, 0.25); | ||
display: flex; | display: flex; | ||
flex-wrap: wrap; | flex-wrap: wrap; | ||
justify-content: center; | |||
box-shadow: 5px 5px 2px rgba(150, 150, 150, 0.6); | |||
} | } | ||
.left-child, .right-child { | |||
.left-child, | background-color: rgba(240, 240, 240, 0.25); | ||
.right-child { | |||
background-color: rgba( | |||
flex: 1 1 100%; | flex: 1 1 100%; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
padding: 10px; | |||
} | } | ||
@media (min-width: 980px) { | @media (min-width: 980px) { | ||
.left-child, | .left-child, | ||
| Line 73: | Line 75: | ||
flex: 1; | flex: 1; | ||
} | } | ||
.right-child { | |||
max-width:900px; | |||
} | |||
.left-child { | .left-child { | ||
border- | border-left: 1px solid black; | ||
max-width:390px; | |||
} | } | ||
} | |||
.container { | |||
width: 100%; | |||
} | |||
.container p{ | |||
display: flex; | |||
flex-wrap: wrap; | |||
width: 100%; | |||
justify-content: center; | |||
} | |||
.container p * a{ | |||
max-width:270px; | |||
min-width:190px; | |||
flex: 1 1 calc(33.333% - 10px); /* 3 items per row with space for borders */ | |||
height: 64px; | |||
font-weight: bold; | |||
font-size:20px; | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
box-sizing: border-box; | |||
margin: 5px; /* Space between items */ | |||
text-decoration: none; | |||
transition: all 0.2s ease-in; | |||
box-shadow: 5px 5px 2px rgba(150, 150, 150, 0.6); | |||
border-width:5px; | |||
border-style: solid; | |||
} | |||
.container p * a:hover{ | |||
height: 72px; | |||
box-shadow: 7px 7px 6px rgba(150, 150, 150, 0.6); | |||
border-width:12px; | |||
} | |||
.container p * a.external{ | |||
background-image:none; | |||
} | |||
.container p .en a{ | |||
background-color: #012169; /* 80% transparent blue */ | |||
border-color: #c8102e; /* 5px 80% transparent red */ | |||
color: white; | |||
} | |||
.container p .en a.external:visited{ | |||
color: white; | |||
} | |||
.container p .zh a{ | |||
background-color: #ee1c25; /* 80% transparent blue */ | |||
border-color: #ee1c25; /* 5px 80% transparent red */ | |||
color: #ffff00; | |||
} | |||
.container p .zh a.external:visited{ | |||
color: #ffff00; | |||
} | |||
.container p .ja a{ | |||
background-color: white; /* 80% transparent blue */ | |||
border-color: white; /* 5px 80% transparent red */ | |||
color: #bd0029; | |||
} | |||
.container p .ja a.external:visited{ | |||
color: #bd0029; | |||
} | |||
.container p .ko a{ | |||
background-color: white; /* 80% transparent blue */ | |||
border-color: #000000; /* 5px 80% transparent red */ | |||
color: #CD2E3A; | |||
} | |||
.container p .ko a span{ | |||
color: #0047A0; | |||
} | |||
.container p .ko a.external:visited{ | |||
color: #CD2E3A; | |||
} | } | ||