/** ------------------------------- -- Bulma ------------------------------- **/ /** ------------------------------- -- Typography ------------------------------- **/ @font-face { font-weight: 400; font-style: normal; font-family: 'AlteHaasGrotesk'; src: url("fonts/app/AlteHaasGroteskRegular.eot"), url("fonts/app/AlteHaasGroteskRegular.eot?#iefix") format('embedded-opentype'), url("fonts/app/AlteHaasGroteskRegular.woff2") format('woff2'), url("fonts/app/AlteHaasGroteskRegular.woff") format('woff'), url("fonts/app/AlteHaasGroteskRegular.ttf") format('truetype'), url("fonts/app/AlteHaasGroteskRegular.svg?#AlteHaasGrotesk") format('svg'); } @font-face { font-weight: 600; font-style: normal; font-family: 'AlteHaasGrotesk'; src: url("fonts/app/AlteHaasGroteskBold.eot"), url("fonts/app/AlteHaasGroteskBold.eot?#iefix") format('embedded-opentype'), url("fonts/app/AlteHaasGroteskBold.woff2") format('woff2'), url("fonts/app/AlteHaasGroteskBold.woff") format('woff'), url("fonts/app/AlteHaasGroteskBold.ttf") format('truetype'), url("fonts/app/AlteHaasGroteskBold.svg?#AlteHaasGrotesk") format('svg'); } @font-face { font-family: 'RobotoMono'; src: url("fonts/app/RobotoMono-Thin.eot"), url("fonts/app/RobotoMono-Thin.eot?#iefix") format('embedded-opentype'), url("fonts/app/RobotoMono-Thin.woff2") format('woff2'), url("fonts/app/RobotoMono-Thin.woff") format('woff'), url("fonts/app/RobotoMono-Thin.ttf") format('truetype'), url("fonts/app/RobotoMono-Thin.svg?#RobotoMono") format('svg'); font-weight: 200; font-style: normal; } @font-face { font-family: 'RobotoMono'; src: url("fonts/app/RobotoMono-Light.eot"), url("fonts/app/RobotoMono-Light.eot?#iefix") format('embedded-opentype'), url("fonts/app/RobotoMono-Light.woff2") format('woff2'), url("fonts/app/RobotoMono-Light.woff") format('woff'), url("fonts/app/RobotoMono-Light.ttf") format('truetype'), url("fonts/app/RobotoMono-Light.svg?#RobotoMono") format('svg'); font-weight: 300; font-style: normal; } @font-face { font-family: 'RobotoMono'; src: url("fonts/app/RobotoMono-Regular.eot"), url("fonts/app/RobotoMono-Regular.eot?#iefix") format('embedded-opentype'), url("fonts/app/RobotoMono-Regular.woff2") format('woff2'), url("fonts/app/RobotoMono-Regular.woff") format('woff'), url("fonts/app/RobotoMono-Regular.ttf") format('truetype'), url("fonts/app/RobotoMono-Regular.svg?#RobotoMono") format('svg'); font-weight: 400; font-style: normal; } @font-face { font-family: 'RobotoMono'; src: url("fonts/app/RobotoMono-Bold.eot"), url("fonts/app/RobotoMono-Bold.eot?#iefix") format('embedded-opentype'), url("fonts/app/RobotoMono-Bold.woff2") format('woff2'), url("fonts/app/RobotoMono-Bold.woff") format('woff'), url("fonts/app/RobotoMono-Bold.ttf") format('truetype'), url("fonts/app/RobotoMono-Bold.svg?#RobotoMono") format('svg'); font-weight: 600; font-style: normal; } /** ------------------------------- -- Colors ------------------------------- **/ /** ------------------------------- -- Mixins ------------------------------- **/ /** ------------------------------- -- Normalize ------------------------------- **/ html { line-height: 1.15; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { margin: 0; } article, aside, footer, header, nav, section { display: block; } h1 { font-size: 2em; margin: 0.67em 0; } figcaption, figure, main { display: block; } figure { margin: 1em 40px; } hr { box-sizing: content-box; height: 0; overflow: visible; } pre { font-family: monospace, monospace; font-size: 1em; } a { background-color: transparent; -webkit-text-decoration-skip: objects; } a:active, a:hover { outline-width: 0; } abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted; } b, strong { font-weight: inherit; font-weight: bolder; } code, kbd, samp { font-family: monospace, monospace; font-size: 1em; } dfn { font-style: italic; } mark { background-color: #ff0; color: #000; } small { font-size: 80%; } sub, sup { font-size: 60%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.55em; background: #addbeb; color: #2b8caf; border-radius: 2px; padding: 0 2px 0 2px; margin: 0 2px 0 0; } audio, video { display: inline-block; } audio:not([controls]) { display: none; height: 0; } img { border-style: none; } svg:not(:root) { overflow: hidden; } button, input, optgroup, select, textarea { font-family: sans-serif; font-size: 100%; line-height: 1.15; margin: 0; } button, input { overflow: visible; } button, select { text-transform: none; } button, html [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner, button::-moz-focus-inner { border-style: none; padding: 0; } [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring, button:-moz-focusring { outline: 1px dotted ButtonText; } fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; } progress { display: inline-block; vertical-align: baseline; } textarea { overflow: auto; } [type="checkbox"], [type="radio"] { box-sizing: border-box; padding: 0; } [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } [type="search"] { -webkit-appearance: textfield; outline-offset: -2px; } [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } details, menu { display: block; } summary { display: list-item; } canvas { display: inline-block; } template { display: none; } [hidden] { display: none; } /** ------------------------------- -- Main Structure ------------------------------- **/ html { background: url("../images/bg-teal-pattern.png"); font: 300 1em 'AlteHaasGrotesk', Helvetica, Arial, sans-serif; color: #ebdfce; } a { font: 300 1em 'RobotoMono', Helvetica, Arial, sans-serif; color: #baf273; text-decoration: underline; -moz-transition: all 0.1s linear; -webkit-transition: all 0.1s linear; -o-transition: all 0.1s linear; transition: all 0.1s linear; } a:hover { color: #e8fbd0; background: #2b8caf; } svg.icons { width: 20px; fill: #eb6b99; } h1, h2, h3, h4, h5, h6 { color: #eb6b99 !important; font-weight: 600 !important; } #loader { position: fixed; z-index: 2000; height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; } #loader i { color: #ebdfce; } .blog-container { width: 100%; } .main-container { margin: 0 auto; z-index: 10; position: relative; } .main-container section header { width: 100%; max-width: 1024px; position: relative; width: 100%; font-size: 1em; padding: 20px; opacity: 0; color: #ebdfce; } .main-container section header #float-bg { background: url("../images/bg-teal-pattern.png"); position: absolute; z-index: 5; isolation: isolate; opacity: 0; left: 20%; } .main-container section header #float-bg img { width: 250px; mix-blend-mode: multiply; } .main-container section header #header-one, .main-container section header #header-two { z-index: 10; position: relative; } .main-container section header #header-one label#the-title a, .main-container section header #header-two label#the-title a { font: 500 2em 'RobotoMono', Helvetica, Arial, sans-serif; width: 97px; height: 100px; color: #eb6b99; text-decoration: none; display: block; word-break: break-all; } @media only screen and (max-width: 640px) { .main-container .content #the-intro { font-size: 31px; line-height: 35px; } } @media only screen and (max-width: 480px) { .main-container .content #the-intro { font-size: 25px; line-height: 33px; } .main-container .content #index-display span, .main-container .content #index-display a { font: 400 1.2em 'AlteHaasGrotesk', Helvetica, Arial, sans-serif; } } @media only screen and (max-width: 375px) { .main-container .header { width: 90%; } .main-container .header .header-desc h1 { line-height: 1rem; font-size: 3.3rem; } .main-container .header .header-desc span a { color: #eee; width: 250px; font-weight: 300; display: inline-block; word-break: break-all; font: 300 7em/1em 'RobotoMono', Helvetica, Arial, sans-serif; text-decoration: none; margin: 0 0 50px 0; } .main-container .header .header-desc #the-intro { color: #eb6b99; opacity: 0; font: 400 1.8em 'RobotoMono', Helvetica, Arial, sans-serif; display: inline-block; width: 95%; } .main-container .header .header-desc #item-intro { width: 95%; } .main-container .header .header-desc #item-intro label { font-size: 2em; } .main-container .content #the-intro { font-size: 24px; line-height: 33px; } .main-container .content #index-display label { font-size: 7em; } .main-container .content #index-display #recent-work, .main-container .content #index-display #recent-blog { float: none; display: block; margin: 0 auto; text-align: left; padding-bottom: 30px; } } @media only screen and (max-width: 320px) { .main-container .header .header-desc h1 { line-height: 1rem; font-size: 2.9rem; } .main-container .content #the-intro { font-size: 19px; line-height: 28px; } } /** ------------------------------- -- Index ------------------------------- **/ #index-content { width: 100%; max-width: 1024px; margin: 0 auto; } header #header-one #the-intro, header #header-two #the-intro { margin: 80px 0 0 0; } #index-display { padding: 20px; width: 100%; max-width: 1024px; font-size: 1em; z-index: 10; position: relative; } #index-display #recent-title { color: #eee; font: 400 2em 'RobotoMono', Helvetica, Arial, sans-serif; vertical-align: top; } #index-display .index-block { width: 50%; display: inline-block; vertical-align: top; margin-bottom: 50px; } /** ------------------------------- -- Fipamo ------------------------------- **/ #bm-content { width: 100%; max-width: 1024px; margin: 0 auto; } #bm-content #header-two { font: 400 1.5em 'AlteHaasGrotesk', Helvetica, Arial, sans-serif; } #bm-content #bookmark-display { padding: 0; } #bm-content #bookmark-display .bookmark-list .bookmark-entry { background: #0f313d; width: 50%; height: 500px; background-size: cover; overflow: hidden; display: inline-block; vertical-align: top; padding: 10px; } #bm-content #bookmark-display .bookmark-list .bookmark-entry .bookmark-info { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } #bm-content #bookmark-display .bookmark-list .bookmark-entry .bookmark-info label { display: block; font-size: 0.5em; padding: 10px; background: #2b8caf; border-radius: 5px; } #bm-content #bookmark-display .bookmark-list #paginate-control { width: 100%; height: 300px; background: #1e627b; display: flex; align-items: center; justify-content: center; } #bm-content #bookmark-display .bookmark-list #paginate-control #paginate { margin: 0 auto; } #bm-content #bookmark-display .bookmark-list #paginate-control #paginate a, #bm-content #bookmark-display .bookmark-list #paginate-control #paginate label { display: inline-block; vertical-align: top; } #bm-content #bookmark-display .bookmark-list #paginate-control #paginate label { padding: 5px; color: #ebdfce; font-size: 2.2em; } #bm-content #bookmark-display .bookmark-list #paginate-control #paginate a { padding: 20px; margin-top: 4px; } @media only screen and (max-width: 768px) { #bm-content #bookmark-display .bookmark-list .bookmark-entry { width: 100%; } } /** ------------------------------- -- Folio ------------------------------- **/ #work-content { width: 100%; max-width: 1024px; margin: 0 auto; } #work-content #header #header-two p { font: 400 1.5em 'AlteHaasGrotesk', Helvetica, Arial, sans-serif; } #work-content #header #header-two p span { color: #eb6b99; } #work-content #work-display { padding: 0; margin: 0 0 40px 0; opacity: 0; } #work-content #work-list .work-item { width: 50%; height: 300px; display: inline-block; vertical-align: top; background-size: cover; background-color: #ebdfce; color: #ebdfce; } #work-content #work-list .work-item span { font: 600 0.7em 'RobotoMono', Helvetica, Arial, sans-serif; } #work-content #work-contact #contact-form { opacity: 1; } #work-content #work-contact #contact-form label { font: 600 0.8em 'RobotoMono', Helvetica, Arial, sans-serif; color: #baf273; margin: 0 0 15px 0; display: block; } #work-content #work-contact #contact-form #request-form input[type=email], #work-content #work-contact #contact-form #request-form input[type=password], #work-content #work-contact #contact-form #request-form input[type=text] { width: 100%; margin: 0 10px 10px 0; } #work-content #work-contact #contact-form #request-form select { width: 100%; margin-bottom: 10px; } #work-content #work-contact #contact-form #request-form textarea { width: 100%; } #work-content #work-contact #contact-info label#request-status { font: 600 0.8em 'RobotoMono', Helvetica, Arial, sans-serif; color: #baf273; margin: 0 0 15px 0; display: block; text-transform: uppercase; } #work-content #work-contact #contact-info p { font: 400 1em 'AlteHaasGrotesk', Helvetica, Arial, sans-serif; color: #ebdfce; } #work-content #work-contact #contact-info p i { color: #baf273; } #project-content { width: 100%; max-width: 1024px; margin: 0 auto; } #project-content #project-display { padding: 0 20px 20px 20px; } #project-content #project-display #project-info span { font: 400 2em 'RobotoMono', Helvetica, Arial, sans-serif; color: #eee; } #project-content #project-display #project-desc { font: 300 1.2em 'AlteHaasGrotesk', Helvetica, Arial, sans-serif; color: #ebdfce; } #project-content #project-images { margin: 10px 0 0 0; opacity: 1; } #project-content #project-images .folio-image { width: 100%; margin: 0 0 50px 0; opacity: 0; } @media screen and (max-width: 768px) { #work-content #work-list .work-item { width: 100%; } } /** ------------------------------- -- Admin ------------------------------- **/ #admin-index-content { width: 100%; max-width: 1024px; margin: 0 auto; } #admin-index-content #admin-index-display { padding: 20px; width: 100%; max-width: 1024px; z-index: 10; position: relative; } #admin-index-content #admin-index-display #admin-login { width: 300px; } #admin-index-content #admin-index-display #admin-index-title { color: #eee; font: 400 2em 'RobotoMono', Helvetica, Arial, sans-serif; vertical-align: top; } #admin-index-content #admin-index-display .admin-menu-main .admin-nav span { display: inline-block; padding: 0 0 0 5px; } #admin-index-content #admin-index-display .index-block { width: 50%; display: inline-block; vertical-align: top; margin-bottom: 50px; } #admin-index-content #admin-index-display #blog-edit label { font: 600 1em 'RobotoMono', Helvetica, Arial, sans-serif; color: #eee; } #admin-index-content #admin-index-display #blog-edit textarea#entry_title { width: 100%; background: none; color: #ebdfce; font: 500 2em 'RobotoMono', Helvetica, Arial, sans-serif; } #admin-index-content #admin-index-display #blog-edit textarea#entry_text { width: 100%; height: 600px; padding: 10px; } #admin-index-content #admin-index-display #blog-meta label { font: 600 1em 'RobotoMono', Helvetica, Arial, sans-serif; color: #eee; } #admin-index-content #admin-index-display #blog-meta input, #admin-index-content #admin-index-display #blog-meta button { width: 100%; } #admin-index-content #admin-index-display #blog-meta input { color: #eb6b99; background: #32302f; } #admin-index-content #admin-index-display #blog-meta #featured-click { display: none; } #blog-index-content { width: 100%; max-width: 1024px; margin: 0 auto; } #blog-index-content #blog-hub-display #blog-hub-title { font: 400 2em 'RobotoMono', Helvetica, Arial, sans-serif; color: #eee; } #saved-index-content { width: 100%; max-width: 1024px; margin: 0 auto; } #saved-index-content #saved-hub-display #saved-hub-title label, #saved-index-content #saved-hub-display #saved-hub-main label { font: 400 2em 'RobotoMono', Helvetica, Arial, sans-serif; color: #eee; } #saved-index-content #saved-hub-display #saved-hub-title textarea, #saved-index-content #saved-hub-display #saved-hub-main textarea { width: 90%; } #saved-index-content #saved-hub-display #saved-hub-title button, #saved-index-content #saved-hub-display #saved-hub-main button { padding: 5px; } #post-edit-content { width: 100%; max-width: 1024px; margin: 0 auto; } #post-edit-content header#header #header-one #blog-edit { margin: 100px 0 0 0; position: relative; } #post-edit-content header#header #header-one #blog-edit label { font: 600 1em 'RobotoMono', Helvetica, Arial, sans-serif; color: #eee; display: block; } #post-edit-content header#header #header-one #blog-edit #entry_title { width: 90%; background: none; font: 400 2em 'RobotoMono', Helvetica, Arial, sans-serif; color: #ebdfce; } #post-edit-content header#header #header-one #blog-edit #entry_text { width: 90%; height: 500px; padding: 10px; } #post-edit-content header#header #header-one #blog-edit pre { background: #32302f; } #post-edit-content header#header #header-one #blog-edit pre code { white-space: pre-wrap; color: #ebdfce; } #post-edit-content header#header #header-two label { font: 600 1em 'RobotoMono', Helvetica, Arial, sans-serif; color: #eee; } #post-edit-content header#header #header-two #featured-image-drop { border-radius: 3px; border: 1px dashed #eee; width: 100%; font: 600 0.5em 'RobotoMono', Helvetica, Arial, sans-serif; height: 100px; text-align: center; vertical-align: middle; line-height: 100px; overflow: hidden; } #post-edit-content header#header #header-two #featured-image-drop img { width: 100%; } #post-edit-content header#header #header-two #blog-meta { margin: 100px 0 0 0; position: relative; } #post-edit-content header#header #header-two #blog-meta #featured-click { display: none; } #post-edit-content header#header #header-two #blog-meta #entry_tags, #post-edit-content header#header #header-two #blog-meta button { width: 100%; } .folio-project-form { display: inline-block; width: 56%; } .folio-project-form input[type=email], .folio-project-form input[type=password], .folio-project-form input[type=text], .folio-project-form select { width: 400px; } .folio-project-form select { margin: 10px 0 0 0; } .folio-project-form textarea { width: 400px; height: 133px; } .folio-hub { padding: 20px; } .folio-hub span { margin: 10px 10px 0 0; } .folio-hub .btn-add-project span { font: 20px 'AlteHaasGrotesk', Helvetica, Arial, sans-serif; margin: -35px 0 0 40px; display: block; height: 50px; } .folio-hub .project-list { width: 95%; } .folio-hub .project-list span.drag-handle { padding: 10px; color: #ebdfce; cursor: pointer; } .folio-hub .project-list .project-item { width: 100%; display: inline-block; background: #144252; padding: 5px; margin-bottom: 10px; border-radius: 5px; -moz-transition: all 0.3s linear; -webkit-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear; } .folio-hub .project-list .project-item:hover { background: #1e627b; } .upload-list { color: #addbeb; display: inline-block; vertical-align: top; width: 260px; height: 330px; margin: 45px 0 0; } .thumb { height: 50px; overflow: hidden; border-radius: 3px; margin: 10px 5px 0 0; } .upload-drop { width: 400px; height: 70px; background: $form-background; color: #addbeb; text-align: center; padding: 40px 0 0; font-size: 12px; text-transform: uppercase; border-radius: 3px; } /** ------------------------------- -- Forms ------------------------------- **/ form { display: inline-block; } input[type=email], input[type=password], input[type=text] { border: 0; border-radius: 5px; padding: 5px; margin: 10px 5px 0 0; font: 15px 'RobotoMono'; display: inline-block; } textarea { border: 0; border-radius: 3px; color: $type02; font: 15px 'RobotoMono'; } button, input[type=submit] { background: #baf273; color: #2b8caf; font: 14px 'RobotoMono'; border-radius: 5px; position: relative; cursor: pointer; border: 0; } select { font: 14px 'RobotoMono'; border: 1px solid #eb6b99; -webkit-appearance: none; -moz-appearance: none; appearance: none; color: #2b8caf; } ::-webkit-input-placeholder { font: 14px 'RobotoMono'; color: #837e7c; } :-moz-placeholder { /* Firefox 18- */ font: 14px 'RobotoMono'; color: #837e7c; } ::-moz-placeholder { /* Firefox 19+ */ font: 14px 'RobotoMono'; color: #837e7c; } :-ms-input-placeholder { font: 14px 'RobotoMono'; color: #837e7c; } /** ------------------------------- -- Blog ------------------------------- **/ #blog-content #blog-display #blog-list .blog-entry { display: inline-block; height: 500px; width: 50%; background-size: cover; background: #32302f; position: relative; text-align: center; vertical-align: middle; line-height: 250px; } #blog-content #blog-display #blog-list .blog-entry label { background: #eb6b99; padding: 5px; border-radius: 3px; } #post-content { width: 100%; margin: -10px 0 0 0; } #post-content #header-post { width: 100%; min-height: 350px; background: #32302f; position: relative; padding: 0; margin: 0; } #post-content #header-post img { padding: 0; margin: 0; position: relative; display: block; width: 100%; } #post-content #header-post #header-one { position: relative; width: 80%; margin: 0 auto; padding: 30px 0 0 0; } #post-content #header-post #header-one label#the-title a { font: 500 2em 'RobotoMono', Helvetica, Arial, sans-serif; width: 97px; height: 115px; color: #eb6b99; text-decoration: none; display: block; word-break: break-all; margin: 10px 0 0 10px; } #post-content #header-post #header-one span#post-title { font: 200 4.5em/1em 'RobotoMono', Helvetica, Arial, sans-serif; color: #eee; margin: 20px 0 0 10px; padding: 20px 0 80px 0; display: block; } #post-content #post-display { color: #ebdfce; width: 80%; margin: 50px auto; font: 400 1.5em 'AlteHaasGrotesk', Helvetica, Arial, sans-serif; padding-bottom: 50px; } /*# sourceMappingURL=base.css.map */