Toggle search
Toggle menu
31
40
7.2K
2.1K
WikiOasis Meta
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

User:Globe/Main page redesign: Difference between revisions

From WikiOasis Meta
More actions
Browse history interactively
← Older editNewer edit →
VisualWikitext
(username removed)
rework
Globe (talk | contribs)
staff, Administrators
302 edits
Update
Line 7: Line 7:
|image_alt=Wiki Logo
|image_alt=Wiki Logo
}}
}}
<div class="wikioasis-container" style="
 
  max-width: 1200px;
<div style="max-width: 1200px; margin: 0 auto; padding: 0 20px 20px 20px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;">
  margin: 0 auto;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
">


<!-- Hero Section -->
<!-- Hero Section -->
<div style="background: linear-gradient(135deg, #3650b8 0%, #0050b4 100%); border-radius: 16px; padding: 2rem 2rem; color: white; text-align: center; margin-bottom: 2rem; box-shadow: 0 10px 30px rgba(54, 80, 184, 0.2); position: relative; overflow: hidden;">
<div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: radial-gradient(circle at 20% 80%, rgba(255,255,255,0.1) 2px, transparent 2px), radial-gradient(circle at 80% 20%, rgba(255,255,255,0.08) 1.5px, transparent 1.5px), radial-gradient(circle at 40% 40%, rgba(255,255,255,0.06) 1px, transparent 1px); background-size: 100px 100px, 150px 150px, 75px 75px;"></div>
<div style="position: relative; z-index: 1;">
<div style="font-size: 3.5rem; font-weight: 800; margin-bottom: 1rem; text-shadow: 0 2px 4px rgba(0,0,0,0.1);">'''Welcome to WikiOasis!'''</div>
<div style="font-size: 1.3rem; margin-bottom: 2rem; opacity: 0.95; font-weight: 300;">Your wiki hosting partner, home to <span style="font-weight: 700; color: white; text-shadow: 0 1px 2px rgba(0,0,0,0.2);">'''{{formatnum:{{NUMBEROFWIKIS}}}}'''</span> wikis.</div>
<div style="display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;">
[[Special:CreateAccount|<span style="display: inline-block; padding: 0.9rem 2rem; background: rgba(255, 255, 255, 0.15); color: white; text-decoration: none; border-radius: 50px; font-weight: 600; transition: all 0.3s ease; border: 1px solid rgba(255, 255, 255, 0.2); margin: 0.5rem;" onmouseover="this.style.background='rgba(255, 255, 255, 0.25)'; this.style.transform='translateY(-2px)'; this.style.boxShadow='0 8px 25px rgba(0,0,0,0.2)'" onmouseout="this.style.background='rgba(255, 255, 255, 0.15)'; this.style.transform='translateY(0px)'; this.style.boxShadow='none'">Create an account</span>]]
[[Special:RequestWiki|<span style="display: inline-block; padding: 0.9rem 2rem; background: rgba(255, 255, 255, 0.15); color: white; text-decoration: none; border-radius: 50px; font-weight: 600; transition: all 0.3s ease; border: 1px solid rgba(255, 255, 255, 0.2); margin: 0.5rem;" onmouseover="this.style.background='rgba(255, 255, 255, 0.25)'; this.style.transform='translateY(-2px)'; this.style.boxShadow='0 8px 25px rgba(0,0,0,0.2)'" onmouseout="this.style.background='rgba(255, 255, 255, 0.15)'; this.style.transform='translateY(0px)'; this.style.boxShadow='none'">Request a wiki</span>]]
</div>
</div>
</div>


<div class="hero-section" style="
<!-- Features Grid -->
  background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 50%, #1e40af 100%);
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 2rem; margin-bottom: 2rem;">
  border-radius: 16px;
  padding: 3rem 2rem;
  text-align: center;
  margin-bottom: 2rem;
  box-shadow: 0 10px 25px rgba(30, 58, 138, 0.3);
  position: relative;
  overflow: hidden;
">
  <div style="
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    animation: pulse 4s ease-in-out infinite;
  "></div>


  <div style="position: relative; z-index: 2;">
<!-- Why WikiOasis Card -->
    <h1 style="
<div style="background: white; border-radius: 12px; padding: 2rem; box-shadow: 0 4px 20px rgba(0,0,0,0.08); transition: all 0.3s ease; border-top: 4px solid #3675b8; position: relative;" onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 8px 30px rgba(0,0,0,0.12)'" onmouseout="this.style.transform='translateY(0px)'; this.style.boxShadow='0 4px 20px rgba(0,0,0,0.08)'">
      font-size: 3.5rem;
