Kevin-Mok
/
email-sig
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

Social icons, move pictures to right 

Add inline file.
master
Kevin Mok 5 years ago
parent
7175b71fa0
commit
d2fb2627b6
Signed by: Kevin-Mok GPG Key ID: AEA75288DC135CF5
5 changed files with 146 additions and 33 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      .gitignore
  2. 1
      emog-fix.md
  3. 45
      index.html
  4. 89
      inline.html
  5. 43
      style.scss

1
.gitignore
View File

@ -1,4 +1,5 @@
*.css
*.map
*.txt
test.html

1
emog-fix.md
View File

@ -0,0 +1 @@
- tbody 0 border

45
index.html
View File

@ -13,24 +13,23 @@
<table role="presentation">
<tbody>
<tr class="outer-row">
<td class="headshot-cell">
<a href="https://kevin-mok.com" target="_blank">
<img src="https://avatars3.githubusercontent.com/u/25857736?s=460&v=4"
name="preview-image-url" alt="kevin-mok-headshot"/>
</a>
</td>
<td class="description-cell">
<table role="presentation">
<tbody>
<tr>
<td colspan="2" class="full-name">Kevin Mok</td>
<td colspan="2" class="full-name">
Kevin Mok
</td>
</tr>
<tr>
<td colspan="2" class="title">Computer Science
Specialist</td>
<td colspan="2" class="title">
Computer Science Specialist
</td>
</tr>
<tr>
<td colspan="2" class="title">University of Toronto</td>
<td colspan="2" class="title">
University of Toronto
</td>
</tr>
<tr>
<td valign="top" class="website">
@ -42,20 +41,32 @@
<td colspan="2" class="social-icons">
<ul>
<li>
<a href="https://twitter.com/RobertCooper_RC">
<img src="https://drive.google.com/uc?id=0BxERWEfxe_eUY2RBc3dBSW92NVE" alt="Follow me on Twitter!"/>
<a href="https://github.com/Kevin-Mok" target="_blank">
<!-- <img src="http://test.khkm.tk/github.svg" alt=""/> -->
<img src="https://img.khkm.tk/uploads/big/2db206989793b732c143f15ffe2b694b.png" alt="github-icon"/>
</a>
</li>
<li>
<a href="https://git.kevin-mok.com/Kevin-Mok" target="_blank">
<img src="https://raw.githubusercontent.com/go-gitea/gitea/master/public/img/gitea-sm.png"
alt="gitea-icon" id="gitea-icon" />
</a>
</li>
<li>
<a href="https://fosstodon.org/web/accounts/93113" target="_blank">
<img src="https://img.khkm.tk/uploads/big/8e32935993f5ec3dee5ea2b86507ded8.png" alt="mastodon-icon"/>
</a>
</li>
<!-- <li> -->
<!-- <a href="https://www.instagram.com/robert.cooper.qu/"> -->
<!-- <img src="https://drive.google.com/uc?id=0BxERWEfxe_eUY3RIOU5MMnA3TFk" alt="Follow me on Instagram!"/> -->
<!-- </a> -->
<!-- </li> -->
</ul>
</td>
</tr>
</tbody>
</table>
<td class="headshot-cell">
<img src="https://img.khkm.tk/uploads/big/cd4566af5a14ef845a6a9818bf26c73e.png" alt="uoft-logo"/>
<img src="https://avatars3.githubusercontent.com/u/25857736?s=460&v=4"
name="preview-image-url" alt="kevin-mok-headshot"/>
</td>
</td>
</tr>
</tbody>

89
inline.html
View File

