// Boxes & categories // /// White background in boxes /// .category-boxes { display: grid; grid-gap: 2em; grid-template-columns: 32% 32% 32%; @include border-radius; .category-box { width: 100%; margin: 0; overflow: hidden; border: none; border-top: 8px solid; @include border-radius; box-shadow: 0px 2px 3px 0px $color-square-webkit-gradient; .category-box-inner { border: none; padding: 0; .category-details { padding: 0.3em; } } &:hover { box-shadow: 0px 40px 30px 0px rgba(53, 53, 53, 0.1); transform: translateY(-2px); } } } /// category title /// .category-list .category-text-title { align-items: baseline; display: inline-flex; } @media (max-width: 960px) { .category-boxes.with-logos.with-subcategories { grid-template-columns: 1fr; } } .category-list-item.category { @include border-radius; border-right: 1px solid var(--primary-low) !important; box-shadow: 0 0 4px 0 rgba(5, 5, 5, 0.1); margin: 0 0.59em 2em .59em; } #create-topic { color: var(--secondary); background: var(--primary-medium); transition: all 0.3s linear; @include border-radius; text-transform: uppercase; border: 2px solid var(--primary-medium); .fa { color: var(--secondary); } &:hover { background: var(--primary-medium); color: var(--secondary); box-shadow: 4px 4px $tertiary; transition: all 0.3s linear; @include border-radius; .fa { color: var(--secondary); } } } // Categories boxes // .category-list tbody .category { padding: 0; border-width: 0; display: block; width: 100%; height: 100%; position: relative; } .category-list tbody td { display: inline-block; width: 250px; height: 250px; border-left-color: transparent; background-color: $secondary; border-radius: 10px; } .category-list tbody .category { border-left: 6px solid; background-color: none; } /// here, 120px is about logo/icons size /// .category-boxes .category-box .logo.aspect-image img, .category-boxes-with-topics .category-box .logo.aspect-image img { --height: 120px; height: var(--height); width: calc(var(--height) * var(--aspect-ratio)); max-width: 100%; border-color: none; border-top: none; } .logo.aspect-image img, .logo.aspect-image img { padding-top: 20px; } .categories-and-latest { flex-direction: column; } .category-list { thead, .topics, .subcategories, .category-description { display: none; align-items: baseline; } .category-list .category-text-title { align-items: baseline; display: inline-flex; } tbody { text-align: center; tr { display: inline-block; width: 250px; height: 250px; margin: 0.75em; border-left-color: transparent; border-radius: 10px; border-bottom: none; } .category { padding: 0; border-width: 0; display: block; width: 100%; height: 100%; position: relative; &:hover { box-shadow: 0px 8px 20px 0px rgba(2,47,57,.10); transform: translateY(-2px) !important; } > div { height: 100%; } .category-logo { float: unset; margin: 0 auto; } .category-name { margin-top: 1.25em; } h3 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); a[href] { flex-direction: column-reverse; width: 250px; } } &:after { position: absolute; width: 100%; height: 100%; top: 0; left: 0; content: ""; z-index: 1; box-sizing: border-box; pointer-events: none; opacity: 0.35; border-color: inherit; } } } }