/* * SASS Variables and mixins * ============== */ /* * Styling * ============== */ /* RESET */ body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, hr, figure { margin: 0; padding: 0; } /* BASIC STYLING */ body { font: 400 19px/1.5 "Times New Roman", serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; color: rgb(82, 82, 82); background-color: rgb(250, 250, 253); -webkit-text-size-adjust: 100%; -webkit-font-feature-settings: "kern" 1; -moz-font-feature-settings: "kern" 1; -o-font-feature-settings: "kern" 1; font-feature-settings: "kern" 1; font-kerning: normal; margin: 0; } /* Applied to / position and min-height set up footer anchoring */ .parent { position: relative; width: 100%; height: 100%; min-height: 100vh; } /* images */ img { max-width: 100%; vertical-align: middle; } /* lists */ ul, ol { margin: 0; padding: 0; list-style-type: none; } li > ul, li > ol { margin-bottom: 0; } .list--bulleted { list-style-type: disc; padding-left: 1em; } dt { font-weight: 800; margin-bottom: 1em; } dd { margin-bottom: 1em; margin-left: 0; } /* LINKS ------------------------------------------ */ main a:link, main a:visited { color: rgb(82, 82, 82); text-decoration: none; border-bottom: 1px solid rgb(82, 82, 82); padding-bottom: 0.1em; } main a:hover, main a:active { color: rgb(199, 159, 159); text-decoration: none; border-bottom: 1px solid rgb(199, 159, 159); padding-bottom: 0.1em; } nav a:link, nav a:visited { color: #000; text-decoration: none; border-bottom: none; } nav a:hover, nav a:active { color: rgb(199, 159, 159); text-decoration: none; } .title a:link, .title a:visited, .title a:hover, .title a:active { text-decoration: none; border-bottom: none; } footer a:link, footer a:visited { color: #fff; text-decoration: none; border-bottom: 1px solid #fff; } footer a:hover, footer a:active { color: rgb(255, 0, 118); text-decoration: none; border-bottom: 1px solid rgb(255, 0, 118); } /* WIDTH AND MARGINS FOR HEADER / MAIN / FOOTER --------------------- */ .container { max-width: 1200px; width: 80%; margin: 0 10%; } @media screen and (max-width: 1000px) { .container { width: 96%; margin: 0 2%; } } /* SITE HEADER AREA AND NAV ------------------------------------------ */ .site-header { z-index: 1000; display: block; position: sticky; top: 0; padding: 0.9em 0; margin-bottom: 2em; background-color: rgba(255, 255, 255, 0.9); border-bottom: solid 1px rgb(80, 163, 173); } .title { order: 1; flex-grow: 3; text-align: left; } .links { order: 2; flex-grow: 2; } nav { width: 100%; display: flex; flex-direction: row; justify-content: space-between; } .title { min-width: 400px; min-height: 50px; margin-right: 2em; background-image: url("/assets/images/logo.png"); background-size: contain; background-repeat: no-repeat; } @media screen and (max-width: 1000px) { .title { min-width: 0; min-height: 0; margin-left: 1em; margin-right: 0; background-image: url("/assets/images/monogram.png"); } } .links { font-family: "Arial", sans-serif; font-size: 1em; font-weight: 400; text-transform: uppercase; display: flex; flex-direction: row-reverse; align-items: flex-end; margin-bottom: 0.3em; padding-left: 0; } .links li { padding: 0 1em; } .links li a { line-height: 100%; vertical-align: bottom; } .links li:first-of-type { padding-right: 0; } @media screen and (max-width: 1000px) { nav { flex-direction: row; } .links { flex-direction: column-reverse; align-items: right; } .links li { text-align: right; } .links li:first-of-type { padding-right: 1em; } } /* SITE MAIN (everything between header(s) and footer) -------------------- */ main { display: block; position: relative; height: auto; padding-bottom: 6rem; } /* COLUMN LAYOUTS ------------------------------------- */ /* centered one-column layout */ .centercolumn-container { width: 70%; margin: 3em 15%; } @media screen and (max-width: 1000px) { .centercolumn-container { width: 96%; margin: 1em 2%; } } /* one column layout, enforces a max width for readability */ .onecolumn-container { max-width: 100%; width: 70%; margin-right: 30%; } @media screen and (max-width: 1000px) { .onecolumn-container { width: 100%; margin-right: 0; } } /* two column flex layout */ .twocolumn-container { display: flex; flex-direction: row; column-gap: 10%; } @media screen and (max-width: 1000px) { .twocolumn-container { flex-direction: column; } } .two-1 { order: 1; flex-basis: 45%; } .two-2 { order: 2; flex-basis: 45%; } /* three column flex layout */ .threecolumn-container { display: flex; flex-direction: row; column-gap: 5%; } @media screen and (max-width: 1000px) { .threecolumn-container { flex-direction: column; } } .three-1 { order: 1; flex-basis: 30%; } .three-2 { order: 2; flex-basis: 30%; } .three-3 { order: 3; flex-basis: 30%; } /* two column flex layout, ~ 2/3 and 1/3 */ .twothirdscolumn-container { display: flex; flex-direction: row; column-gap: 10%; } @media screen and (max-width: 1000px) { .twothirdscolumn-container { flex-direction: column; } } .twothirds-1 { order: 1; flex-basis: 55%; } .twothirds-2 { order: 2; flex-basis: 35%; } /* SITE FOOTER -------------------- */ footer { display: block; position: relative; width: 100%; margin: 0 auto; padding-top: 1em; padding-bottom: 2.5em; background-color: rgb(199, 159, 159); } footer h3 { color: #fff; font-family: "Arial", sans-serif; font-size: 0.9em; font-weight: 600; font-style: normal; letter-spacing: 1px; text-transform: uppercase; text-decoration: none; } footer p, footer .email-form { margin: 0; padding: 0; color: #fff; font-family: "Arial", sans-serif; font-size: 0.8em; } footer .email-form { margin-bottom: 2px; } /* BASIC TEXT STYLES ------------------------------------------ */ .ital { font-style: italic; } .bold { font-weight: 600; } .normal { font-style: normal; } .smaller { font-size: 0.9em; } /* for citations etc */ .tiny { font-size: 0.8em; } /* for details etc */ .text-indent { text-indent: 3em; } .justify { text-align: justify; } .highlight { background-color: rgb(255, 255, 98); } .text-sky { color: rgb(0, 132, 255); } .text-sunset { color: rgb(181, 132, 132); } ::selection { color: #fff; background: rgb(36, 183, 33); } p { margin-bottom: 1em; } h1, .h1 { margin: 2em 0 1em 0; font-family: Arial, sans-serif; color: rgb(80, 163, 173); } h2, .h2 { margin: 2em 0 1em 0; font-family: Arial, sans-serif; font-size: 1.8em; font-weight: 600; color: rgb(80, 163, 173); } h3, .h3 { margin: 1em 0; font-family: Arial, sans-serif; font-size: 1.2em; font-weight: 400; color: rgb(181, 132, 132); } h4, .h4 { margin: 1em 0 0 0; font-family: inherit; font-size: 1em; font-weight: 400; color: rgb(0, 132, 255); } h5, .h5 { margin: 1em 0 0 0; font-family: inherit; font-size: 1em; font-weight: 400; color: rgb(80, 163, 173); } p.caption { width: 96% !important; margin: 0 2% !important; font-size: 0.7em; line-height: 1.5em; padding-top: 1em; text-align: center; } /* HOMEPAGE STYLES ------------------------------------------ */ /* Homepage hero spacing and links */ .hero { padding: 3em 0; } .hero a:link, .hero a:visited, .hero a:hover, .hero a:active { border-bottom: none; } /* Homepage hero image (pair with callout below) */ .issue-cover img { width: 80%; margin-left: 7%; margin-top: 20px; max-width: 600px; transform: rotate(10deg); filter: drop-shadow(20px 20px 15px rgb(246, 153, 144)); } /* Homepage hero callout for the latest news (pair with hero image above or use alone) */ .callout { display: block; position: relative; margin: 4em 0 2em 0; text-align: left; font-size: 1.5em; font-weight: 500; font-style: italic; color: rgb(36, 183, 33); } .callout a:link, .callout a:visited { color: rgb(36, 183, 33); text-decoration: none; border-bottom: 1px solid rgb(36, 183, 33); padding-bottom: 0.1em; } .callout a:hover, .callout a:active { color: rgb(255, 0, 118); text-decoration: none; border-bottom: 1px solid rgb(255, 0, 118); padding-bottom: 0.1em; } @media screen and (max-width: 1000px) { .callout { margin: 0 1em 3em 1em; text-align: center; } } /* Homepage current issue information */ .issue-list { color: rgb(82, 82, 82); } .issue-list a:link, .issue-list a:visited { color: rgb(82, 82, 82); text-decoration: none; border-bottom: 1px solid rgb(82, 82, 82); padding-bottom: 0.1em; } .issue-list a:hover, .issue-list a:active { color: rgb(181, 132, 132); text-decoration: none; border-bottom: 1px solid rgb(181, 132, 132); padding-bottom: 0.1em; } .issue-list p, .issue-list ul { margin: 1em 0 0 0; padding: 0; } .issue-list p { margin: 0 0 2em 0; color: rgb(0, 132, 255); font-size: 1.2em; } .issue-list p a:link, .issue-list p a:visited { color: rgb(0, 132, 255); border-bottom: 1px solid rgb(0, 132, 255); } .issue-list p a:hover, .issue-list p a:active { color: rgb(181, 132, 132); border-bottom: 1px solid rgb(181, 132, 132); } .issue-list li { margin: 0 0 2em 0; padding: 0; font-family: Arial, sans-serif; font-size: 1.5em; letter-spacing: 1px; } /* ISSUES PAGE STYLES ------------------------------------------ */ .issues { display: block; margin: 3em 0; padding: 1em 0; } .issues h3 { text-align: left; margin: 0 0 2em; } .issues h4 { margin-top: 0; } .issues p { padding-top: 1em; } .issues-image img { width: 100%; margin: 0 0 0 0; height: auto; } @media screen and (max-width: 1000px) { .issues-image img { display: none; } } .issues-image a:link, a:visited, a:active, a:hover { border-bottom: none; } /* EMAIL FORM ------------------------------------------ */ .email-form input { padding: 5px 4px 2px 4px; margin-bottom: 5px; } .email-form input[type=email] { width: 80%; max-width: 300px; } .email-form input[type=submit] { font-family: Arial, sans-serif; } /* LARGE LOGO FOR HOME PAGE (not in use) */ @media screen and (max-width: 1000px) { .title-home { display: block; position: relative; width: 90%; margin: 0.5em 5%; font-size: 1.2em; letter-spacing: 2px; } } .title-home img { width: 100%; height: 100%; } /* BREAKS AND DECORATIONS ------------------------------------------ */ .separator { /* void dot as paragraph type spacer */ display: block; position: relative; width: 40px; height: 40px; margin: 2em auto 2em 0; background-image: url("/assets/images/void.png"); background-size: contain; } .void { /* void dot as inline spacer */ display: inline-block; position: relative; width: 11px; height: 11px; margin: auto; background-image: url("/assets/images/void.png"); background-size: contain; } .bigvoid { /* void dot as bigger inline spacer */ display: inline-block; position: relative; width: 16px; height: 16px; margin: auto; background-image: url("/assets/images/void.png"); background-size: contain; } .break { margin: 5em 0; } .page-break { margin: 15em 0; } .line { width: 50%; margin: 2em 50% 2em 0; border-bottom: 1px solid rgb(0, 132, 255); } .wave { display: block; position: relative; width: 100%; height: 10px; background-color: rgb(0, 132, 255); --mask: radial-gradient(4.54px at 50% calc(100% + 2.7px),#0000 calc(99% - 1px),#000 calc(101% - 1px) 99%,#0000 101%) calc(50% - 6px) calc(50% - 2px + .5px)/12px 4px repeat-x, radial-gradient(4.54px at 50% -2.7px,#0000 calc(99% - 1px),#000 calc(101% - 1px) 99%,#0000 101%) 50% calc(50% + 2px)/12px 4px repeat-x; -webkit-mask: var(--mask); mask: var(--mask); } /* HELPER CLASSES ------------------------------------------ */ /* hide visually and from screen readers */ .hidden { display: none !important; } .m-0 { margin: 0; } .p-0 { padding: 0; } .center { text-align: center; } /* BACKGROUNDS ------------------------------------------ */ /* .water {background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 20 20' style='enable-background:new 0 0 20 20;' xml:space='preserve'%3E%3Crect x='2.5' y='2.5' transform='matrix(0.7071 -0.7071 0.7071 0.7071 -1.6569 4)' style='fill:%236666ff;' width='3' height='3'/%3E%3C/svg%3E%0A"); background-size: 20px 20px; background-repeat: repeat; } .bg-image {background: url('/assets/images/about_bg.jpg') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;} .bg-color {background: #0000ff;} */ /*# sourceMappingURL=styles.css.map */