~otheb/waffles

c2e2718cc0df0c472df63e1b6977f4e190b0393e — Olie Ayre 4 years ago dabe6b3 master
Made cards mockup

Cards mockup is a design for the cards that would appear in the user's
timelines.
4 files changed, 137 insertions(+), 0 deletions(-)

A designs/cards/global.css
A designs/cards/index.html
A designs/profile-picture.jpg
A designs/template.css
A designs/cards/global.css => designs/cards/global.css +68 -0
@@ 0,0 1,68 @@
.card {
	display : block ;
	background-color : #1f1f1f ;
	width : 400px ;
	min-height : 70px ;
	max-height : 200px ;
	position : relative ;
	margin : 10px 10px 10px 30px ;
	padding : 10px 10px 10px 50px ;
	border-radius : 5px ;
	box-shadow : 5px 5px 10px #282828 ;
}

.card > .profile img {
	width : 60px ;
	height : 60px ;
	border-radius : 100% ;
	position : absolute ;
	top : 15px ;
	left : -30px ;
	border : 4px solid #1f1f1f ;
	object-fit : cover ;
}

.user {
	display : block ;
	color : #6e6e6e ;
	margin : 0 0 5px 0 ;
	white-space : nowrap ;
	overflow : hidden ;
	text-overflow : ellipsis ;
}

.user strong { color : #d5d5d5 ; }

.header {
	color : #6e6e6e ;
	margin : 0 0 5px 0 ;
	white-space : nowrap ;
	overflow : hidden ;
	text-overflow : ellipsis ;
	display : block ;
}

.header h1 {
	color : #d5d5d5 ;
	font-size : 15px ;
	display : inline ;
	margin : 0 ;
}

.card > a { text-decoration : none ; }

.card > a.header:hover > h1 ,
.card > a.user:hover > strong {
	text-decoration : underline ;
}

.card > .preview {
	color : #d5d5d5 ;
	display : block ;
	padding : 0 ;
	margin : 0 ;
}

p {
	margin : 10px 0px ;
}

A designs/cards/index.html => designs/cards/index.html +61 -0
@@ 0,0 1,61 @@
<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="/template.css">
		<link rel="stylesheet" type="text/css" href="global.css">
	</head>
	<body>
		<article class="card">
			<a class="profile" href="#">
				<img src="/profile-picture.jpg">
			</a>
			<a class="user" href="#">
				<strong>I like waffles</strong>
				@toppedwith@maple.syrup
			</a>
			<a class="header" href="#">
				<time>31 Apr 1834</time>
				<h1>This is the topic of my waffle that's long and truncates</h1>
			</a>
			<a class="preview" href="#">
				<p>This contains the most recent paragraph section of the waffle
				such that the user may get an idea of what's being talked about
				without having to click on the waffle to see what it's
				about.</p>
			</a>
		</article>
		<article class="card">
			<a class="profile" href="#">
				<img src="/profile-picture.jpg">
			</a>
			<a class="user" href="#">
				<strong>What the fuck</strong>
				@ishappening@sane.people
			</a>
			<a class="header" href="#">
				<time>3m ago</time>
				<h1>I'm a giraffe</h1>
			</a>
			<a class="preview" href="#">
				<p>So anyway, there I was with bacon down my shirt...</p>
			</a>
		</article>
		<article class="card">
			<a class="profile" href="#">
				<img src="/profile-picture.jpg">
			</a>
			<a class="user" href="#">
				<strong>BOI</strong>
				@BOI@BOI.boi
			</a>
			<a class="header" href="#">
				<time>in 7h</time>
				<h1>Ya boi can time travel</h1>
			</a>
			<a class="preview" href="#">
				<p>Look lmao ya boi can time travel hello from 7 hours into the
				future</p>
			</a>
		</article>
	</body>
</html>

A designs/profile-picture.jpg => designs/profile-picture.jpg +0 -0
A designs/template.css => designs/template.css +8 -0
@@ 0,0 1,8 @@
html {
	display : flex ;
	justify-content : center ;
	align-items : center ;
	height : 100% ;
	font-family : sans ;
	background-color : #2e2e2e ;
}