Template:Pepe/styles.css - Revision history

SomebodyRum at 15:13, 23 April 2026

2026-04-23T15:13:24Z

← Older revision		Revision as of 15:13, 23 April 2026
Line 1:		Line 1:
	/* Outer container forces the entire template to shrink-wrap ~~(no extra width)~~ */		/* Outer container forces the entire template to shrink-wrap */
	.pepe-outer {		.pepe-outer {
	display: table;		display: table;
	margin: ~~0.5em~~ auto;		margin: 1em auto; /* Slightly increased margin to make room for the shadow */
	}		}

Line 12:		Line 12:
	justify-content: space-between;		justify-content: space-between;
	border: 5px solid #417a05;		border: 5px solid #417a05;
			border-radius: 2px; /* Tiny bit of polish */
	background: linear-gradient(#8DB255, #5B8930);		background: linear-gradient(#8DB255, #5B8930);
	~~text~~-shadow: ~~0px 0px 40px #00fe20~~, ~~0px 0px 2px #00fe20~~;		box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); /* Nice polished drop shadow */
	overflow: hidden;		overflow: hidden;
	}		}
Line 23:		Line 24:
	/*		/*
	==========================================		==========================================
	KEK TEXT BACKGROUND (~~Border Color~~, ~~Transparent~~)		KEK TEXT BACKGROUND (Crisp, No Glow)
	==========================================		==========================================
	*/		*/
Line 30:		Line 31:
	top: -50px; left: -50px; right: -50px; bottom: -50px;		top: -50px; left: -50px; right: -50px; bottom: -50px;
	z-index: 1;		z-index: 1;
	~~/* Matches the #417a05 border at 30% opacity */~~
	color: rgba(65, 122, 5, 0.3);		color: rgba(65, 122, 5, 0.3);
	font-family: Arial, sans-serif;		font-family: Arial, sans-serif;
Line 39:		Line 39:
	text-align: center;		text-align: center;
	word-wrap: break-word;		word-wrap: break-word;
			text-shadow: none; /* explicitly removes the ugly glow */
	}		}

Line 125:		Line 126:
	z-index: 5;		z-index: 5;
	line-height: 1.2;		line-height: 1.2;
			/* The glow is now ONLY applied to the foreground text */
			text-shadow: 0px 0px 40px #00fe20, 0px 0px 2px #00fe20;
	}		}

SomebodyRum at 15:08, 23 April 2026

2026-04-23T15:08:53Z

← Older revision		Revision as of 15:08, 23 April 2026
Line 9:		Line 9:
	position: relative;		position: relative;
	display: flex;		display: flex;
	align-items: stretch; ~~/* Allows children to define their vertical alignment */~~		align-items: stretch;
	justify-content: space-between;		justify-content: space-between;
	border: 5px solid #417a05;		border: 5px solid #417a05;
Line 23:		Line 23:
	/*		/*
	==========================================		==========================================
	KEK TEXT BACKGROUND		KEK TEXT BACKGROUND (Border Color, Transparent)
	==========================================		==========================================
	*/		*/
Line 30:		Line 30:
	top: -50px; left: -50px; right: -50px; bottom: -50px;		top: -50px; left: -50px; right: -50px; bottom: -50px;
	z-index: 1;		z-index: 1;
	color: rgba(0, ~~255~~, 32, 0.15); ~~/* Faint green watermark */~~		/* Matches the #417a05 border at 30% opacity */
			color: rgba(65, 122, 5, 0.3);
	font-family: Arial, sans-serif;		font-family: Arial, sans-serif;
	font-size: 28px;		font-size: 28px;
Line 49:		Line 50:
	position: relative;		position: relative;
	width: 110px;		width: 110px;
	height: 110px; ~~/* Fixed height ensures the container doesn't collapse */~~		height: 110px;
	align-self: flex-end; ~~/* Anchors the entire left container to the absolute bottom */~~		align-self: flex-end;
	flex-shrink: 0;		flex-shrink: 0;
	z-index: 5;		z-index: 5;
Line 65:		Line 66:
	.pepe-body {		.pepe-body {
	position: absolute;		position: absolute;
	bottom: 0; ~~/* Touches the exact bottom of the box */~~		bottom: 0;
	left: 0; ~~/* Touches the exact left of the box */~~		left: 0;
	z-index: 10;		z-index: 10;
	}		}

	/* ~~Hand positioned with your exact coordinates~~ */		/*
	.pepe-hand {		==========================================
			THE ANIMATED HAND
			==========================================
			*/

			.pepe-hand-container {
	position: absolute;		position: absolute;
	bottom: -20px;		bottom: -20px;
	left: -20px;		left: -20px;
	z-index: 15;		z-index: 15;
			cursor: pointer;
			outline: none;
			}

			/* Controls the infinite swaying */
			.pepe-hand-swing {
			transform-origin: bottom left;
			animation: pepe-swing 2.5s ease-in-out infinite alternate;
			}

			@keyframes pepe-swing {
			0% { transform: rotate(-2deg); }
			100% { transform: rotate(7deg); }
			}

			/* Controls the bouncy click scale */
			.pepe-hand-scale {
	transform-origin: bottom left;		transform-origin: bottom left;
	transition: transform 0.2s ~~ease~~-~~in-out~~;		transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	}		}

			/* When clicked, scales up and rotates forward instantly */
			.pepe-hand-container:active .pepe-hand-scale {
			transform: scale(1.3) rotate(15deg) translate(5px, -5px);
			transition: transform 0.05s linear;
			}


	/*		/*
	==========================================		==========================================
	CENTER CONTENT ~~(Shrunk & Tightened)~~		CENTER CONTENT
	==========================================		==========================================
	*/		*/
Line 92:		Line 122:
	align-items: center;		align-items: center;
	text-align: center;		text-align: center;
	padding: ~~5px~~ 15px; ~~/* Tight padding to keep the box small */~~		padding: 10px 15px;
	z-index: 5;		z-index: 5;
	line-height: 1.2;		line-height: 1.2;
Line 101:		Line 131:
	font-size: 1.3em;		font-size: 1.3em;
	font-weight: bold;		font-weight: bold;
	margin-bottom: ~~2px~~;		margin-bottom: 5px;
	}		}
	.pepe-title a { color: #ffffff !important; }		.pepe-title a { color: #ffffff !important; }

	~~.pepe-subtitle {~~
	~~color: #ffa500;~~
	~~font-size: 1.1em;~~
	~~font-weight: bold;~~
	~~margin-bottom: 5px;~~
	}

	.pepe-audio { margin-bottom: 5px; }		.pepe-audio { margin-bottom: 5px; }
Line 133:		Line 156:
	@media (max-width: 550px) {		@media (max-width: 550px) {
	.pepe-wrapper { flex-direction: column; align-items: center; }		.pepe-wrapper { flex-direction: column; align-items: center; }
	.pepe-left { align-self: flex-start; } ~~/* Moves Pepe to top left on mobile */~~		.pepe-left { align-self: flex-start; }
	.pepe-title { font-size: 1.1em; }		.pepe-title { font-size: 1.1em; }
	~~.pepe-subtitle { font-size: 1em; }~~
	}		}

SomebodyRum at 15:03, 23 April 2026

2026-04-23T15:03:54Z

Show changes

SomebodyRum at 14:58, 23 April 2026

2026-04-23T14:58:13Z

← Older revision		Revision as of 14:58, 23 April 2026
Line 3:		Line 3:
	position: relative;		position: relative;
	display: flex;		display: flex;
	align-items: ~~stretch~~;		align-items: center; /* Centers everything vertically, prevents vertical stretching */
	justify-content: space-between;		justify-content: space-between;
	margin: 0.5em auto;		margin: 0.5em auto;
	max-width: 800px;		max-width: 800px;
	border: 5px solid #417a05;		border: 5px solid #417a05;
	~~/* Safe gradient applied here instead of inline HTML */~~
	background: linear-gradient(#8DB255, #5B8930);		background: linear-gradient(#8DB255, #5B8930);
	text-shadow: 0px 0px 40px #00fe20, 0px 0px 2px #00fe20;		text-shadow: 0px 0px 40px #00fe20, 0px 0px 2px #00fe20;
	overflow: hidden; ~~/* Clips the corner characters and mosaic */~~		overflow: hidden;
	}		}

