diff --git a/.ovhconfig b/.ovhconfig new file mode 100644 index 0000000..8e10aa7 --- /dev/null +++ b/.ovhconfig @@ -0,0 +1,2 @@ +app.engine=php +app.engine.version=7.0 diff --git a/user/config/site.yaml b/user/config/site.yaml index f45a68d..c8200bc 100644 --- a/user/config/site.yaml +++ b/user/config/site.yaml @@ -1,6 +1,6 @@ title: Ouidade Soussi Chiadmi # Name of the site -subtitle: Photographie +subtitle: Photographe adresse: email: contact@ouidade.com @@ -14,7 +14,7 @@ taxonomies: [tag, category, client] # Arbitrary list of taxonom #[édition,édition jeunesse,art,identité visuelle,signalétique,évènement metadata: - description: 'Photographie' # Site description + description: 'Ouidade Soussi Chiadmi Photographe Portfolio.' # Site description summary: enabled: true # enable or disable summary of page diff --git a/user/config/system.yaml b/user/config/system.yaml index 77bc633..6025983 100644 --- a/user/config/system.yaml +++ b/user/config/system.yaml @@ -11,7 +11,7 @@ pages: twig: false cache: - enabled: false + enabled: true check: method: file driver: auto @@ -19,8 +19,8 @@ cache: twig: cache: true - debug: true - auto_reload: true + debug: false + auto_reload: false autoescape: false assets: @@ -31,11 +31,11 @@ assets: js_minify: true errors: - display: true + display: false log: true debugger: - enabled: true - twig: true + enabled: false + twig: false shutdown: close_connection: true diff --git a/user/themes/ouidade/css/styles.css b/user/themes/ouidade/css/styles.css index b728f0d..b5358a6 100644 --- a/user/themes/ouidade/css/styles.css +++ b/user/themes/ouidade/css/styles.css @@ -7185,7 +7185,6 @@ header#top-bar { font-size: 1em; margin: 0; height: 100%; - min-height: 8.08em; overflow: hidden; position: relative; } header#top-bar #title-area h1 a { @@ -7193,6 +7192,9 @@ header#top-bar { height: 9.3em; margin: 0.3em 0 0.5em; color: #e30613; + transition-property: color, font-size; + transition-duration: 0.4s; + transition-timing-function: ease-out; font: "cocogoose", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; font-size: 0.8em; font-weight: 300; @@ -7204,102 +7206,30 @@ header#top-bar { width: 95px; height: 95px; border-radius: 47.5px; - border: 17px solid #5b2d87; + border: 17.27273px solid #5b2d87; + transition-property: width, height, border-radius, border-color, border-width; + transition-duration: 0.4s; + transition-timing-function: ease-out; margin: 0 auto 1em; } + header#top-bar #title-area:hover h1 a { + color: #5b2d87; + transition-duration: 0.2s; + transition-timing-function: ease-in-out; } + header#top-bar #title-area:hover h1 a:before { + border-color: #e30613; + transition-duration: 0.2s; + transition-timing-function: ease-in-out; } header#top-bar.reduced #title-area { - height: 7.63055em; } + height: 7.07em; } + header#top-bar.reduced #title-area h1 a:before { + width: 50px; + height: 50px; + border-radius: 25px; + border-width: 9.09091px; } header#top-bar h1, header#top-bar h2 { text-align: center; } header#top-bar h1 a, header#top-bar h2 a { color: inherit; } - header#top-bar .nav { - padding: 0; - position: relative; - height: 100%; } - header#top-bar .nav ul { - padding: 0; - margin: 0; } - header#top-bar .nav li { - list-style: none; } - @media screen and (min-width: 40em) { - header#top-bar .nav .wrapper { - padding-top: 4.55em; } } - header#top-bar #left-nav { - text-align: left; } - header#top-bar #left-nav h4 { - font: "cocogoose", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; - font-size: 0.8em; - font-weight: 300; - font-variant: normal; - margin: 0; - line-height: 1.9; } - header#top-bar #left-nav h4 a { - color: #5b2d87; } - header#top-bar #left-nav ul { - background-color: transparent; - padding-bottom: 1em; } - header#top-bar #left-nav li { - line-height: 1; - overflow: hidden; - height: 0.01px; - transition: height 0.3s ease-in; - position: relative; } - header#top-bar #left-nav li a { - display: block; } - header#top-bar #left-nav li a:before { - content: ""; - opacity: 1; - position: relative; - display: inline-block; - border-width: 3px; - border-style: solid; - width: 12px; - height: 12px; - border-radius: 6px; } - header#top-bar #left-nav li a.tag-1:before { - border-color: #e30613; } - header#top-bar #left-nav li a.tag-2:before { - border-color: #00acba; } - header#top-bar #left-nav li a.tag-3:before { - border-color: #5b2d87; } - header#top-bar #left-nav li a.tag-4:before { - border-color: #f7a939; } - header#top-bar #left-nav li a.tag-5:before { - border-color: #95c11f; } - header#top-bar #left-nav li a.tag-6:before { - border-color: #e5007d; } - header#top-bar #left-nav li a.tag-7:before { - border-color: #009641; } - header#top-bar #left-nav li a.tag-8:before { - border-color: #009fe3; } - header#top-bar #left-nav li a span { - font: "cocogoose", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; - font-size: 0.8em; - font-weight: 300; - font-variant: normal; - font-weight: 300; - white-space: nowrap; - padding: 0.15em 0.3em; } - @media only screen and (min-width: 40.0625em) { - header#top-bar #left-nav:hover li { - height: 1.1em; - transition: height 0.5s ease-out; } - header#top-bar #left-nav:hover li:hover span { - text-decoration: underline; } } - header#top-bar #right-nav { - text-align: right; - line-height: 0.5; } - header#top-bar #right-nav a { - font: "cocogoose", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; - font-size: 0.8em; - font-weight: 300; - font-variant: normal; } - header#top-bar #right-nav a:hover { - font: "cocogoose", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; - font-size: 0.8em; - font-weight: 300; - font-variant: normal; - text-decoration: underline; } header#top-bar div.line { bottom: 0; height: 1px; @@ -7347,65 +7277,82 @@ div#center { div#center .projet-block nav.categories { margin: 0; } div#center .projet-block nav.categories ul { - margin: 0; } + margin: 0; + line-height: 1.2; } div#center .projet-block nav.categories ul li { position: relative; display: inline-block; min-width: 12px; - height: 12px; margin-right: -0.2em; } div#center .projet-block nav.categories ul li a { - display: block; } - div#center .projet-block nav.categories ul li a:before { + display: block; + overflow: hidden; + white-space: nowrap; + font-size: 0; + max-width: 15px; + transition: max-width 0.3s ease-in-out; } + div#center .projet-block nav.categories ul li a:not(.active):before { content: ""; opacity: 1; position: relative; display: inline-block; + vertical-align: middle; border-width: 3px; border-style: solid; width: 12px; height: 12px; border-radius: 6px; } + div#center .projet-block nav.categories ul li a.active:before { + content: "\d7"; + /* use the hex value here... \274c */ + font-size: 35px; + line-height: 0.4; + width: 12px; + height: 12px; + position: relative; + display: inline-block; + vertical-align: middle; + color: #000; } div#center .projet-block nav.categories ul li a.tag-1:before { - border-color: #e30613; } + border-color: #e30613; + color: #e30613; } div#center .projet-block nav.categories ul li a.tag-2:before { - border-color: #00acba; } + border-color: #00acba; + color: #00acba; } div#center .projet-block nav.categories ul li a.tag-3:before { - border-color: #5b2d87; } + border-color: #5b2d87; + color: #5b2d87; } div#center .projet-block nav.categories ul li a.tag-4:before { - border-color: #f7a939; } + border-color: #f7a939; + color: #f7a939; } div#center .projet-block nav.categories ul li a.tag-5:before { - border-color: #95c11f; } + border-color: #95c11f; + color: #95c11f; } div#center .projet-block nav.categories ul li a.tag-6:before { - border-color: #e5007d; } + border-color: #e5007d; + color: #e5007d; } div#center .projet-block nav.categories ul li a.tag-7:before { - border-color: #009641; } + border-color: #009641; + color: #009641; } div#center .projet-block nav.categories ul li a.tag-8:before { - border-color: #009fe3; } + border-color: #009fe3; + color: #009fe3; } div#center .projet-block nav.categories ul li a span { - position: absolute; - z-index: -1; - font-size: 0.7em; + display: inline-block; + vertical-align: middle; + letter-spacing: normal; + font-size: 11px; font-weight: 300; background-color: #fff; white-space: nowrap; opacity: 0; transition: opacity 0.3s ease-in-out; - padding: 0.2em 0.3em; - width: 0; } - div#center .projet-block nav.categories ul li a:hover span { - opacity: 1; - width: auto; - z-index: 10; } + padding: 1px 5px 0 1px; } div#center .projet-block a.image-link { display: block; overflow: hidden; } div#center .projet-block a.image-link img { transition: transform 0.4s ease-out; } - div#center .projet-block a.image-link img:hover { - transition: transform 0.2s ease-in-out; - transform-origin: center; - transform: scale(1.2); } div#center .projet-block header { position: relative; margin-top: -3em; @@ -7421,12 +7368,14 @@ div#center { font-weight: 500; font-variant: normal; color: #5b2d87; + transition: color 0.4s ease-out; margin: 0.4em 0 0.5em 0; line-height: 1.6; height: auto; } div#center .projet-block h1 span.date { font-weight: 200; border-left: 1px solid #5b2d87; + transition: border-left-color 0.4s ease-out; padding: 0.2em 0 0 0.5em; margin-left: 0.2em; } div#center .projet-block h2 { @@ -7448,62 +7397,101 @@ div#center { font-weight: 500; font-variant: normal; margin-bottom: 0.3em; } + div#center .projet-block:hover nav.categories a { + max-width: 300px; } + div#center .projet-block:hover nav.categories a span { + opacity: 1; } + div#center .projet-block:hover a.image-link img { + transition: transform 0.3s ease-out; + transform-origin: center; + transform: scale(1.2); } + div#center .projet-block:hover header h1, div#center .projet-block:hover header h2 a { + color: #e30613; + transition: color 0.2s ease-in-out; } + div#center .projet-block:hover header h1 span.date { + border-left-color: #e30613; + transition: border-left-color 0.2s ease-in-out; } div#center .projet .row { margin: 0; } div#center .projet nav.categories { margin: 0; padding: 0.7em 0.7em 0; } div#center .projet nav.categories ul { - margin: 0; } + margin: 0; + line-height: 1.2; } div#center .projet nav.categories ul li { position: relative; display: inline-block; min-width: 12px; - height: 12px; margin-right: -0.2em; } div#center .projet nav.categories ul li a { - display: block; } - div#center .projet nav.categories ul li a:before { + display: block; + overflow: hidden; + white-space: nowrap; + font-size: 0; + max-width: 15px; + transition: max-width 0.3s ease-in-out; } + div#center .projet nav.categories ul li a:not(.active):before { content: ""; opacity: 1; position: relative; display: inline-block; + vertical-align: middle; border-width: 3px; border-style: solid; width: 12px; height: 12px; border-radius: 6px; } + div#center .projet nav.categories ul li a.active:before { + content: "\d7"; + /* use the hex value here... \274c */ + font-size: 35px; + line-height: 0.4; + width: 12px; + height: 12px; + position: relative; + display: inline-block; + vertical-align: middle; + color: #000; } div#center .projet nav.categories ul li a.tag-1:before { - border-color: #e30613; } + border-color: #e30613; + color: #e30613; } div#center .projet nav.categories ul li a.tag-2:before { - border-color: #00acba; } + border-color: #00acba; + color: #00acba; } div#center .projet nav.categories ul li a.tag-3:before { - border-color: #5b2d87; } + border-color: #5b2d87; + color: #5b2d87; } div#center .projet nav.categories ul li a.tag-4:before { - border-color: #f7a939; } + border-color: #f7a939; + color: #f7a939; } div#center .projet nav.categories ul li a.tag-5:before { - border-color: #95c11f; } + border-color: #95c11f; + color: #95c11f; } div#center .projet nav.categories ul li a.tag-6:before { - border-color: #e5007d; } + border-color: #e5007d; + color: #e5007d; } div#center .projet nav.categories ul li a.tag-7:before { - border-color: #009641; } + border-color: #009641; + color: #009641; } div#center .projet nav.categories ul li a.tag-8:before { - border-color: #009fe3; } + border-color: #009fe3; + color: #009fe3; } div#center .projet nav.categories ul li a span { - position: absolute; - z-index: -1; - font-size: 0.7em; + display: inline-block; + vertical-align: middle; + letter-spacing: normal; + font-size: 11px; font-weight: 300; background-color: #fff; white-space: nowrap; opacity: 0; transition: opacity 0.3s ease-in-out; - padding: 0.2em 0.3em; - width: 0; } - div#center .projet nav.categories ul li a:hover span { - opacity: 1; - width: auto; - z-index: 10; } + padding: 1px 5px 0 1px; } + div#center .projet nav.categories ul li a { + max-width: 500px; } + div#center .projet nav.categories ul li a span { + opacity: 1; } div#center .projet h1 { font: "cocogoose", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; font-size: 0.95em; @@ -7534,19 +7522,30 @@ div#center { padding: 0 0.7em 0.7em; margin: 0; } div#center .projet #images { + max-width: 100%; letter-spacing: 0px; } div#center .projet #images a { + max-width: calc(100% - 1em); letter-spacing: normal; display: inline-block; - margin: 0.7em 0 0 0.7em; } + margin: 0.4em 0 0 0.5em; + overflow: hidden; } + div#center .projet #images a:hover img { + transition: transform 0.4s ease-out; + transform-origin: center; + transform: scale(1.2); } div#center .projet img { - max-width: 100%; - height: 300px; } + height: 300px; + transition: transform 0.4s ease-out; } + @media only screen and (max-width: 40em) { + div#center .projet img { + max-width: 100%; + height: auto; } } div#center .default > * { padding-left: 0.7em; padding-right: 0.7em; } div#center nav.categories { - margin: 1em 0; } + margin: 1em 0 0; } div#center nav.categories ul.tags { margin: 0; padding: 0; @@ -7554,40 +7553,63 @@ div#center { div#center nav.categories ul.tags li { list-style: none; display: inline-block; - margin: 0 1em; } + margin: 0 0.3em; } div#center nav.categories ul.tags li a { display: block; } - div#center nav.categories ul.tags li a:before { + div#center nav.categories ul.tags li a:not(.active):before { content: ""; opacity: 1; position: relative; display: inline-block; + vertical-align: middle; border-width: 3px; border-style: solid; width: 12px; height: 12px; border-radius: 6px; } + div#center nav.categories ul.tags li a.active:before { + content: "\d7"; + /* use the hex value here... \274c */ + font-size: 35px; + line-height: 0.4; + width: 12px; + height: 12px; + position: relative; + display: inline-block; + vertical-align: middle; + color: #000; } div#center nav.categories ul.tags li a.tag-1:before { - border-color: #e30613; } + border-color: #e30613; + color: #e30613; } div#center nav.categories ul.tags li a.tag-2:before { - border-color: #00acba; } + border-color: #00acba; + color: #00acba; } div#center nav.categories ul.tags li a.tag-3:before { - border-color: #5b2d87; } + border-color: #5b2d87; + color: #5b2d87; } div#center nav.categories ul.tags li a.tag-4:before { - border-color: #f7a939; } + border-color: #f7a939; + color: #f7a939; } div#center nav.categories ul.tags li a.tag-5:before { - border-color: #95c11f; } + border-color: #95c11f; + color: #95c11f; } div#center nav.categories ul.tags li a.tag-6:before { - border-color: #e5007d; } + border-color: #e5007d; + color: #e5007d; } div#center nav.categories ul.tags li a.tag-7:before { - border-color: #009641; } + border-color: #009641; + color: #009641; } div#center nav.categories ul.tags li a.tag-8:before { - border-color: #009fe3; } + border-color: #009fe3; + color: #009fe3; } div#center nav.categories ul.tags li span { font: "cocogoose", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; font-size: 0.8em; font-weight: 300; - font-variant: normal; } + font-variant: normal; + display: inline-block; + vertical-align: middle; + padding: 1px 5px 0 1px; } /* _ _ _ @@ -7601,27 +7623,31 @@ div#center { */ @media only screen and (max-width: 40em) { header#top-bar:before { - padding-bottom: 0.45em; } + padding-bottom: 0.27em; } header#top-bar #title-area { - height: 10.1em -3.1em; } + height: 7.1em; } header#top-bar #title-area h1 { height: 100%; - min-height: 5.6em; } + min-height: 2.48em; } header#top-bar #title-area h1 a { display: block; height: 6.3em; } + header#top-bar #title-area h1 a:before { + width: 60px; + height: 60px; + border-radius: 30px; + border-width: 10.90909px; } header#top-bar.reduced #title-area { - height: 5.2885em; } - header#top-bar .nav { - position: absolute; - top: 0.75em; - height: auto; } - header#top-bar #left-nav { - left: 0; } - header#top-bar #right-nav { - right: 0; } + height: 4.9em; } + header#top-bar.reduced #title-area h1 { + font-size: 0.65em; } + header#top-bar.reduced #title-area h1 a:before { + width: 30px; + height: 30px; + border-radius: 15px; + border-width: 5.45455px; } div#center { - padding-top: 10.2em; + padding-top: 8.2em; padding-bottom: 6em; } body.categories a.projet-img { display: none; } } @@ -7640,9 +7666,13 @@ footer#bottom-bar { width: 100%; height: 5em; background-color: #5b2d87; + transition: background-color 0.4s ease-out; color: white; text-align: center; - padding: 1em 0; } + padding: 0.5em 0; } + footer#bottom-bar:hover { + background-color: #e30613; + transition: background-color 0.2s ease-in-out; } footer#bottom-bar h1 { font: "cocogoose", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; font-size: 0.95em; @@ -7652,7 +7682,8 @@ footer#bottom-bar { display: inline-block; position: relative; margin: 0; - color: inherit; } + color: inherit; + font-size: 0.75em; } footer#bottom-bar h1 a { font-weight: inherit; color: inherit; } @@ -7661,11 +7692,18 @@ footer#bottom-bar { font-size: 0.8em; font-weight: 300; font-variant: normal; + font-size: 0.6em; margin: -0.7em 0 0; line-height: 1.1; font-style: normal; } footer#bottom-bar address a { text-decoration: underline; } + footer#bottom-bar ul.footer-menu { + text-align: center; } + footer#bottom-bar ul.footer-menu li { + display: inline-block; } + footer#bottom-bar ul.footer-menu li a { + font-size: 0.6em; } div.featherlight:last-of-type { background-color: rgba(255, 255, 255, 0.9); } diff --git a/user/themes/ouidade/js/dist/script.min.js b/user/themes/ouidade/js/dist/script.min.js index 96c35dc..475f502 100644 --- a/user/themes/ouidade/js/dist/script.min.js +++ b/user/themes/ouidade/js/dist/script.min.js @@ -1,2 +1,5 @@ -jQuery(document).ready(function($){if($(window).width()>600){var $grid=$('.grid').isotope({itemSelector:'.grid-block',transitionDuration:'0.4s'});$('#left-nav a, .projet-block nav.categories a').on('click',function(e){e.preventDefault();var filterValue=$(this).attr('data-filter');$grid.isotope({filter:filterValue});return false;});}}); \ No newline at end of file +jQuery(document).ready(function($){$(window).scroll(function(){var topOfWindow=$(window).scrollTop();if(topOfWindow>100){$("#top-bar").addClass("reduced");} +else{$("#top-bar").removeClass("reduced");}});if($(window).width()>600&&$('body').is('.home')){var $grid=$('.grid').isotope({itemSelector:'.grid-block',transitionDuration:'0.4s'});$grid.imagesLoaded().progress(function(){$grid.isotope('layout');});$('nav.categories a').on('click',function(e){e.preventDefault();if($(this).is('.active')){location.hash='';}else{var filterValue=$(this).attr('data-filter');location.hash=encodeURIComponent(filterValue);} +return false;});function onHashchange(){var hashFilter=decodeURIComponent(location.hash.replace('#',''));$('nav.categories a').removeClass('active');if(!hashFilter){$grid.isotope({filter:'*'});}else{$('nav.categories a[data-filter='+hashFilter+']').addClass('active');$grid.isotope({filter:'.'+hashFilter});}} +$(window).on('hashchange',onHashchange);onHashchange();}}); \ No newline at end of file diff --git a/user/themes/ouidade/js/script.js b/user/themes/ouidade/js/script.js index 5381194..bb0cb01 100644 --- a/user/themes/ouidade/js/script.js +++ b/user/themes/ouidade/js/script.js @@ -1,41 +1,21 @@ jQuery(document).ready(function($) { //window scrolls check - // $(window).scroll(function() { - // var topOfWindow = $(window).scrollTop(); - // // console.log('topOfWindow',topOfWindow); - // if (topOfWindow > 100) { - // $("#top-bar").addClass("reduced"); - // } - // else { - // $("#top-bar").removeClass("reduced"); - // } - // }); + $(window).scroll(function() { + var topOfWindow = $(window).scrollTop(); + // console.log('topOfWindow',topOfWindow); + if (topOfWindow > 100) { + $("#top-bar").addClass("reduced"); + } + else { + $("#top-bar").removeClass("reduced"); + } + }); // init categories content images behaviour // console.log($(window).width()); - if( $(window).width() > 600 ){ - // if($('body').is('.categories')){ - // // console.log('hello'); - // var $diapo = $('
'); - // $("#categories-content") - // .before($diapo) - // .find('li.project').each(function(index, el) { - // // console.log(index); - // $(this) - // .addClass('projet-'+index) - // .hover(function (e) { - // $diapo.children().removeClass('visible'); - // var c = $(this).attr('class').match('projet-[0-9]+'); - // console.log("class",c[0]); - // $diapo.children('.'+c[0]).addClass('visible'); - // }) - // .find('.projet-img') - // .addClass('projet-'+index) - // .appendTo($diapo); - // }); - // $diapo.children('.projet-img').first().addClass('visible'); - // } + if( $(window).width() > 600 && $('body').is('.home')){ + // init Isotope var $grid = $('.grid').isotope({ @@ -43,28 +23,46 @@ jQuery(document).ready(function($) { transitionDuration: '0.4s' }); - // $grid.imagesLoaded().progress(function(){ - // $grid.masonry('layout'); - // }); + // $('.grid .grid-block') + // .hide() + // .imagesLoaded().progress( function( imgLoad, image ) { + // // get item + // // image is imagesLoaded class, not , is image.img + // var $item = $( image.img ).parents('.grid-block'); + // // un-hide item + // $item.show(); + // // isotope does its thing + // $grid.appended( $item ); + // }); + + $grid.imagesLoaded().progress(function(){ + $grid.isotope('layout'); + }); // filter items on button click - $('#left-nav a, .projet-block nav.categories a').on( 'click', function(e) { + $('nav.categories a').on( 'click', function(e) { e.preventDefault(); - - var filterValue = $(this).attr('data-filter'); - $grid.isotope({ filter: filterValue }); - + if($(this).is('.active')){ + location.hash = ''; + }else{ + var filterValue = $(this).attr('data-filter'); + location.hash = encodeURIComponent( filterValue ); + } return false; }); - // init Masonry - // var $grid = $('.grid').masonry({ - // itemSelector: '.grid-block', - // transitionDuration: '0.4s' - // }); - // - // $grid.imagesLoaded().progress(function(){ - // $grid.masonry('layout'); - // }); + function onHashchange() { + var hashFilter = decodeURIComponent(location.hash.replace('#', '')); + $('nav.categories a').removeClass('active'); + if ( !hashFilter ) { + $grid.isotope({filter: '*'}); + }else{ + $('nav.categories a[data-filter='+hashFilter+']').addClass('active'); + $grid.isotope({filter: '.'+hashFilter}); + } + } + + $(window).on( 'hashchange', onHashchange ); + onHashchange(); } }); diff --git a/user/themes/ouidade/scss/styles.scss b/user/themes/ouidade/scss/styles.scss index 544b2f3..f53a750 100644 --- a/user/themes/ouidade/scss/styles.scss +++ b/user/themes/ouidade/scss/styles.scss @@ -85,7 +85,7 @@ $logoH: 9.3em; $logo_mt:0.3em; $logo_mb:0.5em; $titleareaH: $logoH+$logo_mb+$logo_mt; -$titleReducedFactor:0.7555; +$titleReducedFactor:0.7; $titleReducedFactorSmall:0.5; $centerpaddingtop: $headerborderH+$headerpaddingtopH+$titleareaH; $footerheight: 5em; @@ -123,13 +123,17 @@ header#top-bar{ h1{ font-size: 1em; margin: 0; height:100%; - min-height:$titleareaH*0.8; + // min-height:$titleareaH*0.8; overflow: hidden; position: relative; a{display: block; height:$logoH; margin:$logo_mt 0 $logo_mb; color:$secondcolor; + transition-property: color, font-size; + transition-duration: 0.4s; + transition-timing-function: ease-out; + // transition: color 0.4s ease-out; @include fontnormal; font-weight: 500; &:before{ @@ -138,16 +142,40 @@ header#top-bar{ $r: 95px; width:$r; height:$r; border-radius: $r/2; - border: 17px solid $maincolor; + border: $r/5.5 solid $maincolor; + transition-property: width, height, border-radius, border-color, border-width; + transition-duration: 0.4s; + transition-timing-function: ease-out; + // transition: border-color 0.4s ease-out; margin: 0 auto 1em; } } } + &:hover{ + h1 a{ + color: $maincolor; + transition-duration: 0.2s; + transition-timing-function: ease-in-out; + // transition: color 0.2s ease-in-out; + &:before{ + border-color:$secondcolor; + transition-duration: 0.2s; + transition-timing-function: ease-in-out; + // transition: border-color 0.2s ease-in-out; + } + } + } } &.reduced{ #title-area{ height:$titleareaH*$titleReducedFactor; + h1 a:before{ + $r: 50px; + width:$r; height:$r; + border-radius: $r/2; + border-width: $r/5.5; + } // @media #{$medium-up}{ // height:$titleareaH*$titleReducedFactorSmall; // } @@ -161,102 +189,102 @@ header#top-bar{ color: inherit; }} - .nav{ - padding:0; - position:relative; - height:100%; - ul{padding: 0; margin: 0;} - li{list-style: none;} - // @include breakpoint(medium) { - @media screen and (min-width:$small-breakpoint) { - .wrapper{padding-top: $titleareaH/2-.5em;} - } - } + // .nav{ + // padding:0; + // position:relative; + // height:100%; + // ul{padding: 0; margin: 0;} + // li{list-style: none;} + // // @include breakpoint(medium) { + // @media screen and (min-width:$small-breakpoint) { + // .wrapper{padding-top: $titleareaH/2-.5em;} + // } + // } - #left-nav{ - // margin-right: -0.1rem; - text-align: left; + // #left-nav{ + // // margin-right: -0.1rem; + // text-align: left; + // + // h4{ + // @include fontnormal; margin:0; line-height: 1.9; + // a{color:$maincolor;} + // // a:hover{text-decoration: underline;} + // } + // ul{background-color: transparent; padding-bottom: 1em;} + // li{ + // line-height: 1; + // // &:not(.active){ + // overflow: hidden; height:0.01px; transition: height 0.3s ease-in; + // // } + // position: relative; + // // line-height: $catRadius; + // // min-width:$catRadius; height:$catRadius; + // a{ + // display: block; + // &:before{ + // content:""; + // opacity: 1; + // position: relative; + // display:inline-block; + // border-width: 3px; + // border-style: solid; + // // line-height: $catRadius; + // width:$catRadius; height:$catRadius; + // border-radius: $catRadius/2; + // } + // &.tag-1:before{ border-color: $cat1;} + // &.tag-2:before{ border-color: $cat2;} + // &.tag-3:before{ border-color: $cat3;} + // &.tag-4:before{ border-color: $cat4;} + // &.tag-5:before{ border-color: $cat5;} + // &.tag-6:before{ border-color: $cat6;} + // &.tag-7:before{ border-color: $cat7;} + // &.tag-8:before{ border-color: $cat8;} + // span{ + // // position: absolute; + // // z-index: -1; + // // font-size: 0.7em; + // @include fontnormal; + // font-weight: 300; + // white-space: nowrap; + // // opacity: 0; + // // transition: opacity 0.3s ease-in-out; + // padding:0.15em 0.3em; + // // width:0; + // } + // // &:hover{ + // // span{ opacity: 1; width:auto; z-index: 10;} + // // } + // } + // // &.active span{ + // // display:inline-block; + // // position:relative; + // // &:after{ + // // content: ""; height:0; + // // display: block; margin-top:-.7em; margin-bottom:.7em; + // // border-top:0.5em solid $maincolor;} + // // } + // } + // @media #{$medium-up}{ + // &:hover{ + // li{ + // height:1.1em; transition: height 0.5s ease-out; + // &:hover span{ + // // border-bottom: 1px solid #000; + // text-decoration: underline; + // } + // } + // } + // } + // } - h4{ - @include fontnormal; margin:0; line-height: 1.9; - a{color:$maincolor;} - // a:hover{text-decoration: underline;} - } - ul{background-color: transparent; padding-bottom: 1em;} - li{ - line-height: 1; - // &:not(.active){ - overflow: hidden; height:0.01px; transition: height 0.3s ease-in; - // } - position: relative; - // line-height: $catRadius; - // min-width:$catRadius; height:$catRadius; - a{ - display: block; - &:before{ - content:""; - opacity: 1; - position: relative; - display:inline-block; - border-width: 3px; - border-style: solid; - // line-height: $catRadius; - width:$catRadius; height:$catRadius; - border-radius: $catRadius/2; - } - &.tag-1:before{ border-color: $cat1;} - &.tag-2:before{ border-color: $cat2;} - &.tag-3:before{ border-color: $cat3;} - &.tag-4:before{ border-color: $cat4;} - &.tag-5:before{ border-color: $cat5;} - &.tag-6:before{ border-color: $cat6;} - &.tag-7:before{ border-color: $cat7;} - &.tag-8:before{ border-color: $cat8;} - span{ - // position: absolute; - // z-index: -1; - // font-size: 0.7em; - @include fontnormal; - font-weight: 300; - white-space: nowrap; - // opacity: 0; - // transition: opacity 0.3s ease-in-out; - padding:0.15em 0.3em; - // width:0; - } - // &:hover{ - // span{ opacity: 1; width:auto; z-index: 10;} - // } - } - // &.active span{ - // display:inline-block; - // position:relative; - // &:after{ - // content: ""; height:0; - // display: block; margin-top:-.7em; margin-bottom:.7em; - // border-top:0.5em solid $maincolor;} - // } - } - @media #{$medium-up}{ - &:hover{ - li{ - height:1.1em; transition: height 0.5s ease-out; - &:hover span{ - // border-bottom: 1px solid #000; - text-decoration: underline; - } - } - } - } - } - - #right-nav{ - text-align: right; - // margin-left: -0.1rem; - line-height:0.5; - a{@include fontnormal;} - a:hover{@include fontnormal; text-decoration: underline;} - } + // #right-nav{ + // text-align: right; + // // margin-left: -0.1rem; + // line-height:0.5; + // a{@include fontnormal;} + // a:hover{@include fontnormal; text-decoration: underline;} + // } div.line{ // position: absolute; @@ -279,51 +307,84 @@ header#top-bar{ */ @mixin catlist { + // line-height: 0.5; + // outline: 1px solid red; margin:0; ul{ margin: 0; + line-height: 1.2; + // outline: 1px solid blue; li{ + // line-height: 0.5; + // outline: 1px solid green; position: relative; display: inline-block; // line-height: $catRadius; - min-width:$catRadius; height:$catRadius; + min-width:$catRadius; + // height:$catRadius; margin-right: -0.2em; a{ + // outline: 1px solid purple; display: block; - &:before{ + overflow: hidden; + white-space: nowrap; + font-size: 0; + max-width: 15px; + transition: max-width 0.3s ease-in-out; + + &:not(.active):before{ content:""; opacity: 1; position: relative; display:inline-block; + vertical-align: middle; border-width: 3px; border-style: solid; // line-height: $catRadius; width:$catRadius; height:$catRadius; border-radius: $catRadius/2; + // line-height: 10px; } - &.tag-1:before{ border-color: $cat1;} - &.tag-2:before{ border-color: $cat2;} - &.tag-3:before{ border-color: $cat3;} - &.tag-4:before{ border-color: $cat4;} - &.tag-5:before{ border-color: $cat5;} - &.tag-6:before{ border-color: $cat6;} - &.tag-7:before{ border-color: $cat7;} - &.tag-8:before{ border-color: $cat8;} + &.active:before{ + content: "\d7"; /* use the hex value here... \274c */ + // font-weight: bold; + font-size: 35px; + line-height: 0.4; + width:$catRadius; height:$catRadius; + position: relative; + display:inline-block; + vertical-align: middle; + // outline: 1px solid red; + color: #000; + } + &.tag-1:before{ border-color: $cat1; color:$cat1; } + &.tag-2:before{ border-color: $cat2; color:$cat2; } + &.tag-3:before{ border-color: $cat3; color:$cat3; } + &.tag-4:before{ border-color: $cat4; color:$cat4; } + &.tag-5:before{ border-color: $cat5; color:$cat5; } + &.tag-6:before{ border-color: $cat6; color:$cat6; } + &.tag-7:before{ border-color: $cat7; color:$cat7; } + &.tag-8:before{ border-color: $cat8; color:$cat8; } span{ - position: absolute; - z-index: -1; - font-size: 0.7em; + // outline: 1px solid orange; + display: inline-block; + vertical-align: middle; + letter-spacing: normal; + font-size: 11px; font-weight: 300; + // line-height: 2; background-color: #fff; white-space: nowrap; opacity: 0; transition: opacity 0.3s ease-in-out; - padding:0.2em 0.3em; - width:0; - } - &:hover{ - span{ opacity: 1; width:auto; z-index: 10;} + padding:1px 5px 0 1px; } + // &:hover{ + // max-width:300px; + // span{ + // opacity: 1; + // } + // } } } } @@ -367,11 +428,11 @@ div#center{ overflow: hidden; img{ transition: transform 0.4s ease-out; - &:hover{ - transition: transform 0.2s ease-in-out; - transform-origin: center; - transform: scale(1.2); - } + // &:hover{ + // transition: transform 0.2s ease-in-out; + // transform-origin: center; + // transform: scale(1.2); + // } } } @@ -390,12 +451,14 @@ div#center{ h1{ @include fontbold; color: $maincolor; + transition: color 0.4s ease-out; margin:0.4em 0 0.5em 0; line-height: 1.6; height:auto; span.date{ font-weight: 200; border-left: 1px solid $maincolor; + transition: border-left-color 0.4s ease-out; padding:0.2em 0 0 0.5em; margin-left: 0.2em; } @@ -419,10 +482,25 @@ div#center{ } &:hover{ - // header{ - // background-color: rgba($maincolor, 0.7); transition-timing-function: ease-out; - // h1:after{border-top:0.5em solid #FFF;transition-timing-function: ease-out;} - // } + nav.categories a{ + max-width:300px; + span{ + opacity: 1; + } + } + a.image-link img{ + transition: transform 0.3s ease-out; + transform-origin: center; + transform: scale(1.2); + } + header h1, header h2 a{ + color:$secondcolor; + transition: color 0.2s ease-in-out; + } + header h1 span.date{ + border-left-color: $secondcolor; + transition: border-left-color 0.2s ease-in-out; + } } } @@ -437,6 +515,12 @@ div#center{ nav.categories{ @include catlist; padding:0.7em 0.7em 0; + ul li a{ + max-width: 500px; + span{ + opacity:1; + } + } } h1{ @@ -465,20 +549,34 @@ div#center{ p{padding:0 0.7em 0.7em; margin:0;} #images{ + max-width: 100%; // .row{margin:0;} // .block{padding:0.7em;} letter-spacing: 0px; a{ + // box-sizing: 100%; + max-width: calc(100% - 1em); letter-spacing: normal; display: inline-block; - margin:0.7em 0 0 0.7em; + margin:0.4em 0 0 0.5em; + overflow: hidden; + &:hover img{ + transition: transform 0.4s ease-out; + transform-origin: center; + transform: scale(1.2); + } } } img{ // width:100%; - max-width:100%; + // max-width:100%; height:300px; + transition: transform 0.4s ease-out; + @media #{$small-only}{ + max-width: 100%; + height: auto; + } } } @@ -501,36 +599,54 @@ div#center{ // body nav.categories{ - margin: 1em 0; + margin: 1em 0 0; ul.tags{ margin:0; padding:0; text-align:center; li{ list-style: none; display:inline-block; - margin:0 1em; + margin:0 0.3em; a{ display:block; // &:hover{text-decoration: underline;} - &:before{ + &:not(.active):before{ content:""; opacity: 1; position: relative; display:inline-block; + vertical-align: middle; border-width: 3px; border-style: solid; // line-height: $catRadius; width:$catRadius; height:$catRadius; border-radius: $catRadius/2; } - &.tag-1:before{ border-color: $cat1;} - &.tag-2:before{ border-color: $cat2;} - &.tag-3:before{ border-color: $cat3;} - &.tag-4:before{ border-color: $cat4;} - &.tag-5:before{ border-color: $cat5;} - &.tag-6:before{ border-color: $cat6;} - &.tag-7:before{ border-color: $cat7;} - &.tag-8:before{ border-color: $cat8;} + &.active:before{ + content: "\d7"; /* use the hex value here... \274c */ + // font-weight: bold; + font-size: 35px; + line-height: 0.4; + width:$catRadius; height:$catRadius; + position: relative; + display:inline-block; + vertical-align: middle; + // outline: 1px solid red; + color: #000; + } + &.tag-1:before{ border-color: $cat1; color:$cat1; } + &.tag-2:before{ border-color: $cat2; color:$cat2; } + &.tag-3:before{ border-color: $cat3; color:$cat3; } + &.tag-4:before{ border-color: $cat4; color:$cat4; } + &.tag-5:before{ border-color: $cat5; color:$cat5; } + &.tag-6:before{ border-color: $cat6; color:$cat6; } + &.tag-7:before{ border-color: $cat7; color:$cat7; } + &.tag-8:before{ border-color: $cat8; color:$cat8; } + } + span{ + @include fontnormal; + display:inline-block; + vertical-align: middle; + padding:1px 5px 0 1px; } - span{@include fontnormal;} &.active span{ // display:inline-block; // position:relative; @@ -600,19 +716,26 @@ div#center{ @media #{$small-only}{ header#top-bar{ &:before{ - padding-bottom: $headerpaddingtopH*0.5; + padding-bottom: $headerpaddingtopH*0.3; } #title-area{ - height:$titleareaH -3.1em; + height:$titleareaH - 3em; // padding-top: $headerpaddingtopH; h1{ height:100%; - min-height:($titleareaH - 3.1em)*0.8; + min-height:($titleareaH - 7em)*0.8; a{display: block; height:$logoH - 3em; // height:100%; } + a:before{ + $r: 60px; + width:$r; height:$r; + border-radius: $r/2; + border-width: $r/5.5; + } + } } @@ -620,20 +743,29 @@ div#center{ #title-area{ height:($titleareaH - 3.1em)*$titleReducedFactor; // overflow: hidden; + h1{ + font-size: 0.65em; + a:before{ + $r: 30px; + width:$r; height:$r; + border-radius: $r/2; + border-width: $r/5.5; + } + } } } - .nav{ - position:absolute; - top:$headerborderH+$headerpaddingtopH*0.5; - height:auto; - } - #left-nav{left:0;} - #right-nav{right:0;} + // .nav{ + // position:absolute; + // top:$headerborderH+$headerpaddingtopH*0.5; + // height:auto; + // } + // #left-nav{left:0;} + // #right-nav{right:0;} } div#center{ - padding-top:$centerpaddingtop - 1.1em; + padding-top:$centerpaddingtop - 3.1em; padding-bottom: $centerpaddingbottom; } @@ -656,13 +788,19 @@ footer#bottom-bar{ position:absolute; bottom:0; width:100%; height:$footerheight; background-color: $maincolor; + transition: background-color 0.4s ease-out; color: white; text-align: center; - padding:1em 0; + padding:0.5em 0; // margin: 5vh 0 0; + &:hover{ + background-color: $secondcolor; + transition: background-color 0.2s ease-in-out; + } h1{ @include fontbold; height:auto; display:inline-block; position:relative; margin:0; color: inherit; + font-size: 0.75em; a{ font-weight: inherit; color: inherit; @@ -676,9 +814,19 @@ footer#bottom-bar{ address{ // font-size: 1em; font-weight: normal; @include fontnormal; + font-size: 0.6em; margin:-0.7em 0 0; line-height: 1.1; font-style: normal; a{text-decoration: underline;} } + ul.footer-menu{ + text-align: center; + li{ + display:inline-block; + a{ + font-size: 0.6em; + } + } + } } div.featherlight:last-of-type{ diff --git a/user/themes/ouidade/templates/error.html.twig b/user/themes/ouidade/templates/error.html.twig new file mode 100644 index 0000000..ece3a3a --- /dev/null +++ b/user/themes/ouidade/templates/error.html.twig @@ -0,0 +1,8 @@ +{% extends 'partials/base.html.twig' %} + +{% block content %} +
+

