_mobile.scss 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310
  1. @media screen and (max-width: 1024px){
  2. body{
  3. #start{
  4. width: $Wi80-m;
  5. #text_figli{
  6. #item_list{
  7. .card{
  8. width: $Wi33-m;
  9. #item{
  10. width: calc(300% + (.5rem * 2));
  11. }
  12. }
  13. }
  14. }
  15. }
  16. }
  17. }
  18. @media screen and (max-width: 414px) {
  19. body{
  20. #start{
  21. width: $Wi-m;
  22. #text_figli{
  23. p{
  24. font-size: 1.7rem;
  25. line-height: 2.3rem;
  26. }
  27. #item_list{
  28. width: $Wi-m;
  29. .card{
  30. width: calc(100%);
  31. margin: 0 0 0.5rem 0;
  32. #item{
  33. width: 100%;
  34. padding: 1rem;
  35. .content-title{
  36. h2{
  37. font-size: 2rem !important;
  38. line-height: 2.5rem !important;
  39. }
  40. & > div{
  41. line-height: 1rem;
  42. }
  43. }
  44. }
  45. }
  46. }
  47. }
  48. }
  49. .sidebar-right{
  50. display: none;
  51. }
  52. }
  53. }
  54. // body{
  55. // #start{
  56. // width: $Wi-m;
  57. // #text_figli{
  58. // #item_list{
  59. // .card{
  60. // width: $Wi-m;
  61. // #item{
  62. // width: calc(100% + (.5rem * 3));
  63. // }
  64. // }
  65. // }
  66. // }
  67. // }
  68. // }
  69. //
  70. //
  71. // // typographie
  72. // header{
  73. // a{
  74. // font-size: $txt-figli-m;
  75. // line-height: $Flhome-m;
  76. // }
  77. // }
  78. // .home{
  79. // p{
  80. // font-size: $txt-figli-m!important;
  81. // line-height: $Flhome-m!important;
  82. // }
  83. // }
  84. // .other_projets{
  85. // h3{
  86. // font-size: $txt-figli-m;
  87. // }
  88. // }
  89. //
  90. // // mep
  91. // header{
  92. // width: calc( #{$Wi-m} - (#{$marg} * 2) );
  93. // }
  94. //
  95. // body{
  96. // #start{
  97. // width: calc( #{$Wi-m} - (#{$marg} * 2) );
  98. // }
  99. // &:not(.home){
  100. // #start{
  101. // margin-top: $Flhome;
  102. // }
  103. // }
  104. // .sidebar-right{
  105. // display: none;
  106. // }
  107. // }
  108. //
  109. // #item_list{
  110. // .card{
  111. // width: calc( #{$Wi-m} )!important;
  112. // &:nth-child(odd){
  113. // margin-right: 0;
  114. // }
  115. // .card-header{
  116. // margin-bottom: $marg;
  117. // & > * {
  118. // margin-right: $marg;
  119. // }
  120. // }
  121. // }
  122. // }
  123. //
  124. // .other_projets{
  125. // margin-top: $margI;
  126. // .card{
  127. // width: $Wi-m;
  128. // &:nth-child(-1n+3){
  129. // margin-right: 0;
  130. // }
  131. // }
  132. // }
  133. // }
  134. //
  135. // @media screen and (max-width: 768px) {
  136. // body{
  137. // #start{
  138. // width: $Wi80-m;
  139. // #text_figli{
  140. // #item_list{
  141. // .card{
  142. // width: $Wi33-m;
  143. // #item{
  144. // width: calc(300% + (.5rem * 3));
  145. // }
  146. // }
  147. // }
  148. // }
  149. // }
  150. // }
  151. //
  152. // // typographie
  153. // header{
  154. // a{
  155. // font-size: 2.5rem;
  156. // line-height: 3rem;
  157. // }
  158. // }
  159. // // .home{
  160. // // p{
  161. // // font-size: $txt-figli-t!important;
  162. // // line-height: $Flhome-t!important;
  163. // // }
  164. // // }
  165. // .other_projets{
  166. // h3{
  167. // font-size: $txt-figli-t;
  168. // }
  169. // }
  170. //
  171. // body{
  172. // &:not(.home){
  173. // #start{
  174. // margin-top: 5rem;
  175. // }
  176. // }
  177. // }
  178. //
  179. // #item_list{
  180. // .card{
  181. // width: calc( #{$Wi-m} );
  182. // &:nth-child(odd){
  183. // margin-right: 0;
  184. // }
  185. // .card-header{
  186. // margin-bottom: $marg;
  187. // & > * {
  188. // margin-right: $marg;
  189. // }
  190. // }
  191. // }
  192. // }
  193. // }
  194. //
  195. // @media screen and (max-width: 812px) and (orientation: landscape) {
  196. // // typographie
  197. // header{
  198. // a{
  199. // font-size: $txt-figli-m;
  200. // line-height: $Flhome-m;
  201. // }
  202. // }
  203. // .home{
  204. // p{
  205. // font-size: $txt-figli-m!important;
  206. // line-height: $Flhome-m!important;
  207. // }
  208. // }
  209. // .other_projets{
  210. // h3{
  211. // font-size: $txt-figli-m;
  212. // }
  213. // }
  214. //
  215. // // mep
  216. // header{
  217. // width: calc( #{$Wi-m} - (#{$marg} * 2) );
  218. // }
  219. //
  220. // body{
  221. // #start{
  222. // width: calc( #{$Wi-m} - (#{$marg} * 2) );
  223. // }
  224. // &:not(.home){
  225. // #start{
  226. // margin-top: $Flhome;
  227. // }
  228. // }
  229. // .sidebar-right{
  230. // display: none;
  231. // }
  232. // }
  233. //
  234. // #item_list{
  235. // .card{
  236. // width: $Wi50;
  237. // &:nth-child(odd){
  238. // margin-right: $margI;
  239. // }
  240. // }
  241. // }
  242. //
  243. // .other_projets{
  244. // .card{
  245. // width: $Wi33;
  246. // &:nth-child(-1n+3){
  247. // margin-right: $marg;
  248. // }
  249. // }
  250. // }
  251. // }
  252. //
  253. // @media screen and (max-width: 910px) and (orientation: portrait) {
  254. // header{
  255. // a{
  256. // font-size: 2.5rem;
  257. // line-height: 3rem;
  258. // }
  259. // }
  260. // .home{
  261. // p{
  262. // font-size: $txt-figli-t!important;
  263. // line-height: $Flhome-t!important;
  264. // }
  265. // }
  266. // .other_projets{
  267. // h3{
  268. // font-size: $txt-figli-t;
  269. // }
  270. // }
  271. // body{
  272. // &:not(.home){
  273. // #start{
  274. // margin-top: 5rem;
  275. // }
  276. // }
  277. // }
  278. // }
  279. //
  280. // @media screen and (max-width: 660px) {
  281. // header{
  282. // a{
  283. // font-size: $txt-figli-m;
  284. // line-height: $Flhome-m;
  285. // }
  286. // }
  287. // .home{
  288. // p{
  289. // font-size: $txt-figli-m!important;
  290. // line-height: $Flhome-m!important;
  291. // }
  292. // }
  293. // .other_projets{
  294. // h3{
  295. // font-size: $txt-figli-m;
  296. // }
  297. // }
  298. //
  299. // body{
  300. // &:not(.home){
  301. // #start{
  302. // margin-top: $Flhome;
  303. // }
  304. // }
  305. // }
  306. // }
  307. //