Move social-media-demo.css from colors/ to global/ directory
Co-authored-by: jmiller-moko <230051081+jmiller-moko@users.noreply.github.com>
This commit is contained in:
copilot-swe-agent[bot]
@@ -1,229 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
/* Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
|
||||
|
||||
This file is part of a Moko Consulting project.
|
||||
|
||||
SPDX-License-Identifier: GPL-3.0-or-later
|
||||
|
||||
This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU General Public License along with this program. If not, see https://www.gnu.org/licenses/ .
|
||||
|
||||
# FILE INFORMATION
|
||||
DEFGROUP: Joomla.Template.Site
|
||||
INGROUP: Moko-Cassiopeia
|
||||
PATH: ./media/templates/site/moko-cassiopeia/css/global/social-media-demo.css
|
||||
VERSION: 03.05.00
|
||||
BRIEF: Demo styles for showcasing social media elements in Moko-Cassiopeia template
|
||||
*/
|
||||
|
||||
/*
|
||||
======================================================================
|
||||
Social Media Demo — FULL CSS (Joomla-safe, fully scoped)
|
||||
Scope: All selectors prefixed with .social-media-demo to avoid leakage
|
||||
Usage: Wrap your article markup in <div class="social-media-demo"> ... </div>
|
||||
Version: 2.0 (2025-08-23)
|
||||
|
||||
How it’s organized:
|
||||
1) Container-level CSS variables (IMAGES ONLY). Colors are hard-coded per brand below.
|
||||
2) Base/layout styles (sections, header shell, placeholders, buttons).
|
||||
3) Platform brand colors (hard-coded) and cover height tweaks.
|
||||
4) Image assignments (map classes like .fb-cover → variable --fb-cover-img).
|
||||
|
||||
INSTRUCTIONS:
|
||||
- Save the images in their requried sizes into the [SITEROOT]/images/social/ folder with the exact names.
|
||||
- For circle images, sue a square image t fille the entire space
|
||||
- All images are center and miiddle aligned when loaded.
|
||||
======================================================================
|
||||
REQUIRED IMAGE SIZES — Social Media Demo Wireframes
|
||||
|
||||
Facebook
|
||||
--fb-cover-img → Cover: 820×312 (desktop), 640×360 (mobile safe)
|
||||
--fb-avatar-img → Profile: 176×176 (shown as circle, but use square image)
|
||||
|
||||
Twitter / X
|
||||
--x-cover-img → Header: 1500×500
|
||||
--x-avatar-img → Profile: up to 400×400 (shown as circle, but use square image)
|
||||
|
||||
LinkedIn Company
|
||||
--li-cover-img → Banner: ~1128×191
|
||||
--li-logo-img → Logo: up to 300×300 (rounded square)
|
||||
|
||||
Google Business Profile
|
||||
--gmb-cover-img → Banner: ~960×200 (mobile ~960×140)
|
||||
--gmb-logo-img → Logo: up to 300×300 (shown as circle, but use square image)
|
||||
|
||||
Instagram Business
|
||||
--ig-cover-img → Not always visible, safe 1080×608 for highlight background
|
||||
--ig-avatar-img → Profile: 320×320 (shown as circle, but use square image)
|
||||
|
||||
YouTube Channel
|
||||
--yt-cover-img → Channel art: 2560×1440 (safe area ~1546×423 center)
|
||||
--yt-avatar-img → Channel icon: 800×800 (shown as circle, but use square image)
|
||||
|
||||
TikTok Business
|
||||
--tt-cover-img → Profile header: ~900×500 (safe area ~720×405)
|
||||
--tt-avatar-img → Profile: 200×200 (shown as circle, but use square image)
|
||||
|
||||
Pinterest Business
|
||||
--pin-cover-img → Board/brand banner: ~800×450
|
||||
--pin-avatar-img → Profile: 165×165 (shown as circle, but use square image)
|
||||
|
||||
Snapchat Public Profile
|
||||
--sc-cover-img → Banner: ~1080×1920 (stories/poster)
|
||||
--sc-avatar-img → Bitmoji/Profile: 320×320 (shown as circle, but use square image)
|
||||
|
||||
Reddit Community
|
||||
--rd-cover-img → Banner: 1920×384
|
||||
--rd-avatar-img → Community icon: 256×256 (shown as circle, but use square image)
|
||||
====================================================================== */
|
||||
|
||||
/* Container variables — IMAGES ONLY (safe-scoped) */
|
||||
.social-media-demo {
|
||||
--fb-cover-img: url('../../../../../image/social/fb-cover.jpg');
|
||||
--fb-avatar-img: url('../../../../../image/social/fb-avatar.jpg');
|
||||
|
||||
--x-cover-img: url('../../../../../image/social/x-cover.jpg');
|
||||
--x-avatar-img: url('../../../../../image/social/x-avatar.jpg');
|
||||
|
||||
--li-cover-img: url('../../../../../image/social/li-cover.jpg');
|
||||
--li-logo-img: url('../../../../../image/social/li-logo.jpg');
|
||||
|
||||
--gmb-cover-img: url('../../../../../image/social/gmb-cover.jpg');
|
||||
--gmb-logo-img: url('../../../../../image/social/gmb-logo.jpg');
|
||||
|
||||
--ig-cover-img: url('../../../../../image/social/ig-cover.jpg');
|
||||
--ig-avatar-img: url('../../../../../image/social/ig-avatar.jpg');
|
||||
|
||||
--yt-cover-img: url('../../../../../image/social/yt-cover.jpg');
|
||||
--yt-avatar-img: url('../../../../../image/social/yt-avatar.jpg');
|
||||
|
||||
--tt-cover-img: url('../../../../../image/social/tt-cover.jpg');
|
||||
--tt-avatar-img: url('../../../../../image/social/tt-avatar.jpg');
|
||||
|
||||
--pin-cover-img: url('../../../../../image/social/pin-cover.jpg');
|
||||
--pin-avatar-img: url('../../../../../image/social/pin-avatar.jpg');
|
||||
|
||||
--sc-cover-img: url('../../../../../image/social/sc-cover.jpg');
|
||||
--sc-avatar-img: url('../../../../../image/social/sc-avatar.jpg');
|
||||
|
||||
--rd-cover-img: url('../../../../../image/social/rd-cover.jpg');
|
||||
--rd-avatar-img: url('../../../../../image/social/rd-avatar.jpg');
|
||||
}
|
||||
|
||||
/* DO NOT TOUCH */
|
||||
.social-media-demo * { box-sizing: border-box; }
|
||||
.social-media-demo section { margin: 24px auto; max-width: 1128px; background: #fff; border: 1px solid #d9dee3; border-radius: 12px; overflow: hidden; }
|
||||
.social-media-demo section h2 { margin: 0; padding: 12px 16px; background: #f9fafb; border-bottom: 1px solid #d9dee3; font-size: 16px; font-weight: 800; color: #111; }
|
||||
.social-media-demo .preview { padding: 16px; }
|
||||
|
||||
/* Header shell */
|
||||
.social-media-demo .header { position: relative; border: 1px solid #d9dee3; border-radius: 12px; overflow: hidden; background: #fff; }
|
||||
.social-media-demo .cover { position: relative; width: 100%; height: 200px; background-size: cover; background-position: center; background-color: #e8edf3; }
|
||||
.social-media-demo .avatar-wrap { position: absolute; left: 16px; bottom: -48px; }
|
||||
.social-media-demo .avatar,
|
||||
.social-media-demo .logo { width: 160px; height: 160px; border: 4px solid #fff; background-size: cover; background-position: center; overflow: hidden; }
|
||||
.social-media-demo .avatar.shown as circle, but use square image { border-radius: 999px; }
|
||||
.social-media-demo .logo.rounded { border-radius: 16px; }
|
||||
|
||||
/* Meta */
|
||||
.social-media-demo .meta { display: flex; justify-content: space-between; align-items: end; gap: 16px; padding: 16px; padding-top: 56px; }
|
||||
.social-media-demo .name { font-size: 22px; font-weight: 800; color: #111; }
|
||||
.social-media-demo .subline { font-size: 13px; color: #666; }
|
||||
|
||||
/* Buttons */
|
||||
.social-media-demo .btn { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid #d9dee3; background: #fff; font-weight: 700; color: #111; }
|
||||
.social-media-demo .btn.primary { color: #fff; border-color: transparent; }
|
||||
|
||||
/* Placeholder visuals (used until you swap in real images) */
|
||||
.social-media-demo .placeholder { position: relative; width: 100%; height: 100%; display: grid; place-items: center; text-align: center; font-weight: 600; color: #6b7280; background: repeating-linear-gradient(45deg,#f6f7f9 0 12px,#eef0f3 12px 24px); border: 1px dashed #cfd3d8; }
|
||||
.social-media-demo .placeholder .dims { position: absolute; bottom: 8px; right: 8px; font-size: 12px; opacity: .85; }
|
||||
|
||||
/* 3) Platform brand colors & cover height tweaks (hard-coded colors on purpose) */
|
||||
/* Facebook */
|
||||
.social-media-demo #fb .btn.primary { background: #1877F2; }
|
||||
.social-media-demo #fb .cover { height: 312px; }
|
||||
@media (max-width: 480px) { .social-media-demo #fb .cover { height: 360px; } }
|
||||
|
||||
/* Twitter / X */
|
||||
.social-media-demo #x .btn.primary { background: #1D9BF0; }
|
||||
.social-media-demo #x .cover { height: 200px; background-color: #22303C; }
|
||||
@media (max-width: 480px) { .social-media-demo #x .cover { height: 160px; } }
|
||||
|
||||
/* LinkedIn */
|
||||
.social-media-demo #li .btn.primary { background: #0A66C2; }
|
||||
.social-media-demo #li .cover { height: 220px; background-color: #e6edf5; }
|
||||
@media (max-width: 480px) { .social-media-demo #li .cover { height: 160px; } }
|
||||
|
||||
/* Google Business Profile */
|
||||
.social-media-demo #gmb .btn.primary { background: #4285F4; }
|
||||
.social-media-demo #gmb .cover { height: 200px; }
|
||||
@media (max-width: 480px) { .social-media-demo #gmb .cover { height: 140px; } }
|
||||
|
||||
/* Instagram Business */
|
||||
.social-media-demo #ig .btn.primary { background: #E1306C; }
|
||||
.social-media-demo #ig .cover { height: 200px; }
|
||||
|
||||
/* YouTube Channel */
|
||||
.social-media-demo #yt .btn.primary { background: #FF0000; }
|
||||
.social-media-demo #yt .cover { height: 180px; }
|
||||
|
||||
/* TikTok Business */
|
||||
.social-media-demo #tt .btn.primary { background: #000000; color: #fff; }
|
||||
.social-media-demo #tt .cover { height: 200px; }
|
||||
|
||||
/* Pinterest Business */
|
||||
.social-media-demo #pin .btn.primary { background: #E60023; }
|
||||
.social-media-demo #pin .cover { height: 200px; }
|
||||
|
||||
/* Snapchat Public Profile */
|
||||
.social-media-demo #sc .btn.primary { background: #FFFC00; color: #000; }
|
||||
.social-media-demo #sc .cover { height: 160px; }
|
||||
|
||||
/* Reddit Community */
|
||||
.social-media-demo #rd .btn.primary { background: #FF4500; }
|
||||
.social-media-demo #rd .cover { height: 180px; }
|
||||
|
||||
/* 4) Image assignments — map classes to variables (swap vars to change images) */
|
||||
/* Facebook */
|
||||
.social-media-demo .fb-cover { background-image: var(--fb-cover-img); }
|
||||
.social-media-demo .fb-avatar { background-image: var(--fb-avatar-img); }
|
||||
|
||||
/* X */
|
||||
.social-media-demo .x-cover { background-image: var(--x-cover-img); }
|
||||
.social-media-demo .x-avatar { background-image: var(--x-avatar-img); }
|
||||
|
||||
/* LinkedIn */
|
||||
.social-media-demo .li-cover { background-image: var(--li-cover-img); }
|
||||
.social-media-demo .li-logo { background-image: var(--li-logo-img); }
|
||||
|
||||
/* Google Business */
|
||||
.social-media-demo .gmb-cover { background-image: var(--gmb-cover-img); }
|
||||
.social-media-demo .gmb-logo { background-image: var(--gmb-logo-img); }
|
||||
|
||||
/* Instagram */
|
||||
.social-media-demo .ig-cover { background-image: var(--ig-cover-img); }
|
||||
.social-media-demo .ig-avatar { background-image: var(--ig-avatar-img); }
|
||||
|
||||
/* YouTube */
|
||||
.social-media-demo .yt-cover { background-image: var(--yt-cover-img); }
|
||||
.social-media-demo .yt-avatar { background-image: var(--yt-avatar-img); }
|
||||
|
||||
/* TikTok */
|
||||
.social-media-demo .tt-cover { background-image: var(--tt-cover-img); }
|
||||
.social-media-demo .tt-avatar { background-image: var(--tt-avatar-img); }
|
||||
|
||||
/* Pinterest */
|
||||
.social-media-demo .pin-cover { background-image: var(--pin-cover-img); }
|
||||
.social-media-demo .pin-avatar { background-image: var(--pin-avatar-img); }
|
||||
|
||||
/* Snapchat */
|
||||
.social-media-demo .sc-cover { background-image: var(--sc-cover-img); }
|
||||
.social-media-demo .sc-avatar { background-image: var(--sc-avatar-img); }
|
||||
|
||||
/* Reddit */
|
||||
.social-media-demo .rd-cover { background-image: var(--rd-cover-img); }
|
||||
.social-media-demo .rd-avatar { background-image: var(--rd-avatar-img); }
|
||||
Reference in New Issue
Block a user