app.scss 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  1. @import './base/reset';
  2. @import './base/variables';
  3. @import './base/colors';
  4. @import './base/grid';
  5. @import './base/layout';
  6. @import './base/fonts';
  7. body{
  8. color: #1a1a1a;
  9. }
  10. header[role="banner"]{
  11. div.wrapper{
  12. display: grid;
  13. grid-template-columns: 1fr 1fr;
  14. }
  15. h1.site-title{
  16. grid-column: 1;
  17. margin:0;
  18. font-size: 1em;
  19. }
  20. nav#header-menu{
  21. grid-column: 2;
  22. text-align: right;
  23. >ul>li{
  24. display: inline-block;
  25. margin-right: 1em;
  26. position: relative;
  27. >ul{
  28. position: absolute;
  29. top:1em; right:0;
  30. overflow: hidden;
  31. >li{
  32. transition: height 0.3s ease-in-out;
  33. height:0.2px;
  34. }
  35. }
  36. &:hover{
  37. >ul>li{
  38. height:1em;
  39. }
  40. }
  41. }
  42. li>span,li>a{
  43. font-size: 0.9em;
  44. }
  45. }
  46. }
  47. section[role="main-content"]{
  48. }
  49. footer[role="tools"]{
  50. #history{
  51. // color: #1a1a1a;
  52. background-color: $or;
  53. }
  54. #results{
  55. // color: #1a1a1a;
  56. background-color: $gris;
  57. }
  58. #footer-bottom{
  59. #footer-tabs{
  60. ul{
  61. padding:0; margin:0;
  62. display: flex;
  63. flex-direction: column;
  64. li{
  65. flex: 1 1 auto;
  66. box-sizing: border-box;
  67. padding:0.3em;
  68. margin:0;
  69. line-height: 0.6em;
  70. height:2em;
  71. &.history{
  72. background-color: $or;
  73. }
  74. &.results{
  75. background-color: $gris;
  76. }
  77. span{
  78. font-size: 0.693em;
  79. font-weight: 400;
  80. text-transform: uppercase;
  81. }
  82. }
  83. }
  84. }
  85. #search{
  86. color: #fff;
  87. background-color: $bleuroi;
  88. label[for="keys"]{
  89. display: none;
  90. }
  91. }
  92. }
  93. h2{
  94. margin:0;
  95. font-size: 0.756em;
  96. font-weight: 400;
  97. text-transform: uppercase;
  98. }
  99. }