117 lines
No EOL
5.3 KiB
CSS
117 lines
No EOL
5.3 KiB
CSS
/* SVG Data URI Management System
|
|
* Optimized SVGs as CSS custom properties for reusability and performance
|
|
*/
|
|
|
|
:root {
|
|
/* ===== ICON SVGs AS DATA URI ===== */
|
|
|
|
/* Simple geometric icons */
|
|
--icon-arrow-right: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>');
|
|
|
|
--icon-github: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/></svg>');
|
|
|
|
--icon-email: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>');
|
|
|
|
--icon-web: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z"/></svg>');
|
|
|
|
--icon-calendar: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>');
|
|
|
|
--icon-clock: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12,6 12,12 16,14"/></svg>');
|
|
|
|
--icon-location: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg>');
|
|
|
|
/* ===== DECORATIVE PATTERNS ===== */
|
|
|
|
/* Hexagon pattern */
|
|
--pattern-hex: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><polygon points="30,0 52,15 52,45 30,60 8,45 8,15" fill="none" stroke="rgba(0,212,255,0.2)" stroke-width="1"/></svg>');
|
|
|
|
/* Circuit lines */
|
|
--pattern-circuit: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 20"><line x1="0" y1="10" x2="100" y2="10" stroke="rgba(59,130,246,0.3)" stroke-width="2"/><circle cx="25" cy="10" r="3" fill="rgba(59,130,246,0.5)"/><circle cx="75" cy="10" r="3" fill="rgba(59,130,246,0.5)"/></svg>');
|
|
|
|
/* Data dots */
|
|
--pattern-dots: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><circle cx="10" cy="10" r="2" fill="rgba(0,255,179,0.4)"/></svg>');
|
|
}
|
|
|
|
/* ===== UTILITY CLASSES FOR SVG ICONS ===== */
|
|
|
|
.icon {
|
|
display: inline-block;
|
|
width: 1em;
|
|
height: 1em;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
|
|
.icon-sm { width: 0.875em; height: 0.875em; }
|
|
.icon-lg { width: 1.25em; height: 1.25em; }
|
|
.icon-xl { width: 1.5em; height: 1.5em; }
|
|
.icon-2xl { width: 2em; height: 2em; }
|
|
|
|
/* Specific icon classes */
|
|
.icon-arrow-right { background-image: var(--icon-arrow-right); }
|
|
.icon-github { background-image: var(--icon-github); }
|
|
.icon-email { background-image: var(--icon-email); }
|
|
.icon-web { background-image: var(--icon-web); }
|
|
.icon-calendar { background-image: var(--icon-calendar); }
|
|
.icon-clock { background-image: var(--icon-clock); }
|
|
.icon-location { background-image: var(--icon-location); }
|
|
|
|
/* ===== PATTERN BACKGROUNDS ===== */
|
|
|
|
.bg-pattern-hex {
|
|
background-image: var(--pattern-hex);
|
|
background-size: 60px 60px;
|
|
}
|
|
|
|
.bg-pattern-circuit {
|
|
background-image: var(--pattern-circuit);
|
|
background-size: 100px 20px;
|
|
}
|
|
|
|
.bg-pattern-dots {
|
|
background-image: var(--pattern-dots);
|
|
background-size: 20px 20px;
|
|
}
|
|
|
|
/* ===== COLOR VARIATIONS ===== */
|
|
|
|
.icon-primary { filter: hue-rotate(0deg) brightness(1); }
|
|
.icon-secondary { filter: hue-rotate(45deg) brightness(0.8); }
|
|
.icon-accent { filter: hue-rotate(120deg) brightness(1.2); }
|
|
|
|
/* ===== ANIMATION HELPERS ===== */
|
|
|
|
.icon-rotate {
|
|
animation: icon-spin 2s linear infinite;
|
|
}
|
|
|
|
.icon-pulse {
|
|
animation: icon-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
}
|
|
|
|
@keyframes icon-spin {
|
|
from { transform: rotate(0deg); }
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
@keyframes icon-pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.5; }
|
|
}
|
|
|
|
/* ===== RESPONSIVE ICON SIZES ===== */
|
|
|
|
@media (max-width: 768px) {
|
|
.icon-responsive {
|
|
width: 1.25em;
|
|
height: 1.25em;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.icon-responsive {
|
|
width: 1em;
|
|
height: 1em;
|
|
}
|
|
} |