Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save gregoirenoyelle/4010906 to your computer and use it in GitHub Desktop.
Save gregoirenoyelle/4010906 to your computer and use it in GitHub Desktop.
CSS3 Mod
/* Theme WordPress Genesis Sample (extrait) */
/* STYLES POUR ORDINATEUR */
html {
font-size: 62.5%; /* 10px browser default */
}
/* Chrome fix */
body > div {
font-size: 2rem;
}
body {
background-color: #eee;
color: #333;
font-family: 'Source Sans Pro', sans-serif;
font-size: 20px;
font-size: 2rem;
-webkit-font-smoothing: antialiased;
font-weight: 400;
line-height: 1.625;
margin: 0;
}
/* GROUPES DE @MEDIA, DU PLUS GRAND AU PLUS PETIT */
@media only screen and (max-width: 1340px) {
.site-inner,
.wrap {
max-width: 1140px;
}
/* [...] */
}
@media only screen and (max-width: 1200px) {
.site-inner,
.wrap {
max-width: 960px;
}
/* [...] */
}
@media only screen and (max-width: 1023px) {
/* iPad portrait fait 1024px de large */
.site-inner,
.wrap {
max-width: 800px;
}
/* [...] */
}
@media only screen and (max-width: 860px) {
.site-inner {
padding: 5% 5% 0;
}
.wrap {
padding-left: 5%;
padding-right: 5%;
}
/* [...] */
}
/**************************
* Mettre dans le head du HTML
* < meta name="viewport" content="width=device-width; initial-scale=1.0">
**************************/
/**************************
* SMARTPHONE (PORTRAIT ET PAYSAGES)
**************************/
/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-width: 320px) and (max-width: 480px) {
/* Styles */
}
/**************************
* SMARTPHONE (PAYSAGE)
**************************/
/* Smartphones (landscape) ----------- */
@media only screen and (min-width: 321px) {
/* Styles */
}
/**************************
* SMARPHONE (PORTRAIT)
**************************/
/* Smartphones (portrait) ----------- */
@media only screen and (max-width: 320px) {
/* Styles */
}
/**************************
* IPADS (PORTRAIT ET PAYSAGE)
**************************/
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
/* Styles */
}
/**************************
* IPADS (PAYSAGES)
**************************/
/* iPads (landscape) ----------- */
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
/* Styles */
}
/**************************
* IPADS (PORTRAIT)
**************************/
/* iPads (portrait) ----------- */
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
/* Styles */
}
/**************************
* ORDI DE BUREAU ET PORTABLES
**************************/
/* Desktops and laptops ----------- */
@media only screen and (min-width: 1224px) {
/* Styles */
}
/**************************
* ÉCRANS LARGES
**************************/
/* Large screens ----------- */
@media only screen and (min-width: 1824px) {
/* Styles */
}
/**************************
* IPHONE RETINA
**************************/
/* iPhone 4 ----------- */
@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
/* Theme WordPress Twentysixteen (extrait) */
/* STYLES POUR MOBILES */
body,
button,
input,
select,
textarea {
color: #1a1a1a;
font-family: Merriweather, Georgia, serif;
font-size: 16px;
font-size: 1rem;
line-height: 1.75;
}
h1,
h2,
h3,
h4,
h5,
h6 {
clear: both;
font-weight: 700;
margin: 0;
text-rendering: optimizeLegibility;
}
/* [...] */
/* GROUPES DE @MEDIA, DU PLUS PETIT AU PLUS GRAND */
/**
* 710px
*/
@media screen and (min-width: 44.375em) {
.site {
margin: 21px;
}
.site-main {
margin-bottom: 5.25em;
}
/* [...] */
}
/**
* 783px
*/
@media screen and (min-width: 48.9375em) {
body:not(.custom-background-image).admin-bar:before {
top: 32px;
}
}
/**
* 910px
*/
@media screen and (min-width: 56.875em) {
.widecolumn {
padding-right: 15%;
padding-left: 15%;
}
/* [...] */
}
/**
* 985px
*/
@media screen and (min-width: 61.5625em) {
.site-main {
margin-bottom: 7.0em;
}
/* [...] */
}
/**
* 1200px
*/
@media screen and (min-width: 75em) {
body:not(.search-results) .entry-summary .aligncenter {
margin-bottom: 1.5217391304em;
}
/* [...] */
}
/* normalize.css v6.0.0 | MIT License | http://necolas.github.io/normalize.css/ */
html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit;font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{margin:0}button,input{overflow:visible}button,select{text-transform:none}button,html [type="button"],/* 1 */
[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,/* 1 */
menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}[hidden]{display:none}
/* Box Sizing */
/*
Voir le très bon article:
https://css-tricks.com/box-sizing/
*/
html,
input[type="search"]{
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment