My HTML email signature. https://codepen.io/Kevin-Mok/pen/KKKPPwy
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

134 lines
1.9 KiB

  1. $name-color: #002f65;
  2. body {
  3. display: flex;
  4. margin: 0;
  5. align-items: center;
  6. justify-content: center;
  7. height: 100vh;
  8. /* background-color: black; */
  9. background-color: #1c1e1f;
  10. }
  11. .presentational-container {
  12. // padding: 20px;
  13. box-shadow: 2px 2px 10px 5px;
  14. background-color: #fff;
  15. }
  16. table {
  17. background: none;
  18. margin: 0;
  19. // padding: 10px 10px 0;
  20. border-width: 1px 0 0 0;
  21. border-style: solid;
  22. border-color: $name-color;
  23. padding-top: 10px;
  24. }
  25. td {
  26. padding-bottom: 3px;
  27. }
  28. .headshot-cell {
  29. position: relative;
  30. left: -12px;
  31. }
  32. td.headshot-cell a {
  33. text-decoration: none;
  34. }
  35. td.headshot-cell img {
  36. vertical-align: middle;
  37. width:120px;
  38. border-radius: 100%;
  39. // border-radius: 5px;
  40. margin-right: 5px;
  41. }
  42. #headshot-img {
  43. position: relative;
  44. left: -10px;
  45. }
  46. td.description-cell > table {
  47. background: none;
  48. padding-left: 0px;
  49. border: 0px;
  50. margin: 0;
  51. padding: 0;
  52. }
  53. td.full-name {
  54. font-weight: bold;
  55. // color: $name-color;
  56. font-size: 18px;
  57. font-family: Arial, Helvetica, sans-serif;
  58. }
  59. td.title {
  60. // padding-bottom: 10px;
  61. color: #333333;
  62. font-size: 14px;
  63. font-family: Arial, Helvetica, sans-serif;
  64. img {
  65. width: 5em;
  66. }
  67. }
  68. td.website {
  69. // padding-bottom: 10px;
  70. vertical-align: top;
  71. color: #333333;
  72. font-size: 14px;
  73. font-family: Arial, Helvetica, sans-serif;
  74. }
  75. td.website a {
  76. color: #4BAFDB;
  77. text-decoration: none;
  78. font-weight: normal;
  79. font-size: 14px;
  80. }
  81. td.social-icons {
  82. // padding-top: -75px;
  83. position: relative;
  84. top: -8px;
  85. }
  86. td.social-icons ul {
  87. list-style: none;
  88. padding: 0;
  89. margin: 0;
  90. height: 25px;
  91. }
  92. td.social-icons li {
  93. display: inline-block;
  94. padding-right: 9px;
  95. }
  96. td.social-icons a {
  97. text-decoration: none;
  98. }
  99. td.social-icons img {
  100. // width: 25px;
  101. height: 25px;
  102. // height: 1.5em;
  103. }
  104. #gitea-icon {
  105. height: 2em;
  106. position: relative;
  107. top: 3px;
  108. }
  109. #linkedin-icon {
  110. position: relative;
  111. left: -3px;
  112. }