diff --git a/assets/development/styles/home.css b/assets/development/styles/home.css index 8cb01e8..9c95ee1 100644 --- a/assets/development/styles/home.css +++ b/assets/development/styles/home.css @@ -33,6 +33,10 @@ } .header-image { + display: flex; + align-items: center; + justify-content: center; + margin-right: 3em; } @@ -340,44 +344,8 @@ Nav } @media (max-width: 1000px) { - .header { - padding-top: 1em; - padding-bottom: 1em; - } - .header-container { - display: block; - } .header-left { - display: block; - } - .header-menu { - justify-content: center; - position: relative; - margin-top: 0; - } - .header-content { - padding: 0; - } - .header-home-link { - margin-bottom: .25em; - } - .header-image { - margin: 0; - text-align: center; - } - .header-image img { - width: 6em; - } - .header-sub-title { - margin-top: 1em; - text-align: center; - } - .header-title { - text-align: center; - margin-bottom: .25em; - } - .header-description { - text-align: center; + padding-bottom: 2em; } .content { @@ -420,6 +388,52 @@ Nav text-align: center; margin-bottom: 1em; } +} + +@media (max-width: 600px) { + .header { + padding-top: 1em; + padding-bottom: 1em; + } + .header-container { + display: block; + } + .header-left { + display: block; + } + .header-menu { + justify-content: center; + position: relative; + margin-top: 0; + } + .header-content { + padding: 0; + } + .header-home-link { + margin-bottom: .25em; + } + .header-image { + margin: 0; + text-align: center; + } + .header-image img { + width: 6em; + } + .header-sub-title { + margin-top: 1em; + text-align: center; + } + .header-title { + text-align: center; + margin-bottom: .25em; + } + .header-description { + text-align: center; + } + + + + .card { display: block; } @@ -433,4 +447,4 @@ Nav .card-content { width: auto; } -} +} \ No newline at end of file diff --git a/assets/production/styles/home.css b/assets/production/styles/home.css index 0d35e13..bac8650 100644 --- a/assets/production/styles/home.css +++ b/assets/production/styles/home.css @@ -1 +1 @@ -.header{padding-bottom:1.5em;padding-top:1.5em;background-color:#d35400}.header-container{position:relative;display:flex;justify-content:space-between}.header-left{display:flex}.header-menu{position:absolute;right:0;bottom:0;display:flex;align-items:flex-end}.header-menu a{color:#fff;margin-right:1em}.header-menu a:last-of-type{margin-right:0}.header-image{margin-right:3em}.header-image img{width:7em}.header-home-link{display:flex;justify-content:center}.header-content{display:flex;flex-direction:column;justify-content:space-between;padding-top:1em;padding-bottom:1em}.header-title{font-family:'Roboto Slab',serif;margin:0;color:#fff;font-weight:500;font-size:2.5em}.header-sub-title{margin:0;text-decoration:underline;font-weight:100;color:#ecf0f1;transition:opacity .2s}.header-sub-title:hover{opacity:.9;color:#ecf0f1}.header-description{color:#ecf0f1}.content{padding-top:1.5em;display:flex;padding-bottom:1em}.nav{margin-right:2em}.nav-item{width:15em;padding:1em;border-radius:4px;margin-bottom:.7em;border:3px solid rgba(255,111,10,.7);display:flex;cursor:pointer;transition:ease-in-out .1s;height:1.2em}.nav-item svg{width:.75em;height:.75em}.nav-icon{width:1em;display:flex;justify-content:center;align-items:center;color:#c28200;font-size:1.5em;margin-left:.25em;opacity:.7}.nav-item-content{margin-left:1em;display:flex;justify-content:space-between;width:100%}.nav-title{display:flex;align-items:center;opacity:.7}.nav-access{display:flex;align-items:center;color:#ff6f0a;opacity:.7}.nav-item.enabled{border-color:#ff6f0a}.nav-item.enabled .nav-access{opacity:1}.nav-item.enabled .nav-icon{opacity:1}.nav-item.enabled .nav-title{opacity:1}.nav-item:hover{transform:scale(1.05)}#nav-enabler{display:none}#nav-content{position:sticky;top:10px}.mosaic{background:#fff;width:100%;padding-bottom:.25em;flex-grow:1}.mosaic-header{width:100%;display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5em}.mosaic-actions{display:flex}.mosaic-action{cursor:pointer;border:0;background-color:transparent;padding:.75em .75em;color:#2c3e50;display:flex;justify-content:center;align-items:center;border-radius:2px;margin-right:.5em;border:1px solid #7f8c8d;transition:all .2s}.mosaic-action:hover{opacity:.8}.mosaic-action .btn-icon{width:1em}.mosaic-action.enabled{background-color:#ecf0f1;color:#d35400}.mosaic-count{opacity:.8}.card-container{margin:0 auto;width:85%}.card{cursor:pointer;display:flex;border:1px solid #bdc3c7;border-radius:4px;margin-bottom:1em;box-shadow:0 0 8px 0 rgba(0,0,0,.1);overflow:hidden;text-decoration:none;transition:transform .2s ease-in-out}.card:hover{text-decoration:none}.card-image-container{border-right:1px solid #c4c4c4;display:flex;justify-content:center;align-items:center;padding:1em}.card-image{height:12em;width:12em;background-position:center;background-size:cover;transition:all .2s ease-in-out;border:0;outline:0;box-shadow:0}.card-image:hover{transform:scale(1.1)}.card-content{width:100%;padding:1.5em;display:flex;flex-direction:column;justify-content:space-between}.card-title-container{display:flex;justify-content:space-between}.card-icon{color:#c28200;opacity:.85;margin-top:-.5em;margin-right:-.5em;font-size:1.4em}.card-icon svg{width:1em;height:1em}.card-title{color:#b12008;margin:0;margin-bottom:.5em;padding-right:1em}.card-description{color:#34495e;margin:0;line-height:1.6em;overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-word;word-break:break-word}.card-description::first-letter{text-transform:capitalize}@media (max-width:1350px){.card-container{width:100%}.header-left{padding-bottom:1em}}@media (max-width:1000px){.header{padding-top:1em;padding-bottom:1em}.header-container{display:block}.header-left{display:block}.header-menu{justify-content:center;position:relative;margin-top:0}.header-content{padding:0}.header-home-link{margin-bottom:.25em}.header-image{margin:0;text-align:center}.header-image img{width:6em}.header-sub-title{margin-top:1em;text-align:center}.header-title{text-align:center;margin-bottom:.25em}.header-description{text-align:center}.content{display:block;padding-top:1em}.nav{margin-right:0;user-select:none}#nav-enabler{display:flex}#nav-enabler-icon{transform:rotate(-90deg)}#nav-content{overflow:hidden;max-height:0;transition:max-height .1s ease-out}.nav-item{width:auto}.nav-item:hover{transform:scale(1)}.nav-mobile-enabler #nav-enabler-icon{transition:all .1s ease}.mosaic{position:relative;border-top:1px solid #c4c4c4;padding-top:1em;margin-top:.3em}.mosaic-header{text-align:center;margin-bottom:1em}.card{display:block}.card-image-container{padding:0;margin:0;border-right:0;border-bottom:1px solid #c4c4c4;overflow:hidden}.card-content{width:auto}} \ No newline at end of file +.header{padding-bottom:1.5em;padding-top:1.5em;background-color:#d35400}.header-container{position:relative;display:flex;justify-content:space-between}.header-left{display:flex}.header-menu{position:absolute;right:0;bottom:0;display:flex;align-items:flex-end}.header-menu a{color:#fff;margin-right:1em}.header-menu a:last-of-type{margin-right:0}.header-image{display:flex;align-items:center;justify-content:center;margin-right:3em}.header-image img{width:7em}.header-home-link{display:flex;justify-content:center}.header-content{display:flex;flex-direction:column;justify-content:space-between;padding-top:1em;padding-bottom:1em}.header-title{font-family:'Roboto Slab',serif;margin:0;color:#fff;font-weight:500;font-size:2.5em}.header-sub-title{margin:0;text-decoration:underline;font-weight:100;color:#ecf0f1;transition:opacity .2s}.header-sub-title:hover{opacity:.9;color:#ecf0f1}.header-description{color:#ecf0f1}.content{padding-top:1.5em;display:flex;padding-bottom:1em}.nav{margin-right:2em}.nav-item{width:15em;padding:1em;border-radius:4px;margin-bottom:.7em;border:3px solid rgba(255,111,10,.7);display:flex;cursor:pointer;transition:ease-in-out .1s;height:1.2em}.nav-item svg{width:.75em;height:.75em}.nav-icon{width:1em;display:flex;justify-content:center;align-items:center;color:#c28200;font-size:1.5em;margin-left:.25em;opacity:.7}.nav-item-content{margin-left:1em;display:flex;justify-content:space-between;width:100%}.nav-title{display:flex;align-items:center;opacity:.7}.nav-access{display:flex;align-items:center;color:#ff6f0a;opacity:.7}.nav-item.enabled{border-color:#ff6f0a}.nav-item.enabled .nav-access{opacity:1}.nav-item.enabled .nav-icon{opacity:1}.nav-item.enabled .nav-title{opacity:1}.nav-item:hover{transform:scale(1.05)}#nav-enabler{display:none}#nav-content{position:sticky;top:10px}.mosaic{background:#fff;width:100%;padding-bottom:.25em;flex-grow:1}.mosaic-header{width:100%;display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5em}.mosaic-actions{display:flex}.mosaic-action{cursor:pointer;border:0;background-color:transparent;padding:.75em .75em;color:#2c3e50;display:flex;justify-content:center;align-items:center;border-radius:2px;margin-right:.5em;border:1px solid #7f8c8d;transition:all .2s}.mosaic-action:hover{opacity:.8}.mosaic-action .btn-icon{width:1em}.mosaic-action.enabled{background-color:#ecf0f1;color:#d35400}.mosaic-count{opacity:.8}.card-container{margin:0 auto;width:85%}.card{cursor:pointer;display:flex;border:1px solid #bdc3c7;border-radius:4px;margin-bottom:1em;box-shadow:0 0 8px 0 rgba(0,0,0,.1);overflow:hidden;text-decoration:none;transition:transform .2s ease-in-out}.card:hover{text-decoration:none}.card-image-container{border-right:1px solid #c4c4c4;display:flex;justify-content:center;align-items:center;padding:1em}.card-image{height:12em;width:12em;background-position:center;background-size:cover;transition:all .2s ease-in-out;border:0;outline:0;box-shadow:0}.card-image:hover{transform:scale(1.1)}.card-content{width:100%;padding:1.5em;display:flex;flex-direction:column;justify-content:space-between}.card-title-container{display:flex;justify-content:space-between}.card-icon{color:#c28200;opacity:.85;margin-top:-.5em;margin-right:-.5em;font-size:1.4em}.card-icon svg{width:1em;height:1em}.card-title{color:#b12008;margin:0;margin-bottom:.5em;padding-right:1em}.card-description{color:#34495e;margin:0;line-height:1.6em;overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-word;word-break:break-word}.card-description::first-letter{text-transform:capitalize}@media (max-width:1350px){.card-container{width:100%}.header-left{padding-bottom:1em}}@media (max-width:1000px){.header-left{padding-bottom:2em}.content{display:block;padding-top:1em}.nav{margin-right:0;user-select:none}#nav-enabler{display:flex}#nav-enabler-icon{transform:rotate(-90deg)}#nav-content{overflow:hidden;max-height:0;transition:max-height .1s ease-out}.nav-item{width:auto}.nav-item:hover{transform:scale(1)}.nav-mobile-enabler #nav-enabler-icon{transition:all .1s ease}.mosaic{position:relative;border-top:1px solid #c4c4c4;padding-top:1em;margin-top:.3em}.mosaic-header{text-align:center;margin-bottom:1em}}@media (max-width:600px){.header{padding-top:1em;padding-bottom:1em}.header-container{display:block}.header-left{display:block}.header-menu{justify-content:center;position:relative;margin-top:0}.header-content{padding:0}.header-home-link{margin-bottom:.25em}.header-image{margin:0;text-align:center}.header-image img{width:6em}.header-sub-title{margin-top:1em;text-align:center}.header-title{text-align:center;margin-bottom:.25em}.header-description{text-align:center}.card{display:block}.card-image-container{padding:0;margin:0;border-right:0;border-bottom:1px solid #c4c4c4;overflow:hidden}.card-content{width:auto}} \ No newline at end of file