base.less 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267
  1. /* ======= Base ======= */
  2. body {
  3. font-family: 'Roboto', sans-serif;
  4. color: @text-color-secondary;
  5. background: @smoky-white;
  6. font-size: 14px;
  7. padding: 30px;
  8. -webkit-font-smoothing: antialiased;
  9. -moz-osx-font-smoothing: grayscale;
  10. }
  11. h1, h2, h3, h4, h5, h6 {
  12. font-weight: 700;
  13. }
  14. a {
  15. color: darken(@theme-color, 15%);
  16. .transition (all 0.4s ease-in-out);
  17. &:hover {
  18. text-decoration: underline;
  19. color: darken(@theme-color, 30%);
  20. }
  21. &:focus {
  22. text-decoration: none;
  23. }
  24. }
  25. p {
  26. line-height: 1.5;
  27. }
  28. .wrapper {
  29. background:@theme-color;
  30. max-width: 960px;
  31. margin: 0 auto;
  32. position: relative;
  33. .box-shadow(0px 2px 4px rgba(0,0,0,0.1));
  34. }
  35. .sidebar-wrapper {
  36. background: @theme-color;
  37. position: absolute;
  38. right: 0;
  39. width: 240px;
  40. height: 100%;
  41. min-height: 800px;
  42. color: #fff;
  43. a {
  44. color: #fff;
  45. }
  46. .profile-container {
  47. padding: 30px;
  48. //background: darken(@theme-color, 10%);
  49. background: rgba(0, 0, 0, 0.2);
  50. text-align: center;
  51. color: #fff;
  52. }
  53. .name {
  54. font-size: 32px;
  55. font-weight: 900;
  56. margin-top: 0;
  57. margin-bottom: 10px;
  58. }
  59. .tagline {
  60. color: rgba(256, 256, 256, 0.6);
  61. font-size: 16px;
  62. font-weight: 400;
  63. margin-top: 0;
  64. margin-bottom: 0;
  65. }
  66. .profile {
  67. margin-bottom: 15px;
  68. }
  69. .contact-list {
  70. .fa {
  71. margin-right: 5px;
  72. font-size: 18px;
  73. vertical-align: middle;
  74. }
  75. li {
  76. margin-bottom: 15px;
  77. &:last-child {
  78. margin-bottom: 0;
  79. }
  80. }
  81. .email {
  82. .fa {
  83. font-size: 14px;
  84. }
  85. }
  86. }
  87. .container-block {
  88. padding: 30px;
  89. }
  90. .container-block-title {
  91. text-transform: uppercase;
  92. font-size: 16px;
  93. font-weight: 700;
  94. margin-top: 0;
  95. margin-bottom: 15px;
  96. }
  97. .degree {
  98. font-size: 14px;
  99. margin-top: 0;
  100. margin-bottom: 5px;
  101. }
  102. .education-container {
  103. .item {
  104. margin-bottom: 15px;
  105. &:last-child {
  106. margin-bottom: 0;
  107. }
  108. }
  109. .meta {
  110. color: rgba(256, 256, 256, 0.6);
  111. font-weight: 500;
  112. margin-bottom: 0px;
  113. margin-top: 0;
  114. }
  115. .time {
  116. color: rgba(256, 256, 256, 0.6);
  117. font-weight: 500;
  118. margin-bottom: 0px;
  119. }
  120. }
  121. .languages-container {
  122. .lang-desc {
  123. color: rgba(256, 256, 256, 0.6);
  124. }
  125. }
  126. .languages-list {
  127. margin-bottom: 0;
  128. li {
  129. margin-bottom: 10px;
  130. &:last-child {
  131. margin-bottom: 0;
  132. }
  133. }
  134. }
  135. .interests-list {
  136. margin-bottom: 0;
  137. li {
  138. margin-bottom: 10px;
  139. &:last-child {
  140. margin-bottom: 0;
  141. }
  142. }
  143. }
  144. }
  145. .main-wrapper {
  146. background: #fff;
  147. padding: 60px;
  148. padding-right: 300px;
  149. .section-title {
  150. text-transform: uppercase;
  151. font-size: 20px;
  152. font-weight: 500;
  153. color: darken(@theme-color, 15%);
  154. position: relative;
  155. margin-top: 0;
  156. margin-bottom: 20px;
  157. .fa {
  158. width: 30px;
  159. height: 30px;
  160. margin-right: 8px;
  161. display: inline-block;
  162. color: #fff;
  163. .border-radius(50%);
  164. background: darken(@theme-color, 15%);
  165. text-align: center;
  166. padding-top: 8px;
  167. font-size: 16px;
  168. position: relative;
  169. top: -2px;
  170. }
  171. }
  172. .section {
  173. margin-bottom: 60px;
  174. }
  175. .experiences-section {
  176. .item {
  177. margin-bottom: 30px;
  178. }
  179. }
  180. .upper-row {
  181. position: relative;
  182. overflow: hidden;
  183. margin-bottom: 2px;
  184. }
  185. .job-title {
  186. color: @text-color;
  187. font-size: 16px;
  188. margin-top: 0;
  189. margin-bottom: 0;
  190. font-weight: 500;
  191. }
  192. .time {
  193. position: absolute;
  194. right: 0;
  195. top: 0;
  196. color: @text-grey;
  197. }
  198. .company {
  199. margin-bottom: 10px;
  200. color: @text-grey;
  201. }
  202. .project-title {
  203. font-size: 16px;
  204. font-weight: 400;
  205. margin-top: 0;
  206. margin-bottom: 5px;
  207. }
  208. .projects-section {
  209. .intro {
  210. margin-bottom: 30px;
  211. }
  212. .item {
  213. margin-bottom: 15px;
  214. }
  215. }
  216. }
  217. .skillset {
  218. .item {
  219. margin-bottom: 15px;
  220. overflow: hidden;
  221. }
  222. .level-title {
  223. font-size: 14px;
  224. margin-top: 0;
  225. margin-bottom: 12px;
  226. }
  227. .level-bar {
  228. height: 12px;
  229. background: @smoky-white;
  230. }
  231. .level-bar-inner {
  232. height: 12px;
  233. background: lighten(@theme-color, 15%);
  234. }
  235. }
  236. .footer {
  237. padding: 30px;
  238. padding-top: 60px;
  239. .copyright {
  240. line-height: 1.6;
  241. color: @text-color-secondary;
  242. font-size: 13px;
  243. }
  244. .fa-heart {
  245. color: @heart;
  246. }
  247. }