Initial commit
This commit is contained in:
Ronald Huynen
625
resources/css/app.css
Normal file
625
resources/css/app.css
Normal file
@@ -0,0 +1,625 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
/* Override Tailwind's list-style: none reset for post content */
|
||||
|
||||
div.post-content li {
|
||||
display: list-item !important;
|
||||
}
|
||||
|
||||
/* Hide Quill's ql-ui span elements that create duplicate markers */
|
||||
div.post-content .ql-ui {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Quill wraps BOTH ordered and unordered lists in <ol> tags! */
|
||||
/* For lists WITH data-list attributes, remove container styling and use li styling */
|
||||
div.post-content ol:has(li[data-list]),
|
||||
div.post-content ul:has(li[data-list]) {
|
||||
list-style-type: none !important;
|
||||
}
|
||||
|
||||
/* Ordered lists - li elements control the style */
|
||||
div.post-content li[data-list="ordered"] {
|
||||
list-style-type: decimal !important;
|
||||
}
|
||||
|
||||
/* Bullet lists - li elements control the style */
|
||||
div.post-content li[data-list="bullet"] {
|
||||
list-style-type: disc !important;
|
||||
}
|
||||
|
||||
/* For standard HTML lists WITHOUT data-list attributes, use traditional styling */
|
||||
div.post-content ol:not(:has(li[data-list])) {
|
||||
list-style-type: decimal !important;
|
||||
}
|
||||
|
||||
div.post-content ul:not(:has(li[data-list])) {
|
||||
list-style-type: disc !important;
|
||||
}
|
||||
|
||||
/* Quill editor - proper list styling */
|
||||
.ql-editor ol,
|
||||
.ql-editor ul {
|
||||
padding-left: 1.5em;
|
||||
list-style-position: outside;
|
||||
}
|
||||
|
||||
/* Quill wraps BOTH ordered and unordered lists in <ol> tags! */
|
||||
/* Remove list styling from containers that have data-list children */
|
||||
.ql-editor ol:has(li[data-list]),
|
||||
.ql-editor ul:has(li[data-list]) {
|
||||
list-style-type: none;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/* Hide Quill's ql-ui span elements that create duplicate markers */
|
||||
.ql-editor .ql-ui {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Ordered lists - target li with data-list */
|
||||
.ql-editor li[data-list="ordered"] {
|
||||
list-style-type: decimal;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
/* Bullet lists - target li with data-list */
|
||||
.ql-editor li[data-list="bullet"],
|
||||
.ql-editor ol > li[data-list="bullet"] {
|
||||
list-style-type: disc;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.ql-editor li {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
/* Ensure standard ol/ul also work (without data-list attributes) */
|
||||
.ql-editor ol:not(:has(li[data-list])) {
|
||||
list-style-type: decimal;
|
||||
}
|
||||
|
||||
.ql-editor ul:not(:has(li[data-list])) {
|
||||
list-style-type: disc;
|
||||
}
|
||||
}
|
||||
|
||||
@source '../../vendor/namu/wirechat/resources/views/**/*.blade.php';
|
||||
@source '../../vendor/namu/wirechat/src/Livewire/**/*.php';
|
||||
|
||||
/* Dynamic Theme System - CSS Custom Properties generated by theme_css_vars() */
|
||||
|
||||
/* Theme-aware utility classes */
|
||||
@layer utilities {
|
||||
.text-theme-primary {
|
||||
color: rgb(var(--color-text-primary));
|
||||
}
|
||||
|
||||
.text-theme-secondary {
|
||||
color: rgb(var(--color-text-secondary));
|
||||
}
|
||||
|
||||
.text-theme-light {
|
||||
color: rgb(var(--color-text-light));
|
||||
}
|
||||
|
||||
.placeholder-theme-light::placeholder {
|
||||
color: rgb(var(--color-text-light));
|
||||
}
|
||||
|
||||
/* Primary color utilities - all shades */
|
||||
.bg-theme-primary {
|
||||
background-color: rgb(var(--color-primary-500));
|
||||
}
|
||||
|
||||
.bg-theme-primary-50 {
|
||||
background-color: rgb(var(--color-primary-50));
|
||||
}
|
||||
|
||||
.bg-theme-primary-100 {
|
||||
background-color: rgb(var(--color-primary-100));
|
||||
}
|
||||
|
||||
.bg-theme-primary-200 {
|
||||
background-color: rgb(var(--color-primary-200));
|
||||
}
|
||||
|
||||
.bg-theme-primary-300 {
|
||||
background-color: rgb(var(--color-primary-300));
|
||||
}
|
||||
|
||||
.bg-theme-primary-400 {
|
||||
background-color: rgb(var(--color-primary-400));
|
||||
}
|
||||
|
||||
.bg-theme-primary-500 {
|
||||
background-color: rgb(var(--color-primary-500));
|
||||
}
|
||||
|
||||
.bg-theme-primary-600 {
|
||||
background-color: rgb(var(--color-primary-600));
|
||||
}
|
||||
|
||||
.bg-theme-primary-700 {
|
||||
background-color: rgb(var(--color-primary-700));
|
||||
}
|
||||
|
||||
.bg-theme-primary-800 {
|
||||
background-color: rgb(var(--color-primary-800));
|
||||
}
|
||||
|
||||
.bg-theme-primary-900 {
|
||||
background-color: rgb(var(--color-primary-900));
|
||||
}
|
||||
|
||||
.text-theme-primary-50 {
|
||||
color: rgb(var(--color-primary-50));
|
||||
}
|
||||
|
||||
.text-theme-primary-100 {
|
||||
color: rgb(var(--color-primary-100));
|
||||
}
|
||||
|
||||
.text-theme-primary-200 {
|
||||
color: rgb(var(--color-primary-200));
|
||||
}
|
||||
|
||||
.text-theme-primary-300 {
|
||||
color: rgb(var(--color-primary-300));
|
||||
}
|
||||
|
||||
.text-theme-primary-400 {
|
||||
color: rgb(var(--color-primary-400));
|
||||
}
|
||||
|
||||
.text-theme-primary-500 {
|
||||
color: rgb(var(--color-primary-500));
|
||||
}
|
||||
|
||||
.text-theme-primary-600 {
|
||||
color: rgb(var(--color-primary-600));
|
||||
}
|
||||
|
||||
.text-theme-primary-700 {
|
||||
color: rgb(var(--color-primary-700));
|
||||
}
|
||||
|
||||
.text-theme-primary-800 {
|
||||
color: rgb(var(--color-primary-800));
|
||||
}
|
||||
|
||||
.text-theme-primary-900 {
|
||||
color: rgb(var(--color-primary-900));
|
||||
}
|
||||
|
||||
.border-theme-primary-300 {
|
||||
border-color: rgb(var(--color-primary-300));
|
||||
}
|
||||
|
||||
.border-theme-primary-400 {
|
||||
border-color: rgb(var(--color-primary-400));
|
||||
}
|
||||
|
||||
.border-theme-primary-900 {
|
||||
border-color: rgb(var(--color-primary-900));
|
||||
}
|
||||
|
||||
.hover\:bg-theme-primary-500:hover {
|
||||
background-color: rgb(var(--color-primary-500));
|
||||
}
|
||||
|
||||
.hover\:bg-theme-primary-700:hover {
|
||||
background-color: rgb(var(--color-primary-700));
|
||||
}
|
||||
|
||||
.hover\:text-theme-primary-100:hover {
|
||||
color: rgb(var(--color-primary-100));
|
||||
}
|
||||
|
||||
.hover\:text-theme-primary-200:hover {
|
||||
color: rgb(var(--color-primary-200));
|
||||
}
|
||||
|
||||
.active\:bg-theme-primary-900:active {
|
||||
background-color: rgb(var(--color-primary-900));
|
||||
}
|
||||
|
||||
.focus\:border-theme-primary-900:focus {
|
||||
border-color: rgb(var(--color-primary-900));
|
||||
}
|
||||
|
||||
.focus\:ring-theme-primary-200:focus {
|
||||
--tw-ring-color: rgb(var(--color-primary-200));
|
||||
}
|
||||
|
||||
/* Secondary, accent, brand utilities */
|
||||
.bg-theme-secondary {
|
||||
background-color: rgb(var(--color-secondary));
|
||||
}
|
||||
|
||||
.text-theme-secondary-color {
|
||||
color: rgb(var(--color-secondary));
|
||||
}
|
||||
|
||||
.bg-theme-accent {
|
||||
background-color: rgb(var(--color-accent));
|
||||
}
|
||||
|
||||
.text-theme-accent {
|
||||
color: rgb(var(--color-accent));
|
||||
}
|
||||
|
||||
.bg-theme-accent-dark {
|
||||
background-color: rgb(var(--color-accent_dark));
|
||||
}
|
||||
|
||||
.text-theme-accent-dark {
|
||||
color: rgb(var(--color-accent_dark));
|
||||
}
|
||||
|
||||
.bg-theme-brand {
|
||||
background-color: rgb(var(--color-brand));
|
||||
}
|
||||
|
||||
.profile-photo {
|
||||
background-color: rgb(var(--color-brand));
|
||||
}
|
||||
|
||||
.text-theme-brand {
|
||||
color: rgb(var(--color-brand));
|
||||
}
|
||||
|
||||
.text-theme-reaction {
|
||||
color: rgb(var(--color-reaction));
|
||||
}
|
||||
|
||||
.text-theme-reaction-hover {
|
||||
color: rgb(var(--color-reaction-hover));
|
||||
}
|
||||
|
||||
.fill-theme-logo {
|
||||
fill: rgb(var(--color-logo));
|
||||
}
|
||||
|
||||
.text-theme-logo {
|
||||
color: rgb(var(--color-logo));
|
||||
}
|
||||
|
||||
.bg-theme-background {
|
||||
background-color: rgb(var(--color-background));
|
||||
}
|
||||
|
||||
.bg-theme-surface {
|
||||
background-color: rgb(var(--color-surface));
|
||||
}
|
||||
|
||||
.bg-theme-surface-alt {
|
||||
background-color: rgb(var(--color-surface_alt));
|
||||
}
|
||||
|
||||
.bg-theme-surface-dark {
|
||||
background-color: rgb(var(--color-surface_dark));
|
||||
}
|
||||
|
||||
/* Success, warning, info utilities */
|
||||
.bg-theme-success {
|
||||
background-color: rgb(var(--color-success));
|
||||
}
|
||||
|
||||
.text-theme-success {
|
||||
color: rgb(var(--color-success));
|
||||
}
|
||||
|
||||
.bg-theme-warning {
|
||||
background-color: rgb(var(--color-warning));
|
||||
}
|
||||
|
||||
.text-theme-warning {
|
||||
color: rgb(var(--color-warning));
|
||||
}
|
||||
|
||||
.bg-theme-info {
|
||||
background-color: rgb(var(--color-info));
|
||||
}
|
||||
|
||||
.text-theme-info {
|
||||
color: rgb(var(--color-info));
|
||||
}
|
||||
|
||||
/* Danger color utilities */
|
||||
.bg-theme-danger-dark {
|
||||
background-color: rgb(var(--color-danger-dark));
|
||||
}
|
||||
|
||||
.bg-theme-danger {
|
||||
background-color: rgb(var(--color-danger));
|
||||
}
|
||||
|
||||
.bg-theme-danger-light {
|
||||
background-color: rgb(var(--color-danger-light));
|
||||
}
|
||||
|
||||
.text-theme-danger-dark {
|
||||
color: rgb(var(--color-danger-dark));
|
||||
}
|
||||
|
||||
.text-theme-danger {
|
||||
color: rgb(var(--color-danger));
|
||||
}
|
||||
|
||||
.text-theme-danger-light {
|
||||
color: rgb(var(--color-danger-light));
|
||||
}
|
||||
|
||||
/* Neutral colors (yellow theme) */
|
||||
.bg-theme-neutral-dark {
|
||||
background-color: rgb(var(--color-neutral-dark));
|
||||
}
|
||||
|
||||
.bg-theme-neutral-light {
|
||||
background-color: rgb(var(--color-neutral-light));
|
||||
}
|
||||
|
||||
.bg-theme-neutral-medium {
|
||||
background-color: rgb(var(--color-neutral-medium));
|
||||
}
|
||||
|
||||
.text-theme-neutral-dark {
|
||||
color: rgb(var(--color-neutral-dark));
|
||||
}
|
||||
|
||||
.text-theme-neutral-light {
|
||||
color: rgb(var(--color-neutral-light));
|
||||
}
|
||||
|
||||
.text-theme-neutral-medium {
|
||||
color: rgb(var(--color-neutral-medium));
|
||||
}
|
||||
|
||||
.text-theme-inverse {
|
||||
color: rgb(var(--color-text-inverse));
|
||||
}
|
||||
|
||||
/* Border utilities */
|
||||
.border-theme-primary {
|
||||
border-color: rgb(var(--color-primary-300));
|
||||
}
|
||||
|
||||
.border-theme-border {
|
||||
border-color: rgb(var(--color-border));
|
||||
}
|
||||
|
||||
.border-theme-muted {
|
||||
border-color: rgb(var(--color-primary-400));
|
||||
}
|
||||
|
||||
.border-theme-accent {
|
||||
border-color: rgb(var(--color-accent));
|
||||
}
|
||||
|
||||
.border-theme-danger-dark {
|
||||
border-color: rgb(var(--color-danger-dark));
|
||||
}
|
||||
|
||||
.border-theme-danger {
|
||||
border-color: rgb(var(--color-danger));
|
||||
}
|
||||
|
||||
/* Focus state utilities */
|
||||
.focus\:border-theme-danger-dark:focus {
|
||||
border-color: rgb(var(--color-danger-dark));
|
||||
}
|
||||
|
||||
.focus\:ring-theme-danger-light:focus {
|
||||
--tw-ring-color: rgb(var(--color-danger-light));
|
||||
}
|
||||
|
||||
.focus\:ring-theme-accent:focus {
|
||||
--tw-ring-color: rgb(var(--color-accent));
|
||||
}
|
||||
|
||||
/* Hover state utilities */
|
||||
.hover\:bg-theme-danger:hover {
|
||||
background-color: rgb(var(--color-danger));
|
||||
}
|
||||
|
||||
.hover\:bg-theme-accent:hover {
|
||||
background-color: rgb(var(--color-accent));
|
||||
}
|
||||
|
||||
.hover\:bg-theme-brand:hover {
|
||||
background-color: rgb(var(--color-brand));
|
||||
}
|
||||
|
||||
.hover\:text-theme-accent:hover {
|
||||
color: rgb(var(--color-accent));
|
||||
}
|
||||
|
||||
/* Active state utilities */
|
||||
.active\:bg-theme-danger:active {
|
||||
background-color: rgb(var(--color-danger));
|
||||
}
|
||||
|
||||
.active\:bg-theme-accent:active {
|
||||
background-color: rgb(var(--color-accent));
|
||||
}
|
||||
|
||||
.font-theme-body {
|
||||
font-family: var(--font-family-body);
|
||||
}
|
||||
|
||||
.font-theme-heading {
|
||||
font-family: var(--font-family-heading);
|
||||
}
|
||||
}
|
||||
|
||||
/* Post content styling */
|
||||
|
||||
/* Header styling */
|
||||
.post-content h1 {
|
||||
font-size: x-large !important;
|
||||
margin-top: 2.5rem !important;
|
||||
margin-bottom: 1.5rem !important;
|
||||
line-height: 1.2 !important;
|
||||
color: rgb(var(--color-text-primary)) !important;
|
||||
}
|
||||
|
||||
.post-content h2 {
|
||||
font-size: x-large !important;
|
||||
margin-top: 2rem !important;
|
||||
margin-bottom: 1.25rem !important;
|
||||
line-height: 1.3 !important;
|
||||
color: rgb(var(--color-text-primary)) !important;
|
||||
}
|
||||
|
||||
.post-content h3 {
|
||||
font-size: x-large !important;
|
||||
margin-top: 1.75rem !important;
|
||||
margin-bottom: 1rem !important;
|
||||
line-height: 1.4 !important;
|
||||
color: rgb(var(--color-text-primary)) !important;
|
||||
}
|
||||
|
||||
.post-content h4 {
|
||||
font-size: x-large !important;
|
||||
margin-top: 1.5rem !important;
|
||||
margin-bottom: 0.875rem !important;
|
||||
line-height: 1.4 !important;
|
||||
color: rgb(var(--color-text-primary)) !important;
|
||||
}
|
||||
|
||||
.post-content h5 {
|
||||
font-size: x-large !important;
|
||||
margin-top: 1.25rem !important;
|
||||
margin-bottom: 0.75rem !important;
|
||||
line-height: 1.5 !important;
|
||||
color: rgb(var(--color-text-primary)) !important;
|
||||
}
|
||||
|
||||
.post-content h6 {
|
||||
font-size: x-large !important;
|
||||
margin-top: 1rem !important;
|
||||
margin-bottom: 0.5rem !important;
|
||||
line-height: 1.5 !important;
|
||||
color: rgb(var(--color-text-primary)) !important;
|
||||
}
|
||||
|
||||
/* Link styling */
|
||||
.post-content a {
|
||||
text-decoration: underline !important;
|
||||
color: rgb(var(--color-text-primary)) !important;
|
||||
}
|
||||
|
||||
.post-content a:hover {
|
||||
color: rgb(var(--color-text-secondary)) !important;
|
||||
}
|
||||
|
||||
/* List styling - !important to override Tailwind preflight reset */
|
||||
/* General list container styles */
|
||||
div.post-content ul,
|
||||
div.post-content ol,
|
||||
.post-content > ul,
|
||||
.post-content > ol {
|
||||
list-style-position: outside !important;
|
||||
margin-left: 2.5rem !important;
|
||||
margin-top: 1rem !important;
|
||||
margin-bottom: 1rem !important;
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
|
||||
/* Default list item styles */
|
||||
div.post-content ul li,
|
||||
div.post-content ol li,
|
||||
.post-content > ul > li,
|
||||
.post-content > ol > li {
|
||||
display: list-item !important;
|
||||
margin-top: 0.25rem !important;
|
||||
margin-bottom: 0.25rem !important;
|
||||
padding-left: 0.5rem !important;
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
/* Quill uses data-list attributes on li elements - these must override defaults */
|
||||
/* Quill wraps BOTH ordered and unordered lists in <ol> tags! */
|
||||
/* Remove list styling from containers that have data-list children */
|
||||
div.post-content ol:has(li[data-list]),
|
||||
div.post-content ul:has(li[data-list]),
|
||||
.post-content > ol:has(li[data-list]),
|
||||
.post-content > ul:has(li[data-list]) {
|
||||
list-style-type: none !important;
|
||||
list-style: none !important;
|
||||
}
|
||||
|
||||
/* Ordered lists from Quill - the li element controls the style */
|
||||
div.post-content li[data-list="ordered"],
|
||||
.post-content > ol > li[data-list="ordered"] {
|
||||
list-style-type: decimal !important;
|
||||
}
|
||||
|
||||
/* Bullet lists from Quill - the li element controls the style */
|
||||
div.post-content li[data-list="bullet"],
|
||||
.post-content > ul > li[data-list="bullet"],
|
||||
.post-content > ol > li[data-list="bullet"] {
|
||||
list-style-type: disc !important;
|
||||
}
|
||||
|
||||
/* Standard HTML lists (without data-list) - fallback styles */
|
||||
div.post-content ul:not(:has(li[data-list])),
|
||||
.post-content > ul:not(:has(li[data-list])) {
|
||||
list-style: disc !important;
|
||||
list-style-type: disc !important;
|
||||
}
|
||||
|
||||
div.post-content ul:not(:has(li[data-list])) li,
|
||||
.post-content > ul:not(:has(li[data-list])) > li {
|
||||
list-style-type: disc !important;
|
||||
}
|
||||
|
||||
div.post-content ol:not(:has(li[data-list])),
|
||||
.post-content > ol:not(:has(li[data-list])) {
|
||||
list-style: decimal !important;
|
||||
list-style-type: decimal !important;
|
||||
}
|
||||
|
||||
div.post-content ol:not(:has(li[data-list])) li,
|
||||
.post-content > ol:not(:has(li[data-list])) > li {
|
||||
list-style-type: decimal !important;
|
||||
}
|
||||
|
||||
/* Nested list styles */
|
||||
.post-content ul ul {
|
||||
list-style-type: circle !important;
|
||||
margin-top: 0.5rem !important;
|
||||
margin-bottom: 0.5rem !important;
|
||||
}
|
||||
|
||||
.post-content ul ul ul {
|
||||
list-style-type: square !important;
|
||||
}
|
||||
|
||||
.post-content ol ol {
|
||||
list-style-type: lower-alpha !important;
|
||||
margin-top: 0.5rem !important;
|
||||
margin-bottom: 0.5rem !important;
|
||||
}
|
||||
|
||||
.post-content ol ol ol {
|
||||
list-style-type: lower-roman !important;
|
||||
}
|
||||
|
||||
/* Nested list combinations */
|
||||
.post-content ul ol,
|
||||
.post-content ol ul {
|
||||
margin-top: 0.5rem !important;
|
||||
margin-bottom: 0.5rem !important;
|
||||
}
|
||||
|
||||
/* Tagify focus styles - use theme-accent color */
|
||||
tags.tagify.tagify--focus {
|
||||
--tagify-dd-color-primary: rgb(var(--color-accent)) !important;
|
||||
border-color: rgb(var(--color-accent)) !important;
|
||||
box-shadow: 0 0 0 1px rgb(var(--color-accent)) !important;
|
||||
}
|
||||
203
resources/css/fonts.css
Normal file
203
resources/css/fonts.css
Normal file
@@ -0,0 +1,203 @@
|
||||
/* Define the font-face for Oswald Bold */
|
||||
@font-face {
|
||||
font-family: 'Oswald';
|
||||
src: url('../fonts/static/oswald/Oswald-Bold.ttf') format('truetype');
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/* Define the font-face for Oswald ExtraLight */
|
||||
@font-face {
|
||||
font-family: 'Oswald';
|
||||
src: url('../fonts/static/oswald/Oswald-ExtraLight.ttf') format('truetype');
|
||||
font-weight: 200;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/* Define the font-face for Oswald Light */
|
||||
@font-face {
|
||||
font-family: 'Oswald';
|
||||
src: url('../fonts/static/oswald/Oswald-Light.ttf') format('truetype');
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/* Define the font-face for Oswald Medium */
|
||||
@font-face {
|
||||
font-family: 'Oswald';
|
||||
src: url('../fonts/static/oswald/Oswald-Medium.ttf') format('truetype');
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/* Define the font-face for Oswald Regular */
|
||||
@font-face {
|
||||
font-family: 'Oswald';
|
||||
src: url('../fonts/static/oswald/Oswald-Regular.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/* Define the font-face for Oswald SemiBold */
|
||||
@font-face {
|
||||
font-family: 'Oswald';
|
||||
src: url('../fonts/static/oswald/Oswald-SemiBold.ttf') format('truetype');
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
|
||||
/* Define the font-face for Poppins Black */
|
||||
@font-face {
|
||||
font-family: 'Poppins';
|
||||
src: url('/fonts/static/poppins/Poppins-Black.otf') format('opentype');
|
||||
font-weight: 900;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/* Define the font-face for Poppins Black Italic */
|
||||
@font-face {
|
||||
font-family: 'Poppins';
|
||||
src: url('/fonts/static/poppins/Poppins-BlackItalic.otf') format('opentype');
|
||||
font-weight: 900;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Define the font-face for Poppins Bold */
|
||||
@font-face {
|
||||
font-family: 'Poppins';
|
||||
src: url('/fonts/static/poppins/Poppins-Bold.otf') format('opentype');
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/* Define the font-face for Poppins Bold Italic */
|
||||
@font-face {
|
||||
font-family: 'Poppins';
|
||||
src: url('/fonts/static/poppins/Poppins-BoldItalic.otf') format('opentype');
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Define the font-face for Poppins ExtraBold */
|
||||
@font-face {
|
||||
font-family: 'Poppins';
|
||||
src: url('/fonts/static/poppins/Poppins-ExtraBold.otf') format('opentype');
|
||||
font-weight: 800;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/* Define the font-face for Poppins ExtraBold Italic */
|
||||
@font-face {
|
||||
font-family: 'Poppins';
|
||||
src: url('/fonts/static/poppins/Poppins-ExtraBoldItalic.otf') format('opentype');
|
||||
font-weight: 800;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Define the font-face for Poppins Italic */
|
||||
@font-face {
|
||||
font-family: 'Poppins';
|
||||
src: url('/fonts/static/poppins/Poppins-Italic.otf') format('opentype');
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Define the font-face for Poppins Light */
|
||||
@font-face {
|
||||
font-family: 'Poppins';
|
||||
src: url('/fonts/static/poppins/Poppins-Light.otf') format('opentype');
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/* Define the font-face for Poppins Light Italic */
|
||||
@font-face {
|
||||
font-family: 'Poppins';
|
||||
src: url('/fonts/static/poppins/Poppins-LightItalic.otf') format('opentype');
|
||||
font-weight: 300;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Define the font-face for Poppins ExtraLight */
|
||||
@font-face {
|
||||
font-family: 'Poppins';
|
||||
src: url('/fonts/static/poppins/Poppins-ExtraLight.otf') format('opentype');
|
||||
font-weight: 200;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/* Define the font-face for Poppins ExtraLight Italic */
|
||||
@font-face {
|
||||
font-family: 'Poppins';
|
||||
src: url('/fonts/static/poppins/Poppins-ExtraLightItalic.otf') format('opentype');
|
||||
font-weight: 200;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Define the font-face for Poppins Medium */
|
||||
@font-face {
|
||||
font-family: 'Poppins';
|
||||
src: url('/fonts/static/poppins/Poppins-Medium.otf') format('opentype');
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/* Define the font-face for Poppins Medium Italic */
|
||||
@font-face {
|
||||
font-family: 'Poppins';
|
||||
src: url('/fonts/static/poppins/Poppins-MediumItalic.otf') format('opentype');
|
||||
font-weight: 500;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Define the font-face for Poppins Regular */
|
||||
@font-face {
|
||||
font-family: 'Poppins';
|
||||
src: url('/fonts/static/poppins/Poppins-Regular.otf') format('opentype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/* Define the font-face for Poppins SemiBold */
|
||||
@font-face {
|
||||
font-family: 'Poppins';
|
||||
src: url('/fonts/static/poppins/Poppins-SemiBold.otf') format('opentype');
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/* Define the font-face for Poppins SemiBold Italic */
|
||||
@font-face {
|
||||
font-family: 'Poppins';
|
||||
src: url('/fonts/static/poppins/Poppins-SemiBoldItalic.otf') format('opentype');
|
||||
font-weight: 600;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Define the font-face for Poppins Thin */
|
||||
@font-face {
|
||||
font-family: 'Poppins';
|
||||
src: url('/fonts/static/poppins/Poppins-Thin.otf') format('opentype');
|
||||
font-weight: 100;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/* Define the font-face for Poppins Thin Italic */
|
||||
@font-face {
|
||||
font-family: 'Poppins';
|
||||
src: url('/fonts/static/poppins/Poppins-ThinItalic.otf') format('opentype');
|
||||
font-weight: 100;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
|
||||
/* Apply the Poppins font-family to the body */
|
||||
body {
|
||||
font-family: 'Poppins', sans-serif !important;
|
||||
}
|
||||
|
||||
/* Apply the font-family to all heading elements */
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: 'Poppins', sans-serif !important;
|
||||
}
|
||||
Reference in New Issue
Block a user