Difference between revisions of "Template:Rotterdam HR/navbar"
| Line 1: | Line 1: | ||
| − | + | /* ----- color palet ----- */ | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | :root { | |
| − | + | --color-primary: #1B5E20; | |
| − | + | --color-secondary: #C8E6C9; | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | --color-dark: rgb(50, 50, 50); | |
| − | + | ||
| − | + | --color-wetlab: #1B5E20; | |
| − | + | ||
| − | + | --color-hardware: #3949AB; | |
| − | + | ||
| − | + | --color-software: #424242; | |
| − | + | --color-software-secondary: #8f8f8f; | |
| − | + | } | |
| − | + | ||
| − | + | /* ------ PAGE ------ */ | |
| − | + | .page-index, .page-description { | |
| − | + | background: var(--color-secondary); | |
| − | + | } | |
| − | + | .page-software { | |
| − | + | background: var(--color-software-secondary); | |
| − | + | } | |
| − | + | ||
| − | + | /* ----- iGEM STYLE FIXES ----- */ | |
| − | + | ||
| − | + | ul { | |
| − | + | list-style-image: none; | |
| − | + | } | |
| − | + | ||
| − | + | #content { | |
| − | + | width: 100%; | |
| − | + | margin: 0; | |
| − | + | padding: 0; | |
| − | + | background: none; | |
| − | + | } | |
| − | + | ||
| − | + | #bodyContent a[href ^="https://"], .link-https { | |
| − | + | background: whitesmoke; | |
| − | + | padding: 5px 0; | |
| − | + | } | |
| − | + | ||
| − | + | #HQ_page h1, #HQ_page h2, #HQ_page h3, #HQ_page p, #HQ_page span, #HQ_page a{ | |
| − | + | font-family: candara; | |
| − | + | line-height: initial; | |
| − | + | } | |
| − | + | ||
| − | + | #bodyContent h3, #bodyContent h4, #bodyContent h5 { | |
| − | + | margin-bottom: 0; | |
| − | + | padding: 0 5px; | |
| − | + | line-height: 1.1em; | |
| − | + | } | |
| − | + | ||
| − | + | #top_title, #top_menu_under { | |
| − | + | display: none; | |
| − | + | } | |
| − | + | ||
| − | + | #top_menu_14 { | |
| − | + | position: initial; | |
| − | + | } | |
| − | + | ||
| − | + | #top_menu_inside #user_item { | |
| − | + | margin-right: 0; | |
| − | + | float: none; | |
| − | + | } | |
| − | + | #top_menu_inside { | |
| − | + | margin: 0 auto; | |
| + | width: 90%; | ||
| + | } | ||
| + | |||
| + | body { | ||
| + | font-family: candara; | ||
| + | background: white; | ||
| + | font-size: 13px; | ||
| + | } | ||
| + | |||
| + | /* ----- NAVBAR ----- */ | ||
| + | .menu { | ||
| + | display: flex; | ||
| + | } | ||
| + | |||
| + | .menu, | ||
| + | .sub-menu { | ||
| + | margin: 0; | ||
| + | padding: 0; | ||
| + | list-style: none; | ||
| + | box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.1); | ||
| + | } | ||
| + | |||
| + | .menu .main-item { | ||
| + | position: relative; | ||
| + | display: flex; | ||
| + | flex-direction: column; | ||
| + | align-items: center; | ||
| + | flex: 1; | ||
| + | height: 44px; | ||
| + | padding: 5px; | ||
| + | text-align: center; | ||
| + | text-decoration: none; | ||
| + | color: white; | ||
| + | background: var(--color-dark); | ||
| + | fill: currentColor; | ||
| + | z-index: 1; | ||
| + | } | ||
| + | |||
| + | .menu .main-item::before { | ||
| + | content: ""; | ||
| + | position: absolute; | ||
| + | bottom: 0; | ||
| + | left: 0; | ||
| + | right: 0; | ||
| + | height: 3px; | ||
| + | background: currentColor; | ||
| + | transform: scale(0, 1); | ||
| + | transform-origin: left; | ||
| + | transition: transform 200ms; | ||
| + | } | ||
| + | |||
| + | .menu .home-button { | ||
| + | width: 200px; | ||
| + | position: relative; | ||
| + | } | ||
| + | |||
| + | .menu .home-button a { | ||
| + | position: absolute; | ||
| + | top: 0; | ||
| + | left: 0; | ||
| + | right: 0; | ||
| + | bottom: -80px; | ||
| + | border-radius: 0 0 50% 50%; | ||
| + | background: var(--color-dark); | ||
| + | } | ||
| + | |||
| + | .sub-menu { | ||
| + | position: absolute; | ||
| + | top: 54px; | ||
| + | left: 0; | ||
| + | right: 0; | ||
| + | transform: scale(1, 0); | ||
| + | transform-origin: top; | ||
| + | transition: transform 250ms; | ||
| + | } | ||
| + | |||
| + | .sub-menu .sub-item { | ||
| + | padding: 10px 5px; | ||
| + | border-top: rgba(255, 255, 255, 0.25) solid 2px; | ||
| + | color: var(--color-dark); | ||
| + | transition: color 200ms; | ||
| + | min-width: 96px; | ||
| + | max-height: fit-content; | ||
| + | } | ||
| + | |||
| + | .menu .construction::after { | ||
| + | content: url('https://static.igem.org/mediawiki/2018/4/4a/T--Rotterdam_HR--wrench.svg'); | ||
| + | position: absolute; | ||
| + | top: 5px; | ||
| + | left: 0; | ||
| + | right: 0; | ||
| + | bottom: 5px; | ||
| + | display: flex; | ||
| + | flex-direction: column; | ||
| + | align-items: center; | ||
| + | font-size: 12px; | ||
| + | color: orange; | ||
| + | background: var(--color-dark); | ||
| + | transform: scale(1, 0); | ||
| + | transform-origin: bottom; | ||
| + | transition: transform 250ms; | ||
| + | } | ||
| + | |||
| + | .menu .main-item:hover::before { | ||
| + | transform: scale(1, 1); | ||
| + | } | ||
| + | |||
| + | |||
| + | .menu .construction:hover::after { | ||
| + | transform: scale(1, 1); | ||
| + | } | ||
| + | |||
| + | .menu .main-item:hover .sub-menu { | ||
| + | transform: scale(1, 1); | ||
| + | } | ||
| + | |||
| + | .menu .main-item:hover .sub-menu .sub-item { | ||
| + | color: white; | ||
| + | transition: color 200ms 100ms; | ||
| + | } | ||
| + | |||
| + | #menuToggle a { | ||
| + | text-decoration: none; | ||
| + | color: white; | ||
| + | transition: color 0.3s ease; | ||
| + | } | ||
| + | |||
| + | #menuToggle a:hover { | ||
| + | color: gray; | ||
| + | } | ||
| + | |||
| + | #menuToggle { | ||
| + | display: none; | ||
| + | position: relative; | ||
| + | top: -35px; | ||
| + | left: 20px; | ||
| + | width: 50px; | ||
| + | z-index: 1; | ||
| + | -webkit-user-select: none; | ||
| + | user-select: none; | ||
| + | } | ||
| + | |||
| + | #menuToggle input { | ||
| + | display: block; | ||
| + | width: 40px; | ||
| + | height: 32px; | ||
| + | position: absolute; | ||
| + | top: -7px; | ||
| + | left: -5px; | ||
| + | |||
| + | cursor: pointer; | ||
| + | |||
| + | opacity: 0; /* hide this */ | ||
| + | z-index: 2; /* and place it over the hamburger */ | ||
| + | |||
| + | -webkit-touch-callout: none; | ||
| + | } | ||
| + | |||
| + | /* | ||
| + | * Just a quick hamburger | ||
| + | */ | ||
| + | #menuToggle span { | ||
| + | display: block; | ||
| + | width: 33px; | ||
| + | height: 4px; | ||
| + | margin-bottom: 5px; | ||
| + | position: relative; | ||
| + | background: white; | ||
| + | border-radius: 3px; | ||
| + | |||
| + | z-index: 1; | ||
| + | |||
| + | transform-origin: 4px 0px; | ||
| + | |||
| + | transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), | ||
| + | background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), | ||
| + | opacity 0.55s ease; | ||
| + | } | ||
| + | |||
| + | #menuToggle span:first-child | ||
| + | { | ||
| + | transform-origin: 0% 0%; | ||
| + | } | ||
| + | |||
| + | #menuToggle span:nth-last-child(2) | ||
| + | { | ||
| + | transform-origin: 0% 100%; | ||
| + | } | ||
| + | |||
| + | /* | ||
| + | * Transform all the slices of hamburger | ||
| + | * into a crossmark. | ||
| + | */ | ||
| + | #menuToggle input:checked ~ span | ||
| + | { | ||
| + | opacity: 1; | ||
| + | transform: rotate(45deg) translate(-2px, -1px); | ||
| + | background: white; | ||
| + | } | ||
| + | |||
| + | /* | ||
| + | * But let's hide the middle one. | ||
| + | */ | ||
| + | #menuToggle input:checked ~ span:nth-last-child(3) | ||
| + | { | ||
| + | opacity: 0; | ||
| + | transform: rotate(0deg) scale(0.2, 0.2); | ||
| + | } | ||
| + | |||
| + | /* | ||
| + | * Ohyeah and the last one should go the other direction | ||
| + | */ | ||
| + | #menuToggle input:checked ~ span:nth-last-child(2) | ||
| + | { | ||
| + | transform: rotate(-45deg) translate(0, -1px); | ||
| + | } | ||
| + | |||
| + | /* | ||
| + | * Make this absolute positioned | ||
| + | * at the top left of the screen | ||
| + | */ | ||
| + | #mobile-menu | ||
| + | { | ||
| + | position: absolute; | ||
| + | width: 200px; | ||
| + | margin: -100px 0 0 -50px; | ||
| + | padding: 50px; | ||
| + | padding-top: 125px; | ||
| + | background: var(--color-dark); | ||
| + | list-style-type: none; | ||
| + | -webkit-font-smoothing: antialiased; | ||
| + | /* to stop flickering of text in safari */ | ||
| + | |||
| + | transform-origin: 0% 0%; | ||
| + | transform: translate(-100%, 0); | ||
| + | |||
| + | transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0); | ||
| + | } | ||
| + | |||
| + | #mobile-menu li | ||
| + | { | ||
| + | padding: 5px 0; | ||
| + | font-size: 16px; | ||
| + | height: 0.75em; | ||
| + | display: flex; | ||
| + | align-items: center; | ||
| + | } | ||
| + | |||
| + | #mobile-menu li svg { | ||
| + | width: 1em; | ||
| + | height: 1em; | ||
| + | margin-right: 10px; | ||
| + | fill: currentColor; | ||
| + | } | ||
| + | |||
| + | #mobile-menu li span { | ||
| + | width: 100%; | ||
| + | height: 0.75em; | ||
| + | background: none; | ||
| + | } | ||
| + | |||
| + | /* | ||
| + | * And let's slide it in from the left | ||
| + | */ | ||
| + | #menuToggle input:checked ~ ul | ||
| + | { | ||
| + | transform: none; | ||
| + | } | ||
| + | |||
| + | @media only screen and (max-width: 1230px) { | ||
| + | .main-item { | ||
| + | font-size: smaller; | ||
| + | } | ||
| + | |||
| + | } | ||
| + | |||
| + | @media only screen and (max-width: 1060px) { | ||
| + | .home-button { | ||
| + | display: none; | ||
| + | } | ||
| + | |||
| + | } | ||
| + | |||
| + | @media only screen and (max-width: 900px) { | ||
| + | .menu { | ||
| + | height: 50px; | ||
| + | width: 100%; | ||
| + | background: var(--color-dark); | ||
| + | } | ||
| + | |||
| + | .menu .main-item { | ||
| + | display: none; | ||
| + | } | ||
| + | |||
| + | #menuToggle { | ||
| + | display: block; | ||
| + | } | ||
| + | |||
| + | } | ||
| + | |||
| + | /* ------ HEADER ------ */ | ||
| + | |||
| + | .header { | ||
| + | position: relative; | ||
| + | height: 40vh; | ||
| + | width: 100%; | ||
| + | background: linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,0.5), rgba(255,255,255,0.3)); | ||
| + | display: flex; | ||
| + | align-items: center; | ||
| + | text-shadow: 2px 2px 20px rgba(0, 0, 0, 0.4); | ||
| + | } | ||
| + | |||
| + | .header::before { | ||
| + | content: ''; | ||
| + | position: absolute; | ||
| + | z-index: -1; | ||
| + | top: 0; | ||
| + | left: 0; | ||
| + | right: 0; | ||
| + | bottom: 0; | ||
| + | } | ||
| + | |||
| + | .header div { | ||
| + | margin: auto; | ||
| + | display: flex; | ||
| + | flex-direction: column; | ||
| + | align-items: center; | ||
| + | } | ||
| + | |||
| + | .header div svg { | ||
| + | width: 160px; | ||
| + | height: 160px; | ||
| + | } | ||
| + | |||
| + | .header div h1 { | ||
| + | padding: 0; | ||
| + | margin-top: 0; | ||
| + | font-size: 50px; | ||
| + | } | ||
| + | |||
| + | /* ------ FOOTER ------ */ | ||
| + | |||
| + | .multiple-items-footer { | ||
| + | margin: 0 auto; | ||
| + | display: flex; | ||
| + | justify-content: space-around; | ||
| + | width: 250px; | ||
| + | } | ||
| + | |||
| + | .item-footer { | ||
| + | width: 50px; | ||
| + | height: 50px; | ||
| + | margin: 5px; | ||
| + | filter: invert(50%); | ||
| + | transition: 0.4s; | ||
| + | } | ||
| + | |||
| + | .item-footer:hover { | ||
| + | filter: invert(100%); | ||
| + | transition: 0.1s; | ||
| + | } | ||
| + | |||
| + | #footer { | ||
| + | padding: 40px 0; | ||
| + | background: rgb(50, 50, 50); | ||
| + | text-align: center; | ||
| + | color: white; | ||
| + | font-size: 20px; | ||
| + | } | ||
| + | |||
| + | /* ------ CONTAINERS ------ */ | ||
| + | |||
| + | .nav-cards { | ||
| + | display: flex; | ||
| + | flex-wrap: wrap; | ||
| + | justify-content: center; | ||
| + | margin: 20px auto; | ||
| + | } | ||
| + | |||
| + | .nav-card { | ||
| + | width: 180px; | ||
| + | height: 180px; | ||
| + | margin: 10px; | ||
| + | position: relative; | ||
| + | color: white; | ||
| + | text-align: center; | ||
| + | background: var(--color-software); | ||
| + | box-shadow: 2px 2px 10px rgba(0,0,0,0.25); | ||
| + | transition: 200ms; | ||
| + | border-radius: 3px; | ||
| + | } | ||
| + | |||
| + | .nav-card svg { | ||
| + | position: absolute; | ||
| + | fill: white; | ||
| + | width: 50%; | ||
| + | height: 50%; | ||
| + | top: 10%; | ||
| + | left: 25%; | ||
| + | } | ||
| + | |||
| + | .nav-card h2 { | ||
| + | position: absolute; | ||
| + | bottom: 0; | ||
| + | left: 5px; | ||
| + | right: 5px; | ||
| + | color: white; | ||
| + | } | ||
| + | |||
| + | .nav-card::before, .nav-card::after { | ||
| + | content: ''; | ||
| + | position: absolute; | ||
| + | top: 5px; | ||
| + | left: 5px; | ||
| + | right: 5px; | ||
| + | bottom: 5px; | ||
| + | transition: transform 400ms; | ||
| + | } | ||
| + | |||
| + | .nav-card::before { | ||
| + | border-top: white solid 1px; | ||
| + | border-bottom: white solid 1px; | ||
| + | transform: scale(0, 1); | ||
| + | } | ||
| + | |||
| + | .nav-card::after { | ||
| + | border-left: white solid 1px; | ||
| + | border-right: white solid 1px; | ||
| + | transform: scale(1, 0); | ||
| + | } | ||
| + | |||
| + | .nav-card:hover::before { | ||
| + | transform: scale(1, 1); | ||
| + | } | ||
| + | |||
| + | .nav-card:hover::after { | ||
| + | transform: scale(1, 1); | ||
| + | } | ||
| + | |||
| + | .text-container { | ||
| + | position: relative; | ||
| + | text-align: center; | ||
| + | margin: 60px auto; | ||
| + | padding: 10px; | ||
| + | max-width: 1000px; | ||
| + | } | ||
| + | |||
| + | .text-container h1 { | ||
| + | font-size: 40px; | ||
| + | position: relative; | ||
| + | color: var(--color-primary); | ||
| + | } | ||
| + | |||
| + | .text-container h1::after { | ||
| + | content: ''; | ||
| + | position: absolute; | ||
| + | bottom: 0; | ||
| + | left: 10%; | ||
| + | right: 10%; | ||
| + | height: 4px; | ||
| + | border-radius: 2px; | ||
| + | background: currentColor; | ||
| + | } | ||
| + | |||
| + | .text-container p { | ||
| + | margin-bottom: 20px; | ||
| + | font-size: 24px !important; | ||
| + | text-align: center !important; | ||
| + | } | ||
| + | |||
| + | .nav-button { | ||
| + | position: relative; | ||
| + | padding: 10px 20px; | ||
| + | background: var(--color-primary); | ||
| + | color: white; | ||
| + | text-decoration: none; | ||
| + | box-shadow: 2px 2px 5px rgba(0,0,0,0.1); | ||
| + | font-size: 20px !important; | ||
| + | } | ||
| + | |||
| + | .nav-button::before { | ||
| + | content: '> '; | ||
| + | } | ||
| + | |||
| + | .nav-button::after { | ||
| + | content: ''; | ||
| + | position: absolute; | ||
| + | left: 0; | ||
| + | right: 0; | ||
| + | bottom: 0; | ||
| + | height: 3px; | ||
| + | background: white; | ||
| + | transform: scale(0, 1); | ||
| + | transform-origin: left; | ||
| + | transition: transform 200ms; | ||
| + | } | ||
| + | |||
| + | .nav-button:hover::after { | ||
| + | transform: scale(1, 1); | ||
| + | } | ||
Revision as of 14:26, 29 September 2018
/* ----- color palet ----- */
- root {
--color-primary: #1B5E20; --color-secondary: #C8E6C9;
--color-dark: rgb(50, 50, 50);
--color-wetlab: #1B5E20;
--color-hardware: #3949AB;
--color-software: #424242; --color-software-secondary: #8f8f8f; }
/* ------ PAGE ------ */ .page-index, .page-description { background: var(--color-secondary); } .page-software { background: var(--color-software-secondary); }
/* ----- iGEM STYLE FIXES ----- */
ul { list-style-image: none; }
- content {
width: 100%; margin: 0; padding: 0; background: none; }
- bodyContent a[href ^="https://"], .link-https {
background: whitesmoke; padding: 5px 0;
}
- HQ_page h1, #HQ_page h2, #HQ_page h3, #HQ_page p, #HQ_page span, #HQ_page a{
font-family: candara; line-height: initial; }
- bodyContent h3, #bodyContent h4, #bodyContent h5 {
margin-bottom: 0; padding: 0 5px; line-height: 1.1em; }
- top_title, #top_menu_under {
display: none; }
- top_menu_14 {
position: initial; }
- top_menu_inside #user_item {
margin-right: 0; float: none; }
- top_menu_inside {
margin: 0 auto; width: 90%; }
body { font-family: candara; background: white;
font-size: 13px;
}
/* ----- NAVBAR ----- */ .menu { display: flex; }
.menu, .sub-menu {
margin: 0; padding: 0; list-style: none; box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.1);
}
.menu .main-item {
position: relative; display: flex; flex-direction: column; align-items: center; flex: 1; height: 44px; padding: 5px; text-align: center; text-decoration: none; color: white; background: var(--color-dark);
fill: currentColor; z-index: 1; }
.menu .main-item::before {
content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: currentColor; transform: scale(0, 1); transform-origin: left; transition: transform 200ms;
}
.menu .home-button {
width: 200px; position: relative;
}
.menu .home-button a {
position: absolute; top: 0; left: 0; right: 0; bottom: -80px; border-radius: 0 0 50% 50%; background: var(--color-dark);
}
.sub-menu {
position: absolute; top: 54px; left: 0; right: 0; transform: scale(1, 0); transform-origin: top; transition: transform 250ms;
}
.sub-menu .sub-item {
padding: 10px 5px; border-top: rgba(255, 255, 255, 0.25) solid 2px; color: var(--color-dark);
transition: color 200ms; min-width: 96px; max-height: fit-content; }
.menu .construction::after {
content: url('https://static.igem.org/mediawiki/2018/4/4a/T--Rotterdam_HR--wrench.svg');
position: absolute;
top: 5px;
left: 0;
right: 0;
bottom: 5px;
display: flex;
flex-direction: column;
align-items: center;
font-size: 12px;
color: orange;
background: var(--color-dark);
transform: scale(1, 0);
transform-origin: bottom;
transition: transform 250ms;
}
.menu .main-item:hover::before {
transform: scale(1, 1);
}
.menu .construction:hover::after {
transform: scale(1, 1);
}
.menu .main-item:hover .sub-menu {
transform: scale(1, 1);
}
.menu .main-item:hover .sub-menu .sub-item {
color: white; transition: color 200ms 100ms;
}
- menuToggle a {
text-decoration: none; color: white; transition: color 0.3s ease;
}
- menuToggle a:hover {
color: gray;
}
- menuToggle {
display: none; position: relative; top: -35px;
left: 20px; width: 50px;
z-index: 1; -webkit-user-select: none; user-select: none;
}
- menuToggle input {
display: block; width: 40px; height: 32px; position: absolute; top: -7px; left: -5px; cursor: pointer; opacity: 0; /* hide this */ z-index: 2; /* and place it over the hamburger */ -webkit-touch-callout: none;
}
/*
* Just a quick hamburger */
- menuToggle span {
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
position: relative;
background: white;
border-radius: 3px;
z-index: 1;
transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
opacity 0.55s ease;
}
- menuToggle span:first-child
{
transform-origin: 0% 0%;
}
- menuToggle span:nth-last-child(2)
{
transform-origin: 0% 100%;
}
/*
* Transform all the slices of hamburger * into a crossmark. */
- menuToggle input:checked ~ span
{
opacity: 1; transform: rotate(45deg) translate(-2px, -1px); background: white;
}
/*
* But let's hide the middle one. */
- menuToggle input:checked ~ span:nth-last-child(3)
{
opacity: 0; transform: rotate(0deg) scale(0.2, 0.2);
}
/*
* Ohyeah and the last one should go the other direction */
- menuToggle input:checked ~ span:nth-last-child(2)
{
transform: rotate(-45deg) translate(0, -1px);
}
/*
* Make this absolute positioned * at the top left of the screen */
- mobile-menu
{
position: absolute;
width: 200px;
margin: -100px 0 0 -50px; padding: 50px; padding-top: 125px; background: var(--color-dark); list-style-type: none; -webkit-font-smoothing: antialiased;
/* to stop flickering of text in safari */
transform-origin: 0% 0%; transform: translate(-100%, 0); transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}
- mobile-menu li
{
padding: 5px 0; font-size: 16px; height: 0.75em; display: flex; align-items: center;
}
- mobile-menu li svg {
width: 1em; height: 1em; margin-right: 10px; fill: currentColor;
}
- mobile-menu li span {
width: 100%; height: 0.75em; background: none;
}
/*
* And let's slide it in from the left */
- menuToggle input:checked ~ ul
{
transform: none;
}
@media only screen and (max-width: 1230px) {
.main-item {
font-size: smaller;
}
}
@media only screen and (max-width: 1060px) { .home-button { display: none; }
}
@media only screen and (max-width: 900px) {
.menu {
height: 50px;
width: 100%;
background: var(--color-dark);
}
.menu .main-item {
display: none;
}
#menuToggle { display: block;
}
}
/* ------ HEADER ------ */
.header {
position: relative; height: 40vh; width: 100%; background: linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,0.5), rgba(255,255,255,0.3)); display: flex; align-items: center; text-shadow: 2px 2px 20px rgba(0, 0, 0, 0.4);
}
.header::before {
content: ; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0;
}
.header div {
margin: auto; display: flex; flex-direction: column;
align-items: center; }
.header div svg {
width: 160px; height: 160px;
}
.header div h1 { padding: 0;
margin-top: 0; font-size: 50px;
}
/* ------ FOOTER ------ */
.multiple-items-footer { margin: 0 auto; display: flex; justify-content: space-around; width: 250px; }
.item-footer { width: 50px; height: 50px; margin: 5px; filter: invert(50%); transition: 0.4s; }
.item-footer:hover { filter: invert(100%); transition: 0.1s; }
- footer {
padding: 40px 0; background: rgb(50, 50, 50); text-align: center; color: white; font-size: 20px; }
/* ------ CONTAINERS ------ */
.nav-cards {
display: flex; flex-wrap: wrap; justify-content: center; margin: 20px auto;
}
.nav-card {
width: 180px; height: 180px; margin: 10px; position: relative; color: white; text-align: center; background: var(--color-software); box-shadow: 2px 2px 10px rgba(0,0,0,0.25); transition: 200ms; border-radius: 3px;
}
.nav-card svg {
position: absolute; fill: white; width: 50%; height: 50%; top: 10%; left: 25%;
}
.nav-card h2 {
position: absolute; bottom: 0; left: 5px;
right: 5px; color: white; }
.nav-card::before, .nav-card::after {
content: ; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; transition: transform 400ms;
}
.nav-card::before {
border-top: white solid 1px; border-bottom: white solid 1px; transform: scale(0, 1);
}
.nav-card::after {
border-left: white solid 1px; border-right: white solid 1px; transform: scale(1, 0);
}
.nav-card:hover::before {
transform: scale(1, 1);
}
.nav-card:hover::after {
transform: scale(1, 1);
}
.text-container {
position: relative; text-align: center; margin: 60px auto; padding: 10px; max-width: 1000px;
}
.text-container h1 {
font-size: 40px; position: relative; color: var(--color-primary);
}
.text-container h1::after {
content: ; position: absolute; bottom: 0; left: 10%; right: 10%; height: 4px; border-radius: 2px; background: currentColor;
}
.text-container p {
margin-bottom: 20px; font-size: 24px !important; text-align: center !important;
}
.nav-button { position: relative;
padding: 10px 20px; background: var(--color-primary); color: white; text-decoration: none; box-shadow: 2px 2px 5px rgba(0,0,0,0.1); font-size: 20px !important;
}
.nav-button::before {
content: '> ';
}
.nav-button::after {
content: ; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: white; transform: scale(0, 1); transform-origin: left; transition: transform 200ms;
}
.nav-button:hover::after {
transform: scale(1, 1);
}