Nouvelle mouture du site web de Dylan
Du kannst nicht mehr als 25 Themen auswählen Themen müssen entweder mit einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.
 
 
 
 
 
 

260 Zeilen
3.7 KiB

  1. /**
  2. * Reset some basic elements
  3. */
  4. body, h1, h2, h3, h4, h5, h6,
  5. p, blockquote, pre, hr,
  6. dl, dd, ol, ul, figure {
  7. margin: 0;
  8. padding: 0;
  9. }
  10. /**
  11. * Basic styling
  12. */
  13. body {
  14. font: $base-font-weight #{$base-font-size}/#{$base-line-height} $base-font-family;
  15. color: $text-color;
  16. background-color: $background-color;
  17. -webkit-text-size-adjust: 100%;
  18. -webkit-font-feature-settings: "kern" 1;
  19. -moz-font-feature-settings: "kern" 1;
  20. -o-font-feature-settings: "kern" 1;
  21. font-feature-settings: "kern" 1;
  22. font-kerning: normal;
  23. display: flex;
  24. min-height: 100vh;
  25. flex-direction: column;
  26. }
  27. /**
  28. * Set `margin-bottom` to maintain vertical rhythm
  29. */
  30. h1, h2, h3, h4, h5, h6,
  31. p, blockquote, pre,
  32. ul, ol, dl, figure,
  33. %vertical-rhythm {
  34. margin-bottom: $spacing-unit / 2;
  35. }
  36. /**
  37. * `main` element
  38. */
  39. main {
  40. display: block; /* Default value of `display` of `main` element is 'inline' in IE 11. */
  41. }
  42. /**
  43. * Images
  44. */
  45. img {
  46. max-width: 100%;
  47. vertical-align: middle;
  48. }
  49. /**
  50. * Figures
  51. */
  52. figure > img {
  53. display: block;
  54. }
  55. figcaption {
  56. font-size: $small-font-size;
  57. }
  58. /**
  59. * Lists
  60. */
  61. ul, ol {
  62. margin-left: $spacing-unit;
  63. }
  64. li {
  65. > ul,
  66. > ol {
  67. margin-bottom: 0;
  68. }
  69. }
  70. /**
  71. * Headings
  72. */
  73. h1, h2, h3, h4, h5, h6 {
  74. font-weight: $base-font-weight;
  75. }
  76. /**
  77. * Links
  78. */
  79. a {
  80. color: $brand-color;
  81. text-decoration: none;
  82. &:visited {
  83. color: darken($brand-color, 15%);
  84. }
  85. &:hover {
  86. color: $text-color;
  87. text-decoration: underline;
  88. }
  89. .social-media-list &:hover {
  90. text-decoration: none;
  91. .username {
  92. text-decoration: underline;
  93. }
  94. }
  95. }
  96. /**
  97. * Blockquotes
  98. */
  99. blockquote {
  100. color: $grey-color;
  101. border-left: 4px solid $grey-color-light;
  102. padding-left: $spacing-unit / 2;
  103. @include relative-font-size(1.125);
  104. letter-spacing: -1px;
  105. font-style: italic;
  106. > :last-child {
  107. margin-bottom: 0;
  108. }
  109. }
  110. /**
  111. * Code formatting
  112. */
  113. pre,
  114. code {
  115. @include relative-font-size(0.9375);
  116. border: 1px solid $grey-color-light;
  117. border-radius: 3px;
  118. background-color: #eef;
  119. }
  120. code {
  121. padding: 1px 5px;
  122. }
  123. pre {
  124. padding: 8px 12px;
  125. overflow-x: auto;
  126. > code {
  127. border: 0;
  128. padding-right: 0;
  129. padding-left: 0;
  130. }
  131. }
  132. /**
  133. * Wrapper
  134. */
  135. .wrapper {
  136. max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit} * 2));
  137. max-width: calc(#{$content-width} - (#{$spacing-unit} * 2));
  138. margin-right: auto;
  139. margin-left: auto;
  140. padding-right: $spacing-unit;
  141. padding-left: $spacing-unit;
  142. @extend %clearfix;
  143. @include media-query($on-laptop) {
  144. max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit}));
  145. max-width: calc(#{$content-width} - (#{$spacing-unit}));
  146. padding-right: $spacing-unit / 2;
  147. padding-left: $spacing-unit / 2;
  148. }
  149. }
  150. /**
  151. * Clearfix
  152. */
  153. %clearfix:after {
  154. content: "";
  155. display: table;
  156. clear: both;
  157. }
  158. /**
  159. * Icons
  160. */
  161. .svg-icon {
  162. width: 16px;
  163. height: 16px;
  164. display: inline-block;
  165. fill: #{$grey-color};
  166. padding-right: 5px;
  167. vertical-align: text-top;
  168. }
  169. .social-media-list {
  170. li + li {
  171. padding-top: 5px;
  172. }
  173. }
  174. /**
  175. * Tables
  176. */
  177. table {
  178. margin-bottom: $spacing-unit;
  179. width: 100%;
  180. text-align: $table-text-align;
  181. color: lighten($text-color, 18%);
  182. border-collapse: collapse;
  183. border: 1px solid $grey-color-light;
  184. tr {
  185. &:nth-child(even) {
  186. background-color: lighten($grey-color-light, 6%);
  187. }
  188. }
  189. th, td {
  190. padding: ($spacing-unit / 3) ($spacing-unit / 2);
  191. }
  192. th {
  193. background-color: lighten($grey-color-light, 3%);
  194. border: 1px solid darken($grey-color-light, 4%);
  195. border-bottom-color: darken($grey-color-light, 12%);
  196. }
  197. td {
  198. border: 1px solid $grey-color-light;
  199. }
  200. }
  201. .home-tags{
  202. font-size: 14px;
  203. color: $grey-color;
  204. }