|
|
Line 1: |
Line 1: |
| <style>
| |
| :root {
| |
| --color-bg: #f9f9f9;
| |
| --color-text: #222;
| |
| --color-link: #0066cc;
| |
| --color-link-hover: #004999;
| |
| --color-box-bg: #fff;
| |
| --color-box-border: #ddd;
| |
| --box-shadow-default: 0 2px 5px rgba(0, 0, 0, 0.1);
| |
| --box-shadow-hover: 0 5px 15px rgba(0, 0, 0, 0.2);
| |
| --border-radius: 8px;
| |
| --gap: 2rem;
| |
| --max-width-item: 160px;
| |
| }
| |
|
| |
| body {
| |
| font-family: Arial, Helvetica, sans-serif;
| |
| background: var(--color-bg);
| |
| color: var(--color-text);
| |
| margin: 0;
| |
| padding: 2rem;
| |
| }
| |
|
| |
| h1 {
| |
| text-align: center;
| |
| margin-bottom: 2rem;
| |
| font-weight: 700;
| |
| }
| |
|
| |
| .gallery {
| |
| display: flex;
| |
| flex-wrap: wrap;
| |
| justify-content: center;
| |
| gap: var(--gap);
| |
| }
| |
|
| |
| .gallery-item {
| |
| background: var(--color-box-bg);
| |
| border: 1px solid var(--color-box-border);
| |
| border-radius: var(--border-radius);
| |
| width: var(--max-width-item);
| |
| padding: 1rem;
| |
| box-shadow: var(--box-shadow-default);
| |
| text-align: center;
| |
| transition: box-shadow 0.3s ease, transform 0.3s ease;
| |
| }
| |
|
| |
| .gallery-item:hover {
| |
| box-shadow: var(--box-shadow-hover);
| |
| transform: translateY(-4px);
| |
| }
| |
|
| |
| .gallery-item img {
| |
| max-width: 100%;
| |
| height: auto;
| |
| object-fit: contain;
| |
| border-radius: 4px;
| |
| margin-bottom: 0.75rem;
| |
| }
| |
|
| |
| .gallery-title {
| |
| font-weight: 700;
| |
| font-size: 1rem;
| |
| color: var(--color-link);
| |
| text-decoration: none;
| |
| display: block;
| |
| transition: color 0.3s ease;
| |
| }
| |
|
| |
| .gallery-title:hover {
| |
| text-decoration: underline;
| |
| color: var(--color-link-hover);
| |
| }
| |
|
| |
| @media (max-width: 400px) {
| |
| .gallery {
| |
| flex-direction: column;
| |
| align-items: center;
| |
| }
| |
|
| |
| .gallery-item {
| |
| width: 100%;
| |
| max-width: 300px;
| |
| }
| |
| }
| |
| </style>
| |
|
| |
| <h1>GGNET Wiki - Game Wikis</h1> | | <h1>GGNET Wiki - Game Wikis</h1> |
|
| |
|