Nouvelle mouture du site web de Dylan
Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.
 
 
 
 
 
 

320 lignes
5.4 KiB

  1. /**
  2. * Site header
  3. */
  4. .site-header {
  5. border-bottom: 1px solid $grey-color-light;
  6. min-height: $spacing-unit * 1.865;
  7. // Positioning context for the mobile navigation icon
  8. position: relative;
  9. background-color: $background-color;
  10. }
  11. video#demo{
  12. position: fixed;
  13. top: 50%;
  14. left: 50%;
  15. min-width: 100%;
  16. min-height: 100%;
  17. width: auto;
  18. height: auto;
  19. z-index: -100;
  20. -ms-transform: translateX(-50%) translateY(-50%);
  21. -moz-transform: translateX(-50%) translateY(-50%);
  22. -webkit-transform: translateX(-50%) translateY(-50%);
  23. transform: translateX(-50%) translateY(-50%);
  24. /*background: url(polina.jpg) no-repeat;*/
  25. background-size: cover;
  26. }
  27. .site-title {
  28. @include relative-font-size(1.625);
  29. font-weight: 600;
  30. line-height: $base-line-height * $base-font-size * 2.25;
  31. letter-spacing: -1px;
  32. margin-bottom: 0;
  33. float: left;
  34. margin-left: 25px;
  35. text-transform: uppercase;
  36. &,&:visited {
  37. color: $grey-color-dark;
  38. }
  39. .site-subtitle {
  40. font-weight: 300;
  41. text-transform: lowercase;
  42. font-variant: small-caps;
  43. }
  44. }
  45. .site-nav {
  46. float: right;
  47. line-height: $base-line-height * $base-font-size * 2.25;
  48. .nav-trigger {
  49. display: none;
  50. }
  51. .menu-icon {
  52. display: none;
  53. }
  54. .trigger{
  55. display: inline;
  56. }
  57. .page-link {
  58. color: $text-color;
  59. line-height: $base-line-height;
  60. display: inline;
  61. border: none;
  62. // Gaps between nav items, but not on the last one
  63. &:not(:last-child) {
  64. margin-right: 20px;
  65. }
  66. }
  67. @include media-query($on-palm) {
  68. position: absolute;
  69. top: 9px;
  70. right: $spacing-unit / 2;
  71. background-color: $background-color;
  72. // border: 1px solid $grey-color-light;
  73. border-radius: 5px;
  74. text-align: right;
  75. label[for="nav-trigger"] {
  76. display: block;
  77. float: right;
  78. width: 36px;
  79. height: 36px;
  80. z-index: 2;
  81. cursor: pointer;
  82. }
  83. .menu-icon {
  84. display: block;
  85. float: right;
  86. width: 36px;
  87. height: 26px;
  88. line-height: 0;
  89. padding-top: 10px;
  90. text-align: center;
  91. > svg {
  92. fill: $grey-color-dark;
  93. }
  94. }
  95. input ~ .trigger {
  96. clear: both;
  97. display: none;
  98. }
  99. input:checked ~ .trigger {
  100. display: block;
  101. padding-bottom: 5px;
  102. }
  103. .page-link {
  104. display: block;
  105. padding: 5px 10px;
  106. &:not(:last-child) {
  107. margin-right: 0;
  108. }
  109. margin-left: 20px;
  110. }
  111. }
  112. }
  113. /**
  114. * Site footer
  115. */
  116. .site-footer {
  117. border-top: 1px solid $grey-color-light;
  118. padding: calc(#{$spacing-unit}/2) 0;
  119. background-color: $background-color;
  120. }
  121. .footer-heading {
  122. @include relative-font-size(1.125);
  123. margin-bottom: $spacing-unit / 2;
  124. }
  125. .contact-list,
  126. .social-media-list {
  127. list-style: none;
  128. margin-left: 0;
  129. }
  130. .footer-col-wrapper {
  131. @include relative-font-size(0.9375);
  132. color: $grey-color;
  133. margin-left: -$spacing-unit / 2;
  134. @extend %clearfix;
  135. }
  136. .footer-col {
  137. float: left;
  138. margin-bottom: $spacing-unit / 2;
  139. padding-left: $spacing-unit / 2;
  140. }
  141. .footer-col-1 {
  142. width: -webkit-calc(35% - (#{$spacing-unit} / 2));
  143. width: calc(35% - (#{$spacing-unit} / 2));
  144. }
  145. .footer-col-2 {
  146. width: -webkit-calc(20% - (#{$spacing-unit} / 2));
  147. width: calc(20% - (#{$spacing-unit} / 2));
  148. }
  149. .footer-col-3 {
  150. width: -webkit-calc(45% - (#{$spacing-unit} / 2));
  151. width: calc(45% - (#{$spacing-unit} / 2));
  152. }
  153. @include media-query($on-laptop) {
  154. .footer-col-1,
  155. .footer-col-2 {
  156. width: -webkit-calc(50% - (#{$spacing-unit} / 2));
  157. width: calc(50% - (#{$spacing-unit} / 2));
  158. }
  159. .footer-col-3 {
  160. width: -webkit-calc(100% - (#{$spacing-unit} / 2));
  161. width: calc(100% - (#{$spacing-unit} / 2));
  162. }
  163. }
  164. @include media-query($on-palm) {
  165. .footer-col {
  166. float: none;
  167. width: -webkit-calc(100% - (#{$spacing-unit} / 2));
  168. width: calc(100% - (#{$spacing-unit} / 2));
  169. }
  170. }
  171. /**
  172. * Page content
  173. */
  174. .page-content {
  175. padding: $spacing-unit 0;
  176. flex: 1;
  177. }
  178. .page-heading {
  179. @include relative-font-size(2);
  180. }
  181. .post-list-heading {
  182. @include relative-font-size(1.75);
  183. }
  184. .post-list {
  185. margin-left: 0;
  186. list-style: none;
  187. > li {
  188. margin-bottom: $spacing-unit;
  189. }
  190. }
  191. .post-meta {
  192. font-size: $small-font-size;
  193. color: $grey-color;
  194. }
  195. .post-link {
  196. display: block;
  197. @include relative-font-size(1.5);
  198. }
  199. /**
  200. * Posts
  201. */
  202. .post-header {
  203. margin-bottom: $spacing-unit;
  204. }
  205. .post-title {
  206. @include relative-font-size(2.625);
  207. letter-spacing: -1px;
  208. line-height: 1;
  209. @include media-query($on-laptop) {
  210. @include relative-font-size(2.25);
  211. }
  212. }
  213. .post-content {
  214. margin-bottom: $spacing-unit;
  215. h2 {
  216. @include relative-font-size(2);
  217. @include media-query($on-laptop) {
  218. @include relative-font-size(1.75);
  219. }
  220. }
  221. h3 {
  222. @include relative-font-size(1.625);
  223. @include media-query($on-laptop) {
  224. @include relative-font-size(1.375);
  225. }
  226. }
  227. h4 {
  228. @include relative-font-size(1.25);
  229. @include media-query($on-laptop) {
  230. @include relative-font-size(1.125);
  231. }
  232. }
  233. img{
  234. margin :25px 0px;
  235. }
  236. }
  237. #contact-screen{
  238. position:fixed;
  239. background-color: white;
  240. top: 0px;
  241. left:0px;
  242. width: 100vw;
  243. height: 100vh;
  244. display: none;
  245. font-size: 26px;
  246. line-height: 200%;
  247. font-weight: 600;
  248. span{
  249. position:fixed;
  250. top:10px;
  251. right: 10px;
  252. z-index: 200;
  253. cursor: pointer;
  254. img{
  255. width: 24px;
  256. height:24px;
  257. }
  258. }
  259. &.shown{
  260. z-index: 100;
  261. display : flex;
  262. justify-content: center;
  263. align-items: center;
  264. }
  265. }