layout.css 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278
  1. /* Copyright (C) 2019 Free Software Foundation, Inc.
  2. Authors:
  3. * Gonçalo Oliveira <goncalo.oli@outlook.com>
  4. * Diogo Cordeiro <diogo@fc.up.pt>
  5. This file is free software: you can redistribute it and/or modify
  6. it under the terms of the GNU General Public License as published by
  7. the Free Software Foundation, either version 3 of the License, or
  8. (at your option) any later version.
  9. This file is distributed in the hope that it will be useful,
  10. but WITHOUT ANY WARRANTY; without even the implied warranty of
  11. MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  12. GNU General Public License for more details. */
  13. *,
  14. ::after,
  15. ::before {
  16. -moz-box-sizing: border-box;
  17. -webkit-box-sizing: border-box;
  18. box-sizing: border-box;
  19. }
  20. ::-moz-selection,
  21. ::selection {
  22. background: rgba(255, 255, 0, .3);
  23. color: #000;
  24. }
  25. :after,
  26. :before {
  27. -moz-box-sizing: border-box;
  28. -webkit-box-sizing: border-box;
  29. box-sizing: inherit;
  30. }
  31. a {
  32. text-decoration: none;
  33. color: #f03c69;
  34. }
  35. a:hover {
  36. -moz-transition: all linear 0.2s;
  37. transition: all linear 0.2s;
  38. color:#f03c60d7;
  39. }
  40. header {
  41. color: #3F3B3B;
  42. text-align: left;
  43. }
  44. ol {
  45. display: inline;
  46. }
  47. /*
  48. * FSF header
  49. */
  50. header nav {
  51. background: #000;
  52. border-bottom: 1px solid #000;
  53. padding: 8px;
  54. margin-bottom: 20px;
  55. text-align: center;
  56. font-size: .9em;
  57. font-weight: 400;
  58. }
  59. header nav a {
  60. color: #3F3D32;
  61. padding: 0.625em;
  62. }
  63. header nav a:hover {
  64. color: #3F3D32;
  65. text-decoration: underline;
  66. }
  67. header nav.gnu-nav {
  68. margin: 0;
  69. background: #000000;
  70. }
  71. header nav.gnu-nav .gnu-logo {
  72. padding: 0;
  73. }
  74. header nav.gnu-nav .gnu-logo img {
  75. height: 2.125em;
  76. vertical-align: bottom;
  77. }
  78. header nav.gnu-nav a {
  79. color: #817F7F;
  80. font-size: .9em;
  81. padding: 0;
  82. }
  83. header nav.gnu-nav a:hover {
  84. color: #525151;
  85. text-decoration: none;
  86. }
  87. header nav.gnu-nav a:after {
  88. content: '\30FB';
  89. padding: 0 0.3125em;
  90. color: #817F7F;
  91. font-size: .9em;
  92. }
  93. header nav.gnu-nav a:last-child:after {
  94. content: '';
  95. padding: 0;
  96. }
  97. header nav.gnu-nav a:first-child:after {
  98. content: '';
  99. }
  100. header nav.gnu-nav a.join-fsf {
  101. text-align: center;
  102. border-radius: 20px;
  103. display: inline-block;
  104. padding: 5px 18px 2px 18px;
  105. background: #817F7F;
  106. color: white;
  107. text-decoration: none;
  108. }
  109. header nav.gnu-nav a.join-fsf:hover {
  110. background: #525151;
  111. }
  112. header .container {
  113. padding-top: 2.5em;
  114. padding-bottom: 2.5em;
  115. position: relative;
  116. overflow: hidden;
  117. }
  118. header .logo {
  119. overflow: hidden;
  120. text-align: center;
  121. z-index: 1;
  122. }
  123. header .logo img {
  124. max-height: 6.25em;
  125. vertical-align: top;
  126. }
  127. header p {
  128. margin: 0 auto;
  129. text-align: center;
  130. max-width: 47.5em;
  131. font-weight: 300;
  132. font-size: 1.2em;
  133. }
  134. header a {
  135. text-decoration: none;
  136. }
  137. header a.learn-more {
  138. color: rgb(240, 255, 135);
  139. text-decoration: none;
  140. }
  141. header a.learn-more:hover {
  142. color: rgb(240, 255, 135);
  143. text-decoration: none;
  144. }
  145. /*
  146. * Footer
  147. */
  148. .footer {
  149. border-top: 4px solid #333;
  150. padding-top: 15px;
  151. color: #888;
  152. font-size: 80%;
  153. }
  154. .footer-text {
  155. display: inline-block;
  156. }
  157. .footer a {
  158. color: #ccc;
  159. text-decoration: none;
  160. }
  161. .footer a:hover {
  162. color: rgb(204, 99, 99);
  163. }
  164. /* Begin of Responsiveness instructions */
  165. @media screen and (max-width: 999px) {
  166. .container {
  167. width: 90%;
  168. padding: 40px 5%;
  169. }
  170. header .container {
  171. padding-bottom: 0;
  172. }
  173. header h2,
  174. header p {
  175. max-width: 100%;
  176. }
  177. header {
  178. left: 0;
  179. position: relative;
  180. max-width: 100%;
  181. }
  182. }
  183. @media screen and (max-width: 639px) {
  184. body {
  185. font-size: 1em;
  186. }
  187. header .container {
  188. text-align: center;
  189. padding-top: 0;
  190. }
  191. header .logo {
  192. text-align: center;
  193. }
  194. header .logo h1,
  195. header .logo img {
  196. float: none;
  197. }
  198. header .logo h1 {
  199. display: block;
  200. font-size: 3em;
  201. line-height: 2em;
  202. margin-left: 5px;
  203. }
  204. header h2 {
  205. margin-top: 10px;
  206. margin-bottom: 30px;
  207. font-size: 1.8em;
  208. }
  209. header nav {
  210. display: none;
  211. padding: 0;
  212. }
  213. header nav a {
  214. padding: 10px;
  215. display: block;
  216. text-align: left;
  217. border-top: 1px solid #999;
  218. font-size: 1.2em;
  219. font-weight: 400;
  220. }
  221. header nav.gnu-nav a {
  222. border-color: #ccc;
  223. }
  224. }
  225. @media screen and (max-width: 550px) {
  226. header .links li {
  227. float: none;
  228. width: auto;
  229. padding: 5px;
  230. }
  231. header,
  232. header {
  233. text-align: center;
  234. margin: 0;
  235. width: auto;
  236. }
  237. }