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

Social icons, move pictures to right

Browse Source 
Add inline file.
This commit is contained in:
Kevin Mok
2019-10-02 22:34:44 -04:00
parent 7175b71fa0
commit d2fb2627b6
5 changed files with 146 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

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

1
emog-fix.md Normal file
View File

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

45
index.html
View File

@@ -13,24 +13,23 @@
<table role="presentation"> <table role="presentation">
<tbody> <tbody>
<tr class="outer-row"> <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"> <td class="description-cell">
<table role="presentation"> <table role="presentation">
<tbody> <tbody>
<tr> <tr>
<td colspan="2" class="full-name">Kevin Mok</td> <td colspan="2" class="full-name">
Kevin Mok
</td>
</tr> </tr>
<tr> <tr>
<td colspan="2" class="title">Computer Science <td colspan="2" class="title">
Specialist</td> Computer Science Specialist
</td>
</tr> </tr>
<tr> <tr>
<td colspan="2" class="title">University of Toronto</td> <td colspan="2" class="title">
University of Toronto
</td>
</tr> </tr>
<tr> <tr>
<td valign="top" class="website"> <td valign="top" class="website">
@@ -42,20 +41,32 @@
<td colspan="2" class="social-icons"> <td colspan="2" class="social-icons">
<ul> <ul>
<li> <li>
<a href="https://twitter.com/RobertCooper_RC"> <a href="https://github.com/Kevin-Mok" target="_blank">
<img src="https://drive.google.com/uc?id=0BxERWEfxe_eUY2RBc3dBSW92NVE" alt="Follow me on Twitter!"/> <!-- <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> </a>
</li> </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> </ul>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </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> </td>
</tr> </tr>
</tbody> </tbody>

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