You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

_themes.scss 1.1KB

6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. .themes-container {
  2. padding: 3rem;
  3. width: 80%;
  4. margin: 0 auto;
  5. img {
  6. max-width: 100%;
  7. }
  8. }
  9. @media only screen and (max-width: 1000px) {
  10. .themes-container {
  11. width: 100%;
  12. margin: 0 1rem;
  13. }
  14. }
  15. .themes {
  16. display: flex;
  17. flex-wrap: wrap;
  18. justify-content: space-between;
  19. .theme {
  20. width: 45%;
  21. text-decoration: none;
  22. cursor: pointer;
  23. margin-bottom: 2rem;
  24. border-bottom: none;
  25. box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  26. padding: 10px;
  27. img {
  28. width: 100%;
  29. height: 90%;
  30. }
  31. span {
  32. display: block;
  33. text-align: center;
  34. font-size: 1.1rem;
  35. }
  36. }
  37. }
  38. .theme-info {
  39. display: flex;
  40. align-items: flex-start;
  41. .thumb {
  42. box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
  43. width: 400px;
  44. margin-right: 2rem;
  45. }
  46. h1, p {
  47. margin: 0;
  48. }
  49. padding: 1rem;
  50. }
  51. @media only screen and (max-width: 1000px) {
  52. .themes .theme {
  53. width: 100%;
  54. }
  55. }
  56. @media only screen and (max-width: 1000px) {
  57. .theme-info {
  58. flex-direction: column;
  59. align-items: center;
  60. img {
  61. margin-bottom: 1rem;
  62. }
  63. }
  64. }