Main Page: Difference between revisions
Jump to navigation
Jump to search
mNo edit summary |
mNo edit summary |
||
| (22 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
<html> | |||
< | <style> | ||
< | /* ========================================================== | ||
Roovet Articles — Main Page (self-contained & wide) | |||
Safe CSS (no external assets). Paste into Main_Page. | |||
========================================================== */ | |||
/* 0) Make the page container wider (Vector/Minerva friendly) */ | |||
.mw-page-container { max-width: 1400px !important; } | |||
.mw-content-container, .mw-body { max-width: 1280px !important; } | |||
/* 1) Scoped base */ | |||
.rv-root{--rose:#ff3b5b;--orange:#ff8a3d;--ink:#1f2937;--muted:#6b7280;--line:#e5e7eb;--card:#fff;--bg:#fafafb; | |||
{ | font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji"; | ||
color:var(--ink)} | |||
.rv-root *, .rv-root *::before, .rv-root *::after{box-sizing:border-box} | |||
.rv-wrap{max-width:1280px;margin:0 auto;padding:0 18px} | |||
/* 2) HERO */ | |||
.rv-hero{position:relative;isolation:isolate;margin:10px auto 24px;border:1px solid #d0d7de;border-radius:16px; | |||
background:linear-gradient(180deg,#ffffff,#fff7f8 60%,#fff);overflow:hidden} | |||
.rv-hero::before{content:"";position:absolute;inset:-18% -6% auto -6%;height:640px;z-index:-1;opacity:.9; | |||
background: | |||
radial-gradient(40% 60% at 18% 28%, rgba(255,59,91,.22), transparent 65%), | |||
radial-gradient(36% 58% at 82% 22%, rgba(255,138,61,.18), transparent 70%), | |||
conic-gradient(from 180deg at 60% 40%, rgba(255,59,91,.22), rgba(255,138,61,.12), rgba(255,59,91,.22)); | |||
filter:blur(28px)} | |||
.rv-hero .inner{padding:48px 24px 32px;text-align:center} | |||
.rv-eyebrow{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:8px} | |||
.rv-title{font-weight:800;font-size:clamp(30px,4.2vw,56px);line-height:1.14;margin:.05em auto .25em} | |||
.rv-title .grad{background:linear-gradient(90deg,var(--rose),var(--orange));-webkit-background-clip:text;background-clip:text;color:transparent} | |||
.rv-tag{max-width:900px;margin:0 auto 18px;color:#374151;font-size:18px} | |||
.rv-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:16px} | |||
/* 3) Buttons + search */ | |||
.rv-btn{display:inline-block;padding:.7em 1.1em;border:1px solid #c7ccd1;border-radius:12px;background:#fff; | |||
color:#111827;text-decoration:none;font-weight:600} | |||
.rv-btn:hover{background:#f6f7f8} | |||
.rv-btn--primary{background:linear-gradient(90deg,var(--rose),var(--orange));border-color:#e11d48;color:#fff} | |||
.rv-btn--primary:hover{filter:brightness(.96)} | |||
.rv-search{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:16px auto 6px;max-width:820px} | |||
.rv-input{flex:1 1 520px;min-width:260px;border:1px solid #cfd5db;border-radius:12px;padding:.7em 1em;background:#fff} | |||
.rv-search-btn{border:1px solid #cfd5db;border-radius:12px;background:#fff;padding:.7em 1em;cursor:pointer} | |||
.rv-search-btn:hover{background:#f6f7f8} | |||
.kpis{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:10px 0 0} | |||
.kpi{padding:.4em .8em;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:13px;color:#374151} | |||
/* 4) CTA grid */ | |||
.rv-cta{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:10px 0 22px} | |||
@media (max-width:1120px){.rv-cta{grid-template-columns:repeat(3,1fr)}} | |||
@media (max-width:760px){.rv-cta{grid-template-columns:1fr}} | |||
.rv-card{border:1px solid #d0d7de;border-radius:14px;background:var(--card);padding:16px 16px 14px} | |||
.rv-card h3{margin:.1em 0 .25em;font-size:19px} | |||
.rv-icon{display:inline-block;width:30px;height:30px;border-radius:9px;background:linear-gradient(90deg,var(--rose),var(--orange));margin-right:9px;vertical-align:-7px} | |||
.rv-card p{margin:.25em 0 .85em;color:#374151} | |||
.rv-linkbtn{display:inline-block;padding:.55em .9em;border:1px solid #cfd5db;border-radius:12px;background:#fff;text-decoration:none} | |||
.rv-linkbtn:hover{background:#f6f7f8} | |||
/* 5) Two-column content */ | |||
.rv-columns{display:grid;grid-template-columns:3fr 1.2fr;gap:16px;margin:0 0 24px} | |||
@media (max-width:980px){.rv-columns{grid-template-columns:1fr}} | |||
.box{border:1px solid #d0d7de;border-radius:14px;background:#fff;overflow:hidden} | |||
.box-h{padding:.8em 1.05em;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:1em 1.1em} | |||
/* 6) Footer note */ | |||
.footer-note{color:#6b7280;text-align:center;margin:12px 0 28px;font-size:14px} | |||
* | /* 7) Accessibility focus (scoped) */ | ||
* | .rv-root a:focus, .rv-root button:focus, .rv-root input:focus{ | ||
outline: 2px solid rgba(255,59,91,.65); outline-offset: 2px; box-shadow: 0 0 0 2px rgba(255,59,91,.15); | |||
} | |||
</style> | |||
<div class="rv-root"> | |||
<div class="rv-wrap"> | |||
<div | <!-- HERO --> | ||
<section class="rv-hero"> | |||
<div class="inner"> | |||
<div class="rv-eyebrow">ROOVET ARTICLES</div> | |||
<h1 class="rv-title"><span class="grad">Explore unique people, businesses & stories</span></h1> | |||
<p class="rv-tag">Curated, verifiable articles built for a better knowledge graph.</p> | |||
<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> | |||
<!-- Native search form --> | |||
<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> | |||
<!-- Optional KPI chips (static text to keep HTML safe) --> | |||
<div class="kpis"> | |||
<!-- | <div class="kpi">Fast fact-checking</div> | ||
<div | <div class="kpi">Neutral tone</div> | ||
<div | <div class="kpi">Human-verified sources</div> | ||
< | </div> | ||
<div | </div> | ||
<div | </section> | ||
<div | |||
< | |||
< | <!-- CTA GRID --> | ||
<section class="rv-cta"> | |||
</ | <div class="rv-card"> | ||
<h3><span class="rv-icon"></span>Get listed</h3> | |||
<p>Suggest a new article. Send sources and a short bio.</p> | |||
<a class="rv-linkbtn" href="/Roovet_Articles:Requested_articles">Request an article</a> | |||
</div> | |||
<div class="rv-card"> | |||
<h3><span class="rv-icon"></span>Contribute</h3> | |||
<p>Become a volunteer editor. Help us fact-check and grow the graph.</p> | |||
<a class="rv-linkbtn" href="/Roovet_Articles:How_to_contribute">How it works</a> | |||
</div> | |||
<div class="rv-card"> | |||
<h3><span class="rv-icon"></span>Guidelines</h3> | |||
<p>Read our content standards, sources policy, and formatting rules.</p> | |||
<a class="rv-linkbtn" href="/Roovet_Articles:Content_guidelines">Review guidelines</a> | |||
</div> | |||
<div class="rv-card"> | |||
<h3><span class="rv-icon"></span>Explore</h3> | |||
<p>See what’s recently been added across Roovet Articles.</p> | |||
<a class="rv-linkbtn" href="/Special:NewPages">See new pages</a> | |||
</div> | |||
</section> | |||
<!-- 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><em>Featured article placeholder.</em> Add a 2–3 sentence summary here and link to the full article.</p> | |||
<p><a href="/Special:Random">Discover a random article →</a></p> | |||
</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> | |||
<!-- 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 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> | |||
<div class="footer-note">Roovet Articles.</div> | |||
</div> | |||
</div> | |||
</html> | |||
Latest revision as of 21:05, 1 November 2025
ROOVET ARTICLES
Explore unique people, businesses & stories
Curated, verifiable articles built for a better knowledge graph.
Fast fact-checking
Neutral tone
Human-verified sources
From today's featured article
Featured article placeholder. Add a 2–3 sentence summary here and link to the full article.
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.