Контейнер, одновременно реагирующий на порт просмотра и гибкий для дочернего содержимого - PullRequest
Новая
       46

Контейнер, одновременно реагирующий на порт просмотра и гибкий для дочернего содержимого

0 голосов
/ 07 января 2020

Я пытаюсь сделать контейнер одновременно чувствительным к порту просмотра и гибким (увеличивать или уменьшать) его внутреннего содержимого.

Я установил максимальную ширину / высоту для круглого контейнера и сделал содержание подходящим. Но вещи распадаются, когда я хочу, чтобы контейнер уменьшался / увеличивался, чтобы соответствовать меньшему / большему переменному содержимому.

Контейнер также должен реагировать на область просмотра.

Я не уверен, как подойти к этому с CSS, JS или даже SVG? Я знаю, что их может быть несколько. 

.messages {
  display: grid;
  grid-column: 1 / 2;
  grid-row: 1 / 2;

  grid-template-columns: 1fr;
  grid-template-rows: max-content;

  justify-content: center;

  max-width: 100%;
  margin: 0 auto;
  padding: 0 0 0 0;
  
  background-color: #1DA1F2;

  list-style: none;

  z-index: 1;

  --twitter-blue: #1DA1F2;
  --twitter-lite-blue: #C9E8F5;
  --twitter-lite-gray: #F5F8FA;
  --twitter-dark-gray: #657786;
  --twitter-black: #161616;
  --twitter-white: #FFFFFF;
}

@media (min-width: 42rem) {
  .messages {
    margin: 0 auto;
    padding: 0 0 0 0;
  }
}

.tweet {
  display: grid;
  grid-template-rows: min-content max-content min-content;
  grid-template-areas: "time" "message" "author";
  align-content: center;
  justify-self: center;

  max-width: 100%;
  padding: 2.5rem;
  margin: 1.125rem 0;

  border-radius: 50%;
  width: 20rem;
  height: 20rem;

  background-color: var(--twitter-lite-gray);

  font-family: "Helvetica Neue";
  font-weight: 600;

  -webkit-tap-highlight-color: transparent;

  z-index: 1;
}

@media (min-width: 42rem) {
  .tweet {
    grid-template-rows: min-content max-content min-content;
    grid-template-areas: "time" "message" "author";
    align-content: center;
      justify-self: center;

    max-width: 100%;

    border-radius: 50%;
    width: 30rem;
    height: 30rem;
  }
}

.tweet:nth-child(odd) {
  margin: 1.125rem 0;
}

.tweet:nth-child(even) {
  margin: 1.125rem 0;
}

.tweet__wrapper {
  display: grid;
  grid-template-rows: min-content max-content min-content;
  grid-template-areas: "time" "message" "author";
  align-content: center;
    justify-self: start;

  margin: 0;
  padding: 0;

  width: 100%;
}


.tweet__time {
  gird-area: "time";
  display: inline-block;
  width: 100%;

  padding: 2% 0;

  font-size: calc(16px + (21 - 16) * ((100vw - 320px) / (2000 - 320)));

  visibility: hidden;
}

@media (min-width: 42rem) {
  .tweet__time {
    color: var(--date-font-color);
  }
}


.tweet__time-text {
  color: var(--twitter-black);
  padding: 0 .425rem 0 0rem;
}

.tweet__message {
  grid-area: message;
  display: inline;

  padding: 0 0 5.5% 0;

  color: var(--twitter-black);

  font-size: calc(18px + (26 - 18) * ((100vw - 320px) / (2000 - 320)));
  font-weight: 500;
  font-style: normal;
}


@media (min-width: 42rem) {
  .tweet__message {

  }
}

.tweet__handle {
  grid-area: author;
  /* justify-self: center; */

  display: flex;
  justify-content: flex-end;

  width: 80%;

  color: var(--twitter-black);

}

.tweet__handle:hover {
  text-decoration: none;
}

@media (min-width: 42rem) {
  .tweet__handle {

  }
}

.tweet__handle-link {
  font-size: calc(16px + (25 - 16) * ((100vw - 320px) / (2000 - 320)));
}


@media (min-width: 42rem) {
  .tweet__handle-link {

  }
}

.tweet__handle-link:hover {

}

.tweet__handle-link-text {
  color: var(--twitter-dark-gray);
}
<section class="messages">
  <section class="tweet">
    <blockquote class="tweet__wrapper">
      <time class="tweet__time">
        <span class="tweet__time-text">01/06/2020 @8:30PM</span>
      </time>
      <a href="#" class="tweet__message">
        <q cite="">@acdlite Jest's simple predictions of how long the test suite will take are so great. I haven't seen that in any other devtool.</q>
      </a>
      <cite class="tweet__handle">
        <a class="tweet__handle-link" href="#">
          <span class="tweet__handle-link-text">– rauchg</span>
        </a>
      </cite>
    </blockquote>
  </section>
  <section class="tweet">
    <blockquote class="tweet__wrapper">
      <time class="tweet__time">
        <span class="tweet__time-text">01/06/2020 @8:27PM</span>
      </time>
      <a href="#" class="tweet__message">
        <q cite="">@SilvestriCodes @JuniorsInTech You mean many current white/asian straight-appearing male engineers would struggle g… </q>
      </a>
      <cite class="tweet__handle">
        <a class="tweet__handle-link" href="#">
          <span class="tweet__handle-link-text">– jensimmons</span>
        </a>
      </cite>
    </blockquote>
  </section>
  <section class="tweet">
    <blockquote class="tweet__wrapper">
      <time class="tweet__time">
        <span class="tweet__time-text">01/06/2020 @8:20PM</span>
      </time>
      <a href="#" class="tweet__message">
        <q cite="">@ThePeraCar ?</q>
      </a>
      <cite class="tweet__handle">
        <a class="tweet__handle-link" href="#">
          <span class="tweet__handle-link-text">– wesbos</span>
        </a>
      </cite>
    </blockquote>
  </section>  
</section>

1 Ответ

0 голосов
/ 10 января 2020

Уточнил мою проблему и нашел ответ на мой оригинальный вопрос. https://www.endocreative.com/flexbox-circle-responsive-elements/

...