_header.scss 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  1. ///
  2. /// Hyperspace by HTML5 UP
  3. /// html5up.net | @ajlkn
  4. /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
  5. ///
  6. /* Header */
  7. #header {
  8. @include vendor('display', 'flex');
  9. background-color: _palette(accent1);
  10. cursor: default;
  11. padding: 1.75em 2em;
  12. > .title {
  13. border: 0;
  14. color: _palette(fg-bold);
  15. display: block;
  16. font-size: 1.25em;
  17. font-weight: _font(weight-bold);
  18. }
  19. > nav {
  20. @include vendor('flex', '1');
  21. text-align: right;
  22. > ul {
  23. margin: 0;
  24. padding: 0;
  25. > li {
  26. display: inline-block;
  27. margin-left: 1.75em;
  28. padding: 0;
  29. vertical-align: middle;
  30. &:first-child {
  31. margin-left: 0;
  32. }
  33. a {
  34. border: 0;
  35. color: _palette(fg-light);
  36. display: inline-block;
  37. font-size: 0.6em;
  38. font-weight: _font(weight-bold);
  39. letter-spacing: _font(kerning-alt);
  40. text-transform: uppercase;
  41. &:hover {
  42. color: _palette(fg);
  43. }
  44. &.active {
  45. color: _palette(fg-bold);
  46. }
  47. }
  48. }
  49. }
  50. }
  51. @include breakpoint(small) {
  52. padding: 1em 2em;
  53. }
  54. @include breakpoint(xsmall) {
  55. display: block;
  56. padding: 0 2em;
  57. text-align: left;
  58. .title {
  59. font-size: 1.25em;
  60. padding: 1em 0;
  61. }
  62. > nav {
  63. border-top: solid 1px _palette(border);
  64. text-align: inherit;
  65. > ul {
  66. > li {
  67. margin-left: 1.5em;
  68. a {
  69. height: 6em;
  70. line-height: 6em;
  71. }
  72. }
  73. }
  74. }
  75. }
  76. }