MediaWiki:Common.css: Difference between revisions

Latest revision as of 21:11, 16 March 2026

/* mobile screen css */
@media (max-width:768px){

.mw-body{
padding:10px;
}

.home-grid{
flex-direction:column;
}

}

/* CSS placed here will be applied to all skins */
.home-hero{
background:#2563eb;
color:white;
padding:60px;
text-align:center;
border-radius:10px;
margin-bottom:30px;
}

.home-btn{
background:white;
color:#2563eb;
padding:10px 20px;
text-decoration:none;
border-radius:6px;
font-weight:bold;
}

.home-grid{
display:flex;
gap:20px;
flex-wrap:wrap;
}

.home-card{
background:#f5f5f5;
padding:20px;
border-radius:10px;
flex:1;
min-width:200px;
}

@media (max-width:768px){
.home-grid{
flex-direction:column;
}
}

@@ Line 1: / Line 1: @@
-/* CSS placed here will be applied to all skins */
+/* mobile screen css */
-/* HERO */
+@media (max-width:768px){
-.hero-section {
-    background: linear-gradient(-45deg, #0f172a, #1e3a8a, #2563eb, #0f172a);
-    background-size: 400% 400%;
-    animation: gradientBG 12s ease infinite;
-    padding: 120px 20px;
-    text-align: center;
-    color: white;
-    border-radius: 12px;
-}
-@keyframes gradientBG {
+.mw-body{
-% { background-position: 0% 50%; }
+padding:10px;
-% { background-position: 100% 50%; }
-% { background-position: 0% 50%; }
 }
-.hero-title {
+.home-grid{
-    font-size: 48px;
+flex-direction:column;
-    font-weight: 700;
-    animation: fadeDown 1.2s ease;
 }
-.hero-subtitle {
-    font-size: 20px;
-    margin-top: 15px;
-    opacity: 0.9;
 }
-/* BUTTON */
+/* CSS placed here will be applied to all skins */
-.hero-btn {
+.home-hero{
-    display: inline-block;
+background:#2563eb;
-    margin-top: 30px;
+color:white;
-    padding: 14px 32px;
+padding:60px;
-    background: white;
+text-align:center;
-    color: #1e293b;
+border-radius:10px;
-    border-radius: 8px;
+margin-bottom:30px;
-    font-weight: bold;
-    transition: 0.3s;
-}
-.hero-btn:hover {
-    background: #e2e8f0;
-    transform: translateY(-4px);
-}
-/* STATS */
-.stats-section {
-    display: flex;
-    justify-content: space-around;
-    text-align: center;
-    margin-top: 40px;
 }
-.stat-box h2 {
+.home-btn{
-    font-size: 32px;
+background:white;
-    color: #2563eb;
+color:#2563eb;
+padding:10px 20px;
+text-decoration:none;
+border-radius:6px;
+font-weight:bold;
 }
-/* CARDS */
+.home-grid{
-.card-container {
+display:flex;
-    display: flex;
+gap:20px;
-    justify-content: space-around;
+flex-wrap:wrap;
-    gap: 20px;
 }
-.card {
+.home-card{
-    flex: 1;
+background:#f5f5f5;
-    padding: 25px;
+padding:20px;
-    border-radius: 12px;
+border-radius:10px;
-    background: white;
+flex:1;
-    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
+min-width:200px;
-    transition: 0.3s;
 }
-.card:hover {
+@media (max-width:768px){
-    transform: translateY(-8px);
+.home-grid{
+flex-direction:column;
 }
-/* ANIMATION */
-@keyframes fadeDown {
-    from {opacity:0; transform:translateY(-20px);}
-    to {opacity:1; transform:translateY(0);}
 }