Template:TutorialCard/styles.css - Revision history

Anthony at 23:02, 2 April 2026

2026-04-02T23:02:24Z

← Older revision		Revision as of 23:02, 2 April 2026
Line 94:		Line 94:
	cursor: pointer;		cursor: pointer;
	padding: 0;		padding: 0;
	margin-~~left~~: ~~auto~~;		align-self: flex-end;
			margin-top: 4px;
	position: relative;		position: relative;
	z-index: 30; ~~/* Higher than card link overlay */~~		z-index: 30;
	}		}

Line 207:		Line 208:

	.tutorial-card-stats {		.tutorial-card-stats {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			gap: 3px;
			margin-top: 6px;
			padding-top: 8px;
			border-top: 1px solid var(--border-color-base);
	font-size: 0.78em;		font-size: 0.78em;
	color: var(--color-base--subtle);		color: var(--color-base--subtle);
	~~margin-top: 4px;~~
	~~display: flex;~~
	~~align-items: center;~~
	~~gap: 10px;~~
	position: relative;		position: relative;
	z-index: 20; ~~/* Ensures text and buttons are clickable */~~		z-index: 20;
	}		}

Anthony at 03:05, 2 April 2026

2026-04-02T03:05:45Z

← Older revision		Revision as of 03:05, 2 April 2026
Line 7:		Line 7:

	.tutorial-card {		.tutorial-card {
	width: ~~220px~~;		width: 250px; /* Increased to fix squished text */
	background-color: var(--color-surface-1);		background-color: var(--color-surface-1);
	border: 1px solid;		border: 1px solid;
Line 96:		Line 96:
	margin-left: auto;		margin-left: auto;
	position: relative;		position: relative;
	z-index: 20; /* ~~Keeps button clickable over title~~ overlay */		z-index: 30; /* Higher than card link overlay */
	}		}

Line 103:		Line 103:
	}		}

	~~/* Fixed Image Clipping */~~
	.tutorial-card-image {		.tutorial-card-image {
	width: 100%;		width: 100%;
Line 179:		Line 178:
	margin-bottom: 6px;		margin-bottom: 6px;
	position: relative;		position: relative;
	z-index: 1;		z-index: 20;
	}		}

Line 215:		Line 214:
	gap: 10px;		gap: 10px;
	position: relative;		position: relative;
	z-index: 1;		z-index: 20; /* Ensures text and buttons are clickable */
	}		}

Anthony at 03:00, 2 April 2026

2026-04-02T03:00:09Z

@@ Line 19: / Line 19: @@
      box-sizing: border-box;
      position: relative;
      text-align: left;
-     transition: box-shadow 0.2s, border-color 0.2s, transform 0.2s;
+     transition: box-shadow 0.2s, border-top-color 0.2s, border-right-color 0.2s, border-bottom-color 0.2s, border-left-color 0.2s, transform 0.2s;
+}
@@ Line 33: / Line 32: @@
+}
 .tutorial-card-image {
      width: 100%;
@@ Line 48: / Line 119: @@
 .tutorial-card-image img {
-     width: 100%;
+     max-width: 100%;
-     height: 100%;
+     max-height: 100%;
-     object-fit: cover;
+     object-fit: contain;
      border-radius: 3px;
      display: block;
@@ Line 107: / Line 178: @@
      gap: 4px;
      margin-bottom: 6px;
+}
@@ Line 139: / Line 212: @@
      margin-top: 4px;
      display: flex;
      gap: 10px;
+     position: relative;
      z-index: 1;
+}

Anthony at 01:11, 18 March 2026

2026-03-18T01:11:49Z

New page

/* Template:TutorialCard/styles.css */
.tutorial-card-wrap {
display: inline-block;
vertical-align: top;
margin: 8px;
}

.tutorial-card {
width: 220px;
background-color: var(--color-surface-1);
border: 1px solid;
border-top-color: var(--border-color-base);
border-right-color: var(--border-color-base);
border-bottom-color: var(--border-color-base);
border-left-color: var(--border-color-base);
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0,0,0,0.07);
overflow: hidden;
box-sizing: border-box;
position: relative;
cursor: pointer;
text-align: left;
transition: box-shadow 0.2s, border-color 0.2s, transform 0.2s;
}

.tutorial-card:hover {
box-shadow: 0 4px 16px rgba(0,0,0,0.2);
border-top-color: var(--wiki-primary);
border-right-color: var(--wiki-primary);
border-bottom-color: var(--wiki-primary);
border-left-color: var(--wiki-primary);
transform: translateY(-2px);
}

.tutorial-card-image {
width: 100%;
height: 160px;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--color-surface-2);
padding: 10px;
box-sizing: border-box;
overflow: hidden;
position: relative;
z-index: 0;
}

.tutorial-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 3px;
display: block;
}

.tutorial-card-image-fallback {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background-color: var(--color-surface-2);
border-radius: 3px;
border: 1px dashed;
border-top-color: var(--border-color-base);
border-right-color: var(--border-color-base);
border-bottom-color: var(--border-color-base);
border-left-color: var(--border-color-base);
}

.tutorial-card-body {
padding: 10px 12px 12px;
}

.tutorial-card-title {
font-weight: bold;
font-size: 0.95em;
line-height: 1.3;
margin-bottom: 8px;
display: block;
}

.tutorial-card-title a {
color: var(--color-base);
text-decoration: none;
display: block;
}

.tutorial-card-title a::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
}

.tutorial-card:hover .tutorial-card-title a {
color: var(--wiki-primary);
}

.tutorial-card-meta {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-bottom: 6px;
}

.tutorial-card-tag {
display: inline-block;
background-color: var(--wiki-primary-subtle);
color: var(--wiki-primary);
font-size: 0.75em;
font-weight: bold;
padding: 2px 7px;
border-radius: 3px;
white-space: nowrap;
}

.tutorial-card-difficulty-beginner,
.tutorial-card-difficulty-intermediate,
.tutorial-card-difficulty-advanced {
display: inline-block;
font-size: 0.75em;
font-weight: bold;
padding: 2px 7px;
border-radius: 3px;
}

.tutorial-card-difficulty-beginner { background-color: rgba(40, 167, 69, 0.15); color: #28a745; }
.tutorial-card-difficulty-intermediate { background-color: rgba(255, 193, 7, 0.20); color: #b8860b; }
.tutorial-card-difficulty-advanced { background-color: rgba(220, 53, 69, 0.15); color: #dc3545; }

.tutorial-card-stats {
font-size: 0.78em;
color: var(--color-base--subtle);
margin-top: 4px;
display: flex;
gap: 10px;
}

.tutorial-card-description {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--wiki-primary-overlay);
color: #fff;
font-size: 0.88em;
line-height: 1.5;
padding: 16px 14px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
border-radius: 4px;
opacity: 0;
z-index: 6;
transition: opacity 0.2s ease;
}

.tutorial-card:hover .tutorial-card-description {
opacity: 1;
}