Шаблон:Организация/styles.css: различия между версиями
Deepseek (обсуждение | вклад) v2: переработанный CSS — телефон→адрес→сайт→соцсети→email, иконки цветом |
Deepseek (обсуждение | вклад) v4: сайт+соцсети главные, адреса кликабельные с телефонами |
||
| Строка 1: | Строка 1: | ||
/* ================================================================ | /* ================================================================ | ||
{{Организация}} — визитка | {{Организация}} — визитка организации (.org-card) | ||
Приоритет: сайт + соцсети → физические адреса (кликабельные) | |||
с телефонами, привязанными к каждому адресу → email. | |||
================================================================ */ | ================================================================ */ | ||
| Строка 13: | Строка 13: | ||
line-height: 1.6; | line-height: 1.6; | ||
color: #33434e; | color: #33434e; | ||
max-width: | max-width: 620px; | ||
} | } | ||
| Строка 26: | Строка 19: | ||
color: #6b7580; | color: #6b7580; | ||
font-size: 93%; | font-size: 93%; | ||
margin-bottom: | margin-bottom: 16px; | ||
} | |||
/* --- Сайт ----------------------------------------------------- */ | |||
.org-card__site { | |||
display: flex; | |||
align-items: center; | |||
gap: 8px; | |||
margin-bottom: 12px; | |||
font-size: 104%; | |||
} | |||
.org-card__site a { | |||
color: #0645ad; | |||
font-weight: 600; | |||
text-decoration: none; | |||
} | } | ||
.org-card__site a:hover { text-decoration: underline; } | |||
/* --- | /* --- Соцсети (иконки цветом) ----------------------------------- */ | ||
.org- | .org-card__socials { | ||
display: flex; | display: flex; | ||
flex-wrap: wrap; | flex-wrap: wrap; | ||
gap: 6px | gap: 6px 10px; | ||
margin-bottom: | margin-bottom: 18px; | ||
} | } | ||
.org- | .org-card__social { | ||
font-size: | display: inline-block; | ||
font-weight: | padding: 3px 10px; | ||
color: # | border-radius: 4px; | ||
font-size: 87%; | |||
font-weight: 600; | |||
color: #fff; | |||
text-decoration: none; | |||
} | } | ||
.org-card__social a { color: #fff; text-decoration: none; } | |||
.org-card__social:hover { opacity: 0.88; } | |||
/* --- Адреса --------------------------------------------------- */ | .org-card__social--vk { background: #0077ff; } | ||
.org-card__social--insta { background: #d92c7b; } | |||
.org-card__social--fb { background: #1877f2; } | |||
.org-card__social--tg { background: #26a5e4; } | |||
/* --- Адреса ---------------------------------------------------- */ | |||
.org-card__addresses { | .org-card__addresses { | ||
display: flex; | display: flex; | ||
flex-direction: column; | flex-direction: column; | ||
gap: | gap: 14px; | ||
margin-bottom: | margin-bottom: 16px; | ||
} | } | ||
.org-card__address { | .org-card__address { | ||
| Строка 63: | Строка 81: | ||
text-decoration: none; | text-decoration: none; | ||
} | } | ||
.org-card__addr a:hover { text-decoration: underline; } | |||
.org-card__addr-phone { | .org-card__addr-phone { | ||
color: #6b7580; | color: #6b7580; | ||
font-size: 93%; | font-size: 93%; | ||
font-weight: 500; | font-weight: 500; | ||
} | } | ||
/* --- | /* --- Email ----------------------------------------------------- */ | ||
.org-card__email { | .org-card__email { | ||
color: #6b7580; | color: #6b7580; | ||
font-size: 91%; | font-size: 91%; | ||
} | } | ||
.org-card__email a { | .org-card__email a { color: #6b7580; } | ||
} | |||
@media (max-width: 500px) { | @media (max-width: 500px) { | ||
.org-card { padding: 14px 16px; } | .org-card { padding: 14px 16px; } | ||
} | } | ||