Email signature and logos

email-signature.html

@@ -8,13 +8,14 @@
       <tr>
         <td
           rowspan="3"
-          style="vertical-align: top; border-right: 2px solid #212138; width: 48px"
+          style="vertical-align: center; border-right: 2px solid #212138; width: 48px"
         >
-          <span
+          <img
-            style="font-size: 46px; font-weight: 300; color: #212138; line-height: 1em;"
+            src="https://michalvankodev/images/m-logo.png"
-          >
+            alt="m-logo"
-            m
+            title="Logo"
-          </span>
+            style="height: 60px;"
+          />
         </td>
 
         <td

prettier.config.js

@@ -0,0 +1,7 @@
+// prettier.config.js or .prettierrc.js
+module.exports = {
+  trailingComma: 'es5',
+  tabWidth: 2,
+  semi: false,
+  singleQuote: true,
+}

static/global.css

@@ -1,82 +1,90 @@
 html {
-	scroll-behavior: smooth;
+  scroll-behavior: smooth;
 }
 
 body {
-	margin: 0;
+  margin: 0;
-	font-family: Cantarell, Roboto, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+  font-family: Cantarell, Roboto, -apple-system, BlinkMacSystemFont, Segoe UI,
-	font-size: 16px;
+    Oxygen, Ubuntu, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-	line-height: 1.5;
+  font-size: 16px;
-	color: #42436a;	
+  line-height: 1.5;
+  color: #42436a;
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1,
-	margin: 0 0 0.5em 0;
+h2,
-	font-weight: 200;
+h3,
-	line-height: 1.2;
+h4,
-	text-shadow: 1px 1px 1px #c6c4b7;
+h5,
-	color: #212138;
+h6 {
-	letter-spacing: -0.01em;
+  margin: 0 0 0.5em 0;
+  font-weight: 200;
+  line-height: 1.2;
+  text-shadow: 1px 1px 1px #c6c4b7;
+  color: #212138;
+  letter-spacing: -0.01em;
 }
 
 h1 {
-	font-size: 2.5em;
+  font-size: 2.5em;
 }
 
 h2 {
-	font-size: 1.7em;
+  font-size: 1.7em;
 }
 
 h3 {
-	font-size: 1.5em;
+  font-size: 1.5em;
 }
 
 h4 {
-	font-size: 1.3em;
+  font-size: 1.3em;
 }
 
 a {
-	color: #2e2ed9;
+  color: #2e2ed9;
-	text-decoration: none;
+  text-decoration: none;
-	transition: 0.2s;
+  transition: 0.2s;
 }
 
 a:visited {
-	color: #9a2ed9;
+  color: #9a2ed9;
 }
 
 a:hover {
-	color: #2e86d9;
+  color: #2e86d9;
-	text-decoration: underline;
+  text-decoration: underline;
 }
 
-
 code {
-	font-family: menlo, inconsolata, monospace;
+  font-family: menlo, inconsolata, monospace;
-	font-size: calc(1em - 2px);
+  font-size: calc(1em - 2px);
-	color: #555;
+  color: #555;
-	background-color: #f0f0f0;
+  background-color: #f0f0f0;
-	padding: 0.2em 0.4em;
+  padding: 0.2em 0.4em;
-	border-radius: 2px;
+  border-radius: 2px;
 }
 
 p {
-	margin: 0;
+  margin: 0;
 }
 
+.tearkiss {
+  color: #25b5c5;
+}
 
 ::selection {
-	background: #0dd0d0;
+  background: #25b5c5;
 }
 
 @media only screen and (min-width: 400px) {
-	body {
+  body {
-		font-size: 18px;
+    font-size: 18px;
-	}
+  }
 }
 
 @media only screen and (min-width: 700px) {
-	body {
+  body {
-		font-size: 24px;
+    font-size: 24px;
-	}
+  }
 }