вторник, 02 июня 2020
00:42

Осваиваем ярмарку

все записи пользователя в сообществе Котики Инсайда
Ешь, молись, собирай ссылки.
Тред для обмена опытом и идеями (а также кодами) верстальщиков на АО3

1. туториал по всплывашкам и сноскам, на АОЗ (англ)
2. Как добавить ссылку, используя разметку HTML? (англ)
3. Как сделать море (рус)
4. Варианты стандартной верстки подложка/тени/рамки (англ)
5. Макет визитки анона с котиками
6. Пример всплывашки на css (рус)
7. Моря с ограничением (рус)
8. Рабочий пример с левым и правым углами (рус)
9. Теги, разрешенные на АОЗ (англ)
10. css свойства, разрешенные на АОЗ (англ)
11. Минигайд анона с котиками
12. сайты, с которых АОЗ поддерживает вставку медиа
13. Как сделать изображения подходящими для мобильных браузеров (англ)

@темы: Верстка, АО3, Все хорошо

URL
Комментарии
05.03.2020 в 07:05

Гость
Да, аноны, могу наверстать шаблон визитки в ao3 для примера. Одну-две, зависит от сложности. От вас мне нужен макет (пример), потому что интересно сверстать, но лень придумывать макет.
URL
05.03.2020 в 07:29

Гость
Не понимаю ваших страданий о том, что неудобно верстать на ao3. Конечно, неудобно - он для этого не предназначен. Однако гораздо удобнее в плане верстки, чем дайри. Там все-таки обычный html. Можно верстать не на самом сайте и все будет ок.

если один: сверстал на локале в обычной html странице — выложил на ao3
если группа: создал репозиторий на гитлабе или битбакете (они дают бесплатные личный репозитории), верстаешь, выкладываешь.
При необходимости можно задеплоить репозиторий на netlify или zeit, если нужен доступ по паролю вот пример как это сделать на zeit github.com/wzulfikar/now-static-auth-node, но на мой взгляд достаточно прикрыть от роботов
на крайний случай можно расшарить свой localhost ngrok.com/

Создал скин один раз, создал разметку один раз и потом просто вставляешь текст в нужные места. Что-то изменилось в макете, поменял стили в скине и все, не надо переделывать все остальные посты. Мечта.

Можно даже сделать супер-простую штку: копировать нужный блок в буфер обмена сразу минифицированным.

Мне кажется, вы все еще мыслите в рамках дайри. Это другой сайт, другой подход.
URL
05.03.2020 в 07:34

Гость
Однако гораздо удобнее в плане верстки, чем дайри. Там все-таки обычный html. Можно верстать не на самом сайте и все будет ок.

Ты троллишь что ли? :facepalm:
URL
05.03.2020 в 07:43

Гость
Ты троллишь что ли?
нет, я считаю, что для ao3 удобнее верстать, чем для дайри. Развернуть проект на локале, добавить browsersync, стили скина, кое-какие скрипты (например, отключить стили и посмотреть как будет выглядеть). И потом будет все easy-peasy:
1) создал vizitka.html, наверстал себе спокойной с горячей перезагрузкой. Никаких тебе кнопочек сохранить, глюков, внезапных отключений. Скопировал код и выложил на ao3. При необходимости даже можно кнопочку создать, на которую нажал и кода из блока скопировался сам и минифицировался
2) создал drabble.html, можно даже разбить html на template и вставлять только нужные драбблы.

и т.д., и т.п.

А репозиторий на случай, если верстальщика нет, а надо срочно поправить.
URL
05.03.2020 в 07:44

Гость
Идентификатор должен быть один на всю страницу. В лучше случае браузер будет использовать только первый, в худшем полностью проигнорирует.
Даундроп у них для выпадающих меню, так что применяется к тому, что последнее кликнуто.
URL
05.03.2020 в 07:45

Гость
Даундроп у них для выпадающих меню, так что применяется к тому, что последнее кликнуто.
скинь, пожалуйста, ссылку, где у них об этом написано?
URL
05.03.2020 в 07:57

Гость
скинь, пожалуйста, ссылку, где у них об этом написано?
нигде, я просто вчера тыкался по их цсс основному и нашел даундроп :lol: но времени прочекать как его применить получше пока не было.
archiveofourown.org/stylesheets/skins/skin_873_... - вообще полезно посмотреть, что умеет сайт по умолчанию. Заодно и узнать, что он не даст делать надстроенным мозгом

нет, я считаю, что для ao3 удобнее верстать, чем для дайри
вот тут я тебя остановлю. На локале ао3 тебе тоже расставит свои приколы? Я бы и дайри верстал на локале, если бы не знал, что при сохранении поста он подрежет там сям трям (как например бывает с фонами, что если им не прописать фонт-сайз, фон не тянется и прочая чушь). И вот тут тоже на локале сделаешь всё красиво, понесешь на ао3 а оно всё схлопнется в тыкву.

Я не исключаю, что у тебя простой код без заморочек, что ты верстаешь как бог, и вообще гений сыска кода, но с подобными площадками всегда есть случаи, которые нельзя учесть без продакшна, разве что развернуть у себя копию ао3, но у неё разве открытый код?

Меня вообще удивляет, что я копирую код анонов, и у меня он разворачивается в непонятно что совершенно по другим правилам, нежели описали аноны, что у них блин происходит....
URL
05.03.2020 в 07:59