<div style="display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; gap: 0.5rem;">
      font-weight: 700;
<div style="width: 40px; height: 40px; background: linear-gradient(135deg, #3675b8, #0050b4); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: white; font-size: 1.2rem;"><span style="filter: brightness(0) invert(1); display: inline-block; line-height: 1;">[[File:OOjs UI icon userGroup-ltr.svg|20px|link=]]</span></div>
      color: white;
<h3 style="font-size: 1.5rem; font-weight: 700; color: #2d3748; margin: 0; line-height: 1.2;">Why WikiOasis?</h3>
      margin: 0 0 1rem 0;
</div>
      text-shadow: 0 2px 4px rgba(0,0,0,0.3);
<div style="list-style: none;">
      letter-spacing: -0.025em;
<div style="margin-bottom: 1rem; padding-left: 1.5rem; position: relative; color: #4a5568; line-height: 1.6;"><span style="position: absolute; left: 0; color: #48bb78; font-weight: bold; font-size: 1.1rem;">✓</span><strong>Free, forever.</strong> Host a wiki at no cost with access to all features. We'll never charge you to host a wiki on WikiOasis.</div>
    ">Welcome to WikiOasis!</h1>
<div style="margin-bottom: 1rem; padding-left: 1.5rem; position: relative; color: #4a5568; line-height: 1.6;"><span style="position: absolute; left: 0; color: #48bb78; font-weight: bold; font-size: 1.1rem;">✓</span><strong>No adverts, we mean it.</strong> Adverts annoy us just as much as they annoy you, so we'll never show them on your wiki, to make it yours.</div>
<div style="margin-bottom: 1rem; padding-left: 1.5rem; position: relative; color: #4a5568; line-height: 1.6;"><span style="position: absolute; left: 0; color: #48bb78; font-weight: bold; font-size: 1.1rem;">✓</span><strong>Fully customizable.</strong> Your wiki is yours, and you can customise it as much as you want. Let your creativity run wild!</div>
<div style="margin-bottom: 1rem; padding-left: 1.5rem; position: relative; color: #4a5568; line-height: 1.6;"><span style="position: absolute; left: 0; color: #48bb78; font-weight: bold; font-size: 1.1rem;">✓</span><strong>Unmatched support.</strong> Have a problem with your wiki or just need advice? Our knowledgeable staff team will help you every step of the way!</div>
</div>
</div>


<p style="
<!-- Quick Links Card -->
  font-size: 1.25rem;
<div style="background: white; border-radius: 12px; padding: 2rem; box-shadow: 0 4px 20px rgba(0,0,0,0.08); transition: all 0.3s ease; border-top: 4px solid #3675b8; position: relative;" onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 8px 30px rgba(0,0,0,0.12)'" onmouseout="this.style.transform='translateY(0px)'; this.style.boxShadow='0 4px 20px rgba(0,0,0,0.08)'">
  color: rgba(255,255,255,0.9);
<div style="display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; gap: 0.5rem;">
  margin: 0 0 2rem 0;
<div style="width: 40px; height: 40px; background: linear-gradient(135deg, #3675b8, #0050b4); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: white; font-size: 1.2rem;"><span style="filter: brightness(0) invert(1); display: inline-block; line-height: 1;">[[File:OOjs_UI_icon_academic.svg|20px|link=]]</span></div>
  max-width: 800px;
<h3 style="font-size: 1.5rem; font-weight: 700; color: #2d3748; margin: 0; line-height: 1.2;">Quick Links</h3>
  margin-left: auto;
</div>
  margin-right: auto;
