user.tmpl 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
  1. <style>
  2. body {
  3. background: white;
  4. margin:0;
  5. padding:0;
  6. }
  7. .preview-div-wrapper {
  8. overflow: hidden;
  9. position:relative;
  10. }
  11. .preview-div {
  12. background: #fff;
  13. width: 100%;
  14. height: 100%;
  15. overflow: hidden;
  16. position:relative;
  17. }
  18. .preview-info-header {
  19. color: black;
  20. margin: 2vw auto 0vw;
  21. font-family: monospace;
  22. font-size: 3.5vw;
  23. width: 92%;
  24. }
  25. .preview-info-header img {
  26. height: 2.5vw;
  27. vertical-align: -0.15vw;
  28. margin-left: 1vw;
  29. margin-right: 0.5vw;
  30. }
  31. h1 {
  32. color: #29179e;
  33. width: 92%;
  34. margin: 1vw auto;
  35. font-family: 'Source Sans Pro', sans-serif;
  36. }
  37. .preview-user {
  38. font-size: 3.5vw;
  39. position: absolute;
  40. background: #BBFAE9;
  41. left: 1.5vw;
  42. bottom: 1.5vw;
  43. padding: 1vw 3vw;
  44. padding-left: 1.2vw;
  45. font-weight: 500;
  46. border-radius: 100vw;
  47. }
  48. .preview-user img {
  49. border-radius: 100vw;
  50. height: 5vw;
  51. width: 5vw;
  52. vertical-align: -1.3vw;
  53. border: 0.25vw solid #29179e;
  54. }
  55. .preview-gitote-logo {
  56. position:absolute;
  57. bottom: 2.1vw;
  58. right: 2.1vw;
  59. text-align:right;
  60. }
  61. .logo {
  62. height:6vw;
  63. fill: #29179e;
  64. }
  65. .button {
  66. color: #303030;
  67. position: relative;
  68. margin-bottom: 1vh;
  69. display: inline-block;
  70. padding: 3vh 4vh;
  71. font-size: 5vh;
  72. text-decoration: none;
  73. font-weight: 600;
  74. vertical-align: middle;
  75. border-radius: 0.25em;
  76. }
  77. .follow {
  78. border: 0.7vh solid #28a745;
  79. }
  80. .unfollow {
  81. border: 0.7vh solid #ff1818;
  82. }
  83. </style>
  84. <div class="preview-div-wrapper">
  85. <div class="preview-div">
  86. <div class="preview-info-header">
  87. @{{.Owner.Name}}
  88. 👣 {{.Owner.NumFollowing}}
  89. 🙌 {{.Owner.NumFollowers}}
  90. {{if and .IsLogged (ne .LoggedUserName .Owner.Name)}}
  91. {{if .LoggedUser.IsFollowing .Owner.ID}}
  92. <a class="button unfollow" href="{{AppURL}}{{.Owner.Name}}" target="_blank">👦🏽 {{.i18n.Tr "user.unfollow"}}</a>
  93. {{else}}
  94. <a class="button follow" href="{{AppURL}}{{.Owner.Name}}" target="_blank">👦 {{.i18n.Tr "user.follow"}}</a>
  95. {{end}}
  96. {{end}}
  97. </div>
  98. <h1 style="font-size:3.6vw;">{{.Owner.Description}}<h1>
  99. <div class="preview-user">
  100. <img src="{{AppendAvatarSize .Owner.RelAvatarLink 290}}" />
  101. {{.Owner.FullName}} {{if .Owner.IsVerified}}✓{{end}}
  102. ・{{DateFmtShort .Owner.Created}}
  103. </div>
  104. <div class="preview-gitote-logo">
  105. <img style="width:5vw" src="https://gitote-cdn.netlify.com/logoblack.svg" />
  106. </div>
  107. </div>
  108. </div>