_mobile.scss 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224
  1. @media screen and (max-width: 414px) {
  2. // typographie
  3. header{
  4. a{
  5. font-size: $txt-figli-m;
  6. line-height: $Flhome-m;
  7. }
  8. }
  9. .home{
  10. p{
  11. font-size: $txt-figli-m!important;
  12. line-height: $Flhome-m!important;
  13. }
  14. }
  15. .other_projets{
  16. h3{
  17. font-size: $txt-figli-m;
  18. }
  19. }
  20. // mep
  21. header{
  22. width: calc( #{$Wi-m} - (#{$marg} * 2) );
  23. }
  24. body{
  25. #start{
  26. width: calc( #{$Wi-m} - (#{$marg} * 2) );
  27. }
  28. &:not(.home){
  29. #start{
  30. margin-top: $Flhome;
  31. }
  32. }
  33. .sidebar-right{
  34. display: none;
  35. }
  36. }
  37. #item_list{
  38. .card{
  39. width: calc( #{$Wi-m} );
  40. &:nth-child(odd){
  41. margin-right: 0;
  42. }
  43. .card-header{
  44. margin-bottom: $marg;
  45. & > * {
  46. margin-right: $marg;
  47. }
  48. }
  49. }
  50. }
  51. .other_projets{
  52. margin-top: $margI;
  53. .card{
  54. width: $Wi-m;
  55. &:nth-child(-1n+3){
  56. margin-right: 0;
  57. }
  58. }
  59. }
  60. }
  61. @media screen and (max-width: 768px) and (orientation: portrait) {
  62. // typographie
  63. header{
  64. a{
  65. font-size: 2.5rem;
  66. line-height: 3rem;
  67. }
  68. }
  69. .home{
  70. p{
  71. font-size: $txt-figli-t!important;
  72. line-height: $Flhome-t!important;
  73. }
  74. }
  75. .other_projets{
  76. h3{
  77. font-size: $txt-figli-t;
  78. }
  79. }
  80. body{
  81. &:not(.home){
  82. #start{
  83. margin-top: 5rem;
  84. }
  85. }
  86. }
  87. #item_list{
  88. .card{
  89. width: calc( #{$Wi-m} );
  90. &:nth-child(odd){
  91. margin-right: 0;
  92. }
  93. .card-header{
  94. margin-bottom: $marg;
  95. & > * {
  96. margin-right: $marg;
  97. }
  98. }
  99. }
  100. }
  101. }
  102. @media screen and (max-width: 812px) and (orientation: landscape) {
  103. // typographie
  104. header{
  105. a{
  106. font-size: $txt-figli-m;
  107. line-height: $Flhome-m;
  108. }
  109. }
  110. .home{
  111. p{
  112. font-size: $txt-figli-m!important;
  113. line-height: $Flhome-m!important;
  114. }
  115. }
  116. .other_projets{
  117. h3{
  118. font-size: $txt-figli-m;
  119. }
  120. }
  121. // mep
  122. header{
  123. width: calc( #{$Wi-m} - (#{$marg} * 2) );
  124. }
  125. body{
  126. #start{
  127. width: calc( #{$Wi-m} - (#{$marg} * 2) );
  128. }
  129. &:not(.home){
  130. #start{
  131. margin-top: $Flhome;
  132. }
  133. }
  134. .sidebar-right{
  135. display: none;
  136. }
  137. }
  138. #item_list{
  139. .card{
  140. width: $Wi50;
  141. &:nth-child(odd){
  142. margin-right: $margI;
  143. }
  144. }
  145. }
  146. .other_projets{
  147. .card{
  148. width: $Wi33;
  149. &:nth-child(-1n+3){
  150. margin-right: $marg;
  151. }
  152. }
  153. }
  154. }
  155. @media screen and (max-width: 910px) and (orientation: portrait) {
  156. header{
  157. a{
  158. font-size: 2.5rem;
  159. line-height: 3rem;
  160. }
  161. }
  162. .home{
  163. p{
  164. font-size: $txt-figli-t!important;
  165. line-height: $Flhome-t!important;
  166. }
  167. }
  168. .other_projets{
  169. h3{
  170. font-size: $txt-figli-t;
  171. }
  172. }
  173. body{
  174. &:not(.home){
  175. #start{
  176. margin-top: 5rem;
  177. }
  178. }
  179. }
  180. }
  181. @media screen and (max-width: 660px) {
  182. header{
  183. a{
  184. font-size: $txt-figli-m;
  185. line-height: $Flhome-m;
  186. }
  187. }
  188. .home{
  189. p{
  190. font-size: $txt-figli-m!important;
  191. line-height: $Flhome-m!important;
  192. }
  193. }
  194. .other_projets{
  195. h3{
  196. font-size: $txt-figli-m;
  197. }
  198. }
  199. body{
  200. &:not(.home){
  201. #start{
  202. margin-top: $Flhome;
  203. }
  204. }
  205. }
  206. }