Easter Eggs!

 

Well done! Easter Egg One of Five: Web Code

(Can you find the other four easter eggs on this site?)

 
 

This website was built with Squarespace, Vimeo, Streamable, Sketchfab, and mountains of patience (I'm an artist, not a web dev). That said, I'm no stranger to HTML and CSS. Here's a bit of custom CSS I had to hack into Squarespace to get things working like I wanted.

 
// ------Desktop customizations------

// Set width of project description
.collection-type-project .project-slide-description-text {
  max-width: 90%; }

// Set project spacing
.project-slide-description-wrapper.slide-in.already-animated {
  margin-top: 14vw;
  margin-bottom: 14vw; }

// Fix index page video cropping issue 
.index-item-image-alignment-center, .index-item-image-crop, .index-item-image-wrapper.content-fill {
  width: 100%;
  height: auto; }

// Hide title on first index thumb
#index-section-showreel .index-item-title .index-item-title-text {
  opacity: 0; }

// Fix video caption line height
.video-caption {
  line-height: 1.8em; }

// ------Mobile optimizations------

// Show index titles on mobile
 @media only screen and (max-width: 768px) {
  .index-item-title-display-on-hover .index-item-text-wrapper {
    opacity: 100; } }

 // Hide hamburger menu then...
 .mobile-bar-wrapper {
   display: none !important; }
 
// ...show desktop nav on mobile
 @media only screen and (max-width: 768px) {
 #header, #headerNav, .primary-nav-wrapper nav {
 font-size: .9em;
 display: flex !important; } }

// Add padding to mobile nav
 @media only screen and (max-width: 768px) {
 .nav-item {
 padding: 10px; } }

// Add padding, change size of mobile site title
 @media only screen and (max-width: 768px) {
 .site-title {
  padding: 10px;
  font-size: 1em; } }

// Fix margin of mobile nav
 @media only screen and (max-width: 768px) {
[data-nc-container="right"] [data-nc-element] {
    margin-left: 0px; } }