site2023_css

main.css

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400&family=Space+Mono:wght@400&display=swap');

/* Global styles for elegance and minimalism */
/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400&family=Space+Mono:wght@400&display=swap');

/* Reset styles for body and html */
body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: auto; /* Changed from 100% to auto */
    overflow: auto; /* Hide scrollbars */
}
:root {
    --luminous-lime: #a8e622; /* Electric and vibrant */
    --groovy-gold: #ffcc00; /* Shimmering and retro */
    --optimistic-orange: #ff9505; /* Energetic and punchy */
    --radiant-red: #ff2d55; /* Bold and strong */
    --psychedelic-pink: #e91e63; /* Playful and eye-catching */
    --vivid-violet: #af52de; /* Deep and expressive */
    --vibrant-turquoise: #33cabb; /* Bright and full of life */
    --bold-blue: #007aff; /* Confident and grounding */
    --soft-black: #030303; 
    --cream: #f7f2dd; 
}
  
/* Style for p5.js canvas */
canvas {
    position: fixed; /* Fixed position to cover the entire viewport */
    top: 0;
    left: 0;
    width: 100vw; /* Set width to viewport width */
    height: 100vh; /* Set height to viewport height */
    z-index: -1; /* Sit behind other content */
}

/* Global styles */
body {
    font-family: 'Space Mono', monospace; /* Default font */
    color: --soft-black /* Soft black for text */
    line-height: 1.6; /* Line height for readability */
    box-sizing: border-box;
}

/* Global link styles to remove underlines and add hover effects */
a {
    text-decoration: none; /* Removes underlines from all links */
    color: inherit; /* Links use the current text color */
    
}

p {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem; /* Standard size */
    line-height: 1.6; /* Optimal for readability */
    color: var(--soft-black); /* Consistent text color */
    margin-bottom: 20px; /* Space between paragraphs */
    max-width: 800px; /* Control line length for easier reading */
    margin-left: auto;
    margin-right: auto;
    text-align: left; /* Justify text for a clean look, or 'left' for a more traditional layout */
}


/* Main content styles for generosity and openness */
.container {
    display: flex; /* Use flexbox for layout */
    height: 100vh; /* Full viewport height */
}

/* Sidebar navigation styles for elegance and smooth transitions */
/* Sidebar navigation styles for elegance and smooth transitions */
.sidebar {
    /* ... existing styles ... */
    display: flex; /* Enable flex container */
    flex-direction: column; /* Stack children vertically */
    justify-content: flex-start; /* Align to the top */]

}

/*

/* Name style to make it pop */
/* Name style to make it pop */
.sidebar .name {
    font-family: 'Space Mono', monospace; /* Space Mono for name */
    color:var(--cream); /* Soft black for name */
    font-size: 2rem; /* Adjusted font size for headline */
    font-weight: 400; /* Bold for name */
    text-align: left; /* Align name to the left */
    padding: 0.5rem 1rem; /* Padding to match the navigation links */
    margin-bottom: 1rem; /* Reduced margin below name for tighter spacing */
    display: block; /* Block display for name */
    border-bottom: none; /* No underline */
    /* text-transform: uppercase; */
}

.sidebar .name a {
    color: white; /* Set the name link to white */
    white-space: nowrap; /* Prevent line wrapping */
    /* ... other styles for the name link ... */
    text-decoration: none;
}
/* Navigation list style */
/* Navigation list style */
.sidebar .navigation {
    list-style-type: none; /* No bullet points */
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    height: 100%; /* Full height of the sidebar */
}

/* Navigation item style */
.sidebar .navigation li {
    flex-grow: 1; /* Distribute space evenly */
    display: flex; /* To align the anchor tags properly */
    margin: 0; /* Remove margin */
}


/* Define background colors for each navigation link */
.sidebar .navigation li:nth-child(1) a { background-color: var(--luminous-lime); }
.sidebar .navigation li:nth-child(2) a { background-color: var(--groovy-gold); }
.sidebar .navigation li:nth-child(3) a { background-color: var(--optimistic-orange); }
.sidebar .navigation li:nth-child(4) a { background-color: var(--radiant-red); }
.sidebar .navigation li:nth-child(5) a { background-color: var(--psychedelic-pink); }
.sidebar .navigation li:nth-child(6) a { background-color: var(--vivid-violet); }
.sidebar .navigation li:nth-child(7) a { background-color: var(--vibrant-turquoise); }
.sidebar .navigation li:nth-child(8) a { background-color: var(--bold-blue); }


/* Navigation link style */
.sidebar .navigation a {
    color: var(--soft-black); /* Text color */
    font-size: 1rem; /* Text size */
    font-family: 'Space Grotesk', sans-serif; /* Font family for navigation links */
    font-weight: 400; /* Font weight for navigation links */
    padding: 1rem; /* Padding for links */
    display: flex; /* Use flex to center align the text vertically */
    align-items: center; /* Center text vertically */
    justify-content: center; /* Center text horizontally */
    width: 100%; /* Ensure it fills the parent li width */
    transition: transform 0.3s, opacity 0.3s; /* Smooth transitions for hover effects */
}

/* Hover effect for navigation links */
.sidebar .navigation a:hover {
    transform: none; /* No scaling to keep the layout stable */
    opacity: 0.8; /* Slightly lower opacity on hover for a subtle effect */
    text-decoration: none;
}

/* Styles specific to subpages */
body.subpage {
    background-color: var(--soft-black); /* The desired background color for subpages */
    /* Other styles specific to subpages */
}

