Style profile some more

less/core.less

@@ -1,4 +1,26 @@
 @themeColor: #1FBF99;
+@buttonsColor: #2FD6AF;
+
+html {
+	font-size: 18pt;
+}
+
+html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline;
+}
+
+strong {
+    color: inherit;
+    font-weight: bolder;
+}
+em {
+    font-style: italic;
+}
 
 body {
 	min-width: 320px;
@@ -9,6 +31,19 @@ body {
     background-color: #F7F7F7;
 }
 
+*, *:before, *:after {
+	box-sizing: border-box;
+}
+
+a {
+    -moz-transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
+    -webkit-transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
+    -ms-transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
+    transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
+    color: inherit;
+    text-decoration: underline;
+}
+
 h1, h2, h3, p {
     color: rgba(0, 0, 0, 0.42);
     font-family: 'Roboto', 'sans-serif';
@@ -20,6 +55,12 @@ h1, h2, h3, p {
     text-align: justify;
 }
 
+h1 {
+	line-height: 1.125;
+	font-weight: 700;
+	text-align: center;
+}
+
 h2 {
     color: @themeColor;
     letter-spacing: -0.05rem;
@@ -28,3 +69,227 @@ h2 {
     font-weight: 500;
     text-align: inherit;
 }
+
+#wrapper {
+	-webkit-overflow-scrolling: touch;
+    display: -moz-flex;
+    display: -webkit-flex;
+    display: -ms-flex;
+    display: flex;
+    -moz-flex-direction: column;
+    -webkit-flex-direction: column;
+    -ms-flex-direction: column;
+    flex-direction: column;
+    -moz-align-items: center;
+    -webkit-align-items: center;
+    -ms-align-items: center;
+    align-items: center;
+    -moz-justify-content: center;
+    -webkit-justify-content: center;
+    -ms-justify-content: center;
+    justify-content: center;
+    min-height: 100vh;
+    position: relative;
+    z-index: 2;
+    overflow: hidden;
+}
+
+#main {
+	display: -moz-flex;
+    display: -webkit-flex;
+    display: -ms-flex;
+    display: flex;
+    position: relative;
+    max-width: 100%;
+    z-index: 1;
+    -moz-align-items: center;
+    -webkit-align-items: center;
+    -ms-align-items: center;
+    align-items: center;
+    -moz-justify-content: center;
+    -webkit-justify-content: center;
+    -ms-justify-content: center;
+    justify-content: center;
+    -moz-flex-grow: 0;
+    -webkit-flex-grow: 0;
+    -ms-flex-grow: 0;
+    flex-grow: 0;
+    -moz-flex-shrink: 0;
+    -webkit-flex-shrink: 0;
+    -ms-flex-shrink: 0;
+    flex-shrink: 0;
+    text-align: center;
+    -moz-transition: opacity 1.5s ease 0s,-moz-transform 1.5s ease 0s;
+    -webkit-transition: opacity 1.5s ease 0s,-webkit-transform 1.5s ease 0s;
+    -ms-transition: opacity 1.5s ease 0s,-ms-transform 1.5s ease 0s;
+    transition: opacity 1.5s ease 0s,transform 1.5s ease 0s;
+
+	&> .inner {
+		position: relative;
+		z-index: 1;
+		border-radius: inherit;
+		padding: 4rem 3rem;
+		max-width: 100%;
+		width: 61rem;
+
+		&> * {
+			margin-top: 1.5rem;
+			margin-bottom: 1.5rem;
+			&> * {
+				margin-top: 1.5rem;
+				margin-bottom: 1.5rem;
+			}
+		}
+		&> :first-child {
+			margin-top: 0 !important;
+		}
+		&> *:last-child {
+			margin-bottom: 0 !important;
+		}
+	}
+}
+
+.container {
+	&> .inner {
+		padding: 4.5rem 4.5rem;
+		width: 80rem;
+		background-color: #FFFFFF;
+		border-style: solid;
+		border-color: rgba(0,0,0,0.102);
+		border-radius: 0.75rem;
+		display: -moz-inline-flex;
+		display: -webkit-inline-flex;
+		display: -ms-inline-flex;
+		display: inline-flex;
+		-moz-flex-wrap: wrap;
+		-webkit-flex-wrap: wrap;
+		-ms-flex-wrap: wrap;
+		flex-wrap: wrap;
+		-moz-align-items: flex-start;
+		-webkit-align-items: flex-start;
+		-ms-align-items: flex-start;
+		align-items: flex-start;
+		vertical-align: top;
+		position: relative;
+		max-width: 100%;
+
+		&> * {
+			-moz-flex-shrink: 0;
+			-webkit-flex-shrink: 0;
+			-ms-flex-shrink: 0;
+			flex-shrink: 0;
+			-moz-flex-grow: 0;
+			-webkit-flex-grow: 0;
+			-ms-flex-grow: 0;
+			flex-grow: 0;
+			max-width: 100%;
+			padding: 0 0 0 9rem;
+
+			&:first-child {
+				margin-left: -9rem;
+				&:before {
+					display: none;
+				}
+			}
+
+			&:before {
+				content: '';
+				display: block;
+				position: absolute;
+				width: 0;
+				margin-left: calc(-4.5rem - 0.5px);
+				border-left: solid 1px rgba(0,0,0,0.102);
+				top: 0;
+				height: 100%;
+			}
+			&> * {
+				margin-top: 1.5rem;
+				margin-bottom: 1.5rem;
+				&:first-child {
+					margin-top: 0 !important;
+				}
+				&:last-child {
+					margin-bottom: 0 !important;
+				}
+			}
+		}
+
+		&> :nth-child(1) {
+			width: calc(60% + 4.5rem);
+			text-align: center;
+		}
+		&> :nth-child(2) {
+			width: calc(40% + 4.5rem);
+			text-align: center;
+		}
+	}
+}
+
+#bio {
+	color: rgba(0, 0, 0, 0.322);
+    font-family: 'Open Sans', 'sans-serif';
+    font-size: 1em;
+    letter-spacing: -0.025rem;
+    width: 100%;
+    line-height: 1.625;
+    font-weight: 400;
+    text-align: justify;
+	p {
+		font-size: 1em;
+	}
+}
+
+.image {
+	position: relative;
+    overflow: hidden;
+    max-width: 100%;
+    display: block;
+	img {
+		width: 100%;
+		max-width: 100%;
+		display: inline-block;
+		vertical-align: top;
+		width: 6.375rem;
+		border-radius: 100%;
+	}
+}
+
+ul {
+	list-style: none;
+}
+
+.buttons li a {
+    text-decoration: none;
+    text-align: center;
+    white-space: nowrap;
+    max-width: 100%;
+}
+
+.buttons {
+	width: 100%;
+    padding: 0.375rem 0;
+    cursor: default;
+    padding: 0;
+    letter-spacing: 0;
+
+	li {
+		display: block;
+		margin: 0.75rem 0;
+		&:first-child {
+			margin-top: 0;
+		}
+		a {
+			display: inline-block;
+			width: 17rem;
+			height: 3rem;
+			line-height: 3rem;
+			padding: 0 1.5rem;
+			font-size: 1em;
+			font-family: 'Source Sans Pro', 'sans-serif';
+			font-weight: 700;
+			border-radius: 0.25rem;
+			background-color: @buttonsColor;
+			color: #FFFFFF;
+		}
+	}
+}

templates/profile.tmpl

@@ -10,18 +10,18 @@
 		<div id="wrapper">
 			<div id="main">
 				<div class="inner">
-					<div id="container01" class="container">
+					<div class="container">
 						<div class="inner">
 							<div>
-								<div id="image01" class="image">
+								<div class="image">
 									<img src="" alt="Profile Image" />
 								</div>
-								<h1 id="text04">{{.Name.String}}</h1>
-								<h2 id="text03">{{.Header.String}}</h2>
+								<h1>{{.Name.String}}</h1>
+								<h2>{{.Header.String}}</h2>
 								<p id="bio">{{.RenderedBio}}</p>
 							</div>
 							<div>
-								<ul id="buttons02" class="buttons">
+								<ul class="buttons">
 									<li><a href="http://domain.tld/path" class="button n01">Twitter</a></li>
 									<li><a href="http://domain.tld/path" class="button n02">Mastodon</a></li>
 									<li><a href="http://domain.tld/path" class="button n03">Pixelfed</a></li>