How to change categories style?

UX
14

There many ways to center things with CSS. I had a bit of time so I decided to revise the code to something a little bit more presentable.

Here’s what I ended up with:

category box layout
category box layout1679×1304 165 KB

And here’s what the code looks like:

.categories-and-latest {
	flex-direction: column;
}

.category-list {
	thead,
	.topics,
	.subcategories,
	.category-description {
		display: none;
	}

	tbody {
		text-align: center;

		tr {
			display: inline-block;
			width: 250px;
			height: 250px;
			margin: 0.75em;
			border: 1px solid rgba(0, 0, 0, 0.1) !important;
			border-left-color: transparent;

		}

		.category {
			padding: 0;
			border-width: 0;
			display: block;
			width: 100%;
			height: 100%;
			position: relative;

			> div {
				height: 100%;
				background: #f2f2f2;
			}

			.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] {
					display: flex;
					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;
				border-left: 6px solid;
				opacity: 0.35;
				border-color: inherit;
			}
		}
	}
}

And like @erlend_sh pointed out, it’s only a matter of time before this makes its way to core. :+1:

17 Likes