Main Page/styles.css: Difference between revisions

← Older edit

@@ Line 2: / Line 2: @@
 	font-size:1.6em;
 	font-weight: bold;
+	text-shadow: rgba(150, 150, 150, 0.6) 2px 1px 2px;
 }
 .text-container {
      position: relative;
      width: 100%; /* 可以根据需要调整 */
-     height: auto; /* 可以根据需要调整 */
+     height: 64px; /* 可以根据需要调整 */
      margin: 0 auto; /* 居中对齐 */
      overflow: hidden;
+    text-align: center;
 }
@@ Line 49: / Line 51: @@
          transform: translateX(0);
      }
+}
+/*什么*/
+.textbox {
+	margin: 0 auto;
+    max-width: 1320px;
+    height: auto;
+    padding: 20px 0;
+    background-color: rgba(255, 255, 255, 0.25);
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    box-shadow: 5px 5px 2px rgba(150, 150, 150, 0.6);
+}
+.left-child, .right-child {
+    background-color: rgba(240, 240, 240, 0.25);
+    flex: 1 1 100%;
+    box-sizing: border-box;
+    padding: 10px;
+}
+@media (min-width: 980px) {
+    .left-child,
+    .right-child {
+        flex: 1;
+    }
+    .right-child {
+		max-width:900px;
+    }
+    .left-child {
+        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;
 }