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.

style.styl 3.6KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209
  1. @import "_variables"
  2. @import "_colors/" + $colors
  3. @import "_util"
  4. @import "_mixins"
  5. @import "_extend"
  6. @import "_fonts"
  7. global-reset()
  8. *, *:before, *:after
  9. box-sizing: border-box
  10. html
  11. margin: 0
  12. padding: 0
  13. height: 100%
  14. border-top: 2px solid $color-text
  15. -webkit-text-size-adjust: 100%
  16. -ms-text-size-adjust: 100%
  17. body
  18. margin: 0
  19. height: 100%
  20. background-color: $color-background
  21. color: $color-text
  22. font-display: swap // @stylint ignore
  23. font-weight: 400
  24. font-size: $font-size
  25. font-family: $font-family-body
  26. line-height: $line-height
  27. text-rendering: geometricPrecision
  28. flex: 1
  29. antialias()
  30. @extend $base-style
  31. .content
  32. position: relative
  33. display: flex
  34. flex-direction: column
  35. min-height: 100%
  36. overflow-wrap: break-word
  37. p
  38. hyphens(auto)
  39. code
  40. hyphens(manual)
  41. a
  42. color: $color-text
  43. text-decoration: none
  44. underline(5px, $color-text)
  45. &:hover
  46. background-image: linear-gradient(transparent, transparent 4px, $color-link 4px, $color-link)
  47. a.icon
  48. background: none
  49. &:hover
  50. color: $color-link
  51. h1 a, .h1 a, h2 a, h3 a, h4 a, h5 a, h6 a
  52. background: none
  53. color: inherit
  54. text-decoration: none
  55. h1 a:hover, .h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover
  56. underline(6px, $color-link)
  57. h6
  58. a
  59. background: none
  60. color: inherit
  61. text-decoration: none
  62. h6
  63. a:hover
  64. underline(6px, $color-link)
  65. @media (min-width: 540px)
  66. .image-wrap
  67. flex-direction: row
  68. margin-bottom: 2rem
  69. .image-block
  70. flex: 1 0 35%
  71. margin-right: 2rem
  72. p
  73. flex: 1 0 65%
  74. .max-width
  75. max-width: $page-width
  76. @media (max-width: 480px)
  77. // smaller margins at smaller screen widths
  78. .px3
  79. padding-right: 1rem
  80. padding-left: 1rem
  81. .my4
  82. margin-top: 2rem
  83. margin-bottom: 2rem
  84. @media (min-width: 480px)
  85. p
  86. text-align: justify
  87. @import "_partial/header"
  88. @import "_partial/post/actions_desktop"
  89. @import "_partial/post/actions_mobile"
  90. @import "_partial/index"
  91. @import "_partial/article"
  92. @import "_partial/archive"
  93. @import "_partial/comments"
  94. @import "_partial/footer"
  95. @import "_partial/pagination"
  96. @import "_partial/search"
  97. @import "_partial/tags"
  98. @import "_partial/tooltip"
  99. @import "_partial/categories"
  100. // Code
  101. @import "_highlight/" + $highlight
  102. pre
  103. overflow-x: auto
  104. padding: 10px 15px
  105. padding-bottom: 0
  106. border: 1px dotted $color-border
  107. border-radius: 4px
  108. font-size: 13px
  109. font-family: $font-family-mono
  110. line-height: 22px
  111. -webkit-border-radius: 4px
  112. code
  113. display: block
  114. padding: 0
  115. border: none
  116. code
  117. padding: 0 5px
  118. border: 1px dotted $color-border
  119. border-radius: 2px
  120. -webkit-border-radius: 2px
  121. .highlight
  122. overflow-x: auto
  123. margin: 1rem 0
  124. padding: 10px 15px
  125. border-radius: 4px
  126. background: $color-background-code
  127. font-family: $font-family-mono
  128. // color: $color-accent-3
  129. -webkit-border-radius: 4px
  130. figcaption
  131. margin: -5px 0 5px
  132. color: $color-meta-code
  133. font-size: .9em
  134. zoom: 1
  135. a
  136. float: right
  137. color: $color-meta-code
  138. font-style: italic
  139. font-size: .8em
  140. underline(10px, $color-link)
  141. a:hover
  142. color: lighten($color-meta-code, 20%)
  143. &:before, content: ""
  144. display: table
  145. &:after
  146. clear: both
  147. &:hover
  148. .btn-copy
  149. opacity: 1
  150. .btn-copy
  151. font-size: 1.2rem
  152. position: absolute
  153. right: 20px
  154. opacity: 0
  155. transition: opacity 0.2s ease-in
  156. &:hover
  157. color: $color-accent-1
  158. pre
  159. padding: 0
  160. border: none
  161. background: none
  162. table
  163. width: auto
  164. td.gutter
  165. text-align: right
  166. .line
  167. height: 22px