/* Extracted block 1 from base.html */
*, *::before, *::after {
box-sizing: border-box;
}
/* Global Styles */
body {
font-family: Arial, sans-serif;
/* These values adjust Arial to better match Nunito's dimensions */
letter-spacing: -0.02em;
word-spacing: 0.05em;
margin: 0;
padding: 0;
background: #ffffff;
}
header, footer {
background: #000000;
color: #fff;
text-align: left;
padding: 10px;
}
header h1, footer p {
margin: 0;
}
a {
color: #337ab7;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.loader-spinner {
width: 42px;
height: 42px;
margin: 0 auto 8px;
border: 5px solid #ddd;
border-top-color: #111;
border-radius: 50%;
animation: loader-spin .8s linear infinite;
}
@keyframes loader-spin { to { transform: rotate(360deg); } }
/* Breadcrumb trail (meme + tag pages) */
.breadcrumbs {
max-width: 100%;
padding: 10px 14px 2px;
font-size: 13px;
color: #666;
white-space: nowrap;
overflow-x: auto;
}
.breadcrumbs a { color: #337ab7; }
.breadcrumbs .sep { margin: 0 6px; color: #bbb; }
.breadcrumbs .current {
color: #666;
display: inline-block;
max-width: 46ch;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: bottom;
}
.logo {
font-family: 'Nunito', 'Arial Rounded MT Bold', sans-serif;
font-size: 29px;
font-weight: 800;
}
.logo a {
text-decoration: none;
}
.logo a:hover {
text-decoration: none;
}
.logo span.normal, footer p span.normal {
background: linear-gradient(90deg, #A1C4FD, #C2E9FB);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.logo span.highlight, footer p span.highlight {
background: linear-gradient(90deg, #D4FC79, #96E6A1);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* New Styles for User Dropdown in Header */
.header-right {
flex: 1;
display: flex;
justify-content: flex-end;
position: relative; /* Change from absolute to relative */
top: auto;
right: auto;
}
/* Make Meme Button Styles */
.make-meme-btn {
display: inline-block;
vertical-align: middle;
margin-left: 15px;
background: linear-gradient(90deg, #A1C4FD, #C2E9FB);
color: #000;
font-family: 'Nunito', sans-serif;
font-weight: 800;
padding: 8px 16px;
border-radius: 8px;
border: none;
text-transform: uppercase;
font-size: 14px;
cursor: pointer;
box-shadow: 3px 3px 0px rgba(0,0,0,0.8);
transition: all 0.2s ease;
text-decoration: none;
}
.make-meme-btn:hover {
transform: translateY(-2px);
box-shadow: 5px 5px 0px rgba(0,0,0,0.8);
text-decoration: none;
}
.make-meme-btn:active {
transform: translateY(1px);
box-shadow: 1px 1px 0px rgba(0,0,0,0.8);
}
/* Make Meme Button Styles */
.upload-btn {
display: inline-block;
vertical-align: middle;
margin-left: 15px;
background: linear-gradient(90deg, #A1C4FD, #C2E9FB);
color: #000;
font-family: 'Nunito', sans-serif;
font-weight: 800;
padding: 8px 16px;
border-radius: 8px;
border: none;
text-transform: uppercase;
font-size: 14px;
cursor: pointer;
box-shadow: 3px 3px 0px rgba(0,0,0,0.8);
transition: all 0.2s ease;
text-decoration: none;
height:38px;
}
.upload-btn:hover {
transform: translateY(-2px);
box-shadow: 5px 5px 0px rgba(0,0,0,0.8);
text-decoration: none;
}
.upload-btn:active {
transform: translateY(1px);
box-shadow: 1px 1px 0px rgba(0,0,0,0.8);
}
.header-content {
width: 100%;
display: flex;
align-items: center;
}
.header-left {
display: flex;
align-items: center;
}
/* Header Center Navigation (Arrows) */
.header-center {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
visibility: hidden;
opacity: 0;
transition: visibility 0.2s ease, opacity 0.2s ease;
}
.meme-detail-page .header-center {
visibility: visible;
opacity: 1;
}
.arrow-container {
will-change: transform;
display: flex;
border-radius: 8px;
overflow: hidden;
box-shadow: 3px 3px 0px rgba(0,0,0,0.8);
transition: all 0.2s ease;
height: 38px;
}
.arrow-container:hover {
transform: translateY(-2px);
box-shadow: 5px 5px 0px rgba(0,0,0,0.8);
}
.arrow-btn {
border: none;
padding: 8px 16px; /* Match auth button padding */
cursor: pointer;
font-size: 16px;
color: #000000;
outline: none;
transition: background 0.2s ease;
text-decoration: none;
font-family: 'Nunito', sans-serif;
font-weight: 800;
text-transform: uppercase;
}
/* Left half gradient to match login button */
.left-arrow {
background: linear-gradient(90deg, #A1C4FD, #C2E9FB);
opacity: 1.0 !important;
}
/* Right half gradient to match signup button */
.right-arrow {
background: linear-gradient(90deg, #D4FC79, #96E6A1);
opacity: 1.0 !important;
}
.arrow-btn:hover {
opacity: 1;
text-decoration: none;
}
/* User Icon Styles */
.user-dropdown {
position: relative;
display: inline-block;
}
.user-button {
background: transparent;
border: none;
cursor: pointer;
padding: 0;
transition: transform 0.2s ease;
}
.user-button:hover {
transform: scale(1.1);
}
.user-icon {
line-height: 40px;
border-radius: 50%;
display: block;
align-items: center;
justify-content: center;
font-family: 'Nunito', sans-serif;
font-weight: 800;
font-size: 18px;
color: #000;
background: linear-gradient(135deg, #A1C4FD, #C2E9FB);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
width: 40px; /* Fixed width */
height: 40px; /* Fixed height */
}
.user-icon.with-image {
object-fit: cover;
background: none;
}
.user-button:hover .user-icon {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
.dropdown-content {
display: none;
position: absolute;
right: 0;
background-color: #fff;
min-width: 150px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
border-radius: 8px;
z-index: 1;
overflow: hidden;
transform: translateY(10px);
opacity: 0;
transition: all 0.3s ease;
}
.user-dropdown:hover .dropdown-content {
display: block;
opacity: 1;
transform: translateY(5px);
}
.dropdown-content a {
color: #333;
padding: 12px 16px;
text-decoration: none;
display: block;
transition: background-color 0.2s ease;
font-family: 'Nunito', sans-serif;
font-weight: 600;
font-size: 14px;
}
.dropdown-content a:hover {
background-color: #f5f5f5;
color: #000;
}
/* Add a subtle separator between menu items */
.dropdown-content a:not(:last-child) {
border-bottom: 1px solid #eee;
}
/* Footer structure */
footer {
font-size: 13px;
font-weight: 800;
font-family: 'Nunito', 'Arial Rounded MT Bold', sans-serif;
display: flex;
flex-direction: column; /* THIS IS KEY: Stacks children (p and ul) vertically */
align-items: flex-start; /* Aligns children to the left edge of the footer */
padding: 15px; /* Padding around the content inside the footer */
text-align: left; /* Default text alignment for content inside footer */
background: #000000; /* Assuming you want to keep the black background */
color: #fff; /* Assuming you want to keep the white text */
}
/* Copyright text styling */
footer p {
margin: 0 0 8px 0; /* No top/left/right margin, 8px bottom margin to create space before links */
width: 100%; /* Ensures paragraph takes full width available */
text-align: left; /* Ensures text within paragraph is left-aligned */
color: #fff;
}
/* Footer links styling (the UL element) */
.footer-links {
list-style: none; /* Removes bullet points */
padding: 0; /* Removes default UL padding */
margin: 0; /* Removes default UL margin, so it sits right below paragraph's bottom margin */
display: flex;
flex-direction: row; /* Stacks LI items vertically */
flex-wrap: wrap;
align-items: flex-start; /* Aligns LI items to the left */
width: 100%; /* Ensures UL takes full width available */
gap: 10px 15px; /* Adds 5px space between each link item (LI) */
}
/* Individual link items (LI) */
.footer-links li {
margin: 0; /* No extra margin on LIs if using 'gap' on the parent UL */
/*width: 100%; */ /* Ensures LI takes full width of its parent UL */
text-align: left; /* Ensures content (the tag) within LI is left-aligned */
}
/* Styling for the tags inside LIs */
.footer-links a {
color: #fff;
text-decoration: none;
font-size: 12px;
display: flex; /* Allows alignment of icon and text within the link */
align-items: center; /* Vertically centers icon and text if link has varying heights */
transition: color 0.2s ease;
}
.footer-links a:hover {
color: #A1C4FD;
text-decoration: none;
}
/* Icon styling within links */
.footer-links i {
margin-right: 5px;
font-size: 14px;
}
/* Mobile adjustments (ensure consistency or specific mobile styling) */
@media (max-width: 768px) {
footer {
padding: 10px; /* Slightly less padding on mobile */
}
footer p {
margin-bottom: 8px; /* Consistent bottom margin for copyright on mobile */
}
/* .footer-links, .footer-links li, and .footer-links a will inherit desktop styles
which are generally fine for mobile too in this layout. Adjust if needed. */
}
meme-detail-page
h1 {
font-size: 24px;
}
.logo {
font-size: 22px;
}
}
/* Banner Ad Styles */
#banner-ad {
width: 100%;
background: #000000;
text-align: center;
padding: 30px 0;
overflow: hidden;
max-height: 100px; /* initial height */
transition: max-height 0.3s ease;
}
/* Sticky header */
header {
position: sticky;
top: 0;
z-index: 2000;
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px;
}
/* Tags Section Styles */
#tags-section {
background: #333;
padding: 10px 20px;
color: #fff;
text-align: center;
}
/* Desktop: show one line by default, then expand on button click */
@media (min-width: 769px) {
.fa-arrow-left, .fa-arrow-right {
will-change: transform;
}
/* Make sure header is sticky on desktop */
header {
position: sticky;
top: 0;
}
/* Properly position the arrows in the center */
.header-center {
position: absolute;
left: 50%;
transform: translateX(-50%);
z-index: 10;
display: flex; /* Changed from none to flex */
align-items: center;
visibility: hidden;
opacity: 0;
}
/* Show arrows only on meme detail pages */
.meme-detail-page .header-center {
display: flex;
}
/* Show arrows on meme detail pages */
.meme-detail-page .header-center {
visibility: visible;
opacity: 1;
}
/* Completely hide mobile arrows on desktop */
.mobile-nav-arrows {
display: none !important;
}
.arrow-btn {
height: 38px; /* Match auth button height */
display: flex;
align-items: center;
}
main {
padding: 5px;
min-height: 80vh;
}
.user-icon {
width: 40px;
height: 40px;
}
#tags-wrapper {
display: flex;
flex-wrap: nowrap;
gap: 10px;
overflow: hidden;
white-space: nowrap;
transition: height 0.3s ease;
}
#tags-wrapper.expanded {
flex-wrap: wrap;
white-space: normal;
overflow: visible;
}
#more-tags-button {
display: block;
margin: 10px auto 0 auto;
background: #fff;
border: none;
color: #000;
padding: 5px 10px;
cursor: pointer;
border-radius: 5px;
text-transform: uppercase;
font-weight: bold;
}
/* Make tags sticky on meme detail pages */
.sticky-tags {
position: sticky;
top: 59px; /* Adjust this value to match your header/banner height */
z-index: 950;
}
.tag {
background: #555;
padding: 5px 10px;
border-radius: 3px;
white-space: nowrap;
}
.mobile-upload-icon {
display: none;
}
}
/* Mobile: horizontal scroll, no More Tags button */
@media (max-width: 768px) {
/* Keep header sticky on mobile */
header {
position: sticky;
top: 0;
}
/* Hide desktop arrows on mobile */
.header-center {
display: none !important;
}
/* Mobile nav arrows styles */
.mobile-nav-arrows {
position: fixed;
top: 13px; /* Match the header-right top position */
right: 11px;
opacity: 0; /* Change back to 0 so it's initially hidden */
visibility: visible; /* Change back to hidden if transition */
transform: translateY(0);
transition: opacity 0.2s ease, visibility 0.2s ease; /* Faster transition */
z-index: 2001;
}
.mobile-nav-arrows.visible {
opacity: 1 !important;
visibility: visible !important;
display: flex !important;
/* Add more specific position */
position: fixed;
top: 13px;
right: 10px;
z-index: 2500; /* Increase z-index to make sure it's above everything */
}
/* Ensure vertical alignment with auth buttons */
.mobile-nav-arrows .arrow-container {
display: flex;
border-radius: 8px;
overflow: hidden;
box-shadow: 3px 3px 0px rgba(0,0,0,0.8); /* Match auth buttons */
height: 29px; /* Match auth button height */
}
/* Fast transition for header-right */
.header-right {
transition: opacity 0.2s ease, visibility 0.2s ease; /* Faster transition */
}
.header-right.scrolled {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
/* Smaller arrow buttons on mobile */
.arrow-btn {
padding: 6px 10px;
font-size: 14px;
display: flex;
align-items: center;
justify-content: center;
height: 100%; /* Fill the container height */
}
.upload-btn {
display: none;
}
.mobile-upload-icon {
display: inline-block;
cursor: pointer;
font-size: 18px; /* Adjust size as needed */
color: #A1C4FD; /* Use your preferred color #337ab7*/
margin-right: 10px;
}
main {
padding: 0px;
min-height: 80vh;
}
.user-icon {
width: 30px;
height: 30px;
}
#tags-wrapper {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
}
#more-tags-button {
display: none;
}
.tag {
display: inline-block;
}
/* Make tags sticky on meme detail pages */
/* Make tags sticky on meme detail pages - Fixed to always be sticky */
.sticky-tags {
position: sticky;
padding: 2px;
top: 49px; /* Adjust this value to match your header/banner height */
z-index: 950;
font-size: 10px;
font-weight: 300;
}
/* Make ALL tags sections sticky on mobile */
#tags-section {
position: sticky;
top: 56px; /* Match the header height */
z-index: 950;
background: #333;
padding: 4px 3px;
color: #fff;
text-align: center;
overflow-x: hidden;
}
.tag {
background: #555;
padding: 4px 3px;
border-radius: 3px;
white-space: nowrap;
font-size: 10px;
font-weight: 300;
margin-left: 3px;
}
}
/* Fix for older browsers */
.logo span, .logo .highlight, footer span, footer .highlight {
-webkit-text-fill-color: transparent;
}
#tags-section a {
color: #fff;
text-decoration: none;
}
.meme-title {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.6);
color: #fff;
padding: 5px;
text-align: center;
font-size: 0.9em;
}
.hide-memes {
display: none;
}
/* Extracted block 2 from base.html */
/* Auth Buttons Styles */
.auth-btn {
display: inline-block;
vertical-align: middle;
font-family: 'Nunito', sans-serif;
font-weight: 800;
padding: 8px 16px;
border-radius: 8px;
border: none;
text-transform: uppercase;
font-size: 14px;
cursor: pointer;
/* Fixed position shadow with space reserved for the hover state */
box-shadow: 3px 3px 0px rgba(0,0,0,0.8);
transition: all 0.2s ease;
text-decoration: none;
color: #000;
/* Add margin to reserve space for shadow expansion */
margin-bottom: 2px;
margin-right: 2px;
/* Use transform instead of margin changes */
position: relative;
height: 38px;
}
.login-btn {
background: linear-gradient(90deg, #A1C4FD, #C2E9FB);
}
.signup-btn {
background: linear-gradient(90deg, #D4FC79, #96E6A1);
}
.auth-btn:hover {
transform: translateY(-2px);
box-shadow: 5px 5px 0px rgba(0,0,0,0.8);
text-decoration: none;
}
.auth-btn:active {
transform: translateY(1px);
box-shadow: 1px 1px 0px rgba(0,0,0,0.8);
}
/* Mobile Styles */
@media (max-width: 480px) {
.auth-buttons {
display: flex;
flex-direction: row; /* Force horizontal alignment */
justify-content: flex-end;
align-items: center;
gap: 6px; /* Space between buttons */
}
.auth-btn {
padding: 6px 10px; /* Reduced padding */
font-size: 12px; /* Smaller font size */
border-radius: 6px; /* Slightly smaller border radius */
box-shadow: 2px 2px 0px rgba(0,0,0,0.8); /* Smaller shadow */
/* Smaller margin compensation for mobile */
margin-bottom: 1px;
margin-right: 1px;
box-sizing: border-box;
height: 29px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
}
.auth-btn:hover {
box-shadow: 3px 3px 0px rgba(0,0,0,0.8); /* Smaller hover shadow */
}
}
/* Extracted block 3 from base.html */
/* Side Menu Styles */
#sideMenu {
position: fixed;
left: 0;
width: 300px;
background-color: #1a1a1a;
box-shadow: 4px 0 10px rgba(0, 0, 0, 0.3);
z-index: 1900;
overflow-y: auto;
color: #fff;
font-family: 'Nunito', sans-serif;
/* Only use transform for animation, not display property */
transform: translateX(-100%);
transition: transform 0.3s ease;
/* Always visible in the DOM but off-screen */
visibility: hidden;
}
@media (min-width: 480px) {
#sideMenu {
top: 60px; /* Adjust if your header height is different */
height: calc(100% - 60px);
}
}
@media (max-width: 479px) {
#sideMenu {
top: 56px; /* Adjust if your header height is different */
height: calc(100% - 56px);
}
}
#sideMenu.active {
transform: translateX(0);
visibility: visible;
}
.menu-header {
padding: 20px 15px;
background: #000;
text-align: center;
border-bottom: 2px solid #333;
}
.menu-header .logo {
font-family: 'Nunito', 'Arial Rounded MT Bold', sans-serif;
font-size: 26px;
font-weight: 800;
}
.menu-header .logo .normal {
background: linear-gradient(90deg, #A1C4FD, #C2E9FB);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
.menu-header .logo .highlight {
background: linear-gradient(90deg, #D4FC79, #96E6A1);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
#sideMenu ul {
list-style: none;
padding: 10px 0;
margin: 0;
}
.menu-divider {
height: 1px;
background: #333;
margin: 10px 20px;
}
#sideMenu li:not(.menu-divider) {
margin: 0;
transition: background-color 0.2s ease;
}
#sideMenu li:not(.menu-divider):hover {
background-color: #333;
}
#sideMenu a {
display: flex;
align-items: center;
text-decoration: none;
color: #fff;
font-size: 16px;
font-weight: 600;
padding: 15px 20px;
transition: color 0.2s ease;
}
#sideMenu a:hover {
color: #A1C4FD;
text-decoration: none;
}
#sideMenu a i {
width: 24px;
margin-right: 15px;
text-align: center;
font-size: 18px;
}
.menu-footer {
padding: 15px 20px;
border-top: 1px solid #333;
font-size: 12px;
color: #999;
text-align: center;
position: absolute;
bottom: 0;
width: 100%;
background: #151515;
}
/* Updated Hamburger Button Styles */
.hamburger-btn {
background: transparent;
border: none;
cursor: pointer;
color: #A1C4FD;
transition: transform 0.3s ease, color 0.3s ease;
padding: 0;
z-index: 1001; /* Make sure it's above the menu */
/* Fixed width and height to prevent layout shift */
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
}
.hamburger-btn i {
/* Fixed font size */
font-size: 24px;
/* Center the icon within the fixed-width container */
display: flex;
align-items: center;
justify-content: center;
width: 24px; /* Ensure the icon itself has a fixed width */
height: 24px; /* Ensure the icon itself has a fixed height */
}
.hamburger-btn:hover {
transform: scale(1.1);
color: #D4FC79;
}
/* Ensure minimum width on mobile */
@media (max-width: 768px) {
#sideMenu {
width: 280px;
}
#sideMenu a {
font-size: 15px;
padding: 12px 20px;
}
.menu-header .logo {
font-size: 22px;
}
.hamburger-btn {
width: 36px;
height: 36px;
}
.hamburger-btn i {
font-size: 20px;
width: 20px;
height: 20px;
}
/* HIDING LOGIN AND SIGNUP ON MEME */
.meme-detail-page .header-right {
/* display: none; */
}
}
/* Extracted block 4 from base.html */
/* Improved sidebar search styles */
#sideMenu li.search-item {
padding: 0;
margin: 0;
}
#sideMenu li.search-item:hover {
background-color: transparent;
}
#sideMenu .sidebar-search-form {
padding: 5px 20px 15px;
background-color: #1a1a1a;
}
#sideMenu .sidebar-search-form form {
display: flex;
width: 100%;
box-shadow: 3px 3px 0px rgba(0,0,0,0.3);
border-radius: 6px;
overflow: hidden;
}
#sideMenu .sidebar-search-form input {
flex: 1;
padding: 10px 12px;
border: none;
background: #333;
color: #fff;
font-family: 'Nunito', sans-serif;
font-size: 14px;
outline: none;
}
#sideMenu .sidebar-search-form input::placeholder {
color: #aaa;
}
#sideMenu .sidebar-search-form button {
padding: 0 15px;
border: none;
background: linear-gradient(90deg, #A1C4FD, #C2E9FB);
color: #000;
font-family: 'Nunito', sans-serif;
font-weight: 800;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
#sideMenu .sidebar-search-form button:hover {
background: linear-gradient(90deg, #D4FC79, #96E6A1);
}
/* Extracted block 5 from base.html */
/* Desktop search box styles */
.desktop-search-box {
display: none; /* Initially hidden, will be shown with media query */
margin-left: 15px;
position: relative;
}
.desktop-search-box form {
display: flex;
height: 38px; /* Match the height of other buttons */
}
.desktop-search-box input {
padding: 8px 12px;
border-radius: 8px 0 0 8px;
border: none;
font-family: 'Nunito', sans-serif;
font-size: 14px;
width: 180px;
box-shadow: 3px 3px 0 rgba(0,0,0,0.8);
position: relative;
z-index: 1;
}
.desktop-search-box button {
padding: 8px 12px;
border-radius: 0 8px 8px 0;
border: none;
background: linear-gradient(90deg, #A1C4FD, #C2E9FB);
color: #000;
font-family: 'Nunito', sans-serif;
font-weight: 800;
cursor: pointer;
box-shadow: 3px 3px 0 rgba(0,0,0,0.8);
position: relative;
z-index: 1;
}
/* Only show desktop search on larger screens */
@media (min-width: 769px) {
.desktop-search-box {
display: flex;
}
}
/* Adjust on smaller screens */
@media (max-width: 1024px) {
.desktop-search-box input {
width: 150px;
}
}