/* ========================================================================== DEFAULT CSS version 0.82 Beta | DEMO FOR PEDAGOGICAL PURPOSES | MIT MIT License Copyright © 2019 JACGWD Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. Place font @import rules at top of the CSS stylesheet. They will not work reliably if placed elsewhere in this file. Best practice is to use the tag in the HTML instead. @import rules slow down the browser. ========================================================================== */ /* @import url(); */ /* 1. Mobile First - GLOBAL styles that apply to all screen sizes ... arrange to your liking. 2. Media Queries - Set breakpoints according to your design's needs Resolutions (edit as necessary according to your design) 48em (768px) and larger 90em (1440px) and larger 120em (1920px) and larger 160em (2560px) and larger All the min-width media queries follow this pattern: XXem (YYYpx) and larger XXem Default XXem Portrait XXem Landscape 3. Utility Classes - solutions for common tasks or problems. 3.1 - .browsehappy: for styling a div that appears in older versions of Internet Explorer prompting the user to update their browser. From the HTML 5 Boilerplate project. 3.2 - .hide-text for image replacements 3.3 - .clearfix: to contain floats. Use if overflow: auto; on the parent element doesn't work well. 3.4 - .currentpage: to highlight the current page in the navigation menu 4. Print Media Query 4.1 Styles for the printed page (laser printer). Text should be black and interactive items set to display: none; */ /* ========================================================================== Base styles: opinionated defaults from HTML 5 Boilerplate ========================================================================== */ html { color: #444; /* background-color: #F6F1EB; */ font-size: 1em; line-height: 1.4; } ::-moz-selection { background: #b3d4fc; text-shadow: none; } ::selection { background: #b3d4fc; text-shadow: none; } hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } /* * Remove the gap between audio, canvas, iframes, * images, videos and the bottom of their containers: * https://github.com/h5bp/html5-boilerplate/issues/440 */ audio, canvas, iframe, img, svg, video { vertical-align: middle; } /* * Remove default fieldset styles. */ fieldset { border: 0; margin: 0; padding: 0; } /* * Allow only vertical resizing of textareas. */ textarea { resize: vertical; } nav,#menu,header,main,aside,footer{ padding:0.25em; } body { color: #59484B; background-color: white; font-family: 'Quicksand', sans-serif; font-size: 16px; position: relative; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } #logo{ z-index:100; position: absolute; top:0.4em; left:0.3em; height: 2.5em; } main { padding: 3em 2em 12em 2em; margin: 0 auto; } main ul{ list-style-type: none; } img { max-width: 100%; object-fit:contain; margin-bottom:4em; } .highres img{ width: 100%; height: 100%; } #me{ width: 297px; height:20em; margin: 0 auto; padding-top: 1em; object-fit: cover; padding-bottom:2em; } #about h2{ padding-top:0; } .ambitions{ padding-bottom:2em; } #home-pics figcaption{ margin: 0 auto; padding-bottom:2em; padding-top:0.5em; } #home-pics{ margin: 0 auto; display: flex; flex-direction: row; flex-wrap: wrap; } #home-pics img{ height:230px; width:400px; } #home-pics figcaption{ width:400px; } #no-flex #home-pics div{ margin: 0 auto; } #home figcaption{ padding-bottom:2em; } .auto img{ height:auto; } .about{ margin:2em 0 2em 0; } /* Default all images to responsive behaviour */ #social{ text-align: center; } button { padding: 0 !important; background: none; margin: 0.55em 0 0 -0.45em; } header { position:absolute; top:0; left:0; width:100%; overflow: hidden; height:100px; padding:0em; } /* ###################################################################### */ /* NAVIGATION */ /* ###################################################################### */ html.no-js nav.navigation ul#menu[hidden] { display: block !important; visibility: visible !important; } nav{ position: absolute; top:0.125em; right:0.125em; height: 2.1em; width:2.1em; z-index: 10; padding:0; } nav.navigation2{ display: none; } #menu{ list-style-type: none; width: 100vw; position: absolute; top: 2.2em; right: -0.1em; background-color: black; z-index: 200; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } #menu li{ line-height: 1.5em; /* height: 2.5em; */ margin: 0.2em; padding: 1em; color: #D5C4B4; } #menu li a{ display: block; width: 100%; height: 100%; text-align: center; /* padding:-9.7em 0 0.6em 0; */ font-size: 1.6em; color: white; font-family: 'Trebuchet MS'; } /* Show menu if javascript is off */ a{ text-decoration: none; color: #312D2F; } nav a, figcaption a, footer a, div.pagination a, #error, #welcome a, #contact a{ position: relative; text-decoration: none; color: #998079; } figcaption a:hover, div.pagination a:hover, #error:hover, #welcome a:hover, #contact a:hover{ color: #312D2F; } nav a:before, figcaption a:before, footer a:before, div.pagination a:before, #error:before, #welcome a:before, #contact a:before{ content: ""; position: absolute; width: 100%; height: 2px; bottom: 0; left: 0; background-color: #312D2F; visibility: hidden; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } nav a:hover:before,figcaption a:hover:before, footer a:hover:before, div.pagination a:hover:before, #error:hover:before, #welcome a:hover:before, #contact a:hover:before{ visibility: visible; -webkit-transform: scaleX(1); transform: scaleX(1); } } nav a:visited,figcaption a:visited, footer a:visited, div.pagination a:visited, #error:visited, #welcome a:visited, #contact a:visited { color: #745A52; } @font-face { /* font-family:'Alberobello'; src:url(/fonts/alberobelloserif.woff); */ /* font-family:'Porao Regular'; src:url(/fonts/Porao-Regular.otf); */ } h1{ font-family: 'Quicksand','Dosis', sans-serif; font-size: 2em; background-color: #811b17; padding: 0.2em 4em 0em 1.2em; letter-spacing: 2.5px; color: #F6F1EB; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } h2{ font-size: 1.625em; padding-top:1em; padding-bottom:0.5em; } h3{ margin:1em 0 1em 0; } #thumbs, .thumbnail{ display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); margin: 1em auto; /* width: 100%; */ } figure{ margin: 2em; } /* figcaption{ padding-top:1.5em; } */ figcaption p{ font-size: 0.85em; color:black; } figure img{ box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); margin: 0 auto; margin-bottom:1em; } figure img:hover{ box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.5); } .highres img:hover{ box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } .multi.highres div.images{ padding-bottom: 2em; } .pagination{ text-align: center; font-size: 1.7em; } .pagination a{ margin-right:1em; } #share-buttons{ list-style-type: none; display: flex; flex-direction: row; justify-content: space-between; width: 100%; margin: 0 auto; padding:2em 0 2em 0; } #share-buttons li{ background-size: contain; background-repeat: no-repeat; overflow: hidden; text-indent: 200%; height:2.5em; width:2.5em; white-space: nowrap; } #share-buttons li a{ display: block; height: 100%; width:100%; } #share-buttons li:hover{ filter: invert(100%); } #share-buttons li:nth-child(1){ background-image: url("style_images/fb.svg"); } #share-buttons li:nth-child(2){ background-image: url("style_images/twitter.svg"); } #share-buttons li:nth-child(3){ background-image: url("style_images/digg.svg"); } #share-buttons li:nth-child(4){ background-image: url("style_images/reddit.svg"); } #share-buttons li:nth-child(5){ background-image: url("style_images/linkedin.svg"); } #share-buttons li:nth-child(6){ background-image: url("style_images/pinterest.svg"); } #share-buttons li:nth-child(7){ background-image: url("style_images/email.svg"); } .resume{ padding-left: 0; } .resume ul li{ padding-top:0; } footer{ padding:2em; font-size: 0.7em; background-color: #811b17; /* margin: 5em 0 0 -2em; */ /* position: absolute; */ bottom:0; width:100%; right:0; clear: both; color:white; text-align: center; } footer ul li{ display: inline; margin-bottom: 2em; } footer ul li a{ font-size: 1.2em; margin-right: 1em; color:white; } ul.footer.nav{ margin-bottom:2em; } /* ========================== END MOBILE FIRST =========================== */ /* ========================================================================== ***** START VISUAL MEDIA QUERIES ***** Media Queries start here. Use them to tweak your design as the screen size gets bigger. If you want to change something that appears across all browser screen sizes, code it above, not below this section. Anything you write in the CSS stylesheet will inherited by ("cascade to") media queries written below. In other words, if your default paragraph color is blue (in the baseline CSS) and you set the paragraph color rule to red in the first media query, then the media queries written below will also display the text as red. You do not need to add the red rule again, it gets inherited. Remember, the last CSS rule wins. ========================================================================== */ /* ========================================================================== CSS for tablets (768px and above) | Feel free to adjust as necessary. ========================================================================== */ @media only screen and (min-width: 48em) { h1{ font-size: 3em; padding:0em 0 0em 1.2em; } h2{ font-size: 2em; } header{ height:110px; position: relative; } header p.headerTitle { margin:1.2em 0 0 6em; } header p.headerSubtitle { margin-left: 7em; font-size:14px; } #logo{ height:4em; top:0.35em; left:0.35em; } button{ margin:0.95em 0 0 -0.85em; } #menu{ top:3.4em; } figcaption{ font-size: 1.3em; padding-bottom:1em; } figcaption p{ font-size: 0.72em; } #me{ height: 22em; } #welcome{ width:50%; margin-top: 1.5em; margin-bottom:2em; float:left; } #home, #home-pics{ margin: 0 auto; display: flex; flex-direction: row; flex-wrap: wrap; } #home-pics figure, #home-pics.images img, #home figure, #home img{ margin: 0 auto; width:300px; margin-top:2em; height:275px; } #home img { clear: both; float: left; } #home{ display: block; } #home figcaption{ width:50%; float: left; padding-left:2em; padding-top:4em; } #home-pics figure.thumbnail figcaption{ padding-bottom: 3em; width: 100%; } #share-buttons{ width:60%; } .close{ right:18px; font-size:60px; } .myphotos img{ height:400px; } #first, #second{ width:50%; float:left; } #first figcaption, #second figcaption{ width:100%; } #first .thumbnail, #second .thumbnail{ margin-top:4em; } /* ---- Form ---- */ } @media only screen and (min-width: 48em) and (orientation : portrait) { /* CSS rules go here */ } @media only screen and (min-width: 48em) and (orientation : landscape) { /* CSS rules go here */ } /* ###################################################################### */ /* ENABLE HAMBURGER ICON AT 1023px OR SMALLER /* ###################################################################### */ @media only screen and (max-width: 63.999em) { /* almost 1024px */ /* Hide nav button on larger screens */ nav.navigation button { height: 32px; width: 32px; display: block; border: none; background-image: url(style_images/hamburger.png); } } /* ###################################################################### */ /* CSS FOR DESKTOPS (1024PX AND ABOVE) | HIDE MENU BUTTON / DISPLAY MENU /* ###################################################################### */ @media only screen and (min-width: 64em) { nav{ width:100%; position: absolute; height: 8em; top:0em; overflow: auto; right:0; } nav.navigation button { display: none; } #logo{ top:0.8em; left:2.5em; height:3.4em; z-index: 500; } h1{ padding:0em 0 0 2.4em; } p{ max-width:35em; } #menu { display: block !important; position: relative; top:0; left: 0; width: 100%; padding: 1.5em 3em 1.2em 0.5em; margin: 0; right:9em; } #menu li{ display: inline-block; width: auto; padding: 0 1.7em 0 2em; text-align: center; margin:0; } #menu li a{ font-size: 1.5em; } header{ /* position: absolute; */ top: 4em; left: 0; width: 100%; padding-top:0; } #me{ height: 25em; width:409px; } figure#pp{ transition: transform .2s; } figure#pp:hover{ transform: scale(1.5); } article.about{ margin-top:0; float:right; width:45%; } h2{ clear:both; } #home img{ height:315px; } #home-pics{ margin: 0 auto; } #home-pics img{ width:1200px; } #home-pics figure{ padding:0.7em; } #home-pics figure.thumbnail{ width:450px; height:265px; margin-top:6em; } #home-pics.images img{ height:385px; width:420px; } #home figcaption{ width:100%; padding-left:0; padding-top:2em; } #thumbs{ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } img{ height: 315px; } #print, #photo, #web{ width:33%; float:left; padding-left:1em; clear: right; } .highres img{ width:67%; margin-bottom:2em; } .column { width: 25%; } .close{ right:65px; top:1px; font-size: 75px; } article.ambitions{ float: right; width: 45%; padding:0; margin-top:-4em; } footer p{ max-width: none; } footer{ /* position: absolute; */ } } /* ###################################################################### */ /* CSS FOR DESKTOPS (1024PX AND ABOVE) | FEEL FREE TO ADJUST AS NECESSARY. /* ###################################################################### */ @media only screen and (min-width: 64em) and (orientation : portrait) { /* CSS rules go here */ } @media only screen and (min-width: 64em) and (orientation : landscape) { /* CSS rules go here */ } /* ###################################################################### */ /* CSS FOR DESKTOPS (1440PX AND ABOVE) | FEEL FREE TO ADJUST AS NECESSARY. /* ###################################################################### */ @media only screen and (min-width: 90em) { /* CSS rules go here */ html{ background-color: #943532; } body{ width: 80%; margin: 0 auto; /* padding:0 0 15em 1em; */ } #logo{ top:0.8em; left:2.5em; } /* #logo{ left:1.5em; position: fixed; top: 7em; padding:1px; } */ h1{ margin-left:-0.12em; padding-top:0em; padding-left:2.5em; width:100.3%; } /* nav{ width:100.5%; right:-3px; } */ /* nav.navigation2{ height: 100%; /* Full-height: remove this if you want "auto" height */ width: 170px; /* Set the width of the sidebar */ position: fixed; /* Fixed Sidebar (stay in place on scroll) */ z-index: 1; /* Stay on top */ top: 14em; /* Stay at the top */ left: -2em; overflow-x: hidden; /* Disable horizontal scroll */ padding-top: 2em; visibility: visible; display: block; } nav.navigation2 ul{ list-style-type: none; } nav.navigation2 li{ padding: 6px 8px 6px 16px; } nav.navigation2 a{ text-decoration: none; font-size: 1.2em; color: black; display: block; font-family: 'Trebuchet MS'; width: fit-content; } nav.navigation2 a:hover{ color: #f1f1f1; } */ #home img{ width:500px; } .about, .ambitions{ margin-left:2em; } figure img{ margin: 0 auto; } #share-buttons{ width:35%; } #home-pics figure.thumbnail figcaption{ padding-top: 1em; } #me{ width:467px; } } @media only screen and (min-width: 90em) and (orientation : portrait) { /* CSS rules go here */ } @media only screen and (min-width: 90em) and (orientation : landscape) { /* CSS rules go here */ } /* ========================================================================== CSS for HD desktops (1920px (27" iMac is 2560px) and above) | Feel free to adjust as necessary. ========================================================================== */ @media only screen and (min-width: 120em) { /* CSS rules go here */ } @media only screen and (min-width: 120em) and (orientation : portrait) { /* CSS rules go here */ } @media only screen and (min-width: 120em) and (orientation : landscape) { /* CSS rules go here */ } /* ========================================================================== CSS for HD desktops (2560px (27" 5k iMac is 5120px) and above) | Feel free to adjust as necessary. ========================================================================== */ @media only screen and (min-width: 160em) { /* CSS rules go here */ nav{ width:100.9%; right:-13.6px; } nav.navigation2{ left:-0.7em; top: 12.5em; width:275px; font-size: 1.1em; } #welcome{ width:26%; } #thumbs{ grid-template-columns: repeat(auto-fit, minmax(657px, 1fr)); } img{ height:550px; width: auto; } #home img{ width:1000px; } #home-pics.images img{ height:755px; width:840px; } #home-pics figure.thumbnail{ padding-bottom: 12em; width:550px; } #home-pics figure.thumbnail img{ height:310px; } #me{ height:35em; width:1230px; float: right; padding-right: 4em; } body{ font-size: 1.7em; } } @media only screen and (min-width: 160em) and (orientation : portrait) { /* CSS rules go here */ } @media only screen and (min-width: 160em) and (orientation : landscape) { /* CSS rules go here */ } /* ========================================================================== END VISUAL MEDIA QUERIES ========================================================================== */ /* ========================================================================== Utility Classes ========================================================================== */ /* ========================================================================== Browser Upgrade Prompt for Users Still on Microsoft Internet Explorer ========================================================================== */ .browserupgrade { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0; } /* Old School Image Replacement Technique .hide-text for image replacements See: http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/ */ .hide-text { text-indent: 100%; white-space: nowrap; overflow: hidden; } /* * Hide only visually, but have it available for screen readers: * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility * * 1. For long content, line feeds are not interpreted as spaces and small width * causes content to wrap 1 word per line: * https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe */ /* * Hide visually and from screen readers */ [hidden], .hidden { display: none !important; } /* [hidden] { display: none; } */ /* Useful only for older browsers */ /* See: https://css-tricks.com/the-hidden-attribute-is-visibly-weak/ */ .sr-only { border: 0; clip: rect(0, 0, 0, 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; /* 1 */ } /* * Extends the .sr-only class to allow the element * to be focusable when navigated to via the keyboard: * https://www.drupal.org/node/897638 */ .sr-only.focusable:active, .sr-only.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; white-space: inherit; width: auto; } /* * Hide visually and from screen readers, but maintain layout */ .invisible { visibility: hidden; } /* * Clearfix: contain floats * * For modern browsers * 1. The space content is one way to avoid an Opera bug when the * `contenteditable` attribute is included anywhere else in the document. * Otherwise it causes space to appear at the top and bottom of elements * that receive the `clearfix` class. * 2. The use of `table` rather than `block` is only necessary if using * `:before` to contain the top-margins of child elements. */ .clearfix:before, .clearfix:after { content: " "; /* 1 */ display: table; /* 2 */ } .clearfix:after { clear: both; } /* The "currentpage" class is automatically added to the *anchor tag* of the current page in the main navigation. */ /* Useful for UX reasons: lets the reader know on which page of the nav they are on */ .currentpage { font-weight: bold; } /* ========================================================================== Print styles. Inlined to avoid the additional HTTP request: https://www.htmlied.com/delay-loading-your-print-css/ ========================================================================== */ @media print, (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 1.25dppx), (min-resolution: 120dpi) { /* Style adjustments for high resolution devices */ } @media print { *, *:before, *:after { background: transparent !important; color: #000 !important; /* Black prints faster */ -webkit-box-shadow: none !important; box-shadow: none !important; text-shadow: none !important; } a, a:visited { text-decoration: underline; } a[href]:after { content: " ("attr(href) ")"; } abbr[title]:after { content: " ("attr(title) ")"; } /* * Don't show links that are fragment identifiers, * or use the `javascript:` pseudo protocol */ a[href^="#"]:after, a[href^="javascript:"]:after { content: ""; } pre { white-space: pre-wrap !important; } pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } /* * Printing Tables: * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables */ thead { display: table-header-group; } tr, img { page-break-inside: avoid; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } }