Advertisement
petur_stoqnov

Untitled

Aug 24th, 2021
493
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.67 KB | None | 0 0
  1. @import url(fontawesome-all.min.css);
  2. @import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700|Raleway:400,800,900");
  3. @import "responsive.css";
  4. html,
  5. body,
  6. div,
  7. span,
  8. h1,
  9. h2,
  10. p,
  11. a,
  12. img,
  13. ul,
  14. li,
  15. article,
  16. footer,
  17. header,
  18. section,
  19. time {
  20. margin: 0;
  21. padding: 0;
  22. border: 0;
  23. font-size: 100%;
  24. font: inherit;
  25. vertical-align: baseline;
  26. }
  27.  
  28. body {
  29. line-height: 1;
  30. }
  31.  
  32. ul {
  33. list-style: none;
  34. }
  35.  
  36. html {
  37. box-sizing: border-box;
  38. }
  39.  
  40. *,
  41. *:before,
  42. *:after {
  43. box-sizing: inherit;
  44. }
  45.  
  46. body {
  47. background: #f4f4f4;
  48. }
  49.  
  50. body {
  51. color: #646464;
  52. font-family: "Source Sans Pro", Helvetica, sans-serif;
  53. font-size: 14pt;
  54. font-weight: 400;
  55. line-height: 1.75;
  56. }
  57.  
  58. a {
  59. transition: color 0.2s ease, border-bottom-color 0.2s ease;
  60. border-bottom: dotted 1px rgba(160, 160, 160, 0.65);
  61. color: inherit;
  62. text-decoration: none;
  63. }
  64.  
  65. a:before {
  66. transition: color 0.2s ease;
  67. }
  68.  
  69. a:hover {
  70. border-bottom-color: transparent;
  71. color: #2ebaae !important;
  72. }
  73.  
  74. a:hover:before {
  75. color: #2ebaae !important;
  76. }
  77.  
  78. p {
  79. margin: 0 0 2em 0;
  80. }
  81.  
  82. h1,
  83. h2 {
  84. color: #3c3b3b;
  85. font-family: "Raleway", Helvetica, sans-serif;
  86. font-weight: 800;
  87. letter-spacing: 0.25em;
  88. line-height: 1.65;
  89. margin: 0 0 1em 0;
  90. text-transform: uppercase;
  91. }
  92.  
  93. h1 a,
  94. h2 a {
  95. color: inherit;
  96. border-bottom: 0;
  97. }
  98.  
  99. h2 {
  100. font-size: 1.1em;
  101. }
  102.  
  103. .author {
  104. display: flex;
  105. flex-direction: row;
  106. align-items: center;
  107. justify-content: flex-end;
  108. border-bottom: 0;
  109. font-family: "Raleway", Helvetica, sans-serif;
  110. font-size: 0.6em;
  111. font-weight: 400;
  112. letter-spacing: 0.25em;
  113. text-transform: uppercase;
  114. white-space: nowrap;
  115. }
  116.  
  117. .author .name {
  118. transition: border-bottom-color 0.2s ease;
  119. border-bottom: dotted 1px rgba(160, 160, 160, 0.65);
  120. display: block;
  121. margin: 0 1.5em 0 0;
  122. }
  123.  
  124. .author img {
  125. border-radius: 100%;
  126. display: block;
  127. width: 4em;
  128. }
  129.  
  130. .author:hover .name {
  131. border-bottom-color: transparent;
  132. }
  133.  
  134. .button {
  135. appearance: none;
  136. transition: background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
  137. background-color: transparent;
  138. border: 0;
  139. box-shadow: inset 0 0 0 1px rgba(160, 160, 160, 0.3);
  140. color: #3c3b3b !important;
  141. cursor: pointer;
  142. display: inline-block;
  143. font-family: "Raleway", Helvetica, sans-serif;
  144. font-size: 0.6em;
  145. font-weight: 800;
  146. height: 4.8125em;
  147. letter-spacing: 0.25em;
  148. line-height: 4.8125em;
  149. padding: 0 2.5em;
  150. text-align: center;
  151. text-decoration: none;
  152. text-transform: uppercase;
  153. white-space: nowrap;
  154. }
  155.  
  156. .button:hover {
  157. box-shadow: inset 0 0 0 1px #2ebaae;
  158. color: #2ebaae !important;
  159. }
  160.  
  161. .button:hover:active {
  162. background-color: rgba(46, 186, 174, 0.05);
  163. }
  164.  
  165. .button:before,
  166. .button:after {
  167. color: #aaaaaa;
  168. position: relative;
  169. }
  170.  
  171. .button:before {
  172. left: -1em;
  173. padding: 0 0 0 0.75em;
  174. }
  175.  
  176. .button:after {
  177. left: 1em;
  178. padding: 0 0.75em 0 0;
  179. }
  180.  
  181. .button.large {
  182. font-size: 0.7em;
  183. padding: 0 3em;
  184. }
  185.  
  186. .button.disabled,
  187. .button:disabled {
  188. pointer-events: none;
  189. color: rgba(160, 160, 160, 0.3) !important;
  190. }
  191.  
  192. .button.disabled:before,
  193. .button:disabled:before {
  194. color: rgba(160, 160, 160, 0.3) !important;
  195. }
  196.  
  197. ::-webkit-input-placeholder {
  198. color: #aaaaaa !important;
  199. opacity: 1;
  200. }
  201.  
  202. :-moz-placeholder {
  203. color: #aaaaaa !important;
  204. opacity: 1;
  205. }
  206.  
  207. ::-moz-placeholder {
  208. color: #aaaaaa !important;
  209. opacity: 1;
  210. }
  211.  
  212. :-ms-input-placeholder {
  213. color: #aaaaaa !important;
  214. opacity: 1;
  215. }
  216.  
  217. .icon {
  218. text-decoration: none;
  219. border-bottom: none;
  220. position: relative;
  221. }
  222.  
  223. .icon:before {
  224. display: inline-block;
  225. font-style: normal;
  226. font-variant: normal;
  227. text-rendering: auto;
  228. line-height: 1;
  229. text-transform: none !important;
  230. font-family: "Font Awesome 5 Free";
  231. font-weight: 400;
  232. }
  233.  
  234. .icon > .label {
  235. display: none;
  236. }
  237.  
  238. .icon:before {
  239. line-height: inherit;
  240. }
  241.  
  242. .icon.solid:before {
  243. font-weight: 900;
  244. }
  245.  
  246. .icon.brands:before {
  247. font-family: "Font Awesome 5 Brands";
  248. }
  249.  
  250. .image {
  251. border: 0;
  252. display: inline-block;
  253. position: relative;
  254. }
  255.  
  256. .image img {
  257. display: block;
  258. }
  259.  
  260. .image.featured {
  261. display: block;
  262. margin: 0 0 3em 0;
  263. width: 100%;
  264. }
  265.  
  266. .image.featured img {
  267. width: 100%;
  268. }
  269.  
  270. ul {
  271. list-style: disc;
  272. margin: 0 0 2em 0;
  273. padding-left: 1em;
  274. }
  275.  
  276. ul li {
  277. padding-left: 0.5em;
  278. }
  279.  
  280. ul.actions {
  281. display: flex;
  282. cursor: default;
  283. list-style: none;
  284. margin-left: -1em;
  285. padding-left: 0;
  286. }
  287.  
  288. ul.actions li {
  289. padding: 0 0 0 1em;
  290. vertical-align: middle;
  291. }
  292.  
  293. ul.icons {
  294. cursor: default;
  295. list-style: none;
  296. padding-left: 0;
  297. }
  298.  
  299. ul.icons li {
  300. display: inline-block;
  301. padding: 0 1em 0 0;
  302. }
  303.  
  304. ul.icons li:last-child {
  305. padding-right: 0;
  306. }
  307.  
  308. ul.icons li > * {
  309. border: 0;
  310. }
  311.  
  312. ul.icons li > * .label {
  313. display: none;
  314. }
  315.  
  316. .post {
  317. padding: 3em 3em 1em 3em;
  318. background: #ffffff;
  319. border: solid 1px rgba(160, 160, 160, 0.3);
  320. margin: 0 0 3em 0;
  321. position: relative;
  322. }
  323.  
  324. .post > header {
  325. display: flex;
  326. border-bottom: solid 1px rgba(160, 160, 160, 0.3);
  327. left: -3em;
  328. margin: -3em 0 3em 0;
  329. position: relative;
  330. width: calc(100% + 6em);
  331. }
  332.  
  333. .post > header .title {
  334. flex-grow: 1;
  335. padding: 3.75em 3em 3.3em 3em;
  336. }
  337.  
  338. .post > header .title h2 {
  339. font-weight: 900;
  340. font-size: 1.5em;
  341. }
  342.  
  343. .post > header .title > :last-child {
  344. margin-bottom: 0;
  345. }
  346.  
  347. .post > header .meta {
  348. padding: 3.75em 3em 1.75em 3em;
  349. border-left: solid 1px rgba(160, 160, 160, 0.3);
  350. min-width: 17em;
  351. text-align: right;
  352. width: 17em;
  353. }
  354.  
  355. .post > header .meta > * {
  356. margin: 0 0 1em 0;
  357. }
  358.  
  359. .post > header .meta > :last-child {
  360. margin-bottom: 0;
  361. }
  362.  
  363. .post > header .meta .published {
  364. color: #3c3b3b;
  365. display: block;
  366. font-family: "Raleway", Helvetica, sans-serif;
  367. font-size: 0.7em;
  368. font-weight: 800;
  369. letter-spacing: 0.25em;
  370. margin-top: 0.5em;
  371. text-transform: uppercase;
  372. white-space: nowrap;
  373. }
  374.  
  375. .post > a.image.featured {
  376. overflow: hidden;
  377. }
  378.  
  379. .post > a.image.featured img {
  380. transition: transform 0.2s ease-out;
  381. }
  382.  
  383. .post > a.image.featured:hover img {
  384. transform: scale(1.05);
  385. }
  386.  
  387. .post > footer {
  388. display: flex;
  389. align-items: center;
  390. }
  391.  
  392. .post > footer .actions {
  393. flex-grow: 1;
  394. }
  395.  
  396. .post > footer .stats {
  397. cursor: default;
  398. list-style: none;
  399. padding: 0;
  400. }
  401.  
  402. .post > footer .stats li {
  403. border-left: solid 1px rgba(160, 160, 160, 0.3);
  404. display: inline-block;
  405. font-family: "Raleway", Helvetica, sans-serif;
  406. font-size: 0.6em;
  407. font-weight: 400;
  408. letter-spacing: 0.25em;
  409. line-height: 1;
  410. margin: 0 0 0 2em;
  411. padding: 0 0 0 2em;
  412. text-transform: uppercase;
  413. }
  414.  
  415. .post > footer .stats li:first-child {
  416. border-left: 0;
  417. margin-left: 0;
  418. padding-left: 0;
  419. }
  420.  
  421. .post > footer .stats li .icon {
  422. border-bottom: 0;
  423. }
  424.  
  425. .post > footer .stats li .icon:before {
  426. color: rgba(160, 160, 160, 0.3);
  427. margin-right: 0.75em;
  428. }
  429.  
  430. header p {
  431. font-family: "Raleway", Helvetica, sans-serif;
  432. font-size: 0.7em;
  433. font-weight: 400;
  434. letter-spacing: 0.25em;
  435. line-height: 2.5;
  436. margin-top: -1em;
  437. text-transform: uppercase;
  438. }
  439.  
  440. body {
  441. padding-top: 3.5em;
  442. }
  443.  
  444. #header {
  445. display: flex;
  446. justify-content: space-between;
  447. background-color: #ffffff;
  448. border-bottom: solid 1px rgba(160, 160, 160, 0.3);
  449. height: 3.5em;
  450. left: 0;
  451. line-height: 3.5em;
  452. position: fixed;
  453. top: 0;
  454. width: 100%;
  455. z-index: 10000;
  456. }
  457.  
  458. #header a {
  459. color: inherit;
  460. text-decoration: none;
  461. }
  462.  
  463. #header h1 {
  464. height: inherit;
  465. line-height: inherit;
  466. padding: 0 0 0 1.5em;
  467. white-space: nowrap;
  468. }
  469.  
  470. #header h1 a {
  471. font-size: 0.7em;
  472. }
  473.  
  474. #wrapper {
  475. display: flex;
  476. flex-direction: row-reverse;
  477. transition: opacity 0.5s ease;
  478. margin: 0 auto;
  479. max-width: 100%;
  480. opacity: 1;
  481. padding: 4.5em;
  482. width: 90em;
  483. }
  484.  
  485. #main {
  486. flex-grow: 1;
  487. width: 100%;
  488. }
  489.  
  490. #footer .icons {
  491. color: #aaaaaa;
  492. }
  493.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement