"ALLAN JAMES EDGAR" w/ drop shadows etc */ h1{ font-family: Helvetica, sans-serif; /* Letter color */ color: #101010; /* Letterpress effect; (h-shadow, v-shadow, blur-radius, color) x2 for upper and lower shadow */ text-shadow: 0px 1px 1px #606060, 0px -1px 1px #202020; } /* Style components for all <p>aragraph attributes */ p{ font-family: futuraPt, Helvetica, sans-serif; color: white; } /* Style components for all <body> attributes */ body{ margin: 0; background-color: #404040; } /* Style components for all <a>nchor attributes */ a{ font-family: futuraPt, Helvetica, sans-serif; color: white; text-decoration: none; } /* Style components for all "hover" attributes related to <a>nchor elements */ a:hover{ color:black; } /* TODO what dis do? */ .clear{ clear: both; } /* Begin #id section */ /* TODO thing???? whoops I forgot??? */ #title{ text-align: center; padding: 40px; font-weight: bold; } /* Begin slider section */ /* ARCHITECTURE */ /* Plates are the base of the Container and Slider divs*/ /* Containers are the default visible divs and shrink on :hover */ /* Sliders divs are what contain the further information. They expand on :hover */ #about_plate{ width: 100%; height: 250px; background-color:green; text-align: center; } /* TODO stop image shrink when container size is reduced */ #about_container{ width: 100%; height: 250px; background-color: gray; text-align: center; float: left; background-image: url('images/KnightsTourEdit.png'); background-position: center; background-size: auto 300px; box-shadow:inset 0 0 0 2000px rgba(0,255,0,0.3); background-repeat: no-repeat; transition: 1s; } /* TODO add dynamic "padding" for mobile and desktop */ #about_slider{ width: 0%; height: 250px; text-align: center; float: left; opacity: 0; overflow: auto; /* This is for chaining animations 1s to expand then 0.5s to make text opaque */ transition: width 1s, opacity 0.5s 1s; } /* TODO reduce animation time and opacity reversal*/ #about_plate:hover > #about_container { width: 20%; } #about_plate:hover > #about_slider { width: 80%; opacity: 1; } /* Formatting to hacksace link in the "about" blurb TODO generalise this formatting */ #hackspace_link{ text-decoration: underline; } /* TODO add project category highlighting */ #projects_plate{ width: 100%; height: 250px; background-color:red; text-align: center; } #projects_container{ width: 100%; height: 250px; background-color: gray; text-align: center; float:left; background-image: url('images/Inside_Kong.jpg'); background-position: center; background-size: 1000px auto; box-shadow:inset 0 0 0 2000px rgba(255,0,0,0.3); background-repeat: no-repeat; transition: 1s; } #projects_slider{ width: 0%; height: 250px; text-align: center; float: right; opacity: 0; overflow: hidden; /* This is for chaining animations 1s to expand then 0.5s to make text opaque */ transition: width 1s, opacity 0.5s 1s; } #projects_plate:hover > #projects_container { width: 20%; } #projects_plate:hover > #projects_slider { width: 80%; opacity: 1; } .project_category{ width: calc(100% / 3); height: 100%; height: 250px; float: left; box-shadow: 0 0 1px #000; } .project_category img{ position:relative; top: 40px; } #contact_plate{ width: 100%; height: 250px; background-color: blue; text-align: center; } #contact_container{ width: 100%; height: 250px; background-color: gray; text-align: center; float: left; background-image: url('images/Kufanya.jpg'); background-position: center; background-size: 1000px auto; box-shadow:inset 0 0 0 2000px rgba(0,0,255,0.3); background-repeat: no-repeat; transition: 1s; } #contact_slider{ width: 0%; height: 250px; text-align: center; float: left; opacity: 0; overflow: hidden; /* This is for chaining animations 1s to expand then 0.5s to make text opaque */ transition: width 1s, opacity 0.5s 1s; } #contact_plate:hover > #contact_container { width: 20%; } #contact_plate:hover > #contact_slider { width: 80%; opacity: 1; } #contact_list{ width:120px; height: 200px; text-align: left; margin-left: auto; margin-right: auto; line-height: 200%; } #contact_email{ background-image: url("images/email_icon_white.svg"); background-repeat: no-repeat; background-position: left center; background-size: 20px 20px; padding-left: 25px; } #contact_phone{ background-image: url("images/phone_icon_white.svg"); background-repeat: no-repeat; background-position: left center; background-size: 20px 20px; padding-left: 25px; } #contact_LI{ background-image: url("images/linkedin_icon_white.svg"); background-repeat: no-repeat; background-position: left center; background-size: 20px 20px; padding-left: 25px; } #contact_web{ background-image: url("images/internet_icon_white.svg"); background-repeat: no-repeat; background-position: left center; background-size: 20px 20px; padding-left: 25px; } @media (min-width: 946px){ #about_container{ background-size: 100% auto; } } @media (min-width: 1000px){ #projects_container{ background-size: 100% auto; } #contact_container{ background-size: 100% auto; } } @media (max-width: 500px){ .project_category p{ padding: 0px 13px } .project_category img{ position:relative; top: 0px; height: 70%; width: 70%; } } @media (max-width: 395px){ .project_category p{ padding: 0; } .project_category img{ position:relative; top: 0px; height: 90%; width: 90%; } } /* End CSS portion */

/* Begin CSS portion */ /* set custom font to FuturaPTLight */ @font-face{ font-family: "futuraPt"; src: url('fonts/FuturaPTLight.otf')format('opentype'); } /* Style attributes for "ALLAN JAMES EDGAR" w/ drop shadows etc */ h1{ font-family: Helvetica, sans-serif; /* Letter color */ color: #101010; /* Letterpress effect; (h-shadow, v-shadow, blur-radius, color) x2 for upper and lower shadow */ text-shadow: 0px 1px 1px #606060, 0px -1px 1px #202020; } /* Style components for all <p>aragraph attributes */ p{ font-family: futuraPt, Helvetica, sans-serif; color: white; } /* Style components for all <body> attributes */ body{ margin: 0; background-color: #404040; } /* Style components for all <a>nchor attributes */ a{ font-family: futuraPt, Helvetica, sans-serif; color: white; text-decoration: none; } /* Style components for all "hover" attributes related to <a>nchor elements */ a:hover{ color:black; } /* TODO what dis do? */ .clear{ clear: both; } /* Begin #id section */ /* TODO thing???? whoops I forgot??? */ #title{ text-align: center; padding: 40px; font-weight: bold; } /* Begin slider section */ /* ARCHITECTURE */ /* Plates are the base of the Container and Slider divs*/ /* Containers are the default visible divs and shrink on :hover */ /* Sliders divs are what contain the further information. They expand on :hover */ #about_plate{ width: 100%; height: 250px; background-color:green; text-align: center; } /* TODO stop image shrink when container size is reduced */ #about_container{ width: 100%; height: 250px; background-color: gray; text-align: center; float: left; background-image: url('images/KnightsTourEdit.png'); background-position: center; background-size: auto 300px; box-shadow:inset 0 0 0 2000px rgba(0,255,0,0.3); background-repeat: no-repeat; transition: 1s; } /* TODO add dynamic "padding" for mobile and desktop */ #about_slider{ width: 0%; height: 250px; text-align: center; float: left; opacity: 0; overflow: auto; /* This is for chaining animations 1s to expand then 0.5s to make text opaque */ transition: width 1s, opacity 0.5s 1s; } /* TODO reduce animation time and opacity reversal*/ #about_plate:hover > #about_container { width: 20%; } #about_plate:hover > #about_slider { width: 80%; opacity: 1; } /* Formatting to hacksace link in the "about" blurb TODO generalise this formatting */ #hackspace_link{ text-decoration: underline; } /* TODO add project category highlighting */ #projects_plate{ width: 100%; height: 250px; background-color:red; text-align: center; } #projects_container{ width: 100%; height: 250px; background-color: gray; text-align: center; float:left; background-image: url('images/Inside_Kong.jpg'); background-position: center; background-size: 1000px auto; box-shadow:inset 0 0 0 2000px rgba(255,0,0,0.3); background-repeat: no-repeat; transition: 1s; } #projects_slider{ width: 0%; height: 250px; text-align: center; float: right; opacity: 0; overflow: hidden; /* This is for chaining animations 1s to expand then 0.5s to make text opaque */ transition: width 1s, opacity 0.5s 1s; } #projects_plate:hover > #projects_container { width: 20%; } #projects_plate:hover > #projects_slider { width: 80%; opacity: 1; } .project_category{ width: calc(100% / 3); height: 100%; height: 250px; float: left; box-shadow: 0 0 1px #000; } .project_category img{ position:relative; top: 40px; } #contact_plate{ width: 100%; height: 250px; background-color: blue; text-align: center; } #contact_container{ width: 100%; height: 250px; background-color: gray; text-align: center; float: left; background-image: url('images/Kufanya.jpg'); background-position: center; background-size: 1000px auto; box-shadow:inset 0 0 0 2000px rgba(0,0,255,0.3); background-repeat: no-repeat; transition: 1s; } #contact_slider{ width: 0%; height: 250px; text-align: center; float: left; opacity: 0; overflow: hidden; /* This is for chaining animations 1s to expand then 0.5s to make text opaque */ transition: width 1s, opacity 0.5s 1s; } #contact_plate:hover > #contact_container { width: 20%; } #contact_plate:hover > #contact_slider { width: 80%; opacity: 1; } #contact_list{ width:120px; height: 200px; text-align: left; margin-left: auto; margin-right: auto; line-height: 200%; } #contact_email{ background-image: url("images/email_icon_white.svg"); background-repeat: no-repeat; background-position: left center; background-size: 20px 20px; padding-left: 25px; } #contact_phone{ background-image: url("images/phone_icon_white.svg"); background-repeat: no-repeat; background-position: left center; background-size: 20px 20px; padding-left: 25px; } #contact_LI{ background-image: url("images/linkedin_icon_white.svg"); background-repeat: no-repeat; background-position: left center; background-size: 20px 20px; padding-left: 25px; } #contact_web{ background-image: url("images/internet_icon_white.svg"); background-repeat: no-repeat; background-position: left center; background-size: 20px 20px; padding-left: 25px; } @media (min-width: 946px){ #about_container{ background-size: 100% auto; } } @media (min-width: 1000px){ #projects_container{ background-size: 100% auto; } #contact_container{ background-size: 100% auto; } } @media (max-width: 500px){ .project_category p{ padding: 0px 13px } .project_category img{ position:relative; top: 0px; height: 70%; width: 70%; } } @media (max-width: 395px){ .project_category p{ padding: 0; } .project_category img{ position:relative; top: 0px; height: 90%; width: 90%; } } /* End CSS portion */