A Pen by 1cco

Thumbnail
This awesome code was written by 1cco, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 1cco ©
  • HTML
  • CSS
  • JavaScript
    div.container
	div.text
		p.
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque gravida risus quis risus accumsan euismod ac ut leo. Sed vitae purus tempor orci maximus porta. Morbi cursus justo tellus, sit amet egestas nisl volutpat non. Ut ac enim id velit pellentesque congue non dignissim tortor. Morbi venenatis dictum nulla, a aliquet felis ultrices sed. Etiam ac lectus non sapien dignissim iaculis. In finibus, justo in finibus vehicula, ipsum tortor ultricies felis, sed feugiat erat odio ac erat. Morbi vitae pellentesque ligula. Nullam dapibus nec lacus vitae porta. Etiam suscipit nisl non est efficitur egestas. Nulla fringilla a velit non sodales. Vestibulum lobortis et nunc in viverra.
		.graphics
			.graphic.right
		p.
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu massa id tellus iaculis aliquet. Sed faucibus justo eu porta dignissim. Quisque dolor quam, ultrices ac diam et, dapibus mollis purus. Curabitur posuere magna sed tellus malesuada, vulputate viverra ligula dapibus. Sed efficitur nulla libero, venenatis tincidunt neque ullamcorper vitae.>
		p.
			Aliquam placerat lobortis libero, vitae rhoncus lacus convallis eu. Curabitur ac libero ullamcorper, pellentesque tellus id, viverra ligula. Cras molestie odio vel est viverra ultricies. Fusce in mi sit amet tortor ornare suscipit. Donec posuere nulla vel magna feugiat, id ultrices augue pulvinar.
		p.
			Mauris molestie nisi ut lacinia imperdiet. Cras suscipit enim urna, id posuere purus feugiat vitae. Nullam a rhoncus purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean sit amet ex ut dui convallis molestie nec nec <b>ante.</b>
	.graphics
		.graphic.right
		.graphic.left
		.graphic.center

/*Downloaded from https://www.codeseek.co/1cco/a-pen-by-1cco-jKBbNQ */
    @import url('https://fonts.googleapis.com/css?family=Noto+Sans');
body {
	margin: 0;
	padding: 0;
}
.container {
	width: 80%;
	margin: 0 auto;
	.text {
		font-size: 16px;
		line-height: 1.6;
		font-family: 'Noto Sans', sans-serif;
	}
	.graphics {
		position: relative;
		.graphic {
			border: 1px solid #ccc;
			width: 50px;
			height: 50px;
			position: absolute;
			&.left {
				left: 0;
			}
			&.right {
				right: 0;
			}
			&.center {
				left: 50%;
				transform: translateX(-50%);
			}
		}
	}
}


/*Downloaded from https://www.codeseek.co/1cco/a-pen-by-1cco-jKBbNQ */
    

$(function() {
	$p = $('.text p');
	$p.each(function(i, e){
		var last = getLastChar(e);
	});
});

function getLastChar($p) {
	var last;
	var h = $($p).html();
	var t = $($p).text();
	var c = $($p).children();
	var lh = h[h.length - 1],
		lt = t[t.length - 1], 
		lc = c[c.length - 1];
	console.log(lh, lt, lc);
	if (lh !== lt && c.length > 0) {
		last = getLastChar(lc);
	} else if (lh === lt) {
		last = lt;
	}
	return '';
}

Comments