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

_section.scss 1.8KB

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