Blog : Perles VS Pixels – Marjorie Ober

Pour accéder à toutes les fonctionnalités de ce site, vous devez activer JavaScript. Voici les instructions pour activer JavaScript dans votre navigateur Web. main .no-js-msg { font-weight: bold; line-height: 1.75rem; margin: 1rem; } main .no-js-msg, main .no-js-msg a { font-size: 1.25rem; } main .no-js-msg a { color: blue !important; text-decoration: underline !important; background-color: transparent; } main .no-js-msg a:hover, main .no-js-msg a:active, main .no-js-msg a:focus { color: blue !important; text-decoration: underline !important; background-color: transparent; } @media (min-width: 767px) and (min-height: 767px) { body main .no-js-msg, main .no-js-msg a { font-size: 1.5rem; } } body.accessible-mode main .no-js-msg, body.accessible-mode main .no-js-msg a { color: #F5F5F5 !important; } body.accessible-mode main .no-js-msg a:hover, body.accessible-mode .no-js-msg a:active, body.accessible-mode .no-js-msg a:focus { color: #F5F5F5 !important; }

Perles VS Pixels

Perles

13 octobre 2019

Personnage de jeu vidéo en perles (version jaune et violet) — Wario

/* all */ header.banner #pages.hide, .projects main #list > ul > li .content.hide { display: flex; } body.about .event-container.hidden, header.banner #pages #blog-pages-list-container ul#blog-select-page.hide, body.posts main #post-pages-menu #post-pages-list.hidden, body.posts main #post-pages-menu .articles.hidden, body.posts main #list .content.hide { display: block; } body.contact main .credits { display: none !important; } body.projects main #list > ul > li .project { flex-direction: column; } body.posts:not(.accessible-mode) main #post-pages-menu #post-pages-list li:not(:first-of-type) .articles { top: unset; left: unset; width: 100%; } #videoDesc.hide { display: block; } .media-button.extra-bottom-margin { margin-bottom: unset !important; } /* non a11y mode */ body:not(.accessible-mode).home footer { position: relative; } @media (min-width: 677px) and (max-width: 766px) { body:not(.accessible-mode).about main > div section.right > div:last-of-type:not(.english) { padding-bottom: 100px !important; } } body.resources main section.reads, body.resources.accessible-mode main section.reads { padding-top: unset; } /* small devices */ @media (max-width: 766px), (max-height: 766px) { body:not(.accessible-mode) header.banner #pages.select-page { position: absolute; } body:not(.accessible-mode).projects main #list > ul > li .project time { margin: 10px 0 0 1rem; text-align: left; z-index: 999; padding: 0; } body:not(.accessible-mode).projects main #list > ul > li .project > div { border-left: unset; } body:not(.accessible-mode).about footer, body:not(.accessible-mode).resources footer, body:not(.accessible-mode).texts footer, body:not(.accessible-mode).text footer, body:not(.accessible-mode).sitemap footer, body:not(.accessible-mode).legal-notices footer, body:not(.accessible-mode).accessibility footer { position: absolute; bottom: 50px; } body:not(.accessible-mode).about footer nav, body:not(.accessible-mode).resources footer nav, body:not(.accessible-mode).text footer nav, body:not(.accessible-mode).texts footer nav, body:not(.accessible-mode).sitemap footer nav { bottom: -50px; } body:not(.accessible-mode).about main > div section.right > div:last-of-type:not(.english), body:not(.accessible-mode).about main > div section.right > div:last-of-type.english, body:not(.accessible-mode).resources main section.web { padding-bottom: 375px; } body:not(.accessible-mode).contact footer.flex-line > div { display: block; visibility: hidden; } body:not(.accessible-mode).contact footer.flex-line > div p { visibility: visible; width: 100%; height: 100%; position: absolute; bottom: 0; margin: 0; padding: 15px; background-color: #F5F5F5; text-align: center; } body:not(.accessible-mode).contact footer.flex-line > div p, body:not(.accessible-mode).contact footer.flex-line > div p a { color: #3A3B3C; } body:not(.home):not(.about):not(.projects):not(.contact):not(.resources):not(.posts):not(.texts):not(.text):not(.cv):not(.contact):not(.sitemap):not(.legal-notices):not(.accessibility):not(.accessible-mode) main > div { margin: 25px 0 0 1rem; } body.posts main #post-pages-menu #post-pages-list > li:not(.hidden) > button { border-bottom: unset; } body.resources main section.reads > div:first-of-type h2, body.resources.accessible-mode main section.reads > div:first-of-type h2 { margin-top: 25px; } } /* about last div bottom padding considering fr/en + resources */ @media (min-width: 185px) and (max-width: 766px) { body:not(.accessible-mode).about main > div section.right > div:last-of-type.english { padding-bottom: 350px; } } @media (min-width: 201px) and (max-width: 766px) { body:not(.accessible-mode).about main > div section.right > div:last-of-type.english { padding-bottom: 300px; } } @media (min-width: 206px) and (max-width: 766px) { body:not(.accessible-mode).about main > div section.right > div:last-of-type:not(.english), body:not(.accessible-mode).resources main section.web, body.text:not(.accessible-mode) main article.two { padding-bottom: 350px; } } @media (min-width: 245px) and (max-width: 766px) { body:not(.accessible-mode).about main > div section.right > div:last-of-type.english { padding-bottom: 275px; } body:not(.accessible-mode).about main > div section.right > div:last-of-type:not(.english), body:not(.accessible-mode).resources main section.web, body.text:not(.accessible-mode) main article.two { padding-bottom: 300px; } } @media (min-width: 351px) and (max-width: 766px) { body:not(.accessible-mode).about main > div section.right > div:last-of-type:not(.english), body:not(.accessible-mode).resources main section.web, body.text:not(.accessible-mode) main article.two { padding-bottom: 275px; } } @media (min-width: 355px) and (max-width: 766px) { body:not(.accessible-mode).about main > div section.right > div:last-of-type.english { padding-bottom: 250px; } } @media (min-width: 356px) and (max-width: 766px) { body:not(.accessible-mode).about main > div section.right > div:last-of-type.english { padding-bottom: 200px; } body:not(.accessible-mode).about main > div section.right > div:last-of-type:not(.english), body:not(.accessible-mode).resources main section.web, body.text:not(.accessible-mode) main article.two { padding-bottom: 225px; } } @media (min-width: 372px) and (max-width: 766px) { body:not(.accessible-mode).about main > div section.right > div:last-of-type:not(.english), body:not(.accessible-mode).resources main section.web, body.text:not(.accessible-mode) main article.two { padding-bottom: 200px; } } @media (min-width: 448px) and (max-width: 997px) { body:not(.accessible-mode).about main > div section.right > div:last-of-type.english { padding-bottom: 150px; } } @media (min-width: 677px) and (max-width: 997px) { body:not(.accessible-mode).about main > div section.right > div:last-of-type:not(.english), body:not(.accessible-mode).resources main section.web, body.text:not(.accessible-mode) main article.two { padding-bottom: 150px; } } @media (min-width: 998px) and (max-height: 766px) { body:not(.accessible-mode).about main > div section.right > div:last-of-type:not(.english), body:not(.accessible-mode).about main > div section.right > div:last-of-type.english { padding-bottom: 50px; } body:not(.accessible-mode).resources main section.web, body.text:not(.accessible-mode) main article.two { padding-bottom: 150px; } } @media (min-width: 767px) and (min-height: 767px) { body:not(.accessible-mode).about main > div section.right > div:last-of-type:not(.english), body:not(.accessible-mode).about main > div section.right > div:last-of-type.english { padding-bottom: 100px; } @media (min-width: 767px) and (min-height: 767px) and (max-width: 1279px), (min-width: 767px) and (min-height: 767px) and (max-height: 899px) { body:not(.accessible-mode).resources main section.web { padding-bottom: 200px; } } } /* desktop */ @media (min-width: 767px) and (min-height: 767px) { body:not(.accessible-mode) header.banner #pages, body:not(.accessible-mode) header.banner #pages.select-page { position: absolute; width: 100%; height: 50px; flex-direction: row; justify-content: space-between; align-items: center; margin-left: unset; padding: 0 50px; } body:not(.accessible-mode) header.banner #pages.select-page { border-top: unset; } body:not(.accessible-mode) header.banner #pages.select-page > li, body:not(.accessible-mode) header.banner #pages.select-page > li:not(:last-of-type) { border: none; width: unset; } body:not(.accessible-mode) header.banner #pages.select-page > li a, body:not(.accessible-mode) header.banner #pages.select-page > li button { font-weight: normal; } body:not(.accessible-mode) header.banner #pages.select-page > li a.selected, body:not(.accessible-mode) header.banner #pages.select-page > li a:hover, body:not(.accessible-mode) header.banner #pages.select-page > li a:active, body:not(.accessible-mode) header.banner #pages.select-page > li a:focus, body:not(.accessible-mode) header.banner #pages.select-page > li button.selected, body:not(.accessible-mode) header.banner #pages.select-page > li button:hover, body:not(.accessible-mode) header.banner #pages.select-page > li button:active, body:not(.accessible-mode) header.banner #pages.select-page > li button:focus { font-weight: bold; background-color: unset; color: #F5F5F5; } body:not(.accessible-mode).projects:not(.accessible-mode) main { margin: 50px 50px 0 50px; } body:not(.accessible-mode).projects main #list { margin-bottom: 120px; } body:not(.accessible-mode).projects main #list > ul > li .project { flex-direction: row; } body:not(.cv):not(.accessible-mode) footer { bottom: 50px !important; } body:not(.home):not(.projects):not(.posts):not(.texts):not(.cv):not(.contact):not(.accessible-mode).about main, body.texts:not(.accessible-mode) main { height: calc(100vh - 200px); } body.contact:not(.home):not(.projects):not(.cv):not(.accessible-mode) main, body:not(.home):not(.projects):not(.posts):not(.texts):not(.cv):not(.contact):not(.accessible-mode).about main, body:not(.home):not(.projects):not(.posts):not(.texts):not(.cv):not(.contact):not(.accessible-mode).sitemap main, body:not(.home):not(.projects):not(.posts):not(.texts):not(.cv):not(.contact):not(.accessible-mode).legal-notices main, body:not(.home):not(.projects):not(.posts):not(.texts):not(.cv):not(.contact):not(.accessible-mode).accessibility main, body.posts:not(.accessible-mode) main, body:not(.home):not(.projects):not(.posts):not(.texts):not(.cv):not(.contact):not(.accessible-mode).resources main, body.texts:not(.accessible-mode) main, body:not(.home):not(.projects):not(.posts):not(.texts):not(.cv):not(.contact):not(.accessible-mode).text main { margin-top: 50px } body:not(.home):not(.projects):not(.posts):not(.texts):not(.cv):not(.contact):not(.accessible-mode).sitemap main, body:not(.home):not(.projects):not(.posts):not(.texts):not(.cv):not(.contact):not(.accessible-mode).legal-notices main, body:not(.home):not(.projects):not(.posts):not(.texts):not(.cv):not(.contact):not(.accessible-mode).accessibility main { height: calc(100vh - 170px); } body:not(.home):not(.about):not(.projects):not(.contact):not(.resources):not(.posts):not(.texts):not(.text):not(.cv):not(.contact):not(.sitemap):not(.legal-notices):not(.accessibility):not(.accessible-mode) main > div { margin: 100px 0 0 50px; } body:not(.accessible-mode).posts main #post-pages-menu #post-pages-list > li:not(.hidden) > button { border-right: unset; } body:not(.accessible-mode).posts main #post-pages-menu .post-page:not(:last-of-type) .articles.hidden { border-bottom: unset; } body:not(.accessible-mode).posts main #post-pages-menu #post-pages-list > li:not(.hidden) > button { border-top: 3px solid #C300C3; } body:not(.accessible-mode) header.banner #pages.select-page > li:first-of-type a, body:not(.accessible-mode) header.banner #pages.select-page > li:last-of-type a { white-space: nowrap; } body:not(.home):not(.projects):not(.posts):not(.texts):not(.cv):not(.contact):not(.accessible-mode).text main { height: calc(100vh - 200px); } body.text:not(.accessible-mode) .source-link { margin-bottom: 50px; } body.resources main section.reads > div:first-of-type h2, body.resources.accessible-mode main section.reads > div:first-of-type h2 { margin-top: 50px; } } @media (min-width: 998px) { body:not(.home):not(.projects):not(.posts):not(.texts):not(.cv):not(.contact):not(.accessible-mode).about main { height: calc(100vh - 150px); } } @media (min-width: 767px) and (min-height: 767px) and (max-width: 1279px), (min-width: 767px) and (min-height: 767px) and (max-height: 899px) { body.text:not(.accessible-mode) main article.two > div { padding-bottom: unset; } } @media (min-width: 1280px) and (min-height: 900px) { body:not(.accessible-mode).resources main section.web, body.text:not(.accessible-mode) main article.two { padding-bottom: 50px; } body.text:not(.accessible-mode) .source-link { margin-bottom: unset; } } /* a11y mode */ body.accessible-mode header.banner #accessible-mode-btn { width: unset; } body:not(.home).accessible-mode header.banner #top-accessible-banner li:not(:last-of-type) { margin-bottom: 1rem; } body.accessible-mode header.banner #menu { border-bottom: 3px solid #F5F5F5; } body.projects.accessible-mode main #list > ul > li .project-type { margin-left: 0; } body.projects.accessible-mode main #list > ul > li .project, body.projects.accessible-mode main #list > ul > li button { color: #3A3B3C; background-color: #F5F5F5; } body.projects.accessible-mode main #list > ul > li:not(:first-of-type):not(:last-of-type) { border-top: 3px solid #3A3B3C; } body.projects.accessible-mode main #list > ul > li .project time { margin: 1rem 0 0 1rem; } body.projects.accessible-mode main #list > ul > li .project:hover time, body.projects.accessible-mode main #list > ul > li .project:active time, body.projects.accessible-mode main #list > ul > li .project:focus time { color: #3A3B3C; } body.projects.accessible-mode main #list > ul > li .project:hover .project-type ul .tag, body.projects.accessible-mode main #list > ul > li .project:active .project-type ul .tag, body.projects.accessible-mode main #list > ul > li .project:focus .project-type ul .tag { color: #F5F5F5; background-color: #3A3B3C; } body.projects.accessible-mode main #list > ul > li:not(:first-of-type) .project, body.projects.accessible-mode main #list > ul > li:not(:first-of-type) .project:hover, .projects.accessible-mode main #list > ul > li:not(:first-of-type) .project:active, .projects.accessible-mode main #list > ul > li:not(:first-of-type) .project:focus { border-top: unset; } body.about.accessible-mode main > div section.left > div:first-of-type > ul > li:last-of-type li:first-of-type { border-color: #F5F5F5; } body.contact.accessible-mode footer { display: block; } body.contact.accessible-mode footer.flex-line > div { margin-left: 1rem; } body.posts.accessible-mode main #post-pages-menu input, body.posts.accessible-mode main #post-pages-menu #post-pages-list > li:not(.hidden) > button { border-bottom: unset; }