Line 20:		Line 19:
	/*		/*
	==========================================		==========================================
	THE MOSAIC BACKGROUND ~~LAYER~~		THE MOSAIC BACKGROUND (Single Centered Row)
	==========================================		==========================================
	*/		*/
Line 27:		Line 26:
	top: 0; left: 0; right: 0; bottom: 0;		top: 0; left: 0; right: 0; bottom: 0;
	display: flex;		display: flex;
	flex-wrap: ~~wrap~~;		flex-wrap: nowrap; /* Forces a single line */
	~~opacity~~: ~~0.15~~; /* ~~Makes~~ the ~~tiled faces semi~~-~~transparent~~ */		align-items: center; /* Vertically centers the GIFs */
			justify-content: center; /* Horizontally centers the row */
			opacity: 0.15;
	z-index: 1;		z-index: 1;
	~~align-content: flex-start;~~
	}		}

Line 46:		Line 46:
	.pepe-left {		.pepe-left {
	position: relative;		position: relative;
	width: ~~110px~~; /* ~~Exact match to right side for perfect centering~~ */		width: 100px;
			height: 100px; /* Keeps the container tight */
	flex-shrink: 0;		flex-shrink: 0;
	z-index: 5;		z-index: 5;
Line 59:		Line 60:
	}		}

	~~/* Body positioned at the cut bottom-left corner */~~
	.pepe-body {		.pepe-body {
	position: absolute;		position: absolute;
Line 67:		Line 67:
	}		}

	/* Hand positioned with your ~~custom~~ offsets */		/* Hand positioned with your offsets */
	.pepe-hand {		.pepe-hand {
	position: absolute;		position: absolute;
	bottom: -~~20px~~;		bottom: -15px;
	left: -~~20px~~;		left: -15px;
	z-index: 15;		z-index: 15;
	transform-origin: bottom left;		transform-origin: bottom left;
Line 79:		Line 79:
	/*		/*
	==========================================		==========================================
	CENTER CONTENT		CENTER CONTENT (Tightened up)
	==========================================		==========================================
	*/		*/
Line 90:		Line 90:
	align-items: center;		align-items: center;
	text-align: center;		text-align: center;
	padding: ~~10px~~ 5px; /* ~~Tightened up the spacing so it's not overly big~~ */		padding: 5px; /* Extremely tight padding to shrink template height */
	z-index: 5;		z-index: 5;
			line-height: 1.1; /* Reduces dead space between lines of text */
	}		}

	.pepe-title {		.pepe-title {
	color: #6666cc;		color: #6666cc;
	font-size: 1.~~44em~~;		font-size: 1.3em;
	font-weight: bold;		font-weight: bold;
	margin-bottom: 2px;		margin-bottom: 2px;
Line 104:		Line 105:
	.pepe-subtitle {		.pepe-subtitle {
	color: #ffa500;		color: #ffa500;
	font-size: 1.~~2em~~;		font-size: 1.15em;
	font-weight: bold;		font-weight: bold;
	margin-bottom: ~~5px~~;		margin-bottom: 4px;
	}		}

	.pepe-audio { margin-bottom: ~~5px~~; }		.pepe-audio { margin-bottom: 4px; }

	/*		/*
Line 121:		Line 122:
	align-items: center;		align-items: center;
	justify-content: center;		justify-content: center;
	width: ~~110px~~; ~~/* Exact match to left side for perfect centering */~~		width: 100px;
	padding: ~~10px~~;		padding: 5px;
	flex-shrink: 0;		flex-shrink: 0;
	z-index: 5;		z-index: 5;
Line 129:		Line 130:
	/* Mobile adjustments */		/* Mobile adjustments */
	@media (max-width: 650px) {		@media (max-width: 650px) {
	.pepe-left { width: ~~90px~~; }		.pepe-left { width: 80px; height: 80px; }
	.pepe-right { width: ~~90px~~; }		.pepe-right { width: 80px; }
	.pepe-left img { max-width: ~~90px~~; height: auto; }		.pepe-left img { max-width: 80px; height: auto; }
	.pepe-right img { max-width: 80px; height: auto; }		.pepe-right img { max-width: 80px; height: auto; }
	.pepe-title { font-size: 1.~~2em~~; }		.pepe-title { font-size: 1.1em; }
	.pepe-subtitle { font-size: 1.~~1em~~; }		.pepe-subtitle { font-size: 1em; }
			.pepe-bg-mosaic a.image { width: 50px; }
	}		}

SomebodyRum at 14:55, 23 April 2026

2026-04-23T14:55:43Z

← Older revision		Revision as of 14:55, 23 April 2026
Line 6:		Line 6:
	justify-content: space-between;		justify-content: space-between;
	margin: 0.5em auto;		margin: 0.5em auto;
	max-width: ~~850px;~~		max-width: 800px;
	~~min-height: 150px~~;
	border: 5px solid #417a05;		border: 5px solid #417a05;
			/* Safe gradient applied here instead of inline HTML */
			background: linear-gradient(#8DB255, #5B8930);
	text-shadow: 0px 0px 40px #00fe20, 0px 0px 2px #00fe20;		text-shadow: 0px 0px 40px #00fe20, 0px 0px 2px #00fe20;
	overflow: hidden; /* Clips the ~~character images cleanly to the border~~ */		overflow: hidden; /* Clips the corner characters and mosaic */
	}		}

Line 16:		Line 17:
	.pepe-wrapper p { display: contents; margin: 0; }		.pepe-wrapper p { display: contents; margin: 0; }
	.pepe-wrapper br { display: none; }		.pepe-wrapper br { display: none; }

			/*
			==========================================
			THE MOSAIC BACKGROUND LAYER
			==========================================
			*/
			.pepe-bg-mosaic {
			position: absolute;
			top: 0; left: 0; right: 0; bottom: 0;
			display: flex;
			flex-wrap: wrap;
			opacity: 0.15; /* Makes the tiled faces semi-transparent */
			z-index: 1;
			align-content: flex-start;
			}

			.pepe-bg-mosaic a.image {
			margin: 0; padding: 0; border: none; background: transparent;
			display: block; line-height: 0;
			}

	/*		/*
Line 25:		Line 46:
	.pepe-left {		.pepe-left {
	position: relative;		position: relative;
	width: ~~130px~~;		width: 110px; /* Exact match to right side for perfect centering */
	flex-shrink: 0;		flex-shrink: 0;
	z-index: 5;		z-index: 5;
	}		}

	~~/* Strip MediaWiki's default image borders and padding */~~
	.pepe-left a.image,		.pepe-left a.image,
	.pepe-right a.image {		.pepe-right a.image {
Line 39:		Line 59:
	}		}

	/* ~~Position the body exactly~~ at the cut bottom-left corner */		/* Body positioned at the cut bottom-left corner */
	.pepe-body {		.pepe-body {
	position: absolute;		position: absolute;
Line 47:		Line 67:
	}		}

	/* ~~Position the hand on top of the body (ready for future animations!)~~ */		/* Hand positioned with your custom offsets */
	.pepe-hand {		.pepe-hand {
	position: absolute;		position: absolute;
Line 54:		Line 74:
	z-index: 15;		z-index: 15;
	transform-origin: bottom left;		transform-origin: bottom left;
	~~/* I've added a transition so when you animate it later, it moves smoothly */~~
	transition: transform 0.2s ease-in-out;		transition: transform 0.2s ease-in-out;
	}		}
