profile.styl 2.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. .profile-block
  2. padding: 15px 20px
  3. border-bottom: 1px solid color-border
  4. &:last-child
  5. border-bottom: none
  6. #profile
  7. @media mq-normal
  8. column(profile-column)
  9. .inner
  10. @extend $block
  11. margin-top: block-margin
  12. background: white
  13. .base-info
  14. #avatar
  15. display: block
  16. margin: 10px auto 20px
  17. width: profile-avatar-size
  18. height: profile-avatar-size
  19. #name, #title, #location
  20. display: block
  21. text-align: center
  22. #name
  23. font-size: 20px
  24. font-weight: 600
  25. #location
  26. font-size: font-size - 2
  27. margin-top: 5px
  28. color: color-default + #444
  29. .fa
  30. margin-right: 5px
  31. #follow
  32. color: white
  33. width: 150px
  34. height: 40px
  35. display: block
  36. font-size: 14px
  37. line-height: 40px
  38. text-align: center
  39. margin: 20px auto 10px
  40. background: #38b7ea
  41. border-radius: 20px
  42. transition: 0.2s ease
  43. &:hover
  44. background: #38b7ea + #111
  45. .article-info
  46. clearfix()
  47. padding: 0px
  48. .article-info-block
  49. width: 50%
  50. float: left
  51. padding: 20px 15px
  52. text-align: center
  53. box-sizing: border-box
  54. font-size: font-size + 6px
  55. span
  56. display: block
  57. font-size: font-size
  58. text-transform: uppercase
  59. &:first-child
  60. border-right: 1px solid color-border
  61. .contact-info
  62. .contact-list
  63. width: 100%
  64. td
  65. text-align: center
  66. font-size: font-size + 10px
  67. a
  68. position: relative
  69. transition: 0.2s ease
  70. color: color-default + #333
  71. &:hover
  72. color: color-default
  73. &:after
  74. right: -50%
  75. top: -41px
  76. color: white
  77. background: #333
  78. font-size: 14px
  79. content: attr(title)
  80. display: block
  81. padding: 5px 15px
  82. position: absolute
  83. white-space: nowrap
  84. border-radius: 2px
  85. text-transform: uppercase
  86. box-shadow: 0 0 2px rgba(0,0,0,0.2)
  87. z-index: 1
  88. &:before
  89. top: -12px
  90. right: 8px
  91. border: solid
  92. border-color: #333 transparent
  93. border-width: 5px 5px 0 5px
  94. content: ""
  95. display: block
  96. position: absolute
  97. z-index: 2