/* General Page Updates */ body{ margin: 0; -webkit-font-smoothing: subpixel-antialiased; -webkit-font-smoothing: antialiased; color: var(--content); /* fixes light font display in safari */ background-color: var(--page); } .banner { max-width: 800px; margin: 0 auto; font-family: var(--annotationFont); padding: 0.5rem 1rem; display: flex; flex-direction: row; align-items: center; gap: 0.5rem; justify-content: center; z-index: 50; } a, a:visited{ color: var(--content) } :focus { outline: 0; box-shadow: var(--focus) !important; } pre { white-space: pre-wrap; overflow-y: auto; max-height: 75vh; } blockquote{ font-family: var(--annotationFont); font-style: italic; color: var(--tertiary); } .dark img{ mix-blend-mode: hard-light; } .dark .intro-container img{ mix-blend-mode: normal !important; } /* Changes the style of everything at the top of the homepage */ .intro{ min-height: 300px; background: var(--introGradient); display: flex; align-items: center; } .intro-container{ display: flex; justify-content: center; align-items: center; display: flex; flex-direction: row; max-width: 800px; margin: 0 auto; flex-wrap: wrap; } @media(max-width: 730px){ .introImage{ max-width: 310px; margin-bottom: 25px; } .intro-container{ margin-bottom: 25px; } } @media(min-width: 730px){ .introImage{ max-width: 310px; margin-right: 50px; } .intro-container{ margin-bottom: 0px; } } .intro-content{ max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; } /* .intro-welcome h1{ font-family: 'Quicksand'; font-weight: 700; font-size: 56px; margin: 1.5rem 0; } */ .small-title{ font-size: 28px; font-family: 'Quicksand'; font-weight: 500; margin: 0; line-height: 1; padding-left: 39px; transform: translateY(20px) } .name{ font-size: 36px; font-family: var(--titleFont); font-weight: 900; color: var(--content); margin: 0 0 30px 0; line-height: 1 } .intro-sub{ max-width: 350px; text-align: center; font-family: var(--bodyFont); font-size: 14px; } .intro-sub p{ margin: 0 } .fa-heart{ color: var(--accent); } .intro-more{ display: flex; flex-direction: column; align-items: center; font-family: var(--bodyFont); font-size: 12px; margin-top: 30px; margin-bottom: 10px; } .intro-more p{ margin: 0.25rem 0; } .intro-more button{ font-family: var(--titleFont); font-weight: 700; font-size: 16px; text-transform: capitalize; background-color: transparent; background-repeat: no-repeat; border: none; cursor: pointer; overflow: hidden; outline: 0; } .intro-buttons{ display: flex; flex-direction: row; align-items: baseline; margin-top: 10px; } .social-button, .social-button:hover, .social-button:visited{ color: var(--accent); margin: 0; padding: 2px 5px; transition: var(--fastFade); font-size: 16px; text-decoration: none; cursor: pointer } .social-button:hover{ color: var(--content); } /* Changes the style of the filtering options above the portfolio on the homepage */ .portfolio{ display: block; position: relative; background-color: var(--page); } .portfolio__filters{ position: -webkit-sticky; /* Safari */ position: sticky; top: 0; z-index: 10; display: flex; justify-content: center; align-items: center; height: 50px; background-color: var(--elevation); box-shadow: var(--mainShadow); } .filters__content{ width: 800px; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; padding: 0 0.5rem } .filters-category select{ cursor: pointer; width: 160px; height: 2rem; font-size: 14px; line-height: 1.7; background-color: var(--elevationHover); font-family: var(--bodyFont); font-weight: 700; padding: 0 5px; margin-right: 50px; color: var(--accent); box-shadow: var(--mainShadow); outline: 0; border: 0; transition: var(--fastFade); } .filters-category select:hover{ background-color: var(--accent); box-shadow: var(--shadowHover); color: var(--elevation); transition: var(--fastFade); } .filters-tags{ display: flex; flex-direction: row; align-items: baseline; } .filters-click{ display: flex; flex-direction: row; align-items: center; cursor: pointer; background-color: transparent; border: none; height: 32px; padding: 5px; border-radius: var(--radius); outline: 0; color: var(--accent); } .filters-click:hover{ color: var(--content); } .tags-meta{ font-size: 16px; margin: 0 10px 0 0; font-family: var(--bodyFont); } .filters-tags i{ color: var(--accent) } .theme-toggle{ margin-left: auto; color: var(--accent); background-color: transparent; border: none; height: 32px; border-radius: var(--radius); cursor: pointer; transition: var(--fastFade); } .theme-toggle:hover span{ color: var(--content); transition: var(--fastFade); } .theme-toggle .inline-svg{ width: 2em; } .filters-drawer{ background-color: var(--drawer); position: -webkit-sticky; /* Safari */ position: sticky; top: 50px; z-index: 5; height: 0; overflow: hidden; transition: var(--fastFade); } .filters-drawer.visible{ height: 50px; transition: none; } .drawer-contents{ max-width: 800px; margin: 10px auto 0 auto; position: relative; } .drawer-tags::-webkit-scrollbar { width: 10px; height: 10px; } .drawer-tags::-webkit-scrollbar-track{ background-color: var(--drawer); } .drawer-tags::-webkit-scrollbar-thumb{ background-color: var(--elevationHover); } .drawer-gradient{ position: absolute; width: 100%; height: 28px; background: var(--drawerGradient); pointer-events: none; } .drawer-tags{ display: flex; flex-direction: row; flex-wrap: nowrap; overflow: auto; /* -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; */ } .drawer-tags::before, .drawer-tags::after{ content: ' '; min-width: 15px; } ::-webkit-scrollbar { width: 12px; height: 12px; z-index: 1000;} ::-webkit-scrollbar-track { background-color: var(--elevation); } ::-webkit-scrollbar-thumb { background-color: var(--content); border-radius: 6px; border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background-color: var(--accent); } ::-webkit-scrollbar-thumb:active { background-color: var(--accent); } /* .drawer-tag::-webkit-scrollbar-track { background-color: red; } */ /* .filters-drawer.visible .drawer-contents{ height: 50px; } */ .drawer-contents p{ margin-right: 5px; } .filters-selected{ display: flex; flex-direction: row; margin-left: 10px; mouse-events: none; align-items: center; } .tag-selected{ margin-right: 5px; border: none; background: transparent; } .tag-selected i{ margin-left: 5px; } @media(min-width: 550px){ .tag-selected{ display: flex; } } @media(max-width: 550px){ .tag-selected{ display: none !important; } } .portfolio__grid-empty{ height: 300px; max-width: 350px; margin: 0 auto; overflow: hidden; } .portfolio__grid-empty p{ font-family: var(--bodyFont); text-align: center; } .portfolio__grid-empty.is-hidden{ height: 0px; } .portfolio__grid-full{ height: 75px; max-width: 220px; margin: 0 auto; overflow: hidden; position: absolute; z-index: 10; left: 50%; top: 10%; transform: translate(-50%, 0); background-color: var(--elevationHover); padding: 1rem 3rem; opacity: 0.98; border-radius: var(--radius); box-shadow: var(--mainShadowHover); display: flex; align-items: center; justify-content: center; transition: opacity var(--fastFade); pointer-events: none; } .portfolio__grid-full p{ font-family: var(--bodyFont); font-size: 14px; text-align: center; } .portfolio__grid-full.is-hidden{ opacity: 0; transition: var(--fastFade); } /* Changes the styling of the portfolio items */ .portfolio__contents{ padding: 0.5rem; } .portfolio__grid{ max-width: 800px; margin: 30px auto 0 auto; } .item{ display: flex; flex-direction: column; justify-content: flex-end; /* box-shadow: 0 40px 80px -40px rgba(0,0,0,1); */ /* box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.15); */ box-shadow: var(--mainShadow); /* border: 1px solid #E0E0E0; */ cursor: pointer; border-radius: var(--radius); transform: translateY(15px); transition: transform var(--fastFade); background-color: var(--elevation); } .item.hidden{ display: none; } .item a{ text-decoration: none !important; transition: var(--slowFade); } .item .item__link:hover{ box-shadow: var(--mainShadowHover); background-color: var(--elevationHover); transition: var(--slowFade); border-radius: var(--radius); } .item .item__link:focus{ box-shadow: var(--mainShadowHover); background-color: var(--elevationHover); transition: var(--slowFade); border-radius: var(--radius); } .item[data-macy-complete="1"] { transform: translateY(0); transition: top var(--slowFade),left var(--slowFade),transform var(--slowFade); } .item__details { z-index: 1; padding: 15px; /* letter-spacing: 1px; */ border-radius: 0 0 var(--radius) var(--radius); } .item__image { position: relative; width: 100%; object-fit: cover; border-radius: var(--radius) var(--radius) 0 0; /* filter: grayscale(100%) sepia(1) contrast(100%) hue-rotate(307deg); -webkit-filter: grayscale(100%) contrast(100%) sepia(1) hue-rotate(307deg); */ } .post__image-credit{ font-family: var(--bodyFont); font-size: 10px; color: var(--tertiary); margin: 5px 0; font-style: italic; } .details__title{ font-family: var(--titleFont); font-size: 20px; font-weight: 700; line-height: 25px; } .details__title h4{ margin: 0; } .item__link:hover .details__title h4{ text-decoration: underline; } .item__link:focus .details__title h4{ text-decoration: underline; } .details__date{ font-family: var(--annotationFont); font-size: 12px; font-weight: 300; color: var(--tertiary); margin-top: 5px; line-height: 20px; } .details__date p{ margin: 0; } .details__desc p{ font-family: var(--bodyFont); font-size: 14px; font-weight: 400; margin: 10px 0 0 0; line-height: 20px; } .item__meta{ margin-top: 20px; } .item__meta-category{ font-family: var(--bodyFont); font-size: 12px; color: var(--accent); text-transform: uppercase; margin: 0 0 5px 0; letter-spacing: 0.1em; line-height: 20px; } .item__meta-category.single{ font-size: 16px; } .item__meta-tag{ display: flex; flex-direction: row; align-items:center; font-family: var(--bodyFont); font-size: 12px; font-weight: bold; padding: 3px 8px; border-radius: var(--radius); background-color: var(--elevationHover); color: var(--accent); box-shadow: var(--shadow); transition: var(--fastFade); margin: 2px 5px 2px 0; cursor: pointer; border: none; flex: 0 0 auto; } .item__meta-tag[hidden]{ display: none; } .tag-text{ margin: 0 5px 0 0; } .item__meta-tag:hover{ background-color: var(--accent); color: var(--elevationHover); transition: var(--fastFade); } .item__meta-tag.is-active{ background-color: var(--white); color: var(--grayDark); } .item__meta-link{ padding: 3px 8px; font-size: 16px; color: var(--accent); font-family: var(--bodyFont); background-color: var(--elevationHover); border: none; box-shadow: var(--mainShadow); border-radius: var(--radius); align-self: center; transition: var(--fastFade); margin: 0 5px 20px 0; cursor: pointer; } .item__meta-link:hover{ color: var(--elevationHover); background-color: var(--accent); box-shadow: var(--shadowHover); transition: var(--fastFade); } .card-tag{ font-family: var(--bodyFont); color: var(--accent); font-size: 12px; } /* Single Page Styling */ .post-background{ background-color: var(--page); height: calc(100vh - 50px); width: 100%; position: fixed; z-index: 0; display: flex; flex-direction: column; } .post-gradient{ background: var(--introGradient); height: 300px; position: absolute; width: 100%; z-index: 0; } .container-toTop{ z-index: 10; height: 75% } .toTop-spacing{ max-width: 800px; margin: 0 auto; z-index: 10; display: flex; flex-direction: row; justify-content: flex-end; bottom: 0; height: 100%; padding: 0 0.5rem; } .toTop{ flex-grow: 1; color: var(--accent); z-index: 10; font-size: 12px; text-align: right; max-height: 20px; align-self: flex-end; opacity: 1; transition: var(--fastFade); } .toTop:visited{ color: var(--accent); } .toTop:hover{ color: var(--content); transition: var(--fastFade); } .toTop.is-hidden{ opacity: 0; transition: var(--fastFade); pointer-events: none; } .toTop-hidden{ height: 5px; min-width: 10px; flex-grow: 1; } .article{ max-width: 720px; margin: 0 auto 200px auto; background-color: var(--elevation); border-radius: var(--radius); box-sizing: border-box; box-shadow: var(--mainShadowHover); z-index: 5; position: relative; top: 80px; overflow: hidden; } .article img{ max-width: 100%; } @media(min-width: 730px){ .article{ padding: 40px 55px; } } @media(max-width: 730px){ .article{ padding: 40px 25px; } } twitter-widget{ margin: 0 auto; } .post__image{ width: 100%; height: 300px; overflow: hidden; object-fit: cover; } .post__title{ font-family: var(--titleFont); font-weight: 400; font-size: 40px; margin: 0 0 25px 0; line-height: 1; letter-spacing: 0.02em; padding-top: 10px; } .post__links{ display: flex; flex-direction: row; align-items: center; margin-bottom: 10px; } .post__links a{ text-decoration: none; } .post__tags{ display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; } .post__tags-meta{ color: var(--tertiary); margin: 0 10px 0 0; font-family: var(--annotationFont); font-size: 14px; } .post__desc{ font-family: var(--titleFont); font-weight: 400; font-size: 18px; margin: 0; } .post__credentials{ font-family: var(--bodyFont); font-size: 14px; display: flex; flex-direction: row; justify-content: space-between; margin-top: 2.25rem; } .post__credentials p{ margin: 0; } hr{ background-color: #DDD; border: 0; height: 1px; margin: 0.25rem 0; } .post__buttons{ font-family: var(--titleFont); font-weight: 700; font-size: 16px; margin: 1.5rem 0 1.5rem 0; } .post__date{ font-family: var(--annotationFont); font-size: 14px; color: var(--tertiary) } .post__buttons a{ padding: 0.75rem 1rem; /* border: 1px solid #000; */ border: 1px solid #516fd4; border-radius: var(--radius); text-decoration: none; margin-right: 1rem; color: #516fd4; transition: var(--fastFade); } .post__buttons a:hover{ background-color : #516fd4; color: #FFF; transition: var(--fastFade); } .post__content{ margin-top: 40px; font-family: var(--bodyFont); } .post__content p{ font-size: 16px; letter-spacing: 0.02em; font-weight: 400; line-height: 1.5; } .caption{ font-family: var(--annotationFont); font-size: 14px; color: var(--tertiary) } .post__authors{ display: flex; flex-direction: row; margin: 50px 0 20px 0; } .post__author{ display: flex; flex-direction: row; margin-right: 20px; } .post__authors a{ text-decoration: none; } .post__author-social{ display: flex; flex-direction: column; } .post__author-img{ width: 40px; height: 40px; border-radius: 25px; margin-right: 10px; } .post__author-name{ font-family: var(--bodyFont); font-size: 14px; color: var(--content) } .post__author-twitter, .post__author-website{ font-family: var(--bodyFont); font-size: 12px; color: var(--tertiary); display: flex; flex-direction: row; align-items: flex-end; } .post__author-twitter span{ margin-right: 2px; } code{ background-color: var(--codeBG); padding: 2px 5px; color: var(--codeFont); } /* Simple Nav Styling */ .nav__simple{ height: 50px; width: 98%; display: flex; align-items: center; justify-content: flex-start; background-color: transparent; z-index: 5; padding: 0 0.5rem; } .nav__content{ width: 800px; margin: 0 auto; display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: 0 0.5rem; } .goHome{ flex: 1; display: flex; align-items: center; color: var(--accent); margin-right: auto; transition: var(--fastFade); } .goHome a{ text-decoration: none; color: var(--accent); transition: var(--fastFade); margin: 0 5px; display: flex; border-radius: var(--radius); padding: 5px; height: 22px; line-height: 22px; } .goHome svg{ width: 12px; height: 12px; } .goHome a:hover span{ color: var(--content); transition: var(--fastFade); } /* .goHome:hover a{ color: var(--elevationHover); transition: var(--fastFade); } */ .toggle-container{ flex: 1; } .nav__simple .theme-toggle{ display: flex; justify-content: flex-end; align-items: center; padding: 0 0 0 5px; width: auto; } .single-toggle{ margin-left: 5px; color: var(--accent); transition: var(--fastFade); cursor: pointer; } .single-toggle:hover{ color: var(--content); transition: var(--fastFade); } .nav__title{ font-family: var(--titleFont); font-size: 16px; color: var(--accent); align-self: center; font-weight: bold; margin: 0 auto; flex: 1; text-align: center; } .scroll-text{ font-family: var(--bodyFont); font-size: 11px; color: var(--accent); opacity: 1; transition: var(--fastFade); } .scroll-text.is-hidden{ opacity: 0; transition: var(--fastFade); } /* Footer */ footer{ display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--bodyFont); padding-bottom: 20px; } .footer__home{ background-color: var(--page); min-height: 50px; } .footer__single{ position: fixed; align-self: flex-end; bottom: 0; width: 100%; background-color: var(--page) } .footer__content{ max-width: 600px; margin: 0 auto; } .footer-more{ margin-top: 10px; } .footer-more a{ color: var(--accent); margin: 5px; font-size: 14px; text-decoration: none; } .footer-more a:hover{ color: var(--content); text-decoration: underline; } .credits{ font-size: 12px; margin-top: 20px; } .credits p{ margin: 0; text-align: center; } .credits-location{ padding-bottom: 5px; } .credits-people{ padding-bottom: 10px; } .credits-people a{ text-decoration: none; font-weight: bold; } .credits-people a:hover{ text-decoration: underline; } /* Disqus */ .disqus{ display: flex; align-items: center; flex-direction: column; } .disqus-show{ padding: 3px 8px; font-size: 16px; color: var(--accent); font-family: var(--bodyFont); background-color: var(--elevationHover); border: none; box-shadow: var(--mainShadow); border-radius: var(--radius); align-self: center; transition: var(--fastFade); margin-bottom: 15px; cursor: pointer; } .disqus-show svg{ height: 1em; width: 1em; } .disqus-show:hover{ color: var(--elevationHover); background-color: var(--accent); box-shadow: var(--shadowHover); transition: var(--fastFade); } .disqus-comments{ max-height: 600px; width: 100%; overflow: scroll; transition: var(--fastFade); } .disqus-comments.hidden{ max-height: 0; transition: var(--fastFade); } /* Contact */ .contact-form{ max-width: 500px; display: flex; flex-direction: column; margin: 0 auto; } .contact-form-wrap{ display: flex; flex-direction: row; flex-wrap: wrap; font-family: var(--bodyFont); } @media(max-width: 550px){ .contact-form-wrap .contact-name, .contact-email{ width: 100%; background-color: var(--elevationHover); border:1px solid var(--accent); color: var(--accent); padding: 10px 15px; border-radius: var(--radius); } } @media(min-width: 550px){ .contact-form-wrap .contact-name, .contact-email{ width: 42%; background-color: var(--elevationHover); border:1px solid var(--accent); color: var(--accent); padding: 10px 15px; border-radius: var(--radius); } } .contact-form-wrap input::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: var(--accent); font-size: 14px; } .contact-form-wrap .contact-name{ margin-right: 1% } .contact-form-wrap textarea{ width: 91%; margin-top: 10px; background-color: var(--elevationHover); border:1px solid var(--accent); color: var(--accent); padding: 10px 15px; border-radius: var(--radius); } .contact-form-wrap textarea::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: var(--accent); font-size: 14px; } .contact-btn{ padding: 3px 8px; font-size: 16px; color: var(--accent); font-family: var(--bodyFont); background-color: var(--elevationHover); border: none; box-shadow: var(--shadow); border-radius: var(--radius); align-self: center; transition: var(--fastFade); margin: 15px auto; } .inline-svg { display: inline-block; /* height: 1em; */ width: 1em; /* height: 1.15rem; width: 1.15rem; top: 0.15rem; right: 20px; */ } .inline-svg[hidden]{ display: none; }