Line 71:		Line 90:
	align-items: center;		align-items: center;
	text-align: center;		text-align: center;
	padding: ~~15px~~ 10px;		padding: 10px 5px; /* Tightened up the spacing so it's not overly big */
	z-index: 5;		z-index: 5;
	}		}
Line 79:		Line 98:
	font-size: 1.44em;		font-size: 1.44em;
	font-weight: bold;		font-weight: bold;
	margin-bottom: ~~5px~~;		margin-bottom: 2px;
	}		}

	.pepe-title a { color: #ffffff !important; }		.pepe-title a { color: #ffffff !important; }

Line 88:		Line 106:
	font-size: 1.2em;		font-size: 1.2em;
	font-weight: bold;		font-weight: bold;
	margin-bottom: ~~8px~~;		margin-bottom: 5px;
	}		}

	.pepe-audio { margin-bottom~~: 8px; }~~		.pepe-audio { margin-bottom: 5px; }

	~~.pepe-redtext-container {~~
	~~margin-top~~: 5px;
	}

	/*		/*
Line 107:		Line 121:
	align-items: center;		align-items: center;
	justify-content: center;		justify-content: center;
	width: ~~130px~~;		width: 110px; /* Exact match to left side for perfect centering */
	padding: 10px;		padding: 10px;
	flex-shrink: 0;		flex-shrink: 0;
