style.css 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196
  1. html,
  2. body {
  3. height: 100%;
  4. background: #f2f2f2;
  5. }
  6. *,
  7. *:before,
  8. *:after {
  9. box-sizing: border-box;
  10. }
  11. /* Controls
  12. ---------------------------------------------------------------------- */
  13. .controls {
  14. padding: 1rem;
  15. background: #333;
  16. font-size: 0.1px;
  17. }
  18. .control {
  19. position: relative;
  20. display: inline-block;
  21. width: 2.7rem;
  22. height: 2.7rem;
  23. background: #444;
  24. cursor: pointer;
  25. font-size: 0.1px;
  26. color: white;
  27. transition: background 150ms;
  28. }
  29. .control:hover {
  30. background: #3f3f3f;
  31. }
  32. .control[data-filter]:after {
  33. content: '';
  34. position: absolute;
  35. width: 10px;
  36. height: 10px;
  37. top: calc(50% - 6px);
  38. left: calc(50% - 6px);
  39. border: 2px solid currentColor;
  40. border-radius: 2px;
  41. background: currentColor;
  42. transition: background-color 150ms, border-color 150ms;
  43. }
  44. .control[data-sort]:after {
  45. content: '';
  46. position: absolute;
  47. width: 10px;
  48. height: 10px;
  49. border-top: 2px solid;
  50. border-left: 2px solid;
  51. top: calc(50% - 6px);
  52. left: calc(50% - 6px);
  53. transform: translateY(1px) rotate(45deg);
  54. }
  55. .control[data-sort*=":desc"]:after {
  56. transform: translateY(-4px) rotate(-135deg);
  57. }
  58. .mixitup-control-active {
  59. background: #393939;
  60. }
  61. .mixitup-control-active[data-filter]:after {
  62. background: transparent;
  63. }
  64. .control:first-of-type {
  65. border-radius: 3px 0 0 3px;
  66. }
  67. .control:last-of-type {
  68. border-radius: 0 3px 3px 0;
  69. }
  70. .control[data-filter] + .control[data-sort] {
  71. margin-left: .75rem;
  72. }
  73. .control[data-filter=".green"] {
  74. color: #91e6c7;
  75. }
  76. .control[data-filter=".blue"] {
  77. color: #5ecdde;
  78. }
  79. .control[data-filter=".pink"] {
  80. color: #d595aa;
  81. }
  82. .control[data-filter="none"] {
  83. color: #2f2f2f;
  84. }
  85. /* Container
  86. ---------------------------------------------------------------------- */
  87. .container {
  88. padding: 1rem;
  89. text-align: justify;
  90. font-size: 0.1px;
  91. }
  92. .container:after {
  93. content: '';
  94. display: inline-block;
  95. width: 100%;
  96. }
  97. /* Target Elements
  98. ---------------------------------------------------------------------- */
  99. .mix,
  100. .gap {
  101. display: inline-block;
  102. vertical-align: top;
  103. }
  104. .mix {
  105. background: #fff;
  106. border-top: .5rem solid currentColor;
  107. border-radius: 2px;
  108. margin-bottom: 1rem;
  109. position: relative;
  110. cursor: pointer;
  111. transition: opacity 150ms;
  112. }
  113. .mix:before {
  114. content: '';
  115. display: inline-block;
  116. padding-top: 56.25%;
  117. }
  118. .mix.green {
  119. color: #91e6c7;
  120. }
  121. .mix.pink {
  122. color: #d595aa;
  123. }
  124. .mix.blue {
  125. color: #5ecdde;
  126. }
  127. .mix:hover {
  128. opacity: 0.5;
  129. }
  130. /* Grid Breakpoints
  131. ---------------------------------------------------------------------- */
  132. /* 2 Columns */
  133. .mix,
  134. .gap {
  135. width: calc(100%/2 - (((2 - 1) * 1rem) / 2));
  136. }
  137. /* 3 Columns */
  138. @media screen and (min-width: 541px) {
  139. .mix,
  140. .gap {
  141. width: calc(100%/3 - (((3 - 1) * 1rem) / 3));
  142. }
  143. }
  144. /* 4 Columns */
  145. @media screen and (min-width: 961px) {
  146. .mix,
  147. .gap {
  148. width: calc(100%/4 - (((4 - 1) * 1rem) / 4));
  149. }
  150. }
  151. /* 5 Columns */
  152. @media screen and (min-width: 1281px) {
  153. .mix,
  154. .gap {
  155. width: calc(100%/5 - (((5 - 1) * 1rem) / 5));
  156. }
  157. }