Тихвин глазами неравнодушного жителя

Сентябрь в Тихвине — 2008, часть 1

Первая часть фотографий с фестиваля. Как оказалось, я их практически не показывал раньше. Некоторые без подписей. Надеюсь, до тех пор, пока кто-нибудь не придет в комментарии и не назовет имена-фамилии музыкантов.

Легендарный, не побоюсь этого слова, человек, знаток джаза, ведущий фестиваля Владимир Борисович Фейертаг
Фотокорреспондент «Трудовой славы» Виктор Белый

Сергей Манукян в Тихвине. 2007 год

Еще фото с фестиваля джаза «Сентябрь в Тихвине». Это уже 2007 год, когда приезжал Сергей Манукян. Было круто!

Как будто в стиле Уорхола

А это просто фото. С концерта и джема.

Винцкевичи. 15 лет назад

Попросили снова добыть из архивов фотографии с фестиваля джаза «Сентябрь в Тихвине» из далекого 2003 года.

Сетки на CSS

Примерный перевод статьи “Things I’ve learned about CSS grid layout” by Jennifer Wjertzoch

Используя CSS Grid вы можете создавать интересную и сложную верстку страницы. Это инструмент интуитивно понятный и его хорошо поддерживает основные браузеры. В этой статье я расскажу вам, как верстать страницу с CSS Grid.

Вывод простейшей сетки

Здесь вы видите контейнер (родителя) с шестью блоками (детьми) внутри:

Пример 1

See the Pen grid-1 by Aleksei Litvinov (@lexizli) on CodePen.



Пока ничего интересного, просто шесть div-ов, размещенных один над другим.

Определение строк и столбцов

Чтобы сделать дизайн двухмерным, нам нужно определить строки и столбцы. Давайте создадим две строки и три столбца. Для этого мы используем свойства grid-template-row и grid-template-column:

Пример 2

See the Pen grid-2 by Aleksei Litvinov (@lexizli) on CodePen.

Добавление интервалов между строками и столбцами

Для добавления интервалов между колонками можно использовать grid-column-gap, между строками grid-row-gap и вы можете использовать свойство grid-gap, чтоб добавить интервалы везде. Хорошо, что добавление интервалов происходит только между блоками, а за пределами контейнера их нет:

Пример 3

See the Pen grid-3 by Aleksei Litvinov (@lexizli) on CodePen.



Если вы откроете вашу страницу в Firefox Developer Edition и в инструментах разработчика включите подсветку сетки, то увидите примерно такую картину:

Размеры блоков и заполнение сетки

Для явного указания количества и размеров столбцов и строк можно использовать свойства:

grid-template-columns
grid-template-rows

существует и более компактный способ:

grid-template: 100px 100px / 150px 150px 150px;

или можно указать одинаковую высоту всех блоков:

grid-auto-rows: 50px;

Вот что из этого получится:

Пример 4

See the Pen grid-4 by Aleksei Litvinov (@lexizli) on CodePen.



Сетка может расти только в одном направлении, увеличивая число столбцов или строк. Свойства, которые определяют направление автоматического роста сетки:

grid-auto-flow: row; /* так будут добавляться новые строки */
grid-auto-flow: column; /* так — новые столбцы */
grid-auto-flow: dense; /* а это свойство для плотной упаковки */

Свойство dense укладывает блоки в сетке так, чтоб не оставалось пустых дырок, посмотрите, как расположены пронумерованные блоки:

Пример 5

See the Pen grid-5 by Aleksei Litvinov (@lexizli) on CodePen.

Функция Repeat()

Чтоб избежать многократного описания одинаковых по ширине или высоте блоков, заполняющих сетку, можно использовать функцию repeat(), первый аргумент которой определяет количество повторений, второй — размер блока (смотрите предыдущий пример):

grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(2, 100px);

Дробная единица fr

Если вам нужно разделить контейнер на одинаковые части, заполняющие контейнер полностью, используйте единицу fr, так вам не нужно будет рассчитывать размеры блока в пикселах или процентах. Так можно разделить контейнер на десять одинаковых столбцов:

grid-template-columns: repeat(10, 1fr);

Можно использовать fr с любыми другими единицами:

grid-template-columns: 60% 1fr 2fr;

Определение индивидуальных размеров блока

Можно определять размеры столбцов и строк внутри контейнера, но можно установить и отдельные размеры для конкретного блока (или для конкретных повторяющихся блоков). Например, каждый шестой блок будет включать в себя шесть столбцов, а каждый девятый — две строки (см. пример 5):

.item:nth-child(6n) {
      grid-column: span 6;
    }
.item:nth-child(9n) {
      grid-row: span 2;
    }

Есть альтернативный способ размещения блока в сетке через свойства grid-row-start, grid-row-end, grid-column-start и grid-column-end, например, так:

.item3 {
  background:#98386d;
  grid-column-start: 2;
  grid-column-end: 5;
  grid-row-start: 2;
  grid-row-end: 7;
}
.item4 {
  background:#f8386d;
  grid-column-start: 6;
  grid-column-end: 10;
  grid-row-start: 2;
  grid-row-end: 3;
}
.item5 {
  background:#383849;
  grid-column-start: 6;
  grid-column-end: 10;
  grid-row-start: 4;
  grid-row-end: 7;
}

Пример 6

See the Pen grid-6 by Aleksei Litvinov (@lexizli) on CodePen.

Функция minmax

Позволяет установить минимальный и максимальный размер блока, превращая дизайн в адаптивный без медиазапросов (попробуйте изменить ширину окна браузера):

Пример 7