@ -0,0 +1,89 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Kevin's Email Signature</title>
<link rel="stylesheet" href="style.css?v=1.0">
<script src="http://livejs.com/live.js" charset="utf-8"></script>
</head>
<body style="display: flex;
margin: 0;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #1c1e1f;">
<div class="presentational-container" style="box-shadow: 2px 2px 10px 5px;
background-color: #fff;">
<table role="presentation" style="background: none;
margin: 0;
border-width: 1px 0 0 0;
border-style: solid;
border-color: #002f65;
padding-top: 10px;"><tbody><tr class="outer-row">
<td class="description-cell" style="padding-bottom: 3px;">
<table role="presentation" style="background:none;margin:0;border-width:0px 0 0 0;border-style:solid;border-color:#002f65;padding-top:10px;padding-left:0px;border:0px;padding:0;"><tbody>
<tr>
<td colspan="2" class="full-name" style="padding-bottom:3px;font-weight:bold;font-size:18px;font-family:Arial, Helvetica, sans-serif;">
Kevin Mok
</td>
</tr>
<tr>
<td colspan="2" class="title" style="padding-bottom:3px;color:#333333;font-size:14px;font-family:Arial, Helvetica, sans-serif;">
Computer Science Specialist
</td>
</tr>
<tr>
<td colspan="2" class="title" style="padding-bottom:3px;color:#333333;font-size:14px;font-family:Arial, Helvetica, sans-serif;">
University of Toronto
</td>
</tr>
<tr>
<td valign="top" class="website" style="padding-bottom:3px;vertical-align:top;color:#333333;font-size:14px;font-family:Arial, Helvetica, sans-serif;">
<a href="https://kevin-mok.com" target="_blank" style="color: #4BAFDB;
text-decoration: none;
font-weight: normal;
font-size: 14px;">kevin-mok.com</a>
</td>
</tr>
<tr>
<!-- Social Icons found here: https://www.flaticon.com/packs/social-media-color --><td colspan="2" class="social-icons" style="padding-bottom:3px;position:relative;top:-8px;">
<ul style="list-style: none;
padding: 0;
margin: 0;
height: 25px;">
<li style="display: inline-block;
padding-right: 6px;">
<a href="https://github.com/Kevin-Mok" target="_blank" style="text-decoration: none;">
<!-- <img src="http://test.khkm.tk/github.svg" alt=""/> -->
<img src="https://img.khkm.tk/uploads/big/2db206989793b732c143f15ffe2b694b.png" alt="github-icon" style="height: 1.5em;"></a>
</li>
<li style="display: inline-block;
padding-right: 6px;">
<a href="https://git.kevin-mok.com/Kevin-Mok" target="_blank" style="text-decoration: none;">
<img src="https://raw.githubusercontent.com/go-gitea/gitea/master/public/img/gitea-sm.png" alt="gitea-icon" id="gitea-icon" style="height:2em;position:relative;top:3px;"></a>
</li>
<li style="display: inline-block;
padding-right: 6px;">
<a href="https://fosstodon.org/web/accounts/93113" target="_blank" style="text-decoration: none;">
<img src="https://img.khkm.tk/uploads/big/8e32935993f5ec3dee5ea2b86507ded8.png" alt="mastodon-icon" style="height: 1.5em;"></a>
</li>
</ul>
</td>
</tr>
</tbody></table>
</td>
<td class="headshot-cell" style="padding-bottom: 3px;">
<img src="https://img.khkm.tk/uploads/big/cd4566af5a14ef845a6a9818bf26c73e.png" alt="uoft-logo" style="vertical-align: middle;
width: 120px;
margin-right: 5px;
border-radius: 5px;"><img src="https://avatars3.githubusercontent.com/u/25857736?s=460&amp;v=4" name="preview-image-url" alt="kevin-mok-headshot" style="vertical-align: middle;
width: 120px;
margin-right: 5px;
border-radius: 5px;">
</td>
</tr></tbody></table>
</div>
</body>
</html>

43
style.scss
View File

@ -11,7 +11,7 @@ body {
}
.presentational-container {
padding: 20px;
// padding: 20px;
box-shadow: 2px 2px 10px 5px;
background-color: #fff;
}
@ -19,14 +19,11 @@ body {
table {
background: none;
margin: 0;
padding: 10px 10px 0;
border-width: 3px 0 0 0;
// padding: 10px 10px 0;
border-width: 1px 0 0 0;
border-style: solid;
border-color: $name-color;
}
tr.outer-row td.headshot-cell {
padding: 0 12px 0 0;
padding-top: 10px;
}
td {
@ -40,15 +37,14 @@ td.headshot-cell a {
td.headshot-cell img {
vertical-align: middle;
width:120px;
border-radius: 100%;
}
td.description-cell {
padding: 0 0 0 12px;
// border-radius: 100%;
margin-right: 5px;
border-radius: 5px;
}
td.description-cell > table {
background: none;
padding-left: 0px;
border: 0px;
margin: 0;
padding: 0;
@ -56,7 +52,7 @@ td.description-cell > table {
td.full-name {
font-weight: bold;
color: $name-color;
// color: $name-color;
font-size: 18px;
font-family: Arial, Helvetica, sans-serif;
}
@ -66,6 +62,10 @@ td.title {
color: #333333;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
img {
width: 5em;
}
}
td.website {
@ -84,7 +84,9 @@ td.website a {
}
td.social-icons {
padding-top: 5px;
// padding-top: -75px;
position: relative;
top: -8px;
}
td.social-icons ul {
@ -96,13 +98,22 @@ td.social-icons ul {
td.social-icons li {
display: inline-block;
padding-right: 6px;
}
td.social-icons a {
text-decoration: none;
}
td.social-icons img {
width: 25px;
height: 25px;
// width: 25px;
// height: 25px;
height: 1.5em;
}
#gitea-icon {
height: 2em;
position: relative;
top: 3px;
}
Write Preview
Loading…
Cancel
Save