homepage.css 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381
  1. blockquote {
  2. border-left: 4px solid #ccc;
  3. font-style:italic;
  4. box-sizing: border-box;
  5. padding:0 10px;
  6. }
  7. footer {
  8. text-align: center;
  9. color:#fff;
  10. }
  11. pre {
  12. border-width:0 0 0 4px;
  13. background: #fff;
  14. }
  15. main p code,
  16. main li code,
  17. main div > code {
  18. font-family: Consolas,Monaco,'Andale Mono',monospace;
  19. font-size: 17px;
  20. line-height: 100%;
  21. color:#1672ce;
  22. background: #fff;
  23. border:none;
  24. }
  25. /* -------- homepage css -----------------*/
  26. .homepage header {
  27. margin:0 auto;
  28. padding:0 0 3em;
  29. box-sizing: border-box;
  30. background:#19242F url(//thephpleague.com/img/header_bg.png) no-repeat top center;
  31. background-size: cover;
  32. max-width: none;
  33. color:#fff;
  34. font-family: "Museo 300", sans-serif;
  35. }
  36. .homepage header h1 {
  37. margin:.3em auto;
  38. font-family: "Museo 300", sans-serif;
  39. line-height: 250%;
  40. font-weight: normal;
  41. }
  42. .homepage header h2 {
  43. margin:0 auto;
  44. font-family: "Museo 300", sans-serif;
  45. color:#ff4043;
  46. font-size:36px;
  47. line-height:1.33;
  48. font-weight:normal;
  49. }
  50. .homepage .badge-list {
  51. background: #fff;
  52. padding: 3em 0 0 0;
  53. text-align: center;
  54. }
  55. .homepage .composer span {
  56. padding:.3em 1em;
  57. background-color:rgba(0, 0, 0, .3);
  58. color:#fff;
  59. font-size:.9rem;
  60. font-family: Consolas, Monaco ,'Andale Mono', monospace;
  61. line-height: 140%;
  62. text-align: left;
  63. white-space: pre;
  64. word-wrap: normal;
  65. word-spacing: normal;
  66. hyphens: none;
  67. display:inline-block;
  68. border-radius: .3em;
  69. }
  70. .homepage .hot-links {
  71. margin:0 auto;
  72. padding:0;
  73. list-style:none;
  74. width:300px;
  75. display:flex;
  76. align-content: top;
  77. align-items: center;
  78. }
  79. .homepage .hot-links li {
  80. padding:0;
  81. margin:0;
  82. }
  83. .homepage .hot-links a {
  84. display:block;
  85. margin:0;
  86. padding:1em;
  87. width:150px;
  88. border-radius:2px 0 0 2px;
  89. text-decoration:none;
  90. text-align:center;
  91. font-weight:bold;
  92. background:#fff;
  93. color:#ff4043;
  94. }
  95. .homepage .hot-links :last-child a {
  96. border-radius:0 2px 2px 0;
  97. background:#ff4043;
  98. color:#fff;
  99. }
  100. .homepage .hot-links:hover :last-child a {
  101. color:#ff4043;
  102. }
  103. .homepage .hot-links:hover a {
  104. background:#fff;
  105. color:#ff4043;
  106. }
  107. .homepage .hot-links:hover a:hover {
  108. background: #ff4043;
  109. color: #fff;
  110. }
  111. .homepage main {
  112. color: #2b3d50;
  113. font-family: "Museo 300", sans-serif;
  114. line-height: 160%;
  115. font-weight: normal;
  116. background:#19242f;
  117. width:auto;
  118. right:auto;
  119. }
  120. .homepage main > div {
  121. margin:0 auto;
  122. padding:3em 0;
  123. box-sizing: border-box;
  124. }
  125. .inner-content {
  126. margin:0 auto;
  127. padding:1em;
  128. box-sizing: border-box;
  129. text-align:center;
  130. }
  131. .inner-content h1 {
  132. color:#fff;
  133. font-size:50px;
  134. line-height:100%;
  135. font-weight:normal;
  136. font-family:"Museo Sans 300", sans-serif;
  137. text-transform:uppercase;
  138. margin:0;
  139. }
  140. .inner-content:after {
  141. content: '';
  142. display:table;
  143. clear:both;
  144. }
  145. .projects,
  146. .sponsors {
  147. color: #fff;
  148. }
  149. .projects h2,
  150. .sponsors h2 {
  151. font-size:50px;
  152. line-height:100%;
  153. font-weight:normal;
  154. font-family:"Museo Sans 300", sans-serif;
  155. text-transform:uppercase;
  156. margin: 0 0 1em 0;
  157. }
  158. .project-logos {
  159. display: flex;
  160. flex-wrap: wrap;
  161. align-items: center;
  162. justify-content: center;
  163. }
  164. .project-logos a {
  165. display: block;
  166. object-fit: contain;
  167. margin: 0 16px;
  168. }
  169. .project-logos img {
  170. height: 70px;
  171. max-width: 180px;
  172. }
  173. .sponsors a {
  174. color: #3399ff;
  175. }
  176. .sponsors ul {
  177. list-style: none;
  178. font-size: 1.1em;
  179. }
  180. .features {
  181. background: #F2F7FC;
  182. border-bottom:1px solid #CFE4F9;
  183. color:#666;
  184. line-height: 1.5;
  185. font-weight: normal;
  186. font-variant: normal;
  187. font-style: normal;
  188. font-size: 18px;
  189. font-family: "Museo 300", sans-serif;
  190. }
  191. .features h1 {
  192. color:#6abcdd;
  193. }
  194. .features h2 {
  195. color:#6abcdd;
  196. font-weight: normal;
  197. }
  198. .features p {
  199. text-align: center;
  200. }
  201. .features a {
  202. color:#6abcdd;
  203. }
  204. .highlights {
  205. background:#fff;
  206. border-bottom:1px solid #CFE4F9;
  207. }
  208. .highlights .description {
  209. color:#666;
  210. line-height: 1.5;
  211. font-weight: normal;
  212. font-variant: normal;
  213. font-style: normal;
  214. font-size: 18px;
  215. font-family: "Museo 300", sans-serif;
  216. text-align: left;
  217. }
  218. .highlights h1 {
  219. color:#ff4043;
  220. font-size: 36px;
  221. line-height:115%;
  222. }
  223. .highlights ol {
  224. margin:0;
  225. text-align:left;
  226. }
  227. .highlights li {
  228. margin:0 0 15px 0;
  229. color:#666;
  230. font-size:16px;
  231. font-weight:bold;
  232. }
  233. .highlights li p {
  234. margin:0;
  235. line-height: 1.4;
  236. font-weight: normal;
  237. font-variant: normal;
  238. font-style: normal;
  239. font-size: 18px;
  240. font-family: "Museo 300", sans-serif;
  241. color:#ff4043;
  242. }
  243. .highlights a {
  244. color:#ff4043;
  245. }
  246. .questions {
  247. padding:0;
  248. background:#fff;
  249. color:#666;
  250. border-bottom:1px solid #CFE4F9;
  251. }
  252. .questions h1 {
  253. font-size:36px;
  254. color:#ff4043;
  255. }
  256. .questions a {
  257. color:#6abcdd;
  258. }
  259. .questions a:hover {
  260. text-decoration: none;
  261. }
  262. @media screen and (max-width: 549px) {
  263. .homepage header h1 {
  264. margin:0 auto;
  265. font-size:clamp(1.8rem, 5.9vw, 42px);
  266. }
  267. .homepage .composer span {
  268. font-size:1rem;
  269. }
  270. }
  271. @media screen and (min-width: 549px) {
  272. .homepage header h1 {
  273. margin:0 auto;
  274. font-size:clamp(1.8rem, 5.9vw, 96px);
  275. }
  276. .inner-content {
  277. max-width:1000px;
  278. }
  279. .homepage main {
  280. width:initial;
  281. right:initial;
  282. }
  283. .highlights h1 {
  284. font-size: 50px;
  285. }
  286. .highlights li {
  287. font-size:24px;
  288. }
  289. .highlights li p {
  290. font-size:20px;
  291. }
  292. .highlights .column {
  293. float:left;
  294. width:45%;
  295. }
  296. .highlights .one {
  297. margin:0 10% 0 0;
  298. }
  299. .documentation h1 {
  300. font-size:50px;
  301. }
  302. }
  303. @media screen and (min-width:700px) {
  304. .documentation .version {
  305. float:left;
  306. width:42%;
  307. margin:2%;
  308. max-width:289px;
  309. }
  310. }
  311. @media screen and (min-width: 910px) {
  312. .documentation .version {
  313. float:left;
  314. width:30%;
  315. margin:1%;
  316. }
  317. .homepage header h1 {
  318. margin:0 auto;
  319. font-size:clamp(1.8rem, 5.9vw, 96px);
  320. }
  321. }
  322. #sponsors + p + ul {
  323. list-style-type: none;
  324. }