/* If you're using a container div instead of body */
.container.subpage {
    background-color: var(--soft-black); /* The desired background color for subpages */
    /* Other styles specific to subpages */
}

/* Main content area next to the sidebar */
.content {
    flex-grow: 1; /* Takes up the remaining space */
    padding: 20px;
    overflow-y: auto; /* Scroll for overflowing content */
   // background-color: rgba(255, 255, 255, 0.85); /* Slightly transparent background */
}
/* ... other styles and responsive styles ... */
.hero {
    text-align: center;
    padding: 50px;
    /* Add background image or color if desired */
}
/* Project Thumbnails Styling */

.project-thumbnails {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Adjust min and max sizes as needed */
    gap: 40px;
    padding: 20px;
}

.project {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}


.project img {
    width: 100%;
    height: 100%;
    height: auto;
    object-fit: cover; /* Adjust if needed */
    transition: transform 0.5s ease; /* Smooth transition for any hover effects*/ 
    top: 0;
    left: 0;
    object-fit: cover;
}

.project:hover img{
    transform: scale(1.05);
}

.project h2 {
    color: var(--groovy-gold);
    margin-top: 10px; /* Reduce space above the title */
    margin-bottom: 5px; /* Reduce space below the title */
    /* Additional styling for the title */
    font-size: 1.5rem;
}
.project p {    
    margin-top: 0; /* Remove space above the paragraph */
    margin-bottom: 10px; /* Space below the paragraph, adjust as needed */
    /* Additional styling for the paragraph */
    line-height: 1.5; /* Example line height, adjust as needed */
    text-align: left;
    font-size: .9rem;
    width: 100;
    padding: 5px;
}

/* Headlines and Subheadlines Styles */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Space Mono', monospace; /* Specific font for headlines */
    color: var(--cream);
    /* ... additional styling for headlines ... */
}

/* Paragraph Styles */
p {
    font-family: 'Space Grotesk', sans-serif; /* Specific font for paragraphs */
    /* ... additional styling for paragraphs ... */
    color: var(--cream); /* Paragraphs color */
}
/* Link Styles */
a {
    color: var(--groovy-gold); /* Set link color to groovy gold */
    text-decoration: none; /* Remove underline from links */
}
a:hover, a:focus {
    text-decoration: underline; /* or other styles to indicate the link is interactive */
    color:  var(--optimistic-orange); 
}

/* styling for art pages */ 

.project-media video {
    width: 100%;
    max-width: 800px; /* Maximum video width; adjust as needed */
    height: auto;
    display: block;
    margin: 0 auto; /* Center the video */
}

.image-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Adjust min size for responsiveness */
    gap: 20px; /* Spacing between images */
    padding: 20px;
}

css

.project-media {
    /* Styles for the media section */
    margin-top: 20px;
}

.image-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Creates a responsive grid */
    gap: 20px; /* Space between images */
    padding: 20px; /* Padding around the gallery */
}

.image-gallery img {
    width: 100%;
    height: auto;
    object-fit: cover; /* Ensures images cover their area, adjust as needed */
    border: 1px solid #ccc; /* Optional, for styling */
    transition: transform 0.3s ease; /* Optional, for a hover effect */
}

.image-gallery img:hover {
    transform: scale(1.05); /* Optional, enlarges image on hover */
}
.image-gallery img:hover {
    transform: scale(1.05); /* Slightly enlarge images on hover */
}

.project-media {
    margin-top: 30px; /* Space above the media section */
    margin-bottom: 30px; /* Space below the media section */
}
.project-header {
    text-align: center; /* Center-align the header */
    margin-bottom: 30px; /* Space below the header */
}

.project-header h1 {
    font-family: 'Space Mono', monospace; /* Consistent with your font choice */
    font-size: 2.5rem; /* Large, eye-catching size */
    color: var(--bold-blue); /* A color that stands out, adjust as needed */
    margin-bottom: 10px; /* Space between the title and the subtitle/tagline */
}

.project-header p {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.2rem; /* Slightly larger than normal text */
    color: var(--cream); /* Readable color */
    max-width: 600px; /* Optimal line length for reading */
    margin-left: auto; /* Center the paragraph */
    margin-right: auto;
}
/*lightbox */ 

/* Style the scrollbar track */
::-webkit-scrollbar {
    width: 10px; /* width of the entire scrollbar */
}

/* Style the scrollbar handle */
::-webkit-scrollbar-thumb {
    background: #cccccc; /* color of the scroll thumb */
    border-radius: 5px; /* roundness of the scroll thumb */
}

/* Handle the hover effect for the scrollbar handle */
::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8; /* color of the scroll thumb when hovered */
}

@media (max-width: 768px) { 
    /* Styles for tablet screens */
    .sidebar {
        max-width: 40%; /* Allow the sidebar to be a bit wider on tablets */
    }

    /* ... additional responsive styles for tablet ... */
    .project-thumbnails {
        grid-template-columns: repeat(2, 1fr); /* 2 items in a row for smaller screens */
    }
}

@media (max-width: 480px) {
    /* Styles for mobile screens */
    .container {
        flex-direction: column; /* Stack sidebar and content on mobile */
    }

    .sidebar {
        max-width: 100%; /* Sidebar takes full width on mobile */
        padding: 10px; /* Reduced padding on mobile */
        margin-bottom: 1rem; /* Space between sidebar and content */
    }

    .sidebar .navigation li:hover {
        transform: none; /* Disable movement on */}
    
    .project-thumbnails {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
}