post-collapse.styl 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121
  1. .posts-collapse {
  2. margin-left: $posts-collapse-margin;
  3. position: relative;
  4. +mobile() {
  5. margin-left: $posts-collapse-margin-mobile;
  6. margin-right: $posts-collapse-margin-mobile;
  7. }
  8. .collection-title {
  9. font-size: $font-size-large;
  10. position: relative;
  11. &::before {
  12. background: $grey-dark;
  13. border: 1px solid white;
  14. border-radius: 50%;
  15. content: ' ';
  16. height: 10px;
  17. left: 0;
  18. margin-left: -6px;
  19. margin-top: -4px;
  20. position: absolute;
  21. top: 50%;
  22. width: 10px;
  23. }
  24. }
  25. .collection-year {
  26. font-size: $font-size-largest;
  27. font-weight: bold;
  28. margin: 60px 0;
  29. position: relative;
  30. &::before {
  31. background: $grey;
  32. border-radius: 50%;
  33. content: ' ';
  34. height: 8px;
  35. left: 0;
  36. margin-left: -4px;
  37. margin-top: -4px;
  38. position: absolute;
  39. top: 50%;
  40. width: 8px;
  41. }
  42. }
  43. .collection-header {
  44. display: block;
  45. margin: 0 0 0 20px;
  46. small {
  47. color: $grey;
  48. margin-left: 5px;
  49. }
  50. }
  51. .post-header {
  52. border-bottom: 1px dashed $grey-light;
  53. margin: 30px 0;
  54. padding-left: 15px;
  55. position: relative;
  56. transition-property: border;
  57. the-transition();
  58. &::before {
  59. background: $grey;
  60. border: 1px solid white;
  61. border-radius: 50%;
  62. content: ' ';
  63. height: 6px;
  64. left: 0;
  65. margin-left: -4px;
  66. position: absolute;
  67. top: $font-size-smallest;
  68. transition-property: background;
  69. width: 6px;
  70. the-transition();
  71. }
  72. &:hover {
  73. border-bottom-color: $grey-dim;
  74. &::before {
  75. background: $black-deep;
  76. }
  77. }
  78. }
  79. .post-meta {
  80. display: inline;
  81. font-size: $font-size-smallest;
  82. margin-right: 10px;
  83. }
  84. .post-title {
  85. display: inline;
  86. a, span.exturl {
  87. border-bottom: none;
  88. color: var(--link-color);
  89. }
  90. .fa-external-link-alt {
  91. font-size: $font-size-small;
  92. margin-left: 5px;
  93. }
  94. }
  95. &::before {
  96. background: $whitesmoke;
  97. content: ' ';
  98. height: 100%;
  99. left: 0;
  100. margin-left: -2px;
  101. position: absolute;
  102. top: 1.25em;
  103. width: 4px;
  104. }
  105. }