From e35efb11466fd7cd625c610b5f909d11a2978910 Mon Sep 17 00:00:00 2001 From: Kazhnuz Date: Wed, 24 Oct 2018 17:09:54 +0200 Subject: [PATCH] header, scss/blog, functions: featured section support Fix #9 --- components/featured.php | 40 ++++++++ functions.php | 23 +++++ index.php | 3 + scss/_blog.scss | 215 +++++++++++++++++----------------------- scss/_buttons.scss | 4 + scss/_definitions.scss | 3 + style.css | 181 ++++++++++++++++----------------- 7 files changed, 251 insertions(+), 218 deletions(-) create mode 100644 components/featured.php diff --git a/components/featured.php b/components/featured.php new file mode 100644 index 0000000..1de7681 --- /dev/null +++ b/components/featured.php @@ -0,0 +1,40 @@ + + + + + diff --git a/functions.php b/functions.php index f61c632..9fbc9ff 100644 --- a/functions.php +++ b/functions.php @@ -16,4 +16,27 @@ 'after_title' => '', )); +/* 2. Niveau support (for featured posts) */ +register_taxonomy( + 'niveau', + 'post', + array( + 'label' => 'Niveau', + 'labels' => array( + 'name' => 'Niveaux', + 'singular_name' => 'Niveaux', + 'all_items' => 'Tous les niveaux', + 'edit_item' => 'Éditer le niveau', + 'view_item' => 'Voir le niveau', + 'update_item' => 'Mettre à jour le niveau', + 'add_new_item' => 'Ajouter un niveau', + 'new_item_name' => 'Nouveau niveau', + 'search_items' => 'Rechercher parmi les niveaux', + 'popular_items' => 'Niveaux les plus utilisés' + ), + 'hierarchical' => false + ) +); + +register_taxonomy_for_object_type( 'niveau', 'post' ); diff --git a/index.php b/index.php index cb58c05..2b6aeab 100644 --- a/index.php +++ b/index.php @@ -1,5 +1,8 @@
+

À la une

+ +

Articles récents

