Roovet Articles
Main Page: Difference between revisions
mNo edit summary |
mNo edit summary |
||
| Line 1: | Line 1: | ||
<html> | <html> | ||
<style> | <style> | ||
/* | /* ========= Roovet Articles — Main Page (inline, CSP-safe) ========= */ | ||
.rv-root{--rv-rose:#ff3b5b;--rv-orange:#ff8a3d;--rv-ink:#1f2937;--rv-muted:#6b7280;--rv-line:#e5e7eb;--rv-card:#ffffff;--rv-bg:#fafafb;font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";color:var(--rv-ink);box-sizing:border-box} | |||
.rv-root *{box-sizing:inherit} | |||
.rv-wrap{max-width:1040px;margin:0 auto;padding:0 14px} | |||
a{color:#e11d48;text-decoration:none} | |||
a:hover{text-decoration:underline} | |||
/* | /* ===== HERO ===== */ | ||
. | .rv-hero{position:relative;isolation:isolate;margin:8px auto 18px;border:1px solid #d0d7de;border-radius:14px;background:linear-gradient(180deg,#ffffff, #fff7f8 60%, #fff 100%);overflow:hidden} | ||
.rv-hero:before{content:"";position:absolute;inset:-20% -10% auto -10%;height:520px;background: | |||
radial-gradient(40% 60% at 20% 30%, rgba(255,59,91,.20), transparent 65%), | |||
radial-gradient(40% 60% at 80% 20%, rgba(255,138,61,.18), transparent 70%), | |||
conic-gradient(from 180deg at 60% 40%, rgba(255,59,91,.20), rgba(255,138,61,.12), rgba(255,59,91,.20)); | |||
filter:blur(28px);z-index:-1;opacity:.9} | |||
.rv-hero .inner{padding:36px 20px 28px;text-align:center} | |||
.rv-eyebrow{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#6b7280;margin-bottom:8px} | |||
.rv-title{font-weight:800;font-size:42px;line-height:1.15;margin:.1em auto .25em;letter-spacing:.2px} | |||
.rv-title .grad{background:linear-gradient(90deg,var(--rv-rose),var(--rv-orange));-webkit-background-clip:text;background-clip:text;color:transparent} | |||
.rv-tag{max-width:780px;margin:0 auto 16px;color:#374151;font-size:18px} | |||
.rv-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:14px} | |||
.rv-btn{display:inline-block;padding:.65em 1.05em;border:1px solid #c7ccd1;border-radius:10px;background:#fff;color:#111827;text-decoration:none;font-weight:600} | |||
.rv-btn:hover{background:#f6f7f8} | |||
.rv-btn--primary{background:linear-gradient(90deg,var(--rv-rose),var(--rv-orange));border-color:#e11d48;color:#fff} | |||
.rv-btn--primary:hover{filter:brightness(.96)} | |||
/* Search in hero */ | |||
.rv-search{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:14px auto 2px;max-width:720px} | |||
.rv-input{flex:1 1 420px;min-width:240px;border:1px solid #cfd5db;border-radius:10px;padding:.62em .85em;background:#fff} | |||
.rv-search-btn{border:1px solid #cfd5db;border-radius:10px;background:#fff;padding:.62em .95em;cursor:pointer} | |||
.rv-search-btn:hover{background:#f6f7f8} | |||
/* Quick chips */ | |||
.rv-chips{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:10px 0 2px} | |||
.rv-chip{display:inline-block;padding:.38em .7em;border:1px dashed #e3e6ea;border-radius:999px;color:#374151;background:#fff} | |||
.rv-chip:hover{background:#fafbfc} | |||
@media (max-width:768px){ | |||
.rv-title{font-size:30px} | |||
.rv-tag{font-size:16px} | |||
} | } | ||
@media (prefers-reduced-motion:reduce){.rv-hero:before{animation:none}} | |||
@media ( | |||
/* | /* ===== CTA GRID (4) ===== */ | ||
. | .rv-cta{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:8px 0 18px} | ||
.rv-card{border:1px solid #d0d7de;border-radius:12px;background:var(--rv-card);padding:14px 14px 12px} | |||
.rv-card h3{margin:.1em 0 .25em;font-size:18px} | |||
} | .rv-icon{display:inline-block;width:28px;height:28px;border-radius:8px;background:linear-gradient(90deg,var(--rv-rose),var(--rv-orange));margin-right:8px;vertical-align:-6px} | ||
@media (max-width: | .rv-card p{margin:.2em 0 .7em;color:#374151} | ||
.rv-linkbtn{display:inline-block;padding:.5em .8em;border:1px solid #cfd5db;border-radius:10px;background:#fff;text-decoration:none} | |||
.rv-linkbtn:hover{background:#f6f7f8} | |||
@media (max-width:960px){.rv-cta{grid-template-columns:1fr 1fr}} | |||
@media (max-width:560px){.rv-cta{grid-template-columns:1fr}} | |||
. | /* ===== TWO COLUMN ===== */ | ||
. | .rv-columns{display:grid;grid-template-columns:2fr 1fr;gap:14px;margin:0 0 20px} | ||
. | @media (max-width:980px){.rv-columns{grid-template-columns:1fr}} | ||
. | .box{border:1px solid #d0d7de;border-radius:12px;background:#fff;overflow:hidden} | ||
. | .box-h{padding:.7em .95em;border-bottom:1px solid #eef1f4;font-weight:700} | ||
. | .h-green{background:#eef7f0} | ||
. | .h-pink{background:#fff1f4} | ||
. | .h-blue{background:#eef3fb} | ||
. | .h-gray{background:#f6f7f8} | ||
.box-c{padding:.9em 1em} | |||
.muted{color:var(--rv-muted)} | |||
.footer-note{color:#6b7280;text-align:center;margin:10px 0 26px} | |||
/* | /* ===== UTIL ===== */ | ||
. | .kpis{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:10px 0 0} | ||
.kpi{padding:.35em .7em;border:1px solid #e5e7eb;border-radius:999px;background:#fff;font-size:13px;color:#374151} | |||
. | |||
</style> | </style> | ||
<div class=" | <div class="rv-root"> | ||
<div class="rv-wrap"> | |||
<!-- ============== HERO ============== --> | |||
<header class="rv-hero"> | |||
<div class="inner"> | |||
<div class="rv-eyebrow">ROOVET ARTICLES</div> | |||
<h1 class="rv-title"> | |||
Explore <span class="grad">unique people, businesses & stories</span> | |||
</h1> | |||
<p class="rv-tag">Curated, verifiable articles built for a better knowledge graph.</p> | |||
<!-- Search (native Special:Search) --> | |||
<form class="rv-search" action="/index.php" method="get"> | |||
<input type="hidden" name="title" value="Special:Search"> | |||
<input type="hidden" name="fulltext" value="1"> | |||
<input class="rv-input" type="search" name="search" placeholder="Search Roovet Articles"> | |||
<button class="rv-search-btn" type="submit">Search</button> | |||
</form> | |||
<div class="rv-actions"> | |||
<a class="rv-btn rv-btn--primary" href="/Roovet_Articles:Requested_articles">Request an article</a> | |||
<a class="rv-btn" href="/Special:NewPages">New pages</a> | |||
<a class="rv-btn" href="/Special:Random">Random article</a> | |||
</div> | |||
<div class="rv-chips"> | |||
<a class="rv-chip" href="/Special:RecentChanges">Recent changes</a> | |||
<a class="rv-chip" href="/Special:NewPages">Fresh pages</a> | |||
<a class="rv-chip" href="/Special:ActiveUsers">Active editors</a> | |||
</div> | |||
<div class="kpis"> | |||
<span class="kpi">Open knowledge</span> | |||
<span class="kpi">Fact-checked</span> | |||
<span class="kpi">Community-built</span> | |||
</div> | |||
</div> | |||
</header> | |||
<!-- | <!-- ============== CTA PILLARS (4) ============== --> | ||
< | <section class="rv-cta" aria-label="Explore pillars"> | ||
<div class=" | <div class="rv-card"> | ||
< | <h3><span class="rv-icon"></span>People</h3> | ||
<p>Biographies of creators, founders, leaders, and overlooked pioneers.</p> | |||
<a class="rv-linkbtn" href="/Category:People">Browse people</a> | |||
</div> | |||
<div class="rv-card"> | |||
</ | <h3><span class="rv-icon"></span>Businesses</h3> | ||
<p>Profiles of companies, startups, labels, and local legends.</p> | |||
<a class="rv-linkbtn" href="/Category:Businesses">Browse businesses</a> | |||
</div> | |||
<div class="rv-card"> | |||
<h3><span class="rv-icon"></span>Organizations</h3> | |||
<p>Nonprofits, clubs, and communities building real impact.</p> | |||
<a class="rv-linkbtn" href="/Category:Organizations">Browse orgs</a> | |||
</div> | |||
<div class="rv-card"> | |||
<h3><span class="rv-icon"></span>Stories</h3> | |||
<p>Original narratives and cultural snapshots across the Roovet network.</p> | |||
<a class="rv-linkbtn" href="/Category:Stories">Browse stories</a> | |||
</div> | </div> | ||
</section> | |||
<div class=" | <!-- ============== TWO COLUMNS ============== --> | ||
<section class="rv-columns"> | |||
<!-- LEFT --> | |||
<div> | |||
< | <div class="box"> | ||
<div class="box-h h-green">From today's featured article</div> | |||
< | <div class="box-c"> | ||
</ | <p class="muted"><em>Featured article placeholder.</em> Add a short 2–3 sentence summary and link to the full piece.</p> | ||
<p><a href="/Special:Random">Discover a random article →</a></p> | |||
</div> | |||
</div> | </div> | ||
<div class="box"> | |||
<div class="box-h h-pink">Did you know…</div> | |||
<div class="box-c"> | |||
<ul> | |||
<li>that <a href="/Respekt_Ova">Respekt Ova</a> started as a local project before gaining wider attention?</li> | |||
<li>that <a href="/Community_First_Credit_Union">Community First Credit Union</a> serves hundreds of thousands of members in Northeast Florida?</li> | |||
<li>that the short film <a href="/First_Light_-_Short_Film">First Light – Short Film</a> premiered online before any festival run?</li> | |||
</ul> | |||
<a href="/Special:Random">More random articles →</a> | |||
</ | </div> | ||
</div> | </div> | ||
</div> | </div> | ||
<div class=" | <!-- RIGHT --> | ||
<aside> | |||
<div class="box"> | |||
<div class="box-h h-blue">In the news</div> | |||
<div class="box-c"> | |||
<ul> | |||
<li>Latest edits: <a href="/Special:RecentChanges">Recent changes</a></li> | |||
<li>New pages: <a href="/Special:NewPages">New pages</a></li> | |||
<li>Requests: <a href="/Roovet_Articles:Requested_articles">Requested articles</a></li> | |||
</ul> | |||
< | </div> | ||
</div> | </div> | ||
<div class="box"> | |||
<div class="box-h h-gray">New articles</div> | |||
<div class="box-c"> | |||
<ul> | |||
<li><a href="/Respekt_Ova">Respekt Ova</a></li> | |||
<li><a href="/Shagusto">Shagusto</a></li> | |||
<li><a href="/Pamela_Rai_Menges">Pamela Rai Menges</a></li> | |||
<li><a href="/Ariana_The_Elementalist">Ariana The Elementalist</a></li> | |||
<li><a href="/Roovet_Records">Roovet Records</a></li> | |||
</ul> | |||
<a href="/Special:NewPages">See more →</a> | |||
</div> | |||
</div> | |||
</aside> | |||
</section> | |||
<!-- ============== ABOUT ============== --> | |||
<section class="box"> | |||
<div class="box-h h-gray">About Roovet Articles</div> | |||
<div class="box-c"> | |||
Roovet Articles is a curated encyclopedia of people, businesses, organizations, and stories that are often overlooked. | |||
Read <a href="/Roovet_Articles:About">About</a>, review | |||
<a href="/Roovet_Articles:Content_guidelines">content guidelines</a>, and see | |||
<a href="/Roovet_Articles:Rights">rights & licensing</a>. | |||
</div> | |||
</section> | |||
<p class="footer-note">Classic encyclopedia feel, modern hero polish, MediaWiki-safe.</p> | |||
</div> | </div> | ||
</div> | |||
</div | |||
</html> | </html> | ||
Revision as of 20:49, 1 November 2025
ROOVET ARTICLES
Explore unique people, businesses & stories
Curated, verifiable articles built for a better knowledge graph.
Open knowledge
Fact-checked
Community-built
From today's featured article
Featured article placeholder. Add a short 2–3 sentence summary and link to the full piece.
Did you know…
- that Respekt Ova started as a local project before gaining wider attention?
- that Community First Credit Union serves hundreds of thousands of members in Northeast Florida?
- that the short film First Light – Short Film premiered online before any festival run?
About Roovet Articles
Roovet Articles is a curated encyclopedia of people, businesses, organizations, and stories that are often overlooked.
Read About, review
content guidelines, and see
rights & licensing.
Roovet Articles Discovery
Explore verified, featured, and recently improved knowledge.
Roovet Articles now includes stronger article tools, review signals, source-quality badges, and dynamic discovery sections inspired by modern encyclopedia browsing.
Featured now
Explore a random article
Featured articles
View allNo featured articles found yet.
Verified articles
View allNo verified articles found yet.
Recently improved
Recent changesMore articles will appear here as the library grows.
New pages
New pagesMore articles will appear here as the library grows.