repos / starfx

main.css

  1@media (prefers-color-scheme: light) {
  2  .logo { stroke: #414558; fill: none; }
  3}
  4@media (prefers-color-scheme: dark) {
  5  .logo { stroke: #f2f2f2; fill: none; }
  6}
  7
  8.logo-sm svg {
  9  width: 10px;
 10  height: 10px;
 11}
 12
 13.logo-md svg {
 14  width: 25px;
 15  height: 25px;
 16}
 17
 18.logo-lg svg {
 19  width: 50px;
 20  height: 50px;
 21}
 22
 23.divider {
 24  width: 1px;
 25  height: auto;
 26  background-color: var(--grey-light);
 27}
 28
 29.visited {
 30  color: var(--visited);
 31}
 32
 33.sitemap {
 34  width: 250px;
 35  flex: 0 0 250px;
 36  margin: 0;
 37  overflow-y: scroll;
 38  padding-bottom: 2rem !important;
 39  height: calc(100vh - 3px - (3 * var(--line-height)));
 40}
 41
 42.post {
 43  max-width: 650px;
 44  height: calc(100vh - 3px - (3 * var(--line-height)));
 45  overflow-y: auto;
 46  padding-right: 20px;
 47}
 48
 49.post-container {
 50  max-width: 60rem;
 51}
 52
 53.container-xs {
 54  max-width: 20em;
 55  width: 100%;
 56}
 57
 58.hero {
 59  padding: calc(var(--line-height) * 3) 0 0 0;
 60}
 61
 62.home-features pre {
 63  margin: 0;
 64}
 65
 66.features {
 67  display: grid;
 68  grid-template-columns: repeat(auto-fit, minmax(225px, 1fr));
 69  gap: calc(var(--line-height) - 4px);
 70}
 71
 72.features h3 {
 73  border: none;
 74}
 75
 76.mk-nav {
 77  padding: var(--line-height);
 78}
 79
 80.pager {
 81  min-width: 150px;
 82}
 83
 84.sitemap-grid {
 85  display: grid;
 86  grid-template-columns: repeat(2, 1fr);
 87  gap: 1rem;
 88}
 89
 90.sidebar-list {
 91  padding: 0 0 0 var(--line-height);
 92}
 93
 94.post-group {
 95  display: flex;
 96  gap: 1rem;
 97  flex-direction: row-reverse;
 98}
 99
100@media only screen and (max-width: 800px) {
101  body {
102    padding: 0 0.75rem;
103  }
104
105  header {
106    margin: 0;
107  }
108
109  .post-group {
110    display: block;
111  }
112
113  .post {
114    height: 100%;
115    overflow-y: unset;
116    padding-right: 0;
117  }
118
119  .sitemap {
120    column-count: 2;
121    width: 100%;
122    margin-bottom: calc(2 * var(--line-height));
123  }
124
125  .sitemap-grid {
126    grid-template-columns: repeat(1, 1fr);
127  }
128
129  .mk-nav {
130    padding: var(--line-height) 0;
131  }
132
133  .divider {
134    display: none;
135  }
136}