Proposition thème basé sur Nord

[Wivik]

Vu que Darkreader est un peu violent au niveau contraste j'ai eu envie de faire rapidement une proposition en utilisant le schéma de couleurs Nord que j'affectionne particulièrement.

Voici un aperçu vite fait mal fait. J'avais aussi fait la homepage mais un malencontreux F5 a décidé de tout réinitialiser. La différence était que le header avec le logo Next avait le même arrière plan que le reste de la page. L'agora avait l'arrière plan du header en version "lecture article".

(note : tout n'a pas été modifié, c'est juste un aperçu)

Details


Ci après les classes que j'ai modifiées :

Details

```css header { display: flex; flex-direction: column; justify-content: center; height: 77px; z-index: 10; border-bottom: 1px solid #F2F2F2; background-color: #2e3440; padding-bottom: 10px; border-bottom: 3px solid #4F62FF; position: fixed; top: 0; left: 0px; right: 0px; } /* pour lecture article */ header { display: flex; flex-direction: column; justify-content: center; height: 77px; z-index: 10; border-bottom: 1px solid #F2F2F2; background-color: #434C5E; padding-bottom: 10px; border-bottom: 3px solid #4F62FF; position: fixed; top: 0; left: 0px; right: 0px; } .heart-talk { padding: 30px 0 30px 0; width: 100%; background: 10% no-repeat url(../../asset/media/svg/next-background-debat.svg), #434C5E; position: relative; } .home { background: #2E3440; } #background-article { background: #2E3440; padding-bottom: 40px; } .heart-talk > div > div p { font: normal normal normal 12px/14px RubikRegular; color: #D8DEE9; margin-top: 5px; } .list-heart-article > li div h2 a { display: -webkit-box; text-decoration: none; color: #E5E9F0; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: normal normal normal 15px/18px RubikBold; } .block-article h2 > a, .block-article h2 > a:hover { color: #D8DEE9; text-decoration: none; } .block-article h3 { margin-top: 2px; margin-bottom: 10px; font: normal normal normal 15px/17px RubikRegular; color: #D8DEE9; } .block-article .author p { font: normal normal normal 12px/15px RubikRegular; color: #D8DEE9; } .list-heart-article > li .article-text-comment > span:last-child span, .list-heart-article > li .article-text-comment > span:last-child span { font: normal normal normal 12px/13px RubikRegular; color: #D8DEE9; margin-left: 5px; } #list-continu .block-article .article-text-comment > span:last-child span, #list-brief .block-brief .article-text-comment > span:last-child span, .block-article .article-text-comment > span:last-child span { font: normal normal normal 12px/13px RubikRegular; color: #D8DEE9; margin-left: 5px; } .container-date-header p { font: normal normal normal 12px/14px RubikRegular; color: #D8DEE9; margin: 0 8px; min-width: fit-content; } #article-single a { color: #88C0D0; } .title-sommaire-actif { background-color: #4C566A; } .title-sommaire-actif h2, .title-sommaire-actif h3, .title-sommaire-actif h4, .title-sommaire-actif h5, .title-sommaire-actif h6 { color: #88C0D0 !important; } #sommaire > div { margin-top: 15px; margin-bottom: 10px; box-shadow: 0px 3px 10px #2B2B2B12; border-radius: 15px; width: 100%; max-height: 1000px; box-sizing: border-box; background: #D8DEE9; overflow: auto; transition: max-height 0.8s ease-out; overflow: hidden; } #moreInfo { margin-top: 30px; width: 100%; box-sizing: border-box; box-shadow: 0px 3px 10px #2B2B2B12; border-radius: 15px; margin-bottom: 10px; background-color: #D8DEE9; } .block-brief { display: flex; flex-direction: row; padding: 30px 20px; border-bottom: 1px solid #2E3440; } #sommaire > div > div > h2, #sommaire > div > div > h3, #sommaire > div > div > h4, #sommaire > div > div > h5, #sommaire > div > div > h6 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: normal normal normal 15px/18px RubikSemiBold; width: auto; color: #2E3440; box-sizing: border-box; } #moreInfo #list-brief a, #moreInfo #list-continu a { color: #2E3440; text-decoration: none; } ```

Si ça peut vous inspirer ou faire s'arracher les cheveux de votre designer, au choix :grin:

[pipoupoip]

Hé je reconnais ça, c'est le thème dracula ;)