MediaWiki:Common.css: відмінності між версіями

нема опису редагування
Немає опису редагування
Мітка: Скасовано
Немає опису редагування
Мітка: Скасовано
Рядок 311: Рядок 311:


/* Main Page Columns Layout */
/* Main Page Columns Layout */
/* Main Page Columns Layout */
.main-page-container {
    display: flex;          /* Uses flexbox to layout children horizontally */
    justify-content: space-between; /* Distributes space between columns */
    flex-wrap: wrap;      /* Allows items to wrap onto next line as needed */
}
 
.main-page-column {
.main-page-column {
    display: flex;
     flex: 1 1 calc(33% - 10px); /* Flex grow, shrink and basis */
     flex-direction: column;
    align-items: center;  /* Centers content horizontally in the column */
    justify-content: center;  /* Helps center content vertically */
    width: calc(33.333% - 20px); /* Adjusting width to account for margins */
    margin-right: 15px;
     box-sizing: border-box;
     box-sizing: border-box;
     height: 160px;
     height: 160px;
     text-align: center;
     text-align: center;
     background-color: #f8f9fa; /* Light grey background, change as needed */
     background-color: #f8f9fa;
     border: 1px solid #ccc; /* Light grey border, change as needed */
     border: 1px solid #ccc;
     padding: 10px; /* Padding inside the boxes */
     padding: 10px;
    margin-right: 15px; /* Margin between columns */
}
}


.main-page-column:last-child {
.main-page-column:last-child {
     margin-right: 0; /* Removes margin for the last column */
     margin-right: 0; /* No margin on the right for the last column */
}
}


/* Responsive behavior for smaller screens */
@media (max-width: 760px) {
@media (max-width: 760px) {
    .main-page-container {
        flex-direction: column; /* Stacks columns vertically on small screens */
    }
     .main-page-column {
     .main-page-column {
         width: 100%; /* Full width on smaller screens */
         margin-right: 0; /* Resets margin for mobile view */
        margin-right: 0;
        margin-bottom: 15px; /* Space between stacked columns */
         margin-bottom: 15px; /* Adds space between stacked columns on mobile */
        flex-basis: 100%; /* Takes full width on small screens */
    }
    .main-page-column:last-child {
         margin-bottom: 0; /* No bottom margin for the last item */
     }
     }
}
/* Additional styling for images and links */
.main-page-column img {
    margin-bottom: 10px; /* Space between image and text */
}
.main-page-column a {
    display: block; /* Ensures the link is centered in flex container */
}
}