User:Globe/Main page redesign: Difference between revisions
From WikiOasis Meta
More actions
Update |
fix link |
||
| (4 intermediate revisions by the same user not shown) | |||
| Line 8: | Line 8: | ||
}} | }} | ||
<div style="max-width: 1200px; margin: 0 auto; padding: 0 20px | <div style="max-width: 1200px; margin: 0 auto; padding: 0 5vw 20px 5vw; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 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="background: linear-gradient(135deg, #3650b8 0%, #0050b4 100%); border-radius: min(16px, 4vw); padding: min(2rem, 8vw) min(2rem, 6vw); color: white; text-align: center; margin-bottom: min(2rem, 6vw); 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: 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; -webkit-animation: breathe-pulse 4s ease-in-out infinite alternate; -moz-animation: breathe-pulse 4s ease-in-out infinite alternate; -o-animation: breathe-pulse 4s ease-in-out infinite alternate; animation: breathe-pulse 4s ease-in-out infinite alternate;"></div> | ||
<div style="position: relative; z-index: 1;"> | <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: clamp(2rem, 8vw, 3.5rem); font-weight: 800; margin-bottom: 1rem; text-shadow: 0 2px 4px rgba(0,0,0,0.1); line-height: 1.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> | <div style="font-size: clamp(1rem, 3.5vw, 1.3rem); margin-bottom: 2rem; opacity: 0.95; font-weight: 300; padding: 0 min(1rem, 3vw); line-height: 1.4;">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> active communities for over '''{{formatnum:{{NUMBEROFUSERS}}}}''' users.</div> | ||
<div style="display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;"> | <div style="display: flex; gap: min(1rem, 3vw); justify-content: center; flex-wrap: wrap; flex-direction: column; align-items: center;"> | ||
[[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. | [[Special:CreateAccount|<span style="display: inline-block; padding: min(0.9rem, 3vw) min(2rem, 5vw); 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.25rem; width: min(280px, 80vw); text-align: center; font-size: clamp(0.9rem, 4vw, 1rem);" 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. | [[Special:RequestWiki|<span style="display: inline-block; padding: min(0.9rem, 3vw) min(2rem, 5vw); 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.25rem; width: min(280px, 80vw); text-align: center; font-size: clamp(0.9rem, 4vw, 1rem);" 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>]] | ||
[[Fundraiser|<span style="display: inline-block; padding: min(0.9rem, 3vw) min(2rem, 5vw); 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.25rem; width: min(280px, 80vw); text-align: center; font-size: clamp(0.9rem, 4vw, 1rem);" 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'">Support our mission</span>]] | |||
</div> | </div> | ||
</div> | </div> | ||
| Line 24: | Line 25: | ||
<!-- Features Grid --> | <!-- Features Grid --> | ||
<div style="display: | <div style="display: block; margin-bottom: min(2rem, 6vw);"> | ||
<!-- Why WikiOasis Card --> | <!-- Why WikiOasis Card --> | ||
<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(- | <div style="background: white; border-radius: min(12px, 3vw); padding: min(2rem, 6vw) min(1.5rem, 4vw); box-shadow: 0 4px 20px rgba(0,0,0,0.08); transition: all 0.3s ease; border-top: 4px solid #3675b8; position: relative; margin-bottom: min(2rem, 5vw);" onmouseover="this.style.transform='translateY(-2px)'; 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)'"> | ||
<div style="display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; gap: 0.5rem;"> | <div style="display: flex; align-items: center; justify-content: center; margin-bottom: min(1.5rem, 4vw); gap: min(0.5rem, 2vw); 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 userGroup-ltr.svg|20px|link=]]</span></div> | <div style="width: min(40px, 10vw); height: min(40px, 10vw); min-width: 30px; min-height: 30px; background: linear-gradient(135deg, #3675b8, #0050b4); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: white; font-size: min(1.2rem, 4vw); flex-shrink: 0;"><span style="filter: brightness(0) invert(1); display: inline-block; line-height: 1;">[[File:OOjs UI icon userGroup-ltr.svg|20px|link=]]</span></div> | ||
<h3 style="font-size: 1.5rem; font-weight: 700; color: #2d3748; margin: 0; line-height: 1.2;">Why WikiOasis?</h3> | <h3 style="font-size: clamp(1.2rem, 5vw, 1.5rem); font-weight: 700; color: #2d3748; margin: 0; line-height: 1.2; text-align: center;">Why WikiOasis?</h3> | ||
</div> | </div> | ||
<div style="list-style: none;"> | <div style="list-style: none;"> | ||
<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> | <div style="margin-bottom: min(1rem, 3vw); padding-left: min(1.5rem, 5vw); position: relative; color: #4a5568; line-height: 1.6; font-size: clamp(0.9rem, 3.5vw, 1rem);"><span style="position: absolute; left: 0; color: #48bb78; font-weight: bold; font-size: min(1.1rem, 4vw);">✓</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> | ||
<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 | <div style="margin-bottom: min(1rem, 3vw); padding-left: min(1.5rem, 5vw); position: relative; color: #4a5568; line-height: 1.6; font-size: clamp(0.9rem, 3.5vw, 1rem);"><span style="position: absolute; left: 0; color: #48bb78; font-weight: bold; font-size: min(1.1rem, 4vw);">✓</span><strong>No advertisements. Ever.</strong> Adverts annoy us just as much as they annoy you, so we'll never show them on your wiki.</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: min(1rem, 3vw); padding-left: min(1.5rem, 5vw); position: relative; color: #4a5568; line-height: 1.6; font-size: clamp(0.9rem, 3.5vw, 1rem);"><span style="position: absolute; left: 0; color: #48bb78; font-weight: bold; font-size: min(1.1rem, 4vw);">✓</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> | <div style="margin-bottom: min(1rem, 3vw); padding-left: min(1.5rem, 5vw); position: relative; color: #4a5568; line-height: 1.6; font-size: clamp(0.9rem, 3.5vw, 1rem);"><span style="position: absolute; left: 0; color: #48bb78; font-weight: bold; font-size: min(1.1rem, 4vw);">✓</span><strong>Unmatched support.</strong> From simple advice to technical help, our experienced staff team will assist every step of the way.</div> | ||
</div> | </div> | ||
</div> | </div> | ||
<!-- Quick Links Card --> | <!-- Quick Links Card --> | ||
<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(- | <div style="background: white; border-radius: min(12px, 3vw); padding: min(2rem, 6vw) min(1.5rem, 4vw); box-shadow: 0 4px 20px rgba(0,0,0,0.08); transition: all 0.3s ease; border-top: 4px solid #3675b8; position: relative; margin-bottom: min(2rem, 5vw);" onmouseover="this.style.transform='translateY(-2px)'; 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)'"> | ||
<div style="display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; gap: 0.5rem;"> | <div style="display: flex; align-items: center; justify-content: center; margin-bottom: min(1.5rem, 4vw); gap: min(0.5rem, 2vw); 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_academic.svg|20px|link=]]</span></div> | <div style="width: min(40px, 10vw); height: min(40px, 10vw); min-width: 30px; min-height: 30px; background: linear-gradient(135deg, #3675b8, #0050b4); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: white; font-size: min(1.2rem, 4vw); flex-shrink: 0;"><span style="filter: brightness(0) invert(1); display: inline-block; line-height: 1;">[[File:OOjs_UI_icon_academic.svg|20px|link=]]</span></div> | ||
<h3 style="font-size: 1.5rem; font-weight: 700; color: #2d3748; margin: 0; line-height: 1.2;">Quick Links</h3> | <h3 style="font-size: clamp(1.2rem, 5vw, 1.5rem); font-weight: 700; color: #2d3748; margin: 0; line-height: 1.2; text-align: center;">Quick Links</h3> | ||
</div> | </div> | ||
<div style="list-style: none;"> | <div style="list-style: none;"> | ||
<div style="font-weight: bold; margin-bottom: 0.5rem; color: #2d3748;">Requests</div> | <div style="font-weight: bold; margin-bottom: min(0.5rem, 2vw); color: #2d3748; font-size: clamp(1rem, 3.8vw, 1.1rem);">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: min(1rem, 3vw); padding-left: min(1.5rem, 5vw); position: relative; color: #4a5568; line-height: 1.6; font-size: clamp(0.9rem, 3.5vw, 1rem);"><span style="position: absolute; left: 0; color: #48bb78; font-weight: bold; font-size: min(1.1rem, 4vw);">✓</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: min(1rem, 3vw); padding-left: min(1.5rem, 5vw); position: relative; color: #4a5568; line-height: 1.6; font-size: clamp(0.9rem, 3.5vw, 1rem);"><span style="position: absolute; left: 0; color: #48bb78; font-weight: bold; font-size: min(1.1rem, 4vw);">✓</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: min(1rem, 3vw); padding-left: min(1.5rem, 5vw); position: relative; color: #4a5568; line-height: 1.6; font-size: clamp(0.9rem, 3.5vw, 1rem);"><span style="position: absolute; left: 0; color: #48bb78; font-weight: bold; font-size: min(1.1rem, 4vw);">✓</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 style="margin-bottom: min(1rem, 3vw); padding-left: min(1.5rem, 5vw); position: relative; color: #4a5568; line-height: 1.6; font-size: clamp(0.9rem, 3.5vw, 1rem);"><span style="position: absolute; left: 0; color: #48bb78; font-weight: bold; font-size: min(1.1rem, 4vw);">✓</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> | ||
| Line 58: | Line 59: | ||
<!-- Contact Section --> | <!-- Contact Section --> | ||
<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;"> | <div style="background: white; border-radius: min(12px, 3vw); padding: min(2rem, 6vw) min(1.5rem, 4vw); box-shadow: 0 4px 20px rgba(0,0,0,0.08); border-top: 4px solid #3675b8;"> | ||
<div style="display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; gap: 0.5rem;"> | <div style="display: flex; align-items: center; justify-content: center; margin-bottom: min(1.5rem, 4vw); gap: min(0.5rem, 2vw); flex-wrap: wrap;"> | ||
<div style="width: 40px; height: 40px; background: linear-gradient(135deg, #3675b8, # | <div style="width: min(40px, 10vw); height: min(40px, 10vw); min-width: 30px; min-height: 30px; background: linear-gradient(135deg, #3675b8, #2196F3); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: white; font-size: min(1.2rem, 4vw); flex-shrink: 0;"><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> | <h3 style="font-size: clamp(1.2rem, 5vw, 1.5rem); font-weight: 700; color: #2d3748; margin: 0; line-height: 1.2; text-align: center;">Contact Us</h3> | ||
</div> | </div> | ||
<div style="list-style: none; display: flex; flex-direction: column; gap: 1rem;"> | <div style="list-style: none; display: flex; flex-direction: column; gap: min(1rem, 3vw);"> | ||
<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;">[email protected]</span>]</div> | <div style="padding: min(1rem, 3vw); background: #f7fafc; border-radius: min(8px, 2vw); transition: background 0.2s ease; font-size: clamp(0.9rem, 3.5vw, 1rem);" 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;">[email protected]</span>]</div> | ||
<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> | <div style="padding: min(1rem, 3vw); background: #f7fafc; border-radius: min(8px, 2vw); transition: background 0.2s ease; font-size: clamp(0.9rem, 3.5vw, 1rem);" 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> | ||
<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> | <div style="padding: min(1rem, 3vw); background: #f7fafc; border-radius: min(8px, 2vw); transition: background 0.2s ease; font-size: clamp(0.9rem, 3.5vw, 1rem);" 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> | ||
</div> | </div> | ||
</div> | |||
</div> | </div> | ||