See the Pen grid-7 by Aleksei Litvinov (@lexizli) on CodePen.

auto-fill vs. auto-fit

Разницу этих свойств лучше всего проиллюстрирует сравнение:

Пример 8

See the Pen grid-8 by Aleksei Litvinov (@lexizli) on CodePen.


auto-fill заполняет строку блоками заданной ширины,
auto-fit  растягивает блоки так, чтоб они заняли все доступное пространство.

Выравнивание блоков по ширине контейнера

Для этого используйте свойство justify-content со значениями:

start — выравнивает сетку по левой стороне контейнера (по верху для align-content);
end — выравнивает сетку по правой стороне контейнера  (по низу для align-content);
center — выравнивает сетку по центру контейнера;
stretch — масштабирует элементы чтобы сетка могла заполнить всю ширину (высоту  для align-content) контейнера;
space-around — одинаковое пространство между элементами, и полуразмерные отступы по краям;
space-between — одинаковое пространство между элементами, без отступов по краям;
space-evenly — одинаковое пространство между элементами, и полноразмерные отступы по краям;

Пример 9

See the Pen grid-9 by Aleksei Litvinov (@lexizli) on CodePen.

Выравнивание блоков по высоте контейнера

Для этого подходит свойство align-content, значения аналогичны предыдущему свойству:

Пример 10

See the Pen grid-10 by Aleksei Litvinov (@lexizli) on CodePen.



Небольшой бонус: бесплатный видеокурс по CSS GRID от Wes Bos

Почему они врут? Или профессия обязывает

Я уже писал тут про пожар в гостинице Подворье, что случился 9 июля, в аккурат на Тихвинскую. И фотографии показывал.

А тут мне сказали, что портал 47news тоже об этом происшествии поведал.

Как сообщили корреспонденту 47news в пресс-службе ГУ МЧС России по Ленобласти, в 03:53 утра 9 июля в ЦУКС поступило сообщение о пожаре на Новгородской улице в городе Тихвине. На место происшествия выехали дежурные смены 61 и 63 пожарно-спасательных частей Ленинградской области — 12 человек на 4-х пожарных машинах. Как выяснилось, горело здание гостиницы на площади 70 кв. м. В 04:49 пожар был ликвидирован.

Это меня не удивило, новостной портал должен рассказывать новости.

А удивило меня вот что:

В 04:49 пожар был ликвидирован.

И действительно, на сайте МЧС именно так и написано: в 04:49 пожар был ликвидирован

Позвольте, в какие 04:49? Давайте посмотрим на время съемки пожара:

И стримы в Facebook сделаны тоже после 6 часов утра

Или когда что-то горит, это и есть «пожар ликвидирован»? И люди не должны верить своим глазам и ощущениям, а только официальному вранью?

Пожар в гостинице «Подворье» 9 июля 2019

Рано утром 9 июля в Тихвине, на улице Новгородской, 36, случился пожар в гостинице «Подворье».
Те, кто живёт в Тихвине, могут увидеть в этом некий знак, но, скорее всего, ничего сверхъестественного не произошло. Жаль, конечно, буквально в прошлом году гостиницу ремонтировали, сделали новую облицовку: вместо унылого и позорного пластикового сайдинга здание красиво облицевали деревом. И тут такая неприятность...

Про борщевик и депутатов

Для начала цитата из новости на официальном сайте Тихвина:

депутаты утвердили изменения в «Правилах благоустройства территории Тихвинского городского поселения», которые связаны с изменениями, произошедшими в областном законодательстве. В частности, обязанность собственников и арендаторов земли по скосу травы теперь распространяется не только на городские территории, но и на территории сельских населенных пунктов. Отдельно оговаривается обязанность по скашиванию борщевика Сосновского. Причем штрафы за разрастание борщевика весьма высокие. Если за несвоевременный скос травы грозит штраф до 2 тысяч рублей, то за нескошенный борщевик — до 5 тысяч рублей.

Теперь несколько вопросов:

  1. Риторический. Кто-то правда говорит «скос травы»?
  1. О применении правил благоустройства. Что, правда, кто-то будет ходить по городу, проверять, где растёт борщевик?

Ну так вот он растёт, на углу улиц Новгородской и Московской. Кого тут будут штрафовать? Улица, насколько я понимаю, пока ни в чьей частной собственности не находится. Значит ли это, что нужно оштрафовать «Зеленый город», который отвечает за городское благоустройство и получает за это деньги из бюджета?

А вот борщевик Сосновского растет на участке, где уже несколько лет стоит фундамент и больше ничего никто не делает. Это угол Новгородской и Коммунаров. Кого тут будут штрафовать?

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

И еще один вопрос, напоследок, во дворе дома №2 на улице Московской лежат два противоавтомобильных шара, которые были установлены перед РДК (Районного дома культуры). Кто их сюда «прибрал», интересно? И зачем?

Нарисовали разделительную

В Тихвине на улице Связи недавно разделительную нарисовали.

Почти посредине:

Для чего на этой улице нужна разделительная?

Движение здесь в самое напряженное время примерно такое: за час проезжую часть пересекают примерно 50 человек и вдвое меньше автомобилей проезжает за то же время по улице Связи. Часть улицы превращена в стоянку, зимой и летом у домов 7 и 9 стоят автомобили, сужая проезжую часть летом до полутора, а зимой фактически до одной полосы. Так что разогнаться на 750 метрах особенно никто не пытается.

Ну и для чего потрачены деньги, да еще так криво?

Или скоро приедет автоинспекция и начнет отлавливать водителей, которые пересекают сплошную?

Ранее Ctrl + ↓