style.css 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183
  1. /* Full Screen jQuery Content Slider <https://github.com/jacobxperez/full-screen-jquery-content-slider>
  2. * Copyright (C) 2020 Jacob Perez <jacobxperez@gmx.com>
  3. * Licensed under the Apache License, Version 2.0
  4. * http://www.apache.org/licenses/LICENSE-2.0
  5. ------------------------------------------------------------------------------*/
  6. /* Reset
  7. ------------------------------------------------------------------------------*/
  8. * {
  9. box-sizing: border-box;
  10. margin: 0;
  11. padding: 0;
  12. border: 0 none;
  13. font-size: inherit;
  14. font-family: inherit;
  15. line-height: inherit;
  16. text-align: inherit;
  17. vertical-align: baseline;
  18. background-color: transparent;
  19. color: inherit;
  20. outline: 0;
  21. }
  22. audio,
  23. canvas,
  24. embed,
  25. iframe,
  26. img,
  27. object,
  28. svg,
  29. video {
  30. display: block;
  31. height: auto;
  32. max-width: 100%;
  33. width: 100%;
  34. vertical-align: middle;
  35. }
  36. summary {
  37. display: list-item;
  38. }
  39. body,
  40. html {
  41. height: 100%;
  42. }
  43. html {
  44. font-size: 100%;
  45. }
  46. body {
  47. overflow: auto;
  48. font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Nimbus Sans L", "Liberation Sans", FreeSans, sans-serif;
  49. font-weight: 400;
  50. line-height: 1.5;
  51. text-align: left;
  52. color: #555;
  53. background-color: #fff;
  54. }
  55. /* Content Slider
  56. ------------------------------------------------------------------------------*/
  57. .slider {
  58. position: relative;
  59. width: 100%;
  60. height: 100%;
  61. overflow: hidden;
  62. background-color: #555;
  63. }
  64. .slide {
  65. position: absolute;
  66. top: 0;
  67. left: 0;
  68. display: none;
  69. width: 100%;
  70. height: 100%;
  71. overflow: hidden;
  72. }
  73. .slide img {
  74. position: absolute;
  75. top: 0;
  76. left: 0;
  77. display: block;
  78. width: 100%;
  79. height: 100%;
  80. cursor: default;
  81. }
  82. .slide-content {
  83. position: absolute;
  84. bottom: 20%;
  85. width: 100%;
  86. text-align: center;
  87. color: #fff;
  88. text-shadow: 0 .125em .3125em rgba(0, 0, 0, 0.6), 0 0 .3125em rgba(0, 0, 0, 0.5);
  89. }
  90. .slide-title {
  91. font-size: 10vw;
  92. }
  93. .slider-nav {
  94. position: absolute;
  95. top: 50%;
  96. right: 0;
  97. width: 100%;
  98. z-index: 10;
  99. }
  100. .next-slide,
  101. .prev-slide {
  102. position: absolute;
  103. display: inline-block;
  104. width: 3.125rem;
  105. height: 3.125rem;
  106. line-height: 3.125;
  107. margin: 0;
  108. border: .125rem solid white;
  109. backface-visibility: hidden;
  110. background-color: rgba(0, 0, 0, 0.3);
  111. color: white;
  112. overflow: hidden;
  113. cursor: pointer;
  114. z-index: 20;
  115. transition: all .3s ease-in-out 0s;
  116. -webkit-user-select: none;
  117. user-select: none;
  118. }
  119. .prev-slide {
  120. left: 2%;
  121. }
  122. .next-slide {
  123. right: 2%;
  124. }
  125. .next-slide:hover,
  126. .prev-slide:hover {
  127. background-color: rgba(0, 0, 0, 0.6);
  128. }
  129. .next-slide::before,
  130. .prev-slide::before {
  131. position: absolute;
  132. top: 33%;
  133. display: inline-block;
  134. width: .8125rem;
  135. height: .8125rem;
  136. content: "";
  137. border-left: .25rem solid white;
  138. border-top: .25rem solid white;
  139. backface-visibility: hidden;
  140. }
  141. .prev-slide::before {
  142. transform: rotate(-45deg);
  143. right: 25%;
  144. }
  145. .next-slide::before {
  146. transform: rotate(135deg);
  147. left: 25%;
  148. }
  149. @media screen and (max-width: 42.5em) {
  150. .next-slide,
  151. .prev-slide {
  152. display: none;
  153. }
  154. }
  155. @media screen and (max-width: 61.25em) {
  156. .slider {
  157. max-height: 57.95918367vw;
  158. }
  159. }
  160. @media screen and (min-height: 61.25em) {
  161. .slider {
  162. max-height: 57.95918367vw;
  163. }
  164. }