25개 이상의 토픽을 선택하실 수 없습니다. Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

196 lines
3.4 KiB

  1. @import '../../_global/styles/mixins';
  2. @import '../../_global/styles/vars';
  3. .artwork-wrapper {
  4. position: relative;
  5. display: block;
  6. overflow: hidden;
  7. width: 100%;
  8. &::before {
  9. content: '';
  10. display: block;
  11. padding-top: 45%;
  12. @media(max-width: 999px) {
  13. padding-top: 52%;
  14. }
  15. }
  16. }
  17. section .artwork-wrapper {
  18. position: absolute;
  19. height: 100%;
  20. top: 0;
  21. }
  22. .artwork {
  23. position: absolute;
  24. right: 0;
  25. top: 0;
  26. height: 100%;
  27. width: calc(43vw - 160px);
  28. @media(max-width: 1199px) {
  29. width: 50vw;
  30. margin: 1% -18%;
  31. max-height: 90vw;
  32. }
  33. @media(max-width: 767px) {
  34. margin: 3% -24%;
  35. height: 94%;
  36. }
  37. @media(max-width: 567px) {
  38. margin: 5% -32%;
  39. height: 90%;
  40. }
  41. .foreground, .background {
  42. position: absolute;
  43. left: 0;
  44. right: 0;
  45. top: 0;
  46. transform-origin: right top;
  47. height: 75%;
  48. transform: rotate(-3deg);
  49. overflow: hidden;
  50. &:before {
  51. content: "";
  52. @include full-size;
  53. background-color: var(--theme-color-primary);
  54. margin: -16% 0;
  55. border-top-left-radius: 26% 50%;
  56. border-bottom-left-radius: 26% 50%;
  57. }
  58. }
  59. .background {
  60. transform: rotate(-9deg);
  61. left: -3vw;
  62. margin-left: -60px;
  63. @media(max-width: 999px) {
  64. margin-left: -45px;
  65. margin-top: 5px;
  66. }
  67. @media(max-width: 567px) {
  68. margin-left: -30px;
  69. margin-top: 10px;
  70. }
  71. &:before {
  72. background: linear-gradient(-10deg, var(--theme-color-gradient-01) 10%, var(--theme-color-gradient-02) 55%, var(--theme-color-gradient-03) 90%);
  73. }
  74. }
  75. }
  76. [data-type="artwork-background-image"] {
  77. color: white;
  78. /*
  79. &:before {
  80. content: "";
  81. position: relative;
  82. display: block;
  83. height: 20px;
  84. }
  85. */
  86. .image-box {
  87. @include full-size;
  88. &:after {
  89. content: "";
  90. @include full-size;
  91. background: linear-gradient(120deg, rgba(var(--theme-color-primary-rgb), 1) 0%, rgba(var(--theme-color-primary-rgb), 0.2) 100%);
  92. }
  93. img {
  94. position: relative;
  95. display: block;
  96. width: 100%;
  97. height: 100%;
  98. object-fit: cover;
  99. }
  100. }
  101. .artwork {
  102. z-index: 1;
  103. margin-top: 20px;
  104. .foreground, .background {
  105. &:before {
  106. background: var(--theme-color-background);
  107. opacity: 0.7;
  108. }
  109. }
  110. .background:before {
  111. opacity: 0.3;
  112. }
  113. }
  114. }
  115. [data-type="artwork-image"] {
  116. .image-box {
  117. position: absolute;
  118. display: block;
  119. width: calc(43vw - 160px);
  120. right: 0;
  121. top: 0;
  122. transform-origin: right top;
  123. height: 75%;
  124. transform: rotate(-3deg);
  125. overflow: hidden;
  126. @media(max-width: 1199px) {
  127. width: 50vw;
  128. margin: 1% -18%;
  129. max-height: 90vw;
  130. }
  131. @media(max-width: 767px) {
  132. margin: 3% -24%;
  133. max-height: 94%;
  134. }
  135. @media(max-width: 567px) {
  136. margin: 5% -32%;
  137. max-height: 90%;
  138. height: 70vw;
  139. }
  140. picture {
  141. @include full-size;
  142. margin: -16% 0;
  143. border-top-left-radius: 26% 50%;
  144. border-bottom-left-radius: 26% 50%;
  145. overflow: hidden;
  146. }
  147. img {
  148. position: absolute;
  149. display: block;
  150. top: 10%;
  151. width: 100%;
  152. height: 80%;
  153. object-fit: cover;
  154. transform: rotate(3deg);
  155. max-width: none;
  156. }
  157. }
  158. .artwork .foreground {
  159. opacity: 0;
  160. }
  161. }
  162. /*
  163. [data-browser="ie"] section[data-type="artwork-image"] .image-box img {
  164. width: auto;
  165. max-width: none;
  166. left: 50%;
  167. height: 84%;
  168. transform: rotate(3deg) translate(-50%, 0);
  169. }
  170. */