_header.scss 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. // home
  2. body{
  3. &> .blog{
  4. header{
  5. width: 100%;
  6. height: 100vh;
  7. display: inline-flex;
  8. flex-direction: column;
  9. & > section{
  10. position: relative;
  11. height: 50vh;
  12. min-height: 250px;
  13. &.works-mea{
  14. display: inline-flex;
  15. flex-wrap: wrap;
  16. align-items: flex-end;
  17. height: 100%;
  18. }
  19. }
  20. h1{
  21. font-size: 11.2vw;
  22. line-height: 7vw!important;
  23. }
  24. h2{
  25. font-size: 3.7vw;
  26. }
  27. nav{
  28. margin-top: 25vh; /* poussé de la moitié de hauteur de viewport */
  29. transform: translateY(-50%); /* tiré de la moitié de sa propre hauteur */
  30. }
  31. .scroll{
  32. width: 50px;
  33. height: 15px;
  34. margin: 0 auto 10px auto;
  35. overflow: hidden;
  36. position: relative;
  37. & > p:nth-child(1){
  38. text-align: center;
  39. position: absolute;
  40. top: -20px;
  41. animation: translatep1 2s infinite linear;
  42. }
  43. & > p:nth-child(2){
  44. text-align: center;
  45. position: absolute;
  46. top: -20px;
  47. animation: translatep1 2s infinite linear;
  48. animation-delay: 1s;
  49. }
  50. }
  51. }
  52. }
  53. }
  54. // page
  55. body{
  56. & > .item{
  57. header{
  58. height: 100px;
  59. position: relative;
  60. nav{
  61. position: absolute;
  62. margin-top: 50px; /* poussé de la moitié de hauteur de viewport */
  63. transform: translateY(-50%); /* tiré de la moitié de sa propre hauteur */
  64. }
  65. h1{
  66. color: black;
  67. }
  68. h2{
  69. display: none;
  70. }
  71. .scroll{
  72. display: none;
  73. }
  74. }
  75. }
  76. }