diff --git a/scss/_blog.scss b/scss/_blog.scss index bea79c1..536a8ee 100644 --- a/scss/_blog.scss +++ b/scss/_blog.scss @@ -13,145 +13,116 @@ /* 2.1 - Previews */ -.previews-section { - display: flex; - align-content: flex-start; - flex-wrap: wrap; -} - .preview-container { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-between; + align-content: flex-start; margin-bottom:1em; - padding:0.4em; - width:100% -} - -@media(max-width:767px){} -@media(min-width:768px){} -@media(min-width:992px){ - - .prev-col-2 .preview-container { - width:50%; - } - - .prev-col-3 .preview-container { - width:33%; - } - - .prev-col-4 .preview-container { - width:25%; - } - -} - -.card-preview { - @include border-radius(); - width:100%; - margin:auto; - box-shadow: $large-shadow, $inset-shadow; -} - -.preview-link:hover { - text-decoration:none!important; -} - -.preview-item { + padding: 0; + width:100%; - height:200px; - overflow:hidden; - font-size:0.9em; - line-height: 1.5em !important; - padding:0.2em; - text-align:justify; - background-color:rgba(0,0,0,0.05); - color:rgba(0,0,0,0.4); - position: relative; - - - display: flex; - -ms-flex-align: center !important; - align-items: center !important; - justify-content: center; + .preview { + width: 48%; + height:220px; + } } -.preview-content { - max-height:200px; -} - -.preview-content > p { - width:100%; +.preview { margin:auto; -} - -.preview-content > p.p-img { - text-align:center; - margin:auto; - padding:auto; - display: block; - width:100%; -} - -.preview-content > p > img { - max-width:100%; - height:auto; - vertical-align:middle; - margin:auto; - text-align:center; -} - -.preview-item h1, .preview-item h2, .preview-item h3, .preview-item h4, .preview-item h5, .preview-item h6, .preview-item h7 { - margin-bottom:0px; - max-width:100%; - display:none; -} - -.preview-item h1 { - display:none; + margin-bottom: 1em; + &-link { + display:block; + width:100%; + height:100%; + padding:0; + margin:0; + text-decoration:none!important; + &:hover .preview-item { + background-size: 133% auto; + background-position: center center; + } + } + + &-item { + height: 100%; + width: 100%; + background-size: 100% auto; + background-position: center center; + transition: background-size .5s; + } } .preview-overlay { height: 100%; width: 100%; - opacity: 0; - top: 0; - left: 0; - position: absolute; + opacity: 1; padding: 0; - transition: opacity .5s; + transition: background .5s; color: #FFF; - background-color: rgba(0,0,0,0.5); - text-shadow: 1px 1px 0px rgba(0,0,0,0.7); - backdrop-filter: none; + display: flex; + flex-direction: column; + justify-content: flex-end; + align-items: flex-start; + text-shadow: 1px 1px 3px rgba(0,0,0,0.7); + color: white!important; + + background: linear-gradient(to top, rgba(0,0,0,0.75) 0%,rgba(0,0,0,0) 60%); + + &:hover { + opacity: 1; + + h1, h2 { + opacity: 1; + color: #FFF; + } + + .badge { + background-color: lighten($color-category, 10%); + } + } + + .badge { + background-color: $color-category; + } + + h1, h2 { + max-width:100%; + margin:auto; + margin-bottom:0px; + text-align:left; + display:block; + font-size:2em; + transition: opacity .5s; + text-shadow: 1px 1px 0px rgba(0,0,0,1); + opacity: 0.6; + padding: 0.25em; + color: #FFF; + } } -.preview-overlay h1 { - max-width:100%; - padding-top:0.3em; - margin:auto; - margin-bottom:0px; - text-align:center; - display:block; - font-size:2em; - color: white; +.preview-item { + .preview-content { + height: 100%; + width: 100%; + background-size: 100% auto; + background-position: center center; + transition: background-size .5s; + } + + &:hover .preview-content { + background-size: 133% auto; + background-position: center center; + } } -.preview-overlay h1,.preview-overlay h2,.preview-overlay h3,.preview-overlay h4,.preview-overlay h5,.preview-overlay h6,.preview-overlay h7,.preview-overlay h8,.preview-overlay h9,.preview-overlay h10 { - color:white; - text-shadow: 1px 1px 0px rgba(0,0,0,0.7); -} - -.preview-item:hover .preview-overlay { - opacity: .9; - transition: opacity .5s; - backdrop-filter: blur(2px); -} - -.comment-text { - margin-top:0.8em; -} - -.card-preview time { - margin-bottom:0.4em; - display:block; +.preview-categories { + padding: 0.5em; + .badge { + font-size: 1em; + text-shadow: none; + } } /* 2.1.1 - Article list */ diff --git a/scss/_buttons.scss b/scss/_buttons.scss index 3138046..482fdc3 100644 --- a/scss/_buttons.scss +++ b/scss/_buttons.scss @@ -172,5 +172,9 @@ &-danger { @include badge-color($color-danger, #FFF); } &-info { @include badge-color($color-info, #FFF); } &-success { @include badge-color($color-success, #FFF); } + + &-category { @include badge-color($color-category, #FFF); } + &-tag { @include badge-color($color-tag, #FFF); } + } diff --git a/scss/_definitions.scss b/scss/_definitions.scss index 1f7b731..734c402 100644 --- a/scss/_definitions.scss +++ b/scss/_definitions.scss @@ -22,6 +22,9 @@ $color-link: $color-blue; $color-selection: $color-blue; $color-mark: $color-yellow; +$color-category: $color-blue; +$color-tag: $color-grey; + $color-font: #444; @mixin borders() { diff --git a/style.css b/style.css index afaf504..6278f87 100644 --- a/style.css +++ b/style.css @@ -1198,6 +1198,20 @@ a.list-group-item:hover { background-color: #9bd75b; color: #FFF; } +.badge-category { + background-color: #4e63c9; + color: #FFF; } + .badge-category:hover, .badge-category:active, .badge-category:focus, a:hover > .badge-category, a:active > .badge-category, a:focus > .badge-category, .badge-category:not(.disabled):not(:disabled):hover, .badge-category:not(.disabled):not(:disabled):active, .badge-category:not(.disabled):not(:disabled):focus, a:hover > .badge-category:not(.disabled):not(:disabled), a:active > .badge-category:not(.disabled):not(:disabled), a:focus > .badge-category:not(.disabled):not(:disabled) { + background-color: #8997db; + color: #FFF; } + +.badge-tag { + background-color: #77767b; + color: #FFF; } + .badge-tag:hover, .badge-tag:active, .badge-tag:focus, a:hover > .badge-tag, a:active > .badge-tag, a:focus > .badge-tag, .badge-tag:not(.disabled):not(:disabled):hover, .badge-tag:not(.disabled):not(:disabled):active, .badge-tag:not(.disabled):not(:disabled):focus, a:hover > .badge-tag:not(.disabled):not(:disabled), a:active > .badge-tag:not(.disabled):not(:disabled), a:focus > .badge-tag:not(.disabled):not(:disabled) { + background-color: #9e9da1; + color: #FFF; } + /* * 6 - Blog Elements ( _blog.scss ) * @@ -1209,116 +1223,91 @@ a.list-group-item:hover { margin-bottom: 1.333em; } /* 2.1 - Previews */ -.previews-section { - display: flex; - align-content: flex-start; - flex-wrap: wrap; } - .preview-container { - margin-bottom: 1em; - padding: 0.4em; - width: 100%; } - -@media (min-width: 992px) { - .prev-col-2 .preview-container { - width: 50%; } - .prev-col-3 .preview-container { - width: 33%; } - .prev-col-4 .preview-container { - width: 25%; } } - -.card-preview { - border-radius: 0px 0px 0px 0px; - width: 100%; - margin: auto; - box-shadow: 0px 2px 10px rgba(0, 0, 0, 0), inset 0px -2px 0px rgba(0, 0, 0, 0.2); } - -.preview-link:hover { - text-decoration: none !important; } - -.preview-item { - height: 200px; - overflow: hidden; - font-size: 0.9em; - line-height: 1.5em !important; - padding: 0.2em; - text-align: justify; - background-color: rgba(0, 0, 0, 0.05); - color: rgba(0, 0, 0, 0.4); - position: relative; display: flex; - -ms-flex-align: center !important; - align-items: center !important; - justify-content: center; } - -.preview-content { - max-height: 200px; } - -.preview-content > p { - width: 100%; - margin: auto; } - -.preview-content > p.p-img { - text-align: center; - margin: auto; - padding: auto; - display: block; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-between; + align-content: flex-start; + margin-bottom: 1em; + padding: 0; width: 100%; } + .preview-container .preview { + width: 48%; + height: 220px; } -.preview-content > p > img { - max-width: 100%; - height: auto; - vertical-align: middle; +.preview { margin: auto; - text-align: center; } - -.preview-item h1, .preview-item h2, .preview-item h3, .preview-item h4, .preview-item h5, .preview-item h6, .preview-item h7 { - margin-bottom: 0px; - max-width: 100%; - display: none; } - -.preview-item h1 { - display: none; } + margin-bottom: 1em; } + .preview-link { + display: block; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + text-decoration: none !important; } + .preview-link:hover .preview-item { + background-size: 133% auto; + background-position: center center; } + .preview-item { + height: 100%; + width: 100%; + background-size: 100% auto; + background-position: center center; + transition: background-size .5s; } .preview-overlay { height: 100%; width: 100%; - opacity: 0; - top: 0; - left: 0; - position: absolute; + opacity: 1; padding: 0; - transition: opacity .5s; + transition: background .5s; color: #FFF; - background-color: rgba(0, 0, 0, 0.5); - text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.7); - backdrop-filter: none; } + display: flex; + flex-direction: column; + justify-content: flex-end; + align-items: flex-start; + text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); + color: white !important; + background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 60%); } + .preview-overlay:hover { + opacity: 1; } + .preview-overlay:hover h1, .preview-overlay:hover h2 { + opacity: 1; + color: #FFF; } + .preview-overlay:hover .badge { + background-color: #7585d5; } + .preview-overlay .badge { + background-color: #4e63c9; } + .preview-overlay h1, .preview-overlay h2 { + max-width: 100%; + margin: auto; + margin-bottom: 0px; + text-align: left; + display: block; + font-size: 2em; + transition: opacity .5s; + text-shadow: 1px 1px 0px black; + opacity: 0.6; + padding: 0.25em; + color: #FFF; } -.preview-overlay h1 { - max-width: 100%; - padding-top: 0.3em; - margin: auto; - margin-bottom: 0px; - text-align: center; - display: block; - font-size: 2em; - color: white; } +.preview-item .preview-content { + height: 100%; + width: 100%; + background-size: 100% auto; + background-position: center center; + transition: background-size .5s; } -.preview-overlay h1, .preview-overlay h2, .preview-overlay h3, .preview-overlay h4, .preview-overlay h5, .preview-overlay h6, .preview-overlay h7, .preview-overlay h8, .preview-overlay h9, .preview-overlay h10 { - color: white; - text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.7); } +.preview-item:hover .preview-content { + background-size: 133% auto; + background-position: center center; } -.preview-item:hover .preview-overlay { - opacity: .9; - transition: opacity .5s; - backdrop-filter: blur(2px); } - -.comment-text { - margin-top: 0.8em; } - -.card-preview time { - margin-bottom: 0.4em; - display: block; } +.preview-categories { + padding: 0.5em; } + .preview-categories .badge { + font-size: 1em; + text-shadow: none; } /* 2.1.1 - Article list */ .list-article {