Template:MainPage/styles.css: Difference between revisions

Revision as of 00:51, 9 May 2025

/*
	NAVIGATION CARDS
*/

.navigation {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	font-size: 15px;
	margin-bottom: 30px;
	color: white;
}

.navigation-card {
	padding: 12px;
	border: 1px solid #333;
	border-radius: 8px;
	overflow: hidden;
    transition: all 0.3s ease;
    background-color: #1e1e1e;
	font-weight:600;
	position: relative;
}

.navigation-card-background {
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0;
    transition: all 0.3s ease;
    z-index: 0;
}

.navigation-card-background img {
	height: 100%;
	width: auto;
}

.navigation-card-text {
	z-index: 1;
	display: flex;
	justify-content: center;
}

.navigation-card:hover .navigation-card-background {
	opacity: 0.20;
}

.navigation-card:hover {
	filter: brightness(1.60);
}

.news-section {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	background: linear-gradient(to right, #262626, #1e1e1e);
	border:1px solid #444;
	border-radius: 8px;
	padding: 15px;
	margin-top: 15px;
}

.news-title {
	border-bottom: 1px solid #444; 
	padding-bottom: 5px; 
	margin-bottom: 15px; 
	width: 100%;
	font-size: 1.5em;
}

.category-card {
	padding: 0;
	border: 0;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.category-card:hover {
	transform: scale(1.04);
}

.category-card__label {
	width: 100%;
	color: #f1f2f4;
	background-color: var(--color-pill);
	display:flex;
	align-items:center;
	justify-content:center;
	font-family: 'Saira Extra Condensed','Nunito','Saira',system-ui,-apple-system,sans-serif;
	font-weight: bold;
	font-size: 1.4rem;
	font-style: italic;
	border-radius: 0 0 6px 6px;
	text-transform: uppercase;
}

.category-card__label a {
	display: flex;
	width: 100%;
	justify-content: center;
	text-decoration: none;
	color: #fff;
}

.category-card__background {
	background: linear-gradient(#808b9a,#d5e2e6);
	border-radius: 6px 6px 0 0;
}

.category-card__background img {
	width: 100%;
	height: auto;
	padding: 8%;
	object-position: center;
	border-radius: 6px 6px 0 0;
}


/*
	JUST BUTTONS
*/

.card-button-grid {
	display: grid;
	grid-gap: 5px;
	text-align: center;
}

.card-button {
	display: flex;
}

.card-button a {
	flex-grow: 1;
	padding: 5px;
	/*border: 1px solid var(--color-button);*/
	border-radius: 6px;
    text-decoration: none !important;
    color: black;
    background: #f1aa1c;
}

.card-button a:hover {
	background: red;
}

@@ Line 1: / Line 1: @@
-/*
-	MAIN GRID and standard grid elements
-*/
-.main-grid {
-	display: grid;
-	grid: auto-flow dense/repeat( auto-fit, minmax( 10.2rem, 1fr ) );
-	grid-auto-rows: minmax( 3rem, auto );
-	grid-gap: var( --space-xs );
-	margin-top: 15px;
-}
-.card {
-	position: relative;
-	/*border: 1px solid var( --border-color-base );*/
-	border-radius: 6px;
-	background: #130918;
-	padding: 10px;
-}
-.card__label {
-	color: var( --color-base--subtle );
-	font-size: 16px;
-}
-.card__text {
-	margin-top: 15px;
-}
-.card__image img {
-	width: 100%;
-	height: auto;
-	border-radius: 6px;
-}
-.card__video video {
-	width: 100% !important;
-	height: auto !important;
-}
-.card__header {
-	font-family: 'Saira Extra Condensed','Nunito','Saira',system-ui,-apple-system,sans-serif;
-	font-weight: bold;
-	color: var( --color-base-emphasized );
-	font-size: 30px;
-	line-height: 1;
-	margin-bottom: 10px;
-}
-.card--col2 {
-	grid-column: span 2;
-}
-.card--col3 {
-	grid-column: span 3;
-}
-.card--col6 {
-	 grid-column: 1 / -1;
-}
-.card--row2 {
-	grid-row: span 2;
-}
-.card--row6 {
-	grid-row: span 6;
-}
-.card--row4 {
-	grid-row: span 4;
-}
-.card--row3 {
-	grid-row: span 3;
-}
-.card--row8 {
-	grid-row: span 8/auto;
-}
-.card--text {
-	margin-top: 0px;
-	padding: 15px;
-}
 /*
 	NAVIGATION CARDS
@@ Line 235: / Line 145: @@
 .card-button a:hover {
 	background: red;
-}
-/*
-	TEXT PILL THAT GOES TOP RIGHT OF IMAGE (A BIT JANK)
-*/
-.image-pill {
-    display: inline-block;
-    position: relative;
-    text-align: center;
-    margin-bottom: 5px;
-}
-.image-pill__text {
-    position: absolute;
-    right: 0;
-    top: 0;
-    border-radius: 6px;
-    background: #2396c5;
-    font-size: 14px;
-    border: none;
-    color: white;
-    padding: 1px 8px;
-    text-decoration: none !important;
-    margin: 5px 5px;
-    pointer-events: none;
-    font-family: 'Saira Extra Condensed','Nunito','Saira',system-ui,-apple-system,sans-serif;
-    font-style: italic;
-    font-weight: var( --font-weight-semibold );
-}
-/*
-	WIKI STAT STYLING
-*/
-.home-stats {
-	display: grid;
-	grid-auto-flow: column;
-	margin-top: 15px;
-	grid-template-columns: 50%;
-}
-.home-stats__item {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-}
-.home-stats__label {
-	color: var(--color-base--subtle);
-    letter-spacing: 0.05em;
-    white-space: nowrap;
-}
-.home-stats__data {
-	color: var(--color-base--emphasized);
-    font-weight: 500;
-    font-size: 30px;
-    white-space: nowrap;
-	font-family: 'Saira Condensed','Nunito','Saira',system-ui,-apple-system,sans-serif;
-}
-/*
-	RANDOM IDs
-*/
-#card--category--grid {
-	grid: auto-flow dense/repeat(auto-fit,minmax(6rem,1fr))
-}
-#patchnotes {
-	height: 0;
-	min-height: 100%;
-	overflow: auto;
-}
-#newcontent {
-	min-height: 0;
-	overflow: auto;
-	max-height: 650px;
-}
-#staff {
-    margin-top: 15px;
-	text-align: center;
-}
-#new-content__table tr:nth-child(n+8) {
-	display: none;
-}
-#new-content__table td {
-	font-size: 14px;
-}
-#new-content__table th {
-	display: none;
-}
-@media only screen and (max-width: 768px) {
-  #transitions-page {
-	grid-template-columns: 1fr;
-  }
-}
-h1 {
-	margin-top: 1em;
-}
-[aria-hidden="true"] {
-	display: none;
 }