Blog-style website for karathan using the self-made Stellar Theme powered by HTML5Up http://blog.karathan.at

_features.scss 1.3KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. ///
  2. /// Stellar by HTML5 UP
  3. /// html5up.net | @ajlkn
  4. /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
  5. ///
  6. /* Features */
  7. .features {
  8. @include vendor('display', 'flex');
  9. @include vendor('flex-wrap', 'wrap');
  10. @include vendor('justify-content', 'center');
  11. width: calc(100% + #{_size(element-margin)});
  12. margin: 0 0 (_size(element-margin) * 1.5) (_size(element-margin) * -1);
  13. padding: 0;
  14. list-style: none;
  15. li {
  16. width: calc(#{(100% / 3)} - #{_size(element-margin)});
  17. margin-left: _size(element-margin);
  18. margin-top: (_size(element-margin) * 1.5);
  19. padding: 0;
  20. &:nth-child(1),
  21. &:nth-child(2),
  22. &:nth-child(3) {
  23. margin-top: 0;
  24. }
  25. > :last-child {
  26. margin-bottom: 0;
  27. }
  28. }
  29. @include breakpoint('<=medium') {
  30. li {
  31. width: calc(#{(100% / 2)} - #{_size(element-margin)});
  32. &:nth-child(3) {
  33. margin-top: (_size(element-margin) * 1.5);
  34. }
  35. }
  36. }
  37. @include breakpoint('<=small') {
  38. width: 100%;
  39. margin: 0 0 _size(element-margin) 0;
  40. li {
  41. width: 100%;
  42. margin-left: 0;
  43. margin-top: _size(element-margin);
  44. &:nth-child(2),
  45. &:nth-child(3) {
  46. margin-top: _size(element-margin);
  47. }
  48. }
  49. }
  50. }