_portfolio.scss 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. /*************************************************
  2. * Projects
  3. **************************************************/
  4. .project-widget-simple li {
  5. margin-bottom: 1rem;
  6. }
  7. .project-widget-simple li:last-of-type {
  8. margin-bottom: 0;
  9. }
  10. .project-widget-simple .project-title {
  11. margin-bottom: 6px;
  12. }
  13. .project-widget-simple .project-summary {
  14. font-size: 0.9rem;
  15. margin-bottom: 0.4rem;
  16. }
  17. .projects-container {
  18. display: block;
  19. position: relative;
  20. /* margin-top: 5rem; */
  21. overflow: hidden;
  22. }
  23. .project-toolbar {
  24. margin-bottom: 2rem;
  25. }
  26. .project-card {
  27. position: relative;
  28. width: calc(
  29. 33.3% - 13.3px
  30. ); /* Fluid 3 columns ($gutter * ($number_of_cols - 1) / $number_of_cols; following https://stackoverflow.com/a/51290967) */
  31. }
  32. @media screen and (max-width: 1199px) {
  33. .project-card {
  34. width: calc(
  35. 50% - 10px
  36. ); /* Fluid 2 columns ($gutter * ($number_of_cols - 1) / $number_of_cols; following https://stackoverflow.com/a/51290967) */
  37. }
  38. }
  39. @media screen and (max-width: 768px) {
  40. .project-card {
  41. width: 100%; /* 1 column */
  42. }
  43. }
  44. .project-item {
  45. margin-bottom: 1.5rem;
  46. }
  47. .project-card.project-item {
  48. margin: 0 0 20px 0; /* Set to Isotope's gutter size */
  49. }
  50. .project-card .card {
  51. margin: 0; /* Remove default card margin and use Isotope gutter */
  52. }
  53. .project-showcase .project-item {
  54. margin-bottom: 3rem;
  55. }
  56. .project-item:last-of-type {
  57. margin-bottom: 0;
  58. }
  59. .isotope-item {
  60. z-index: 2;
  61. }
  62. .isotope-item:hover {
  63. z-index: 3;
  64. }