Best Practices
(Undo revision 22193 by Edgar (talk))
Tags: Undo Reverted
No edit summary
Tag: 2017 source edit
(6 intermediate revisions by the same user not shown)
Line 3: Line 3:
<style>
<style>


    .bestpractices-card:hover {
.bestpractices-card:hover {
     transform: translateY(-5px);
     transform: translateY(-5px);
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
}


.mw-parser-output > *:first-child {
.mw-parser-output > *:first-child {
     display: none;
     display: none;
}
}
.header3 {
.header3 {
    padding: 2rem 5em;
  padding: 2rem 5em;
}
}


.contentHeader {
.contentHeader {
    padding: 5em;
  padding: 5em;
  margin-bottom: 2em;
}
}


.heading {
.heading {
    font-size: 2.25em;
  font-size: 2.25em;  
}
}


Line 27: Line 27:
     display: grid;
     display: grid;
     padding: 0 5em;
     padding: 0 5em;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     grid-template-columns: repeat(2, 1fr);
     gap: 20px;
     gap: 20px;
     grid-auto-rows: minmax(100px, auto);
     grid-auto-rows: minmax(100px, auto);
}
}


.bestpractices-card {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    border-radius: 10px;
    background: rgba(226, 245, 250, 0.70);
    padding: 10px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}


@media (max-width: 767px) {
    @media (max-width: 767px) {
    .contentHeader {
        .contentHeader {
        padding: 2em 1em;
            padding: 2em 1em;
         max-width: none;
            max-width: none;
    }
        }
        .heading {
            font-size: 1.5em;
        }
        .sub-heading {
            font-size: 1em;
        }
         .description {
            font-size: 0.875em;
        }
        .input-container {
            max-width: none;
            height: auto;
        }
        .search-icon {
            margin-left: 1em;
        }
        .search-input {
            padding-left: 1em;
            padding-right: 1em;
        }


.heading {
      .header3 {
        font-size: 1.5em;
          padding: 2rem 1em;
      }
      .grid-container {
    grid-template-columns: 1fr !important;
    padding: 0 2em !important;
}
     }
     }
.header3 {
        padding: 2rem 1em;
    }
.bestpractices-card {
        height: auto;
        padding: 20px;
    }
.bestpractices-card span {
        font-size: 18px;
    }
}


</style>
</style>
Line 78: Line 78:
</div>
</div>


<div class="grid-container">
<div style="display: grid; padding: 0 5em; grid-template-columns: repeat(2, 1fr); gap: 20px; grid-auto-rows: minmax(100px, auto);" class="grid-container">


</html>
</html>

Revision as of 06:51, 7 August 2024

Best practices
BEST PRACTICES
Suggestions and ideas on how to creatively use MDriven tools.