Blog-style website for karathan using the self-made Stellar Theme powered by HTML5Up http://blog.karathan.at

_section.scss 1.8KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111
  1. ///
  2. /// Stellar 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. /* Section/Article */
  7. section, article {
  8. &.special {
  9. text-align: center;
  10. }
  11. }
  12. header {
  13. &.major {
  14. margin-bottom: (_size(element-margin) * 1.5);
  15. h2 {
  16. font-size: 2em;
  17. &:after {
  18. display: block;
  19. content: '';
  20. width: 3.25em;
  21. height: 2px;
  22. margin: (_size(element-margin) * 0.35) 0 (_size(element-margin) * 0.5) 0;
  23. border-radius: 2px;
  24. section.special &, article.special & {
  25. margin-left: auto;
  26. margin-right: auto;
  27. }
  28. }
  29. }
  30. p {
  31. font-size: 1.25em;
  32. letter-spacing: _font(letter-spacing);
  33. }
  34. &.special {
  35. text-align: center;
  36. h2 {
  37. &:after {
  38. margin-left: auto;
  39. margin-right: auto;
  40. }
  41. }
  42. }
  43. }
  44. }
  45. footer {
  46. &.major {
  47. margin-top: (_size(element-margin) * 1.5);
  48. }
  49. }
  50. @include breakpoint('<=small') {
  51. header {
  52. &.major {
  53. margin-bottom: 0;
  54. h2 {
  55. font-size: 1.5em;
  56. }
  57. p {
  58. font-size: 1em;
  59. letter-spacing: 0;
  60. br {
  61. display: none;
  62. }
  63. }
  64. }
  65. }
  66. footer {
  67. &.major {
  68. margin-top: 0;
  69. }
  70. }
  71. }
  72. @mixin color-section($p: null) {
  73. header {
  74. &.major {
  75. h2 {
  76. &:after {
  77. background-color: _palette($p, border);
  78. @if $p == 'invert' {
  79. @include vendor('background-image', 'linear-gradient(90deg, #{_palette(accent1)}, #{_palette(accent3)}, #{_palette(accent5)})');
  80. }
  81. }
  82. &.secondary {
  83. text-align: right;
  84. &:after {
  85. position:relative;
  86. left: 88%;
  87. }
  88. }
  89. }
  90. }
  91. }
  92. }
  93. @include color-section;