Layout von Websiten mit Bootstrap und Foundation
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

_type.scss 2.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125
  1. // stylelint-disable declaration-no-important, selector-list-comma-newline-after
  2. //
  3. // Headings
  4. //
  5. h1, h2, h3, h4, h5, h6,
  6. .h1, .h2, .h3, .h4, .h5, .h6 {
  7. margin-bottom: $headings-margin-bottom;
  8. font-family: $headings-font-family;
  9. font-weight: $headings-font-weight;
  10. line-height: $headings-line-height;
  11. color: $headings-color;
  12. }
  13. h1, .h1 { @include font-size($h1-font-size); }
  14. h2, .h2 { @include font-size($h2-font-size); }
  15. h3, .h3 { @include font-size($h3-font-size); }
  16. h4, .h4 { @include font-size($h4-font-size); }
  17. h5, .h5 { @include font-size($h5-font-size); }
  18. h6, .h6 { @include font-size($h6-font-size); }
  19. .lead {
  20. @include font-size($lead-font-size);
  21. font-weight: $lead-font-weight;
  22. }
  23. // Type display classes
  24. .display-1 {
  25. @include font-size($display1-size);
  26. font-weight: $display1-weight;
  27. line-height: $display-line-height;
  28. }
  29. .display-2 {
  30. @include font-size($display2-size);
  31. font-weight: $display2-weight;
  32. line-height: $display-line-height;
  33. }
  34. .display-3 {
  35. @include font-size($display3-size);
  36. font-weight: $display3-weight;
  37. line-height: $display-line-height;
  38. }
  39. .display-4 {
  40. @include font-size($display4-size);
  41. font-weight: $display4-weight;
  42. line-height: $display-line-height;
  43. }
  44. //
  45. // Horizontal rules
  46. //
  47. hr {
  48. margin-top: $hr-margin-y;
  49. margin-bottom: $hr-margin-y;
  50. border: 0;
  51. border-top: $hr-border-width solid $hr-border-color;
  52. }
  53. //
  54. // Emphasis
  55. //
  56. small,
  57. .small {
  58. @include font-size($small-font-size);
  59. font-weight: $font-weight-normal;
  60. }
  61. mark,
  62. .mark {
  63. padding: $mark-padding;
  64. background-color: $mark-bg;
  65. }
  66. //
  67. // Lists
  68. //
  69. .list-unstyled {
  70. @include list-unstyled();
  71. }
  72. // Inline turns list items into inline-block
  73. .list-inline {
  74. @include list-unstyled();
  75. }
  76. .list-inline-item {
  77. display: inline-block;
  78. &:not(:last-child) {
  79. margin-right: $list-inline-padding;
  80. }
  81. }
  82. //
  83. // Misc
  84. //
  85. // Builds on `abbr`
  86. .initialism {
  87. @include font-size(90%);
  88. text-transform: uppercase;
  89. }
  90. // Blockquotes
  91. .blockquote {
  92. margin-bottom: $spacer;
  93. @include font-size($blockquote-font-size);
  94. }
  95. .blockquote-footer {
  96. display: block;
  97. @include font-size($blockquote-small-font-size);
  98. color: $blockquote-small-color;
  99. &::before {
  100. content: "\2014\00A0"; // em dash, nbsp
  101. }
  102. }