~mjorgensen/jrgnsn.net

c60759a3f1151af3dadd53ccf05ac14aee490b57 — Matthew Jorgensen 9 months ago 15ba725
Modify webring styles

- Make them stack vertically on small screens.
2 files changed, 43 insertions(+), 37 deletions(-)

M _includes/webring_in.html
M css/style.css
M _includes/webring_in.html => _includes/webring_in.html +0 -37
@@ 27,40 27,3 @@ by
href="https://git.sr.ht/~sircmpwn/openring">openring</a>
</p>
</section>
<style>
  .webring .articles {
    display: flex;
  }
  .webring .title {
    margin: 0;
  }
  .webring .article {
    flex: 1 1 0;
    display: flex;
    flex-direction:
    column;
    margin: 0
    0.5rem;
    padding: 0.5rem;
    background:
    #eee;
  }
  .webring .article:first-child {
    margin-left: 0;
  }
  .webring .article:last-child {
    margin-right: 0;
  }
  .webring .summary {
    font-size: 0.8rem;
    flex: 1 1 0;
  }
  .webring .attribution {
    text-align: right;
    font-size: 0.8rem;
    color: #555;
  }
  .webring .date {
    color: black;
  }
</style>

M css/style.css => css/style.css +43 -0
@@ 321,6 321,42 @@ h1 {
  padding-top: 0.5rem;
}

.webring .articles {
  display: flex;
}
.webring .title {
  margin: 0;
}
.webring .article {
  flex: 1 1 0;
  display: flex;
  flex-direction:
  column;
  margin: 0
  0.5rem;
  padding: 0.5rem;
  background:
  #eee;
}
.webring .article:first-child {
  margin-left: 0;
}
.webring .article:last-child {
  margin-right: 0;
}
.webring .summary {
  font-size: 0.8rem;
  flex: 1 1 0;
}
.webring .attribution {
  text-align: right;
  font-size: 0.8rem;
  color: #555;
}
.webring .date {
  color: black;
}

@media (max-width: 768px) {
  .container {
    display:block


@@ 345,6 381,13 @@ h1 {
  .hero-bio {
    margin-bottom: 2rem;
  }
  .webring .articles {
    display: block;
  }
  .webring .article {
    display: block;
    margin: 1rem 0 0 0;
  }
}

@media (min-width: 576px) {