Line 115:		Line 129:
	/* Mobile adjustments */		/* Mobile adjustments */
	@media (max-width: 650px) {		@media (max-width: 650px) {
	~~.pepe-wrapper { min-height: 120px; }~~		.pepe-left { width: 90px; }
	.pepe-left { width: ~~100px~~; }		.pepe-right { width: 90px; }
	.pepe-right { width: ~~100px~~; }		.pepe-left img { max-width: 90px; height: auto; }
	.pepe-left img { max-width: ~~100px~~; height: auto; }		.pepe-right img { max-width: 80px; height: auto; }
	.pepe-right img { max-width: ~~90px~~; height: auto; }
	.pepe-title { font-size: 1.2em; }		.pepe-title { font-size: 1.2em; }
	.pepe-subtitle { font-size: 1.1em; }		.pepe-subtitle { font-size: 1.1em; }
	}		}

SomebodyRum at 14:51, 23 April 2026

2026-04-23T14:51:45Z

← Older revision		Revision as of 14:51, 23 April 2026
Line 50:		Line 50:
	.pepe-hand {		.pepe-hand {
	position: absolute;		position: absolute;
	bottom: -~~30px~~;		bottom: -20px;
	left: -~~50px~~;		left: -20px;
	z-index: 15;		z-index: 15;
	transform-origin: bottom left;		transform-origin: bottom left;

SomebodyRum at 14:49, 23 April 2026

2026-04-23T14:49:50Z

← Older revision		Revision as of 14:49, 23 April 2026
Line 50:		Line 50:
	.pepe-hand {		.pepe-hand {
	position: absolute;		position: absolute;
	bottom: -~~50px~~;		bottom: -30px;
	left: 50px;		left: -50px;
	z-index: 15;		z-index: 15;
	transform-origin: bottom left;		transform-origin: bottom left;

SomebodyRum at 14:49, 23 April 2026

2026-04-23T14:49:12Z

← Older revision		Revision as of 14:49, 23 April 2026
Line 50:		Line 50:
	.pepe-hand {		.pepe-hand {
	position: absolute;		position: absolute;
	bottom: 50px;		bottom: -50px;
	left: 0;		left: 50px;
	z-index: 15;		z-index: 15;
	transform-origin: bottom left;		transform-origin: bottom left;

SomebodyRum at 14:48, 23 April 2026

2026-04-23T14:48:15Z

← Older revision		Revision as of 14:48, 23 April 2026
Line 50:		Line 50:
	.pepe-hand {		.pepe-hand {
	position: absolute;		position: absolute;
	bottom: 0;		bottom: 50px;
	left: 0;		left: 0;
	z-index: 15;		z-index: 15;

SomebodyRum: Created page with "/* Main wrapper container / .pepe-wrapper { position: relative; display: flex; align-items: stretch; justify-content: space-between; margin: 0.5em auto; max-width: 850px; min-height: 150px; border: 5px solid #417a05; text-shadow: 0px 0px 40px #00fe20, 0px 0px 2px #00fe20; overflow: hidden; / Clips the character images cleanly to the border / } / Neutralize MediaWiki's automatic paragraph and break tags */ .pepe-wrapper p { display: contents; margin: 0; } ...."

2026-04-23T14:46:00Z

Created page with "Main wrapper container: .pepe-wrapper { position: relative; display: flex; align-items: stretch; justify-content: space-between; margin: 0.5em auto; max-width: 850px; min-height: 150px; border: 5px solid #417a05; text-shadow: 0px 0px 40px #00fe20, 0px 0px 2px #00fe20; overflow: hidden; Clips the character images cleanly to the border: } Neutralize MediaWiki's automatic paragraph and break tags: .pepe-wrapper p { display: contents; margin: 0; } ...."

New page

/* Main wrapper container */
.pepe-wrapper {
position: relative;
display: flex;
align-items: stretch;
justify-content: space-between;
margin: 0.5em auto;
max-width: 850px;
min-height: 150px;
border: 5px solid #417a05;
text-shadow: 0px 0px 40px #00fe20, 0px 0px 2px #00fe20;
overflow: hidden; /* Clips the character images cleanly to the border */
}

/* Neutralize MediaWiki's automatic paragraph and break tags */
.pepe-wrapper p { display: contents; margin: 0; }
.pepe-wrapper br { display: none; }

/*
==========================================
LEFT SIDE (Overlapping Characters)
==========================================
*/

.pepe-left {
position: relative;
width: 130px;
flex-shrink: 0;
z-index: 5;
}

/* Strip MediaWiki's default image borders and padding */
.pepe-left a.image,
.pepe-right a.image {
border: none;
background: transparent;
display: block;
line-height: 0;
}

/* Position the body exactly at the cut bottom-left corner */
.pepe-body {
position: absolute;
bottom: 0;
left: 0;
z-index: 10;
}

/* Position the hand on top of the body (ready for future animations!) */
.pepe-hand {
position: absolute;
bottom: 0;
left: 0;
z-index: 15;
transform-origin: bottom left;
/* I've added a transition so when you animate it later, it moves smoothly */
transition: transform 0.2s ease-in-out;
}

/*
==========================================
CENTER CONTENT
==========================================
*/

.pepe-center {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 15px 10px;
z-index: 5;
}

.pepe-title {
color: #6666cc;
font-size: 1.44em;
font-weight: bold;
margin-bottom: 5px;
}

.pepe-title a { color: #ffffff !important; }

.pepe-subtitle {
color: #ffa500;
font-size: 1.2em;
font-weight: bold;
margin-bottom: 8px;
}

.pepe-audio { margin-bottom: 8px; }

.pepe-redtext-container {
margin-top: 5px;
}

/*
==========================================
RIGHT SIDE (Spinning CD)
==========================================
*/

.pepe-right {
display: flex;
align-items: center;
justify-content: center;
width: 130px;
padding: 10px;
flex-shrink: 0;
z-index: 5;
}

/* Mobile adjustments */
@media (max-width: 650px) {
.pepe-wrapper { min-height: 120px; }
.pepe-left { width: 100px; }
.pepe-right { width: 100px; }
.pepe-left img { max-width: 100px; height: auto; }
.pepe-right img { max-width: 90px; height: auto; }
.pepe-title { font-size: 1.2em; }
.pepe-subtitle { font-size: 1.1em; }
}