Site Web en PHP pour présenter des photos https://superflux.antopie.org
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

317 lines
4.3KB

  1. @fond: #2D2F34;
  2. @texte-principal: white;
  3. html {
  4. font-family: "Ubuntu", sans-serif;
  5. font-weight: lighter;
  6. font-size: 26px;
  7. line-height: 1.3;
  8. background-color: @fond;
  9. color: white;
  10. text-align: center;
  11. scrollbar-color: @texte-principal @fond;
  12. scrollbar-width: auto;
  13. & a:link:hover {
  14. text-decoration: none;
  15. }
  16. }
  17. ::selection {
  18. color: @fond;
  19. background-color: @texte-principal;
  20. }
  21. .gallerie {
  22. display: grid;
  23. grid-template-columns: 1fr 1fr 1fr 1fr;
  24. grid-auto-flow: dense;
  25. max-width: 100%;
  26. grid-row-gap: 80px;
  27. }
  28. nav {
  29. display: flex;
  30. flex-direction: row;
  31. justify-content: space-around;
  32. & a {
  33. text-decoration: none;
  34. & div {
  35. border: 2px solid white;
  36. border-radius: 30px;
  37. padding: 14px;
  38. margin: 14px;
  39. transition: all 0.2s ease-in;
  40. &:hover {
  41. background-color: @texte-principal;
  42. color: @fond;
  43. }
  44. }
  45. }
  46. @media (max-width: 540px) {
  47. flex-direction: column;
  48. }
  49. }
  50. .nomElementDossier {
  51. margin-top: 20px;
  52. }
  53. .source {
  54. text-align: right;
  55. margin-top: 8px;
  56. }
  57. .paysage {
  58. grid-column-end: span 2;
  59. max-width: 100%;
  60. }
  61. footer {
  62. color: fade(@texte-principal, 60%);
  63. font-size: 18px;
  64. & a:link {
  65. color: fade(@texte-principal, 60%);
  66. text-decoration: underline;
  67. transition: color 0.12s linear;
  68. &:hover {
  69. color: @texte-principal;
  70. }
  71. }
  72. }
  73. #presentation {
  74. text-align: justify;
  75. margin-left: 22%;
  76. margin-right: 22%;
  77. @media (max-width: 1600px) {
  78. margin-left: 15%;
  79. margin-right: 15%;
  80. }
  81. @media (max-width: 1300px) {
  82. margin-left: 8%;
  83. margin-right: 8%;
  84. }
  85. @media (max-width: 500px) {
  86. margin-left: 6%;
  87. margin-right: 6%;
  88. }
  89. }
  90. blockquote {
  91. background-color: #4d4e52;
  92. padding: 30px;
  93. border-radius: 20px;
  94. @media (max-width: 500px) {
  95. padding: 25px;
  96. margin-left: 0px;
  97. margin-right: 0px;
  98. }
  99. }
  100. .dossier img {
  101. border: 2px white solid;
  102. border-radius: 8px;
  103. }
  104. .element a {
  105. color: white;
  106. font-size: 1.4em;
  107. text-decoration: none;
  108. }
  109. h6 a, h5 a, h4 a, h3 a, h2 a, h1 a {
  110. text-decoration: none;
  111. }
  112. a {
  113. color: @texte-principal;
  114. }
  115. h1, h2, h3, h4, h5, h6 {
  116. padding-bottom: 30px;
  117. margin: 0px;
  118. font-weight: lighter;
  119. }
  120. h1 {
  121. font-size: 100px;
  122. padding-top: 30px;
  123. }
  124. h2 {
  125. font-size: 40px;
  126. padding-top: 22px;
  127. }
  128. h3 {
  129. font-size: 34px;
  130. padding-top: 22px;
  131. }
  132. h4 {
  133. font-size: 28px;
  134. padding-top: 22px;
  135. }
  136. header {
  137. text-align: center;
  138. display: flex;
  139. flex-direction: column;
  140. justify-content: center;
  141. }
  142. main {
  143. margin-top: 32px;
  144. }
  145. .pageAux {
  146. margin-left: 10%;
  147. margin-right: 10%;
  148. }
  149. .ln0 {
  150. font-size: 1.12em;
  151. font-weight: bold;
  152. text-align: center;
  153. }
  154. // ----- FORMULAIRE -----
  155. input[type=submit] {
  156. width: 120px;
  157. font-size: 20px;
  158. }
  159. input[type=text] {
  160. height: 30px;
  161. font-size: 18px;
  162. width: 300px;
  163. }
  164. textarea {
  165. font-size: 18px;
  166. }
  167. input, textarea {
  168. background-color: #232629;
  169. border: 2px solid #5F5F5F;
  170. border-radius: 10px;
  171. color: @texte-principal;
  172. padding: 6px;
  173. margin: 6px;
  174. font-family: "Ubuntu", sans-serif;
  175. font-weight: lighter;
  176. transition: border 0.2s linear;
  177. margin-top: 12px;
  178. margin-bottom: 30px;
  179. &:hover {
  180. border: 2px solid #808080;
  181. }
  182. &:focus {
  183. border: 2px solid white;
  184. }
  185. }
  186. ::placeholder {
  187. font-family: "Ubuntu", sans-serif;
  188. font-weight: lighter;
  189. color: gray;
  190. }
  191. .commentaire {
  192. text-align: left;
  193. border: solid white 2px;
  194. border-radius: 16px;
  195. margin: 14px;
  196. padding: 14px;
  197. overflow: auto;
  198. }
  199. #zoneCommentaires {
  200. margin-top: 30px;
  201. margin-left: 30%;
  202. margin-right: 30%;
  203. @media (max-width: 1000px) {
  204. margin-left: 10%;
  205. margin-right: 10%;
  206. }
  207. @media (max-width: 1000px) {
  208. margin-left: 0px;
  209. margin-right: 0px;
  210. }
  211. }
  212. @media (max-width: 1700px) {
  213. .gallerie {
  214. grid-template-columns: 1fr 1fr 1fr;
  215. }
  216. }
  217. @media (max-width: 1300px) {
  218. .gallerie {
  219. grid-template-columns: 1fr 1fr;
  220. }
  221. h1 {
  222. font-size: 100px;
  223. }
  224. }
  225. @media (max-width: 1000px) {
  226. h1 {
  227. font-size: 80px;
  228. }
  229. }
  230. @media (max-width: 840px) {
  231. .paysage img {
  232. grid-column-end: span 1;
  233. width: 100%;
  234. max-width: 100%;
  235. }
  236. .paysage {
  237. grid-column-end: span 1;
  238. width: 400px;
  239. }
  240. .gallerie {
  241. grid-template-columns: 1fr;
  242. }
  243. .portrait img {
  244. width: 200px;
  245. max-width: 200px;
  246. }
  247. .element {
  248. max-width: 100% !important;
  249. }
  250. h1 {
  251. font-size: 60px;
  252. }
  253. }