Sources du blog ALLELLA
Ви не можете вибрати більше 25 тем Теми мають розпочинатися з літери або цифри, можуть містити дефіси (-) і не повинні перевищувати 35 символів.
 
 
 
 
 

179 рядки
3.0 KiB

  1. ---
  2. ---
  3. @import "{{ site.theme }}";
  4. $content-width:800px;
  5. $link-color: #0082c9;
  6. $bg-color: white;
  7. $txt-color: #333;
  8. $border-color: #e8e8e8;
  9. $header-height: 20vh;
  10. .fullscreen{
  11. width: 100vw;
  12. background-color: black;
  13. min-height: calc(100vh - #{$header-height});
  14. margin-top: $header-height;
  15. display: flex;
  16. justify-content: center;
  17. align-item:center;
  18. }
  19. header.site-header{
  20. position: fixed;
  21. width: 100vw;
  22. border-top: none;
  23. min-height: $header-height;
  24. display: flex;
  25. align-items: center;
  26. background-color: $bg-color;
  27. border-bottom: 2px solid $txt-color;
  28. a, a:visited {
  29. color : $txt-color;
  30. }
  31. .site-title{
  32. @include relative-font-size(1.2);
  33. float:none;
  34. // visibility: hidden;
  35. // background-image: url('../assets/images/logo.svg');
  36. }
  37. // .site-logo{
  38. // background: url('../assets/images/logo.svg') no-repeat;
  39. // background-size: contain;
  40. // }
  41. .wrapper {
  42. width: $content-width;
  43. display: flex;
  44. justify-content: space-between;
  45. }
  46. .site-nav .page-link{
  47. //color: $bg-color;
  48. //background-color: $txt-color;
  49. padding: 5px;
  50. font-variant: small-caps;
  51. @include relative-font-size(1);
  52. &:hover{
  53. text-decoration: none;
  54. background-color: #2a7ae2;
  55. }
  56. }
  57. }
  58. body{
  59. @include relative-font-size(1.4);
  60. h3{
  61. font-weight: bold;
  62. }
  63. .blog {
  64. .post-list li {
  65. p{
  66. margin-bottom: 10px
  67. }
  68. }
  69. h3{
  70. margin-bottom: 5px;
  71. border-bottom: 1px solid $border-color;
  72. font-weight: normal;
  73. }
  74. h3 a, h3 a:visited {
  75. // color: $bg-color;
  76. // background-color: $txt-color;
  77. width: 50%;
  78. // padding:5px;
  79. }
  80. background-color: $bg-color;
  81. color: $txt-color;
  82. .post-meta-tags-cats {
  83. margin-top:5px;
  84. @include relative-font-size(0.8);
  85. .post-meta::after{
  86. color: $txt-color;
  87. content: " / ";
  88. }
  89. .post-meta-category:not(:last-child)::after{
  90. content: " · ";
  91. }
  92. }
  93. .read-more{
  94. @include relative-font-size(0.8);
  95. }
  96. }
  97. }
  98. .page-content{
  99. margin-top: $header-height;
  100. }
  101. .home-page-content{
  102. margin-top: 10px;
  103. @include relative-font-size(1.1);
  104. }
  105. .post-list{
  106. @include relative-font-size(1.1);
  107. p{
  108. @include relative-font-size(1);
  109. line-height: 200%;
  110. }
  111. }
  112. .post-content{
  113. @include relative-font-size(1.1);
  114. h2 {
  115. font-weight: 600;
  116. margin-top: 50px;
  117. }
  118. h3{
  119. @include relative-font-size(1.2);
  120. margin-top:40px;
  121. }
  122. }
  123. .wrapper{
  124. max-width: $content-width;
  125. }
  126. .services-list{
  127. list-style-type: none;
  128. display: flex;
  129. flex-wrap: wrap;
  130. li{
  131. display: flex;
  132. flex: 1 0 calc(25% - 12px);
  133. margin: 5px;
  134. border: 1px solid #333;
  135. justify-content: center;
  136. align-items: center;
  137. }
  138. li:after{
  139. content: '';
  140. display: block;
  141. padding-bottom: 100%;
  142. }
  143. }
  144. // .container{
  145. // border: 2px solid black;
  146. // display: flex;
  147. // flex-wrap: wrap;
  148. // }