Домашняя страничка на GitHub: содержимое часть 2

Ранее мы сверстали базовый макет и заголовок страниц тут же непосредственно перейдем к описанию верстки блока фотографии адреса и формы доната.

Итак, как я писал ранее это будет страничка на которой будет фотография и ваши контактные данные.

Фото

Чтобы размещать фотографии на сайте существует специальный тег img, но практика показывает, что этот тег не дает того контроля над изображением, который бы позволял легко манипулировать им. Поэтому на практике чаще используется вставка изображений через css свойство background-image.

В принципе вставлять фоновое изображение можно в любой тег, но я постарался найти тег который бы не увеличивал бы объем разметки.

1

<hr class="avatar" />

По смыслу тег hr означает разрыв тематики статьи. В браузерах по умолчанию он отображается как горизонтальная черта.

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

Семантика (смысл) которых описанный в стандарте не совпадает с тем как их используют. Это часто приводит к тому что информация отображенная таким способом не всегда будет верно интерпретирована теми кто ее читает исходя из разметки, в первую очередь это конечно поисковики. Поэтому прибегая к таким техникам, всегда нужно помнить кто целевая аудитория этой страницы смогут ли они увидеть это содержимое.

Основная полезная и важная информация находится в стилях :

1

.avatar { background-image: url(img/avatar.jpg);

Здесь определяется фоновое изображение для выбранного селектора .

1
2
3

background-size: 300px 334px;
height: 300px; 
width: 300px;

Этот набор стилей позволяет делать именно то, что не позволяет делать тег img. Благодаря свойству background-size мы можем изменять размер, а главное пропорции изображений в моем случае видно, что исходное изображение не квадратное. Его высота больше ширины, но в тоже время видно, что сам блок в который встраивается изображение квадратный.

Если вставлять изображение тегом img то размер тега будет зависеть от размера изображения. Для изображений очень важно сохранять их сходные пропорции иначе они получаются вытянутыми или наоборот сжатыми:

1
2

display: inline-block;
background-position: 50% 50%;

Определяем тут расположение фона относительно самого элемента, в нашем случае это квадрат со стороной 300px. Фотография, благодаря этому правилу будет расположена в центре этого блока.

1

border: 0; margin: 50px 10px;

Эти два правила необходимы для того что бы перезаписать встроенные в браузер правила для отображения тега hr.

1

border-radius: 100%; 

Чтобы сделать из прямоугольного изображения круглое нужно скруглить его края, что и делает правило border-radius.

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

Эти алгоритмы делают это за счет усреднения данных в изображении, из из-за этого выходит так что изображение выглядит размытым и “замыленным” что бы избежать этого эффекта нужно создать специальные большие изображения для экранов высокой плотности. И описать для них специальные стили:

1
2
3
4
5

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
  .avatar {
    background-image: url(img/avatar@2x.jpg); 
  } 
}

В моем случае оригинальное изображение называется img/avatar.jpg а изображение для экранов высокой плотности img/avatar@2x.jpg . Это два идентичных изображения, разница лищ в размере.

Адреса

Далее после изображения идут группы адресов. Адреса из себя представляют следующую структуру:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

<section class="address">
  <address class="address__item">
    <!-- Заголовок 4 уровня название группы -->
    <h4>...</h4>
    <!-- список адресов внутри группы -->
    <ul class="address__list list">
      <li class="list__item">
        <!-- Адрес в группе заголовок и ссылка -->
        <span class="address__title">...</span>
        <a class="address__ancor"></a>
      </li>
    </ul>
  </address>
</section>

У меня получилось 2 группы адресов, первая группа это личные адреса для общения, вторая это адреса для перевода денег. У вас это может быть все что угодно те же песни или книги. В этом случае может быть будет смысл использовать другие названия для классов.

Основная мысль данной структуры в том, что она содержит некие списки с заголовками. По смыслу эта структура очень напоминает тег dl, но мне не хотелось увеличивать количество тегов без повода. Да и практика показывает, что тег dl знаком не многим разработчикам и вызывает больше вопросов чем помогает точнее описать разметку.

Теперь рассмотрим стили этого блока:

1
2
3
4
5
6
7