Гость
Дропдаун кстати придется копировать себе, потому что этот привязан к айдишнику (надо взять на заметку не смотреть цсс с мобла да :facepalm: )
URL
05.03.2020 в 08:02

Гость
но у неё разве открытый код?

У них в подвале есть ссылка на репозиторий github.com/otwcode/otwarchive
URL
05.03.2020 в 08:04

Гость
нет, я считаю, что для ao3 удобнее верстать, чем для дайри.

:susp:
Ну утяни в аоз вот этот элементарный код, например:


Хоть в цссы тяни, хоть в чёрта лысого.
а он всего-то делает...
URL
05.03.2020 в 08:05

Гость
Дропдаун кстати придется копировать себе, потому что этот привязан к айдишнику (надо взять на заметку не смотреть цсс с мобла да )
чот мне кажется, что санитайзер порежет data-*
URL
05.03.2020 в 08:06

Гость
Заодно желающие могут попробовать переписать код в 08:04 под спаны :nail:
URL
05.03.2020 в 08:11

Гость
Ну утяни в аоз вот этот элементарный код, например:
а ты пробовал читать, что он тебе пишет? justify-content пока не поддерживается. Используй margin-left: auto, или margin-right: auto для внутреннего div.
URL
05.03.2020 в 08:18

Гость
а ты пробовал читать, что он тебе пишет? justify-content пока не поддерживается.

Так о том и речь, что куда ни ткнись - 9/10 не поддерживается. О какой верстке на стороне вообще может идти речь? Это в дайри можно было обойтись примитивной копипастой, с аозом верстка превращается в поиск единственного пути по кочкам через топи.
URL
05.03.2020 в 08:19

Гость
Вот тебе рабочий пример с колонками. Отдельно хочу заметить, что инлайновый style вырезается из кода.




URL
05.03.2020 в 08:27

Гость
Это в дайри можно было обойтись примитивной копипастой, с аозом верстка превращается в поиск единственного пути по кочкам через топи

Если твоя верстка — это копипаста чужих примеров без понимания, как это вообще работает, тогда да, я тебе сочувствую. И да, это будет тяжело переползать на ao3. Мне хочется пожелать тебе сил и терпения, если ты все-таки решишься продолжать, потому что верстка никогда не была легкой в любой виде. Хороших верстальщиков днем с огнем не найдешь.
URL
05.03.2020 в 08:33

Гость
Если твоя верстка — это копипаста чужих примеров без понимания, как это вообще работает, тогда да, я тебе сочувствую.

Ну, если ты каждый раз заново изобретаешь велосипеды в нотпаде вместо того чтобы пользоваться уже изобретенными раньше, то я сочувствую тебе :nope:
URL
05.03.2020 в 08:41

Гость
Вот тебе рабочий пример с колонками.

Отлично. А если нужен врап, а не ноуврап?
Чтобы
___ ___ ___ ___ ___

превращалось на телефоне в
___ ___ ___
___ ___

или даже с другим распределением элементов по горизонтали строки, а не в
_ _ _ _ _

?
URL
05.03.2020 в 08:45

Гость
Notepad :lol:

Короткую откатал, произвольную тоже. Теперь на показательные с флексами вышел
URL
05.03.2020 в 08:45

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

Ну и бонусом:
1) разрешенные теги archiveofourown.org/help/html-help.html
2) разрешенные css свойства archiveofourown.org/help/skins-creating.html
URL
05.03.2020 в 08:54

Гость
Ну и бонусом

Вот именно от этих куцых списков и плюемся, ага.
URL
05.03.2020 в 08:59

Гость
08:45/1,анон, с версткой в нодпаде это оч известная бородатая шутка из коллекции приколов над теплым ламповым звуком. То, что ты её не слышал, выдает твою йуность - и не более того.
URL
05.03.2020 в 09:16

Гость
Конечно, не слышал. Я notepad'e писал лет 8 назад на непрофильных парах в универе :lol:
URL
05.03.2020 в 09:30

Гость
Ну так я и говорю: молодой ишшо :old::-D
URL
05.03.2020 в 11:27

Гость
archiveofourown.org/works/22999477
с компа все клево, коты отпадные, чудесные картинки ))
URL
05.03.2020 в 12:46

Гость
#workskin p:empty {
display: none;
}

Не работает.
URL
05.03.2020 в 12:49

Гость
Не работает.
плюсую
у меня вообще что-то странное случилось после добавления этого. все остальные стили куда-то пропали.
URL
05.03.2020 в 13:00

Гость
Не работает.у меня вообще что-то странное случилось после добавления этого. все остальные стили куда-то пропали.
почему мне кажется, что вы не туда добавили, либо не выбрали скин, либо не то добавили?..
URL
05.03.2020 в 13:08

Гость
почему мне кажется, что вы не туда добавили, либо не выбрали скин, либо не то добавили?..
я сам сам так думаю про каждого второго анона, но вроде правильно добавлял, до этого же все работало хорошо :lol:
URL
05.03.2020 в 23:58

Гость
Аноны, а тут реально просто завербовать кого-нибудь, кто сможет сверстать что-то наподобие внесенного аноном 2020-03-05 в 03:16? Весь визуал предоставим, всекомандную любовь гарантируем.
Просто чем больше я смотрю на этот тред, тем меньше понимаю
URL

Расширенная форма

Редактировать

Подписаться на новые комментарии
Получать уведомления о новых комментариях на E-mail