Error {{ header.http_response_code }}

+

{{ page.content }}

+
+{% endblock %} diff --git a/user/themes/ouidade/templates/home.html.twig b/user/themes/ouidade/templates/home.html.twig index bbe3c24..372632a 100644 --- a/user/themes/ouidade/templates/home.html.twig +++ b/user/themes/ouidade/templates/home.html.twig @@ -10,4 +10,9 @@ {% endif %} {% endfor %} + + + {% endblock %} diff --git a/user/themes/ouidade/templates/partials/footer.html.twig b/user/themes/ouidade/templates/partials/footer.html.twig index 0376393..bf36708 100644 --- a/user/themes/ouidade/templates/partials/footer.html.twig +++ b/user/themes/ouidade/templates/partials/footer.html.twig @@ -6,6 +6,13 @@ {{ site.adresse|e('html') }}
{{ site.email|e('html') }} + diff --git a/user/themes/ouidade/templates/partials/header.html.twig b/user/themes/ouidade/templates/partials/header.html.twig index 67390d3..6ddcbad 100644 --- a/user/themes/ouidade/templates/partials/header.html.twig +++ b/user/themes/ouidade/templates/partials/header.html.twig @@ -6,16 +6,16 @@

{{ site.title|e('html') }}
{{ site.subtitle|e('html') }}

-