Ошибка отображения с Github vs Browsersync

Question

Я создал тестовый сайт, который по сути показывает лондонское метро с интерактивной картой. Вы можете нажимать в разных точках, и информация о них появится. Он использует jQuery, CSS и HTML, и я работал с browsersync, чтобы отслеживать мой прогресс в работе.

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

Ссылка на репозиторий на Git
Сайт, как он-лайн отображается

Есть основной шаг, который я пропускаю? Заранее спасибо! Lloyd

Answer 1

Я думаю, что для таблицы стилей отсутствует часть маршрута.

Файл скриптов имеет URL: https://turnerskizzle.github.io/TFLOne/scripts/scripts.js

Таким образом, URL для CSS должен быть: https://turnerskizzle.github.io/TFLOne/stylesheets/styles.css на данный момент это https://turnerskizzle.github.io/stylesheets/styles.css

Это можно исправить, удалив начальную косую черту из URL-адреса в index.html.

<link rel="stylesheet" type="text/css" href="stylesheets/styles.css">

В качестве его будет сделан путь относительно текущей страницы, которая обслуживается с https://turnerskizzle.github.io/TFLOne/ (который является индексным файлом), а не абсолютный маршрут от домена https://turnerskizzle.github.io. Именно это означает ведущий / в URL.

Answer 2

Проверьте код. Вместо этого:

 <link rel="stylesheet" type="text/css" href="/stylesheets/styles.css">

должно быть

<link rel="stylesheet" type="text/css" href="stylesheets/styles.css">

Как я уже сделал запрос на внесение изменений. Просмотрите это и не стесняйтесь объединить это.