<div style="list-style: none;">
">Your wiki hosting partner, currently hosting <strong>{{formatnum:{{NUMBEROFWIKIS}}}}</strong> active communities for over <strong>{{formatnum:{{NUMBEROFUSERS}}}}</strong> users</p>
<div style="font-weight: bold; margin-bottom: 0.5rem; color: #2d3748;">Requests</div>
<div style="margin-bottom: 1rem; padding-left: 1.5rem; position: relative; color: #4a5568; line-height: 1.6;"><span style="position: absolute; left: 0; color: #48bb78; font-weight: bold; font-size: 1.1rem;">✓</span>[[Community portal|<span style="color: #3675b8; text-decoration: none; font-weight: 500;">Community portal</span>]] – Ask your fellow community members for help and discuss topics of global interest</div>
<div style="margin-bottom: 1rem; padding-left: 1.5rem; position: relative; color: #4a5568; line-height: 1.6;"><span style="position: absolute; left: 0; color: #48bb78; font-weight: bold; font-size: 1.1rem;">✓</span>[[Steward requests|<span style="color: #3675b8; text-decoration: none; font-weight: 500;">Steward requests</span>]] – Solicit help from Stewards for tasks only they can do</div>
<div style="margin-bottom: 1rem; padding-left: 1.5rem; position: relative; color: #4a5568; line-height: 1.6;"><span style="position: absolute; left: 0; color: #48bb78; font-weight: bold; font-size: 1.1rem;">✓</span>[[Special:RequestWiki|<span style="color: #3675b8; text-decoration: none; font-weight: 500;">Request a wiki</span>]] – Start your own wiki community</div>
<div style="margin-bottom: 1rem; padding-left: 1.5rem; position: relative; color: #4a5568; line-height: 1.6;"><span style="position: absolute; left: 0; color: #48bb78; font-weight: bold; font-size: 1.1rem;">✓</span>[[Special:GlobalRenameRequest|<span style="color: #3675b8; text-decoration: none; font-weight: 500;">Request a username change</span>]] – Request that your username be changed.</div>
</div>
</div>
 
</div>


<div class="cta-buttons" style="
<!-- Contact Section -->
  gap: 1rem;
<div style="background: white; border-radius: 12px; padding: 2rem; box-shadow: 0 4px 20px rgba(0,0,0,0.08); border-top: 4px solid #3675b8;">
  justify-content: center;
<div style="display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; gap: 0.5rem;">
  flex-wrap: wrap;
<div style="width: 40px; height: 40px; background: linear-gradient(135deg, #3675b8, #0050b4); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: white; font-size: 1.2rem;"><span style="filter: brightness(0) invert(1); display: inline-block; line-height: 1;">[[File:OOjs UI icon help-ltr.svg|20px|link=]]</span></div>
">
<h3 style="font-size: 1.5rem; font-weight: 700; color: #2d3748; margin: 0; line-height: 1.2;">Contact Us</h3>
  [[Special:CreateAccount|<span style="
</div>
    display: inline-block;
<div style="list-style: none; display: flex; flex-direction: column; gap: 1rem;">
    background: white;
<div style="padding: 1rem; background: #f7fafc; border-radius: 8px; transition: background 0.2s ease;" onmouseover="this.style.background='#edf2f7'" onmouseout="this.style.background='#f7fafc'"><strong>Email:</strong> [mailto:[email protected] <span style="color: #3675b8; text-decoration: none; font-weight: 500;">stewards@wikioasis.org</span>]</div>
    color: #1e40af;
<div style="padding: 1rem; background: #f7fafc; border-radius: 8px; transition: background 0.2s ease;" onmouseover="this.style.background='#edf2f7'" onmouseout="this.style.background='#f7fafc'"><strong>Discord:</strong> [https://discord.gg/Hc249nXbak <span style="color: #3675b8; text-decoration: none; font-weight: 500;">Join our Discord</span>]</div>
    padding: 1rem 2rem;
<div style="padding: 1rem; background: #f7fafc; border-radius: 8px; transition: background 0.2s ease;" onmouseover="this.style.background='#edf2f7'" onmouseout="this.style.background='#f7fafc'"><strong>Phorge:</strong> [https://phorge.wikioasis.org/ <span style="color: #3675b8; text-decoration: none; font-weight: 500;">Phorge</span>]</div>
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 1.1rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  " onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 8px 25px rgba(0,0,0,0.3)'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 15px rgba(0,0,0,0.2)'">🚀 Create account</span>]]
</div>
</div>
 
  [[Special:RequestWiki|<span style="
    display: inline-block;
    background: white;
    color: #1e40af;
    padding: 1rem 2rem;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 1.1rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  " onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 8px 25px rgba(0,0,0,0.3)'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 15px rgba(0,0,0,0.2)'">✨ Request Wiki</span>]]
</div>
</div>
Retrieved from "https://meta.wikioasis.org/wiki/User:Globe/Main_page_redesign"
Cookies help us deliver our services. By using our services, you agree to our use of cookies.
More information