mirror of
https://github.com/Cametendo/devil-fruit-encyclopedia.git
synced 2026-03-17 23:00:20 +01:00
added more fruits and images
This commit is contained in:
Cametendo
BIN
assets/hie-hie-no-mi.svg
Normal file
BIN
assets/hie-hie-no-mi.svg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 249 KiB |
109
index.html
109
index.html
@@ -5,79 +5,78 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Devil Fruit Encyclopedia</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<script src="script.js" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<header class="page-header">
|
||||
<p class="eyebrow">Grand Line Archive</p>
|
||||
<h1>Devil Fruit Encyclopedia</h1>
|
||||
<p>Quickstart UI mockup (no JavaScript yet).</p>
|
||||
<p class="hero-copy">
|
||||
A spoiler-heavy guide to famous Devil Fruits from One Piece, featuring
|
||||
canon names, users, powers, and fruit designs.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<main class="content">
|
||||
<section class="toolbar card">
|
||||
<h2>Fruit Collection</h2>
|
||||
<section class="overview card">
|
||||
<div>
|
||||
<h2>Known Fruits</h2>
|
||||
<p>
|
||||
Later, your JS can hook into these buttons and cards for add, update, and
|
||||
delete actions.
|
||||
This collection now uses real Devil Fruit names, current users, fruit
|
||||
classes, and lore details instead of placeholder cards.
|
||||
</p>
|
||||
<div class="toolbar-actions">
|
||||
<button type="button">+ Add Fruit</button>
|
||||
<button type="button">Update Selected</button>
|
||||
<button type="button" class="danger">Delete Selected</button>
|
||||
</div>
|
||||
<div class="stat-row" aria-label="Devil fruit stats">
|
||||
<div class="stat-pill">
|
||||
<span class="stat-label">Entries</span>
|
||||
<strong id="fruit-count">0</strong>
|
||||
</div>
|
||||
<div class="stat-pill">
|
||||
<span class="stat-label">Classes</span>
|
||||
<strong>Paramecia, Logia, Zoan</strong>
|
||||
</div>
|
||||
<div class="stat-pill">
|
||||
<span class="stat-label">Images</span>
|
||||
<strong>Canon fruit art</strong>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="fruit-grid" aria-label="Devil fruit list preview">
|
||||
<article class="fruit-card">
|
||||
<img
|
||||
src="https://picsum.photos/seed/gomu/400/260"
|
||||
alt="Placeholder image for Gomu Gomu no Mi"
|
||||
/>
|
||||
<div class="fruit-info">
|
||||
<h3>Gomu Gomu no Mi</h3>
|
||||
<p><strong>Type:</strong> Paramecia</p>
|
||||
<p><strong>User:</strong> Monkey D. Luffy</p>
|
||||
<p>Makes the user’s body rubber-like.</p>
|
||||
</div>
|
||||
</article>
|
||||
<section class="section-heading">
|
||||
<h2>Fruit Collection</h2>
|
||||
<p>
|
||||
Canon fruit images are loaded from the One Piece Wiki image CDN. Some
|
||||
entries also note previous users when that history matters.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<article class="fruit-card">
|
||||
<img
|
||||
src="https://picsum.photos/seed/mera/400/260"
|
||||
alt="Placeholder image for Mera Mera no Mi"
|
||||
/>
|
||||
<div class="fruit-info">
|
||||
<h3>Mera Mera no Mi</h3>
|
||||
<p><strong>Type:</strong> Logia</p>
|
||||
<p><strong>User:</strong> Portgas D. Ace / Sabo</p>
|
||||
<p>Allows creation and control of fire.</p>
|
||||
</div>
|
||||
</article>
|
||||
<section
|
||||
class="fruit-grid"
|
||||
id="fruit-grid"
|
||||
aria-label="Devil fruit encyclopedia entries"
|
||||
>
|
||||
</section>
|
||||
|
||||
<template id="fruit-card-template">
|
||||
<article class="fruit-card">
|
||||
<img
|
||||
src="https://picsum.photos/seed/ope/400/260"
|
||||
alt="Placeholder image for Ope Ope no Mi"
|
||||
/>
|
||||
<img />
|
||||
<div class="fruit-info">
|
||||
<h3>Ope Ope no Mi</h3>
|
||||
<p><strong>Type:</strong> Paramecia</p>
|
||||
<p><strong>User:</strong> Trafalgar D. Water Law</p>
|
||||
<p>Creates a ROOM where the user can manipulate objects.</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="fruit-card">
|
||||
<img
|
||||
src="https://picsum.photos/seed/yami/400/260"
|
||||
alt="Placeholder image for Yami Yami no Mi"
|
||||
/>
|
||||
<div class="fruit-info">
|
||||
<h3>Yami Yami no Mi</h3>
|
||||
<p><strong>Type:</strong> Logia</p>
|
||||
<p><strong>User:</strong> Marshall D. Teach</p>
|
||||
<p>Manipulates darkness and gravity-like pull.</p>
|
||||
<div class="title-row">
|
||||
<h3></h3>
|
||||
<span class="fruit-type"></span>
|
||||
</div>
|
||||
<p class="subtitle"></p>
|
||||
<ul class="fruit-meta"></ul>
|
||||
<p class="description"></p>
|
||||
<p class="extra-detail"></p>
|
||||
<a class="source-link" target="_blank" rel="noreferrer">Source</a>
|
||||
</div>
|
||||
</article>
|
||||
</template>
|
||||
<section class="credits card">
|
||||
<p>
|
||||
Images and lore details are based on the One Piece Wiki fruit pages.
|
||||
</p>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
|
||||
259
script.js
259
script.js
@@ -0,0 +1,259 @@
|
||||
const devilFruits = [
|
||||
{
|
||||
name: "Gomu Gomu no Mi",
|
||||
alias: "True name: Hito Hito no Mi, Model: Nika",
|
||||
type: "Mythical Zoan",
|
||||
user: "Monkey D. Luffy",
|
||||
image:
|
||||
"https://static.wikia.nocookie.net/onepiece/images/1/12/Gomu_Gomu_no_Mi_Infobox.png/revision/latest?cb=20221108072550",
|
||||
description:
|
||||
"Grants a rubber-like body and, after awakening, allows Luffy to fight with extreme freedom and cartoonish physicality.",
|
||||
detail:
|
||||
"The World Government concealed its real identity for centuries because of its connection to the Sun God Nika.",
|
||||
source: "https://onepiece.fandom.com/wiki/Gomu_Gomu_no_Mi",
|
||||
meta: [
|
||||
["Category", "Mythical Zoan disguised as Paramecia"],
|
||||
["Current user", "Monkey D. Luffy"],
|
||||
["Notable trait", "Elastic body, explosive awakening versatility"],
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Mera Mera no Mi",
|
||||
alias: "Flame-Flame Fruit",
|
||||
type: "Logia",
|
||||
user: "Portgas D. Ace, later Sabo",
|
||||
image:
|
||||
"https://static.wikia.nocookie.net/onepiece/images/8/8c/Mera_Mera_no_Mi_Infobox.png/revision/latest?cb=20240710204632",
|
||||
description:
|
||||
"Lets the user create, control, and become fire, making it one of the best-known offensive Logias.",
|
||||
detail:
|
||||
"After Ace's death, the fruit reincarnated and was won by Sabo in Dressrosa's Corrida Colosseum tournament.",
|
||||
source: "https://onepiece.fandom.com/wiki/Mera_Mera_no_Mi",
|
||||
meta: [
|
||||
["Category", "Logia"],
|
||||
["Current user", "Sabo"],
|
||||
["Previous user", "Portgas D. Ace"],
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Ope Ope no Mi",
|
||||
alias: "Op-Op Fruit",
|
||||
type: "Paramecia",
|
||||
user: "Trafalgar D. Water Law",
|
||||
image:
|
||||
"https://static.wikia.nocookie.net/onepiece/images/0/0e/Ope_Ope_no_Mi_Infobox.png/revision/latest?cb=20210409181034",
|
||||
description:
|
||||
"Creates a spherical ROOM where the user can perform impossible surgeries, spatial cuts, and object manipulation.",
|
||||
detail:
|
||||
"It is called the Ultimate Devil Fruit by some because it can perform the Perennial Youth Operation at the cost of the user's life.",
|
||||
source: "https://onepiece.fandom.com/wiki/Ope_Ope_no_Mi",
|
||||
meta: [
|
||||
["Category", "Paramecia"],
|
||||
["Current user", "Trafalgar Law"],
|
||||
["Signature move", "ROOM"],
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Yami Yami no Mi",
|
||||
alias: "Dark-Dark Fruit",
|
||||
type: "Logia",
|
||||
user: "Marshall D. Teach",
|
||||
image:
|
||||
"https://static.wikia.nocookie.net/onepiece/images/f/f5/Yami_Yami_no_Mi_Infobox.png/revision/latest?cb=20240627010252",
|
||||
description:
|
||||
"Controls darkness with a gravity-like pull that absorbs attacks, drags targets in, and can suppress other Devil Fruit powers through contact.",
|
||||
detail:
|
||||
"Teach hunted this fruit for years before betraying the Whitebeard Pirates to claim it.",
|
||||
source: "https://onepiece.fandom.com/wiki/Yami_Yami_no_Mi",
|
||||
meta: [
|
||||
["Category", "Logia"],
|
||||
["Current user", "Marshall D. Teach"],
|
||||
["Notable trait", "Can nullify other abilities on contact"],
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Bara Bara no Mi",
|
||||
alias: "Chop-Chop Fruit",
|
||||
type: "Paramecia",
|
||||
user: "Buggy",
|
||||
image:
|
||||
"https://static.wikia.nocookie.net/onepiece/images/9/9c/Bara_Bara_no_Mi_Infobox.png/revision/latest?cb=20240421082610",
|
||||
description:
|
||||
"Allows the user's body to split into floating pieces while keeping control over each part.",
|
||||
detail:
|
||||
"Buggy is effectively immune to sword slashes, which made him a natural counter to cutting attacks long before he became an Emperor.",
|
||||
source: "https://onepiece.fandom.com/wiki/Bara_Bara_no_Mi",
|
||||
meta: [
|
||||
["Category", "Paramecia"],
|
||||
["Current user", "Buggy"],
|
||||
["Defense", "Natural resistance to slicing attacks"],
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Gura Gura no Mi",
|
||||
alias: "Tremor-Tremor Fruit",
|
||||
type: "Paramecia",
|
||||
user: "Marshall D. Teach",
|
||||
image:
|
||||
"https://static.wikia.nocookie.net/onepiece/images/e/e3/Gura_Gura_no_Mi_Infobox.png/revision/latest?cb=20251002184350",
|
||||
description:
|
||||
"Creates devastating shockwaves and quakes through the air, sea, and ground on a massive scale.",
|
||||
detail:
|
||||
"Formerly wielded by Edward Newgate, it was described as having the power to destroy the world.",
|
||||
source: "https://onepiece.fandom.com/wiki/Gura_Gura_no_Mi",
|
||||
meta: [
|
||||
["Category", "Paramecia"],
|
||||
["Current user", "Marshall D. Teach"],
|
||||
["Previous user", "Edward Newgate"],
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Hana Hana no Mi",
|
||||
alias: "Flower-Flower Fruit",
|
||||
type: "Paramecia",
|
||||
user: "Nico Robin",
|
||||
image:
|
||||
"https://static.wikia.nocookie.net/onepiece/images/2/21/Hana_Hana_no_Mi_Infobox.png/revision/latest?cb=20191228120242",
|
||||
description:
|
||||
"Sprouts replicas of the user's body parts on surfaces, enemies, or even in midair, enabling grapples, mobility, and giant limb techniques.",
|
||||
detail:
|
||||
"Robin later extends the fruit into full-body manifestations such as Demonio Fleur.",
|
||||
source: "https://onepiece.fandom.com/wiki/Hana_Hana_no_Mi",
|
||||
meta: [
|
||||
["Category", "Paramecia"],
|
||||
["Current user", "Nico Robin"],
|
||||
["Utility", "Crowd control, scouting, traversal"],
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Hie Hie no Mi",
|
||||
alias: "Ice-Ice Fruit",
|
||||
type: "Logia",
|
||||
user: "Kuzan",
|
||||
image:
|
||||
"assets/hie-hie-no-mi.svg",
|
||||
description:
|
||||
"Lets the user create, control, and become ice, including freezing oceans and opponents over huge areas.",
|
||||
detail:
|
||||
"Kuzan's ten-day duel with Sakazuki permanently changed Punk Hazard's climate.",
|
||||
source: "https://onepiece.fandom.com/wiki/Hie_Hie_no_Mi",
|
||||
meta: [
|
||||
["Category", "Logia"],
|
||||
["Current user", "Kuzan"],
|
||||
["Scale", "Can freeze the sea and reshape battlefields"],
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Uo Uo no Mi, Model: Seiryu",
|
||||
alias: "Fish-Fish Fruit, Azure Dragon Model",
|
||||
type: "Mythical Zoan",
|
||||
user: "Kaido",
|
||||
image:
|
||||
"https://static.wikia.nocookie.net/onepiece/images/f/f9/Uo_Uo_no_Mi%2C_Model_Seiryu_Infobox.png/revision/latest?cb=20211204205430",
|
||||
description:
|
||||
"Transforms the user into an enormous azure dragon with flight, flame clouds, wind blades, and elemental attacks.",
|
||||
detail:
|
||||
"Vegapunk later used Kaido's lineage factor to create an artificial copy eaten by Momonosuke.",
|
||||
source: "https://onepiece.fandom.com/wiki/Uo_Uo_no_Mi,_Model:_Seiryu",
|
||||
meta: [
|
||||
["Category", "Mythical Zoan"],
|
||||
["Current user", "Kaido"],
|
||||
["Related copy", "Artificial version eaten by Momonosuke"],
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Mochi Mochi no Mi",
|
||||
alias: "Mochi-Mochi Fruit",
|
||||
type: "Special Paramecia",
|
||||
user: "Charlotte Katakuri",
|
||||
image:
|
||||
"https://static.wikia.nocookie.net/onepiece/images/2/2c/Mochi_Mochi_no_Mi_Infobox.png/revision/latest?cb=20250826143835",
|
||||
description:
|
||||
"Produces and manipulates mochi with a body that behaves much like a Logia, especially when paired with advanced Observation Haki.",
|
||||
detail:
|
||||
"It was initially presented as a Logia before being reclassified as a Special Paramecia.",
|
||||
source: "https://onepiece.fandom.com/wiki/Mochi_Mochi_no_Mi",
|
||||
meta: [
|
||||
["Category", "Special Paramecia"],
|
||||
["Current user", "Charlotte Katakuri"],
|
||||
["Combat style", "Shape-shifting mochi body and sticky restraint"],
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Ito Ito no Mi",
|
||||
alias: "String-String Fruit",
|
||||
type: "Paramecia",
|
||||
user: "Donquixote Doflamingo",
|
||||
image:
|
||||
"https://static.wikia.nocookie.net/onepiece/images/a/ae/Ito_Ito_no_Mi_Infobox.png/revision/latest?cb=20151220070449",
|
||||
description:
|
||||
"Creates razor-thin strings for slicing, puppeteering, movement through the sky, and enormous techniques like the Birdcage.",
|
||||
detail:
|
||||
"Doflamingo used awakened strings to turn buildings and streets in Dressrosa into attack vectors.",
|
||||
source: "https://onepiece.fandom.com/wiki/Ito_Ito_no_Mi",
|
||||
meta: [
|
||||
["Category", "Paramecia"],
|
||||
["Current user", "Donquixote Doflamingo"],
|
||||
["Signature move", "Birdcage"],
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Mero Mero no Mi",
|
||||
alias: "Love-Love Fruit",
|
||||
type: "Paramecia",
|
||||
user: "Boa Hancock",
|
||||
image:
|
||||
"https://static.wikia.nocookie.net/onepiece/images/9/98/Mero_Mero_no_Mi_Infobox.png/revision/latest?cb=20230306202058",
|
||||
description:
|
||||
"Turns targets to stone when they are captivated by the user, and also enables direct petrification through kicks and projectiles.",
|
||||
detail:
|
||||
"Its lethality comes from both Hancock's beauty and the fruit's ability to petrify without relying on one specific attack pattern.",
|
||||
source: "https://onepiece.fandom.com/wiki/Mero_Mero_no_Mi",
|
||||
meta: [
|
||||
["Category", "Paramecia"],
|
||||
["Current user", "Boa Hancock"],
|
||||
["Threat", "Mass petrification against susceptible targets"],
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const fruitGrid = document.querySelector("#fruit-grid");
|
||||
const template = document.querySelector("#fruit-card-template");
|
||||
const fruitCount = document.querySelector("#fruit-count");
|
||||
|
||||
fruitCount.textContent = String(devilFruits.length);
|
||||
|
||||
for (const fruit of devilFruits) {
|
||||
const card = template.content.firstElementChild.cloneNode(true);
|
||||
const image = card.querySelector("img");
|
||||
const title = card.querySelector("h3");
|
||||
const type = card.querySelector(".fruit-type");
|
||||
const subtitle = card.querySelector(".subtitle");
|
||||
const meta = card.querySelector(".fruit-meta");
|
||||
const description = card.querySelector(".description");
|
||||
const detail = card.querySelector(".extra-detail");
|
||||
const source = card.querySelector(".source-link");
|
||||
|
||||
image.src = fruit.image;
|
||||
image.alt = `${fruit.name} Devil Fruit`;
|
||||
image.loading = "lazy";
|
||||
image.decoding = "async";
|
||||
image.referrerPolicy = "no-referrer";
|
||||
title.textContent = fruit.name;
|
||||
type.textContent = fruit.type;
|
||||
subtitle.textContent = fruit.alias;
|
||||
description.textContent = fruit.description;
|
||||
detail.textContent = fruit.detail;
|
||||
source.href = fruit.source;
|
||||
source.textContent = "Open wiki entry";
|
||||
|
||||
for (const [label, value] of fruit.meta) {
|
||||
const item = document.createElement("li");
|
||||
const strong = document.createElement("strong");
|
||||
strong.textContent = `${label}:`;
|
||||
item.append(strong, ` ${value}`);
|
||||
meta.append(item);
|
||||
}
|
||||
|
||||
fruitGrid.append(card);
|
||||
}
|
||||
|
||||
248
styles.css
248
styles.css
@@ -1,5 +1,14 @@
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
--bg: #081018;
|
||||
--bg-accent: #101b27;
|
||||
--panel: rgba(10, 21, 35, 0.9);
|
||||
--panel-border: rgba(141, 182, 214, 0.18);
|
||||
--text: #edf4ff;
|
||||
--muted: #b6c7dd;
|
||||
--highlight: #8fd3ff;
|
||||
--highlight-strong: #ffd36e;
|
||||
--shadow: 0 24px 60px rgba(0, 0, 0, 0.38);
|
||||
}
|
||||
|
||||
* {
|
||||
@@ -8,111 +17,232 @@
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
background: #0f1320;
|
||||
color: #f0f4ff;
|
||||
min-height: 100vh;
|
||||
font-family: "Trebuchet MS", "Segoe UI", sans-serif;
|
||||
line-height: 1.5;
|
||||
color: var(--text);
|
||||
background:
|
||||
radial-gradient(circle at top, rgba(71, 134, 181, 0.3), transparent 28%),
|
||||
linear-gradient(180deg, #102133 0%, var(--bg) 55%, #050b11 100%);
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
padding: 4.5rem 1.2rem 3rem;
|
||||
text-align: center;
|
||||
padding: 2.5rem 1rem 2rem;
|
||||
background: #171d2d;
|
||||
border-bottom: 1px solid #2f3953;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin: 0;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.32rem;
|
||||
font-size: 0.76rem;
|
||||
color: var(--highlight);
|
||||
}
|
||||
|
||||
.page-header h1 {
|
||||
margin: 0;
|
||||
margin: 0.65rem 0 0;
|
||||
font-size: clamp(2.5rem, 5vw, 4.75rem);
|
||||
line-height: 0.95;
|
||||
}
|
||||
|
||||
.page-header p {
|
||||
margin: 0.5rem 0 0;
|
||||
color: #c6d3ef;
|
||||
.hero-copy {
|
||||
width: min(46rem, 92%);
|
||||
margin: 1rem auto 0;
|
||||
color: var(--muted);
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: min(1080px, 94%);
|
||||
margin: 1.5rem auto 2rem;
|
||||
width: min(1180px, calc(100% - 2rem));
|
||||
margin: 0 auto 2.5rem;
|
||||
display: grid;
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
.card,
|
||||
.fruit-card,
|
||||
.section-heading {
|
||||
border: 1px solid var(--panel-border);
|
||||
background: var(--panel);
|
||||
backdrop-filter: blur(10px);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.card,
|
||||
.section-heading {
|
||||
border-radius: 22px;
|
||||
padding: 1.2rem 1.35rem;
|
||||
}
|
||||
|
||||
.overview {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: #161d2d;
|
||||
border: 1px solid #2f3953;
|
||||
border-radius: 12px;
|
||||
padding: 1rem 1.25rem;
|
||||
.overview h2,
|
||||
.section-heading h2 {
|
||||
margin: 0 0 0.35rem;
|
||||
}
|
||||
|
||||
.toolbar h2 {
|
||||
margin: 0 0 0.25rem;
|
||||
.overview p,
|
||||
.section-heading p,
|
||||
.credits p {
|
||||
margin: 0;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.toolbar p {
|
||||
margin: 0 0 0.75rem;
|
||||
color: #c6d3ef;
|
||||
}
|
||||
|
||||
.toolbar-actions {
|
||||
.stat-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
gap: 0.75rem;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
button {
|
||||
border: 1px solid #4b5c85;
|
||||
background: #263453;
|
||||
color: #f0f4ff;
|
||||
padding: 0.5rem 0.8rem;
|
||||
border-radius: 8px;
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
.stat-pill {
|
||||
min-width: 10.5rem;
|
||||
padding: 0.85rem 1rem;
|
||||
border-radius: 16px;
|
||||
background: rgba(143, 211, 255, 0.08);
|
||||
border: 1px solid rgba(143, 211, 255, 0.16);
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background: #32456d;
|
||||
}
|
||||
|
||||
button.danger {
|
||||
background: #593040;
|
||||
border-color: #80465d;
|
||||
}
|
||||
|
||||
button.danger:hover {
|
||||
background: #6c394d;
|
||||
.stat-label {
|
||||
display: block;
|
||||
margin-bottom: 0.25rem;
|
||||
color: var(--muted);
|
||||
font-size: 0.82rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08rem;
|
||||
}
|
||||
|
||||
.fruit-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||
grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.fruit-card {
|
||||
background: #161d2d;
|
||||
border: 1px solid #2f3953;
|
||||
border-radius: 12px;
|
||||
border-radius: 22px;
|
||||
overflow: hidden;
|
||||
display: grid;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.fruit-card img {
|
||||
width: 100%;
|
||||
height: 160px;
|
||||
aspect-ratio: 4 / 3;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
background: linear-gradient(135deg, rgba(255, 211, 110, 0.16), rgba(143, 211, 255, 0.08));
|
||||
}
|
||||
|
||||
.fruit-info {
|
||||
padding: 0.8rem 0.9rem 1rem;
|
||||
display: grid;
|
||||
gap: 0.75rem;
|
||||
padding: 1rem 1rem 1.1rem;
|
||||
}
|
||||
|
||||
.fruit-info h3 {
|
||||
margin: 0 0 0.45rem;
|
||||
font-size: 1.05rem;
|
||||
.title-row {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.fruit-info p {
|
||||
margin: 0.2rem 0;
|
||||
color: #dbe4fa;
|
||||
font-size: 0.95rem;
|
||||
.title-row h3 {
|
||||
margin: 0;
|
||||
font-size: 1.18rem;
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
.fruit-type {
|
||||
flex-shrink: 0;
|
||||
padding: 0.28rem 0.55rem;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 211, 110, 0.16);
|
||||
color: var(--highlight-strong);
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05rem;
|
||||
}
|
||||
|
||||
.subtitle,
|
||||
.description,
|
||||
.extra-detail {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: var(--highlight);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.description,
|
||||
.extra-detail {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.fruit-meta {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: grid;
|
||||
gap: 0.42rem;
|
||||
}
|
||||
|
||||
.fruit-meta li {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.fruit-meta strong {
|
||||
color: var(--highlight-strong);
|
||||
}
|
||||
|
||||
.source-link {
|
||||
width: fit-content;
|
||||
color: var(--highlight);
|
||||
text-decoration: none;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.source-link:hover,
|
||||
.source-link:focus-visible {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@media (max-width: 820px) {
|
||||
.overview {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.stat-row {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
.page-header {
|
||||
padding-top: 3.4rem;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: min(100% - 1rem, 1180px);
|
||||
}
|
||||
|
||||
.card,
|
||||
.section-heading,
|
||||
.fruit-info {
|
||||
padding-left: 0.95rem;
|
||||
padding-right: 0.95rem;
|
||||
}
|
||||
|
||||
.fruit-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user