Main Page: Difference between revisions

From Roovet Articles
Jump to navigation Jump to search
← Older editNewer edit →
VisualWikitext
mNo edit summary
mNo edit summary
Line 1: Line 1:
<html>
<html>
   <style>
   <style>
     /* ========= Roovet Articles — Main Page (WIDE) ========= */
     /* ==========================================================
    .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}
      Roovet Articles — Main Page (self-contained & wide)
    .rv-root *{box-sizing:inherit}
      Safe CSS (no external assets). Paste into Main_Page.
    .rv-wrap{max-width:1280px;margin:0 auto;padding:0 18px}  /* ← wider */
      ========================================================== */
    a{color:#e11d48;text-decoration:none}
    a:hover{text-decoration:underline}


     /* ===== HERO ===== */
     /* 0) Make the page container wider (Vector/Minerva friendly) */
     .rv-hero{position:relative;isolation:isolate;margin:8px auto 22px;border:1px solid #d0d7de;border-radius:16px;background:linear-gradient(180deg,#ffffff,#fff7f8 60%,#fff 100%);overflow:hidden}
    .mw-page-container { max-width: 1400px !important; }
     .rv-hero:before{content:"";position:absolute;inset:-18% -6% auto -6%;height:620px;background:
    .mw-content-container, .mw-body { max-width: 1280px !important; }
      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%),
    /* 1) Scoped base */
      conic-gradient(from 180deg at 60% 40%, rgba(255,59,91,.20), rgba(255,138,61,.12), rgba(255,59,91,.20));
    .rv-root{--rose:#ff3b5b;--orange:#ff8a3d;--ink:#1f2937;--muted:#6b7280;--line:#e5e7eb;--card:#fff;--bg:#fafafb;
       filter:blur(28px);z-index:-1;opacity:.9}
      font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
     .rv-hero .inner{padding:44px 24px 30px;text-align:center}
      color:var(--ink)}
     .rv-eyebrow{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#6b7280;margin-bottom:8px}
    .rv-root *, .rv-root *::before, .rv-root *::after{box-sizing:border-box}
     .rv-title{font-weight:800;font-size:clamp(30px,4.2vw,56px);line-height:1.14;margin:.1em auto .25em;letter-spacing:.2px}
    .rv-wrap{max-width:1280px;margin:0 auto;padding:0 18px}
     .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:860px;margin:0 auto 18px;color:#374151;font-size: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}
     .rv-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:16px}
     .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}
 
    /* 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:hover{background:#f6f7f8}
     .rv-btn--primary{background:linear-gradient(90deg,var(--rv-rose),var(--rv-orange));border-color:#e11d48;color:#fff}
     .rv-btn--primary{background:linear-gradient(90deg,var(--rose),var(--orange));border-color:#e11d48;color:#fff}
     .rv-btn--primary:hover{filter:brightness(.96)}
     .rv-btn--primary:hover{filter:brightness(.96)}
     .rv-search{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:16px auto 4px;max-width:820px}
     .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-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{border:1px solid #cfd5db;border-radius:12px;background:#fff;padding:.7em 1em;cursor:pointer}
     .rv-search-btn:hover{background:#f6f7f8}
     .rv-search-btn:hover{background:#f6f7f8}
     .rv-chips{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:12px 0 2px}
     .kpis{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:10px 0 0}
     .rv-chip{display:inline-block;padding:.42em .8em;border:1px dashed #e3e6ea;border-radius:999px;color:#374151;background:#fff}
     .kpi{padding:.4em .8em;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:13px;color:#374151}
    .rv-chip:hover{background:#fafbfc}
    @media (max-width:768px){.rv-title{font-size:30px}.rv-tag{font-size:16px}}


     /* ===== CTA GRID (4) ===== */
     /* 4) CTA grid */
     .rv-cta{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:8px 0 20px}
     .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:1120px){.rv-cta{grid-template-columns:repeat(3,1fr)}}
     @media (max-width:760px){.rv-cta{grid-template-columns:1fr}}
     @media (max-width:760px){.rv-cta{grid-template-columns:1fr}}
     .rv-card{border:1px solid #d0d7de;border-radius:14px;background:var(--rv-card);padding:16px 16px 14px}
     .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-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(--rv-rose),var(--rv-orange));margin-right:9px;vertical-align:-7px}
     .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-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{display:inline-block;padding:.55em .9em;border:1px solid #cfd5db;border-radius:12px;background:#fff;text-decoration:none}
     .rv-linkbtn:hover{background:#f6f7f8}
     .rv-linkbtn:hover{background:#f6f7f8}


     /* ===== TWO COLUMNS (wider left) ===== */
     /* 5) Two-column content */
     .rv-columns{display:grid;grid-template-columns:3fr 1.2fr;gap:16px;margin:0 0 22px}
     .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}}
     @media (max-width:980px){.rv-columns{grid-template-columns:1fr}}
     .box{border:1px solid #d0d7de;border-radius:14px;background:#fff;overflow:hidden}
     .box{border:1px solid #d0d7de;border-radius:14px;background:#fff;overflow:hidden}
Line 52: Line 64:
     .h-green{background:#eef7f0}.h-pink{background:#fff1f4}.h-blue{background:#eef3fb}.h-gray{background:#f6f7f8}
     .h-green{background:#eef7f0}.h-pink{background:#fff1f4}.h-blue{background:#eef3fb}.h-gray{background:#f6f7f8}
     .box-c{padding:1em 1.1em}
     .box-c{padding:1em 1.1em}
     .muted{color:var(--rv-muted)}
 
     .footer-note{color:#6b7280;text-align:center;margin:12px 0 28px}
     /* 6) Footer note */
     .kpis{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:12px 0 0}
     .footer-note{color:#6b7280;text-align:center;margin:12px 0 28px;font-size:14px}
    .kpi{padding:.4em .8em;border:1px solid #e5e7eb;border-radius:999px;background:#fff;font-size:13px;color:#374151}
 
    /* 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>
   </style>


Line 61: Line 77:
     <div class="rv-wrap">
     <div class="rv-wrap">


       <header class="rv-hero">
       <!-- HERO -->
      <section class="rv-hero">
         <div class="inner">
         <div class="inner">
           <div class="rv-eyebrow">ROOVET ARTICLES</div>
           <div class="rv-eyebrow">ROOVET ARTICLES</div>
           <h1 class="rv-title">Explore <span class="grad">unique people, businesses &amp; stories</span></h1>
           <h1 class="rv-title"><span class="grad">Explore unique people, businesses &amp; stories</span></h1>
           <p class="rv-tag">Curated, verifiable articles built for a better knowledge graph.</p>
           <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">
           <form class="rv-search" action="/index.php" method="get">
             <input type="hidden" name="title" value="Special:Search">
             <input type="hidden" name="title" value="Special:Search">
Line 74: Line 98:
           </form>
           </form>


           <div class="rv-actions">
           <!-- Optional KPI chips (static text to keep HTML safe) -->
            <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">
           <div class="kpis">
             <span class="kpi">Open knowledge</span>
             <div class="kpi">Fast fact-checking</div>
             <span class="kpi">Fact-checked</span>
             <div class="kpi">Neutral tone</div>
             <span class="kpi">Community-built</span>
             <div class="kpi">Human-verified sources</div>
           </div>
           </div>
         </div>
         </div>
       </header>
       </section>


       <section class="rv-cta" aria-label="Explore pillars">
      <!-- CTA GRID -->
       <section class="rv-cta">
         <div class="rv-card">
         <div class="rv-card">
           <h3><span class="rv-icon"></span>People</h3>
           <h3><span class="rv-icon"></span>Get listed</h3>
           <p>Biographies of creators, founders, leaders, and overlooked pioneers.</p>
           <p>Suggest a new article. Send sources and a short bio.</p>
           <a class="rv-linkbtn" href="/Category:People">Browse people</a>
           <a class="rv-linkbtn" href="/Roovet_Articles:Requested_articles">Request an article</a>
         </div>
         </div>
         <div class="rv-card">
         <div class="rv-card">
           <h3><span class="rv-icon"></span>Businesses</h3>
           <h3><span class="rv-icon"></span>Contribute</h3>
           <p>Profiles of companies, startups, labels, and local legends.</p>
           <p>Become a volunteer editor. Help us fact-check and grow the graph.</p>
           <a class="rv-linkbtn" href="/Category:Businesses">Browse businesses</a>
           <a class="rv-linkbtn" href="/Roovet_Articles:How_to_contribute">How it works</a>
         </div>
         </div>
         <div class="rv-card">
         <div class="rv-card">
           <h3><span class="rv-icon"></span>Organizations</h3>
           <h3><span class="rv-icon"></span>Guidelines</h3>
           <p>Nonprofits, clubs, and communities building real impact.</p>
           <p>Read our content standards, sources policy, and formatting rules.</p>
           <a class="rv-linkbtn" href="/Category:Organizations">Browse orgs</a>
           <a class="rv-linkbtn" href="/Roovet_Articles:Content_guidelines">Review guidelines</a>
         </div>
         </div>
         <div class="rv-card">
         <div class="rv-card">
           <h3><span class="rv-icon"></span>Stories</h3>
           <h3><span class="rv-icon"></span>Explore</h3>
           <p>Original narratives and cultural snapshots across the Roovet network.</p>
           <p>See what’s recently been added across Roovet Articles.</p>
           <a class="rv-linkbtn" href="/Category:Stories">Browse stories</a>
           <a class="rv-linkbtn" href="/Special:NewPages">See new pages</a>
         </div>
         </div>
       </section>
       </section>


      <!-- TWO COLUMNS -->
       <section class="rv-columns">
       <section class="rv-columns">
        <!-- LEFT -->
         <div>
         <div>
           <div class="box">
           <div class="box">
             <div class="box-h h-green">From today's featured article</div>
             <div class="box-h h-green">From today's featured article</div>
             <div class="box-c">
             <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><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>
               <p><a href="/Special:Random">Discover a random article →</a></p>
             </div>
             </div>
Line 140: Line 156:
         </div>
         </div>


        <!-- RIGHT -->
         <aside>
         <aside>
           <div class="box">
           <div class="box">
Line 168: Line 185:
       </section>
       </section>


      <!-- ABOUT -->
       <section class="box">
       <section class="box">
         <div class="box-h h-gray">About Roovet Articles</div>
         <div class="box-h h-gray">About Roovet Articles</div>
Line 178: Line 196:
       </section>
       </section>


       <p class="footer-note">Classic encyclopedia feel, modern hero polish, now wider.</p>
       <div class="footer-note">Polished, wide layout with gradient hero, CTA grid, and clean sections.</div>
     </div>
     </div>
   </div>
   </div>
</html>
</html>

Revision as of 21:01, 1 November 2025

ROOVET ARTICLES

Explore unique people, businesses & stories

Curated, verifiable articles built for a better knowledge graph.

Request an article New pages Random article
Fast fact-checking
Neutral tone
Human-verified sources

Get listed

Suggest a new article. Send sources and a short bio.

Request an article

Contribute

Become a volunteer editor. Help us fact-check and grow the graph.

How it works

Guidelines

Read our content standards, sources policy, and formatting rules.

Review guidelines

Explore

See what’s recently been added across Roovet Articles.

See new pages
From today's featured article

Featured article placeholder. Add a 2–3 sentence summary here and link to the full article.

Discover a random article →

Did you know…
More random articles →
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.
Polished, wide layout with gradient hero, CTA grid, and clean sections.

Retrieved from "https://articles.roovet.com/index.php?title=Main_Page&oldid=58705"