Site web d'Antopie https://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.
 
 
 
 

435 lines
5.9 KiB

  1. @fond: #2a2a2a;
  2. @fondSecondaire: #222222;
  3. @fondOptionHover: lighten(@fond, 10%);
  4. @texte: white;
  5. @couleurLien: white;
  6. @couleurPrincipale: red;
  7. @border: #5f5f5f;
  8. @borderHover: #808080;
  9. @borderFocus: white;
  10. ::selection {
  11. color: @fond;
  12. background-color: @texte;
  13. }
  14. .bouton {
  15. border: 2px solid grey;
  16. padding: 10px;
  17. padding-left: 15px;
  18. padding-right: 15px;
  19. margin: 5px;
  20. display: inline-block;
  21. border-radius: 14px;
  22. color: @texte;
  23. text-decoration: none;
  24. &:hover {
  25. color: @couleurPrincipale;
  26. border: 2px solid @couleurPrincipale;
  27. }
  28. }
  29. .petit-bouton {
  30. border: 2px solid grey;
  31. padding: 2px;
  32. padding-left: 10px;
  33. padding-right: 10px;
  34. margin: 5px;
  35. font-size: 80%;
  36. display: inline-block;
  37. border-radius: 14px;
  38. color: @texte;
  39. text-decoration: none;
  40. &:hover {
  41. color: @couleurPrincipale;
  42. border: 2px solid @couleurPrincipale;
  43. }
  44. }
  45. html {
  46. font-size: 20px;
  47. scrollbar-color: @texte @fond;
  48. scrollbar-width: auto;
  49. }
  50. a, a:visited {
  51. text-decoration: underline;
  52. color: @couleurLien;
  53. transition: all 0.1s linear;
  54. &:hover {
  55. text-decoration: none;
  56. color: @couleurPrincipale;
  57. }
  58. }
  59. .logo {
  60. margin-bottom: 10px;
  61. }
  62. img {
  63. height: auto;
  64. max-width: 100%;
  65. }
  66. .imgArticle {
  67. border: 1px white solid;
  68. border-radius: 5px;
  69. display: block;
  70. margin: auto;
  71. margin-top: 20px;
  72. margin-bottom: 20px;
  73. }
  74. del {
  75. text-decoration: line-through;
  76. }
  77. code, var, samp {
  78. font-family: "Ubuntu Mono", monospace;
  79. background-color: @fondSecondaire;
  80. padding: 5px;
  81. border-radius: 10px;
  82. font-style: normal;
  83. }
  84. body {
  85. font-family: "Ubuntu", sans-serif;
  86. padding: 0px;
  87. margin: 0px;
  88. background-color: @fondSecondaire;
  89. color: @texte;
  90. font-size: 25px;
  91. line-height: 35px;
  92. }
  93. address {
  94. font-style: normal;
  95. }
  96. ul {
  97. padding-left: 35px;
  98. margin: 0px;
  99. }
  100. dt {
  101. font-weight: 500;
  102. }
  103. dd {
  104. margin-left: 25px;
  105. padding-bottom: 10px;
  106. }
  107. p {
  108. margin: 0px;
  109. padding-top: 10px;
  110. padding-bottom: 10px;
  111. }
  112. .grille-services {
  113. display: grid;
  114. grid-template-columns: 1fr 1fr 1fr 1fr;
  115. grid-gap: 30px;
  116. @media (max-width: 1500px) {
  117. grid-template-columns: 1fr 1fr 1fr;
  118. }
  119. @media (max-width: 1000px) {
  120. grid-template-columns: 1fr 1fr;
  121. }
  122. @media (max-width: 600px) {
  123. grid-template-columns: 1fr;
  124. }
  125. }
  126. .titreService {
  127. font-size: 1.3em;
  128. text-align: center;
  129. }
  130. .metaService {
  131. text-decoration: none;
  132. font-size: 28px;
  133. margin-top: 6px;
  134. }
  135. .metasService {
  136. display: flex;
  137. flex-direction: row;
  138. justify-content: center;
  139. font-size: 0.8em;
  140. }
  141. .logoService {
  142. text-align: center;
  143. }
  144. .elLogoServ {
  145. max-width: 150px;
  146. max-height: 100px;
  147. color: @texte;
  148. }
  149. .descService {
  150. padding-top: 5px;
  151. padding-bottom: 10px;
  152. text-align: left;
  153. }
  154. .domService {
  155. font-family: "Ubuntu Mono", monospace;
  156. overflow-wrap: anywhere;
  157. margin-top: -6px;
  158. font-size: 0.8em;
  159. color: #eeeeee;
  160. }
  161. main {
  162. background-color: @fond;
  163. margin: 0px;
  164. padding: 30px;
  165. padding-top: 15px;
  166. @media (max-width: 500px) {
  167. padding-left: 10px;
  168. padding-right: 10px;
  169. }
  170. }
  171. .centre {
  172. text-align: center;
  173. justify-content: center;
  174. }
  175. article {
  176. margin-left: 20%;
  177. margin-right: 20%;
  178. @media (max-width: 1400px) {
  179. margin-left: 10%;
  180. margin-right: 10%;
  181. }
  182. @media (max-width: 800px) {
  183. margin-left: 0px;
  184. margin-right: 0px;
  185. }
  186. }
  187. #pres {
  188. text-align: center;
  189. line-height: 40px;
  190. margin-left: 100px;
  191. margin-right: 100px;
  192. @media (max-width: 1400px) {
  193. margin-left: 0px;
  194. margin-right: 0px;
  195. }
  196. }
  197. // FOOTER
  198. .textefooter {
  199. margin: 30px;
  200. line-height: 1.5em;
  201. text-align: center;
  202. }
  203. .interlude {
  204. display: flex;
  205. justify-content: center;
  206. }
  207. .traitinterlude > hr {
  208. display: none;
  209. }
  210. .traitinterlude {
  211. border-top: 2px gray dashed;
  212. width: 450px;
  213. }
  214. footer {
  215. text-align: center;
  216. display: flex;
  217. flex-direction: column;
  218. }
  219. .logofooter {
  220. padding-left: 6%;
  221. margin-top: 20px;
  222. text-align: center;
  223. }
  224. .liensfooter {
  225. display: flex;
  226. flex-direction: row;
  227. padding: 20px;
  228. }
  229. .lienfooter {
  230. margin: 10px;
  231. }
  232. /* ----------------------- HEADER ------------------------ */
  233. #lienHeader {
  234. margin: 0px;
  235. //border: 3px white solid;
  236. //border-top: none;
  237. //border-radius: 0px 0px 12px 12px;
  238. text-align: center;
  239. font-size: 2em;
  240. display: flex;
  241. justify-content: center;
  242. padding: 30px;
  243. padding-bottom: 20px;
  244. margin-left: 35px;
  245. margin-right: 35px;
  246. @media (max-width: 600px) {
  247. border: none;
  248. padding: 0px;
  249. margin-top: 20px;
  250. margin-left: 20px;
  251. margin-right: 20px;
  252. }
  253. }
  254. header {
  255. display: flex;
  256. justify-content: center;
  257. }
  258. #header:active {
  259. box-shadow: 2px 2px 3px white inset;
  260. }
  261. #header:hover {
  262. background-color: @fondOptionHover;
  263. transition: all 0.2s ease-in-out;
  264. @media (max-width: 600px) {
  265. background-color: inherit;
  266. }
  267. }
  268. // ----- TITRES -----
  269. h1, h2, h3, h4, h5, h6 {
  270. font-weight: normal;
  271. line-height: 100%;
  272. }
  273. h1 {
  274. font-size: 250%;
  275. text-align: center;
  276. margin: 0px;
  277. padding-bottom: 20px;
  278. padding-top: 15px;
  279. }
  280. h2 {
  281. font-size: 200%;
  282. margin-top: 50px;
  283. margin-bottom: 20px;
  284. }
  285. h3 {
  286. font-size: 160%;
  287. margin-top: 30px;
  288. margin-bottom: 10px;
  289. }
  290. h4 {
  291. font-size: 130%;
  292. margin-top: 0px;
  293. margin-bottom: 0px;
  294. }
  295. h5 {
  296. font-size: 115%;
  297. }
  298. h6 {
  299. font-size: 107%;
  300. }
  301. .gomeza {
  302. display: none; // Sera changé le moment voulu en JS
  303. position: fixed;
  304. bottom: 0px;
  305. left: 30px;
  306. z-index: 100;
  307. }
  308. // --- Formulaire ---
  309. /*
  310. input, textarea {
  311. border: 2px @border solid;
  312. border-radius: 10px;
  313. font-size: 20px;
  314. font-weight: normal;
  315. color: @texte;
  316. transition: border 0.1s linear;
  317. background-color: @fondSecondaire;
  318. margin-top: 8px;
  319. font-family: "Ubuntu", sans-serif;
  320. padding: 10px;
  321. margin: 10px;
  322. &:hover {
  323. border: 2px @borderHover solid;
  324. }
  325. &:focus {
  326. border: 2px @borderFocus solid;
  327. outline: none;
  328. }
  329. }
  330. input[type="text"] {
  331. width: 100px;
  332. }
  333. textarea {
  334. background-color: @fondSecondaire;
  335. color: @texte;
  336. scrollbar-color: @texte @fond;
  337. scrollbar-width: auto;
  338. width: 90%;
  339. }
  340. textarea::placeholder {
  341. color: @texteSecondaire;
  342. opacity: 1;
  343. font-family: "Ubuntu", sans-serif;
  344. font-weight: normal;
  345. font-size: 1em;
  346. }
  347. */
  348. @media (max-width: 800px) {
  349. .basfooter {
  350. flex-direction: column;
  351. }
  352. .logofooter {
  353. padding: 0px;
  354. }
  355. }