Main Page/styles.css: Difference between revisions
No edit summary |
No edit summary |
||
(17 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 { | ||
margin: 0 auto; | |||
max-width: 1320px; | max-width: 1320px; | ||
height: auto; | height: auto; | ||
Line 59: | Line 61: | ||
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, .right-child { | ||
Line 75: | Line 79: | ||
} | } | ||
.left-child { | .left-child { | ||
border- | border-left: 1px solid black; | ||
max-width:390px; | max-width:390px; | ||
} | } | ||
Line 88: | Line 92: | ||
flex-wrap: wrap; | flex-wrap: wrap; | ||
width: 100%; | width: 100%; | ||
justify-content: center; | |||
} | } | ||
.container p | .container p * a{ | ||
max-width:270px; | max-width:270px; | ||
min-width:190px; | |||
flex: 1 1 calc(33.333% - 10px); /* 3 items per row with space for borders */ | flex: 1 1 calc(33.333% - 10px); /* 3 items per row with space for borders */ | ||
height: 64px; | height: 64px; | ||
font-weight: bold; | font-weight: bold; | ||
font-size:20px; | font-size:20px; | ||
Line 106: | Line 107: | ||
margin: 5px; /* Space between items */ | margin: 5px; /* Space between items */ | ||
text-decoration: none; | text-decoration: none; | ||
transition: all 0. | 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; | |||
} | } |