.address {
  text-align: center;
  display: inline-block; 
} 
.address__list {
  font-size: 16px; 
}

Здесь нет ни каких особенностей, как и было задумано в макете.

1
2
3

.address__title {
  opacity: .7;
}

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

1
2
3
4
5
6
7

.address__ancor {
  font-size: 20px;
  text-decoration: none;
  max-width: 500px;
  word-break: break-all;
  color: #007db5; 
}

Ссылки для адресов тоже имеют важную особенность, которая особенно заметна на мобильных девайсах. В моем случае в одном из блоков адресов для денежных переводов есть адрес ETH кошелька, который представляет собой длинную последовательность символов без пробелов, которая точно не уместится на экране мобильного телефона, так чтобы размер шрифта при этом был читабелен.

Если оставить ссылку в том виде котором, она определена в браузере по умолчанию из за этой ссылки на мобильных устройствах начнет появляться горизонтальная прокрутка, которая может испортить впечатление о моей страничке. Поэтому я принял решение использовать правило word-break: break-all, которое позволяет браузеру переносить строки и с разрывом слов.

1
2
3

.address__ancor:hover {
  text-decoration: underline;
}

Выше для ссылок было установлено правило text-decoration: none, из-за которого браузер перестает подчеркивать ссылки. Далее представлен некий селектор, который отменяет старое правило. Это не обычный селектор из тех что мы рассматривали ранее . Этот селектор срабатывает только в том случае, если на элемент был наведен курсор мыши.

1
2
3
4
5
6
7
8

.address__item {
  font-size: 25px;
  font-style: normal;
  text-align: left;
  vertical-align: top;
  padding: 10px;
  margin: 10px; 
}

Здесь есть две небольшие особенности. Первая это font-style: normal необходима чтобы переписать встроенные в браузер стили, а конкретно тег address по умолчанию делает весь текст внутри себя наклонным.Вторая text-align: left переопределяет поведение своего родителя для которого определено выравнивание по середине. У родителя это выравнивание определено так чтобы блоки с текстом были выровнены по центру. У самого же блока нужно переопределить это поведение потому что текст написанный с лево на право читается проще для европейцев.

1
2
3
4

.address__ancor, .address__title {
   vertical-align: middle; 
   display: inline-block; 
}

1
2
3

.avatar, .address {
  vertical-align: middle; 
}

Ранее можно было заметить, что блок ссылки и заголовок ссылки имеют разный размер шрифта 20px и 16px. Из за этой разницы наблюдается нежелательный эффект неровных линий текста. Набор правил выше позволяет ослабить этот эффект за счет выравнивания этих блоков по высоте по середине. То же самое мы устанавливаем для комбинации блоков фотографии с адресами.

Форма доната

Форма имеет самую простую структуру:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

<section>
  <address class="donation-form">
    <iframe
      title="Yandex payment"
      src="..."
      width="320"
      height="222"
      frameborder="0"
      allowtransparency="true"
      scrolling="no"
    >
    </iframe>
  </address>
</section>

Где код iframe предоставляет внешний сервис Яндекс деньги. Стили только выравнивают саму кнопку по середине

1

.donation-form { text-align: center;}

Изменение файлов

Теперь когда все нужные файлы описаны их нужно опубликовать на github. Процесс создания новых файлов был описан ранее .

Процесс изменения файлов не сильно отличается от создания, разберем его на примере правки index.html, если вам нужно изменить стили то необходимо изменять файл style.css

1. Находим нужный файл в списке и перейдем по ссылке с его названием

2. Нажимаем кнопку изменить файл

3. После этого должна пропасть подсветка кода, и появиться возможность изменять содержимое файла. Для примера я добавлю комментарий.

4. Обязательно нужно описать какое изменение вы вносите в комментарии, второе поле нужно для подробных описаний заполнять его не обязательно, затем сохраняем изменения в ветке master.

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

На платформе ZEN появились комментарии, а это значит вы можете оставлять отзывы и критиковать эту статью чтобы сделать ее лучше. Итого последняя актуальная версия кода доступна у меня на github .

То как выглядит эта страница сейчас вы можете оценить на erdmko.de