Я хочу изменить Tufte CSS таблицу стилей в макет страницы с двумя столбцами, где левый столбец содержит статическую статью (содержимое в <article> теги) в стандартной раскладке Tufte, а правый столбец содержит div с чем-то совершенно другим (например, список карточек). Визуально я хочу взять статью из этого примера , уменьшить ее ширину примерно на 30% -40% (и, что важно, эффект на статью будет таким же, как если бы вы изменяли размер браузера перетаскивая правый край на ту же сумму), и вставьте другой столбец содержимого в это вновь созданное пространство справа. Если ширина экрана слишком мала (по существу, после того, как sidenotes и сноски сливаются в основной корпус), тогда я пропущу подачу и сделаю ее доступной через значок.
По этим публикациям , в настоящее время я использую flexbox для определения двухколоночного макета, но этот подход не очень подходит для таблицы стилей tufte.css. Независимо от того, насколько широким я делаю правый столбец, я не могу уменьшить отступ слева от левого столбца. Кроме того, создание родительского контейнера во флексбоксе, по-видимому, отключает некоторые важные функции представления и переноса текста при уменьшении экрана.
Я собрал эту скрипку с файлом tufte.css с базовой модификацией, закомментированной вверху, и HTML-кодом из примера Tufte CSS, приведенным выше, но модифицированным, так что есть родительский div и два дети, один для статьи и один для «корма». Любые мысли будут с благодарностью.