parent
192dd6df91
commit
881f370eae
|
After Width: | Height: | Size: 88 KiB |
@ -0,0 +1,36 @@
|
||||
.current
|
||||
{
|
||||
|
||||
}
|
||||
|
||||
#main-menu
|
||||
{
|
||||
|
||||
}
|
||||
|
||||
p
|
||||
{
|
||||
|
||||
}
|
||||
|
||||
h1
|
||||
{
|
||||
|
||||
}
|
||||
|
||||
https://www.w3schools.com/cssref/css_selectors.asp
|
||||
|
||||
div > p
|
||||
{
|
||||
|
||||
}
|
||||
|
||||
.current + li
|
||||
{
|
||||
background-color:blue;
|
||||
}
|
||||
|
||||
.current ~ li
|
||||
{
|
||||
background-color:red;
|
||||
}
|
||||
@ -0,0 +1,23 @@
|
||||
|
||||
#main-menu
|
||||
{
|
||||
.menu-label
|
||||
{
|
||||
display:none;
|
||||
}
|
||||
ul
|
||||
{
|
||||
display:block;
|
||||
margin-block-start: 1em;
|
||||
margin-block-end: 1em;
|
||||
margin-inline-start: 0px;
|
||||
margin-inline-end: 0px;
|
||||
padding-inline-start: 0px;
|
||||
margin:0px;
|
||||
li
|
||||
{
|
||||
display:inline-block;
|
||||
width:24%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
After Width: | Height: | Size: 90 KiB |
|
After Width: | Height: | Size: 37 KiB |
|
After Width: | Height: | Size: 29 KiB |
|
After Width: | Height: | Size: 25 KiB |
|
After Width: | Height: | Size: 37 KiB |
|
After Width: | Height: | Size: 25 KiB |
|
After Width: | Height: | Size: 91 KiB |
@ -0,0 +1,23 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>test swicth img srcset</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="box" style="width:100%">
|
||||
<img src="./clock-demo-200px.png"
|
||||
srcset="./espresso-vert.jpg 380w,
|
||||
./espresso-neg.jpg 680w,
|
||||
./espresso.jpg 990w" style="width:100%">
|
||||
</div>
|
||||
|
||||
<div class="box" style="width:100%">
|
||||
<picture style="max-width:100%">
|
||||
<source media="(max-width: 799px)" srcset="./espresso-vert.jpg">
|
||||
<source media="(min-width: 800px)" srcset="./espresso.jpg">
|
||||
<img src="./espresso-vert.jpg" alt="">
|
||||
</picture>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,142 @@
|
||||
body
|
||||
{
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-size:12px;
|
||||
}
|
||||
|
||||
body,figure,img
|
||||
{
|
||||
padding:0;
|
||||
border:none;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
#switch:checked ~ p
|
||||
{
|
||||
background-color:green;
|
||||
}
|
||||
|
||||
img
|
||||
{
|
||||
width:100%;
|
||||
height:auto;
|
||||
}
|
||||
|
||||
picture
|
||||
{
|
||||
display:block;
|
||||
max-height:40vh;
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
#main-menu
|
||||
{
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
#main-menu ul
|
||||
{
|
||||
list-style:none;
|
||||
}
|
||||
|
||||
#main-menu li
|
||||
{
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#main-menu li a,
|
||||
#main-menu li span
|
||||
{
|
||||
color:black;
|
||||
text-decoration:none;
|
||||
font-size:1.1rem;
|
||||
}
|
||||
|
||||
#main-menu li span
|
||||
{
|
||||
color:#666;
|
||||
}
|
||||
|
||||
#main-menu .menu-label
|
||||
{
|
||||
font-size:1.5rem;
|
||||
color:black;
|
||||
text-decoration:none;
|
||||
font-weight:bold;
|
||||
display:inline-block;
|
||||
line-height:2rem;
|
||||
}
|
||||
|
||||
.burger
|
||||
{
|
||||
float:left;
|
||||
margin: 3px 8px;
|
||||
}
|
||||
.burger b
|
||||
{
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 2px;
|
||||
margin-bottom: 5px;
|
||||
position: relative;
|
||||
background: #000;
|
||||
border-radius: 2px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.burger b:first-of-type
|
||||
{
|
||||
margin-top:5px;
|
||||
}
|
||||
|
||||
#main-menu ul
|
||||
{
|
||||
display:none;
|
||||
}
|
||||
|
||||
main, h1
|
||||
{
|
||||
margin:1rem;
|
||||
padding:1rem;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
.current ~ li
|
||||
{
|
||||
background-color:red;
|
||||
}
|
||||
|
||||
|
||||
.current + li
|
||||
{
|
||||
background-color:blue;
|
||||
}
|
||||
|
||||
|
||||
main > p
|
||||
{
|
||||
background-color:green;
|
||||
}
|
||||
.top-menu-item.current a
|
||||
{
|
||||
color:blue;
|
||||
}
|
||||
.top-menu-item a,
|
||||
.top-menu-item span
|
||||
{
|
||||
color:red;
|
||||
font-weight:bold;
|
||||
}
|
||||
.top-menu-item a
|
||||
{
|
||||
color:green;
|
||||
}
|
||||
*/
|
||||
|
||||
|
||||
#main-menu #switch:checked ~ ul
|
||||
{
|
||||
display:block;
|
||||
}
|
||||
/* */
|
||||
@ -0,0 +1,69 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Positions</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>
|
||||
<button class="button">bouton</button>
|
||||
<span class="button">spa</span>
|
||||
<a class="button">aaa</a>
|
||||
</p>
|
||||
|
||||
|
||||
<div class="conteneur">
|
||||
<div class="contenu">mon contenu dskfh skdf kjshdkfh sjkdhfkjh skdf
|
||||
dskf lksdfs dklf lsdlf sldkjf
|
||||
dskf lksdfs dklf lsdlf sldkjf
|
||||
dskf lksdfs dklf lsdlf sldkjf
|
||||
dskf lksdfs dklf lsdlf sldkjf
|
||||
dskf lksdfs dklf lsdlf sldkjf
|
||||
dskf lksdfs dklf lsdlf sldkjf
|
||||
dskf lksdfs dklf lsdlf sldkjf
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="conteneur-2">
|
||||
<div class="contenu">mon contenu dskfh skdf kjshdkfh sjkdhfkjh skdf
|
||||
dskf lksdfs dklf lsdlf sldkjf
|
||||
dskf lksdfs dklf lsdlf sldkjf
|
||||
dskf lksdfs dklf lsdlf sldkjf
|
||||
dskf lksdfs dklf lsdlf sldkjf
|
||||
dskf lksdfs dklf lsdlf sldkjf
|
||||
dskf lksdfs dklf lsdlf sldkjf
|
||||
dskf lksdfs dklf lsdlf sldkjf
|
||||
</div>
|
||||
</div>
|
||||
<span class="box">ça dépasse</span>
|
||||
<span class="box-2">ça dépasse</span>
|
||||
<ul class="list list-1">
|
||||
<li class="list-item">item</li>
|
||||
<li class="list-item">item</li>
|
||||
<li class="list-item">item</li>
|
||||
</ul>
|
||||
<ul class="list list-2">
|
||||
<li class="list-item">item</li>
|
||||
<li class="list-item">item</li>
|
||||
<li class="list-item">item</li>
|
||||
</ul>
|
||||
<ul class="list list-3">
|
||||
<li class="list-item">item</li>
|
||||
<li class="list-item">item X</li>
|
||||
<li class="list-item">item</li>
|
||||
</ul>
|
||||
<ul class="list list-4">
|
||||
<li class="list-item">item</li>
|
||||
<li class="list-item">item</li>
|
||||
<li class="list-item">item</li>
|
||||
</ul>
|
||||
<ul class="list list-5"><li class="list-item">item</li><li class="list-item">item</li><li class="list-item">item</li><li class="list-item">item</li></ul>
|
||||
<div class="cols">
|
||||
<div class="col1">col1</div>
|
||||
<div class="col2">col2</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,148 @@
|
||||
body
|
||||
{
|
||||
margin:0;
|
||||
}
|
||||
.list
|
||||
{
|
||||
padding:2px;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.list-item
|
||||
{
|
||||
padding:2px;
|
||||
width:100%;
|
||||
margin:2px;
|
||||
background-color:#ccc;
|
||||
&:nth-child(2)
|
||||
{
|
||||
background-color:yellow;
|
||||
}
|
||||
}
|
||||
|
||||
.list-2 .list-item
|
||||
{
|
||||
&:nth-child(2)
|
||||
{
|
||||
position:sticky;
|
||||
top:20px;
|
||||
}
|
||||
}
|
||||
|
||||
.list-3
|
||||
{
|
||||
position:relative;
|
||||
.list-item
|
||||
{
|
||||
&:nth-child(2)
|
||||
{
|
||||
position:absolute;
|
||||
top:20px;
|
||||
background-color:red;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-1 .list-item
|
||||
{
|
||||
&:nth-child(2)
|
||||
{
|
||||
position:relative;
|
||||
top:10px;
|
||||
left:10px;
|
||||
}
|
||||
}
|
||||
|
||||
.list-5
|
||||
{
|
||||
margin:0;
|
||||
padding:0;
|
||||
.list-item
|
||||
{
|
||||
display: inline-block;
|
||||
width: calc(25% - 4px);
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
padding: 5px;
|
||||
border: solid 1px blue;
|
||||
margin: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.box
|
||||
{
|
||||
display:block;
|
||||
background-color:#ccc;
|
||||
position:absolute;
|
||||
//top:-1000px;
|
||||
left:0;
|
||||
}
|
||||
|
||||
.box-2
|
||||
{
|
||||
display:block;
|
||||
background-color:#ccc;
|
||||
position:fixed;
|
||||
//top:-1000px;
|
||||
left:230px;
|
||||
}
|
||||
|
||||
.cols
|
||||
{
|
||||
padding:2px;
|
||||
background-color: blue;
|
||||
//hack "clearfix"
|
||||
display: table;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
.col1
|
||||
{
|
||||
float:right;
|
||||
background-color:yellow;
|
||||
}
|
||||
.col2
|
||||
{
|
||||
float:left;
|
||||
background-color:green;
|
||||
}
|
||||
}
|
||||
|
||||
.button
|
||||
{
|
||||
display:inline-block;
|
||||
border:solid 1px blue;
|
||||
color:blue;
|
||||
background-color: white;
|
||||
height:40px;
|
||||
padding:0px 10px;
|
||||
margin:2px;
|
||||
line-height:40px;
|
||||
box-sizing:border-box;
|
||||
}
|
||||
|
||||
.conteneur
|
||||
{
|
||||
height:30vh;
|
||||
background-color:#ccc;
|
||||
display:table-cell;
|
||||
vertical-align:middle;
|
||||
.contenu{
|
||||
margin:5px;
|
||||
background-color:white;
|
||||
}
|
||||
}
|
||||
|
||||
.conteneur-2
|
||||
{
|
||||
border-top:1px solid black;
|
||||
height:30vh;
|
||||
background-color:#ccc;
|
||||
position:relative;
|
||||
.contenu{
|
||||
position:absolute;
|
||||
margin:5px;
|
||||
background-color:white;
|
||||
top:50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,4 @@
|
||||
#main-menu
|
||||
{
|
||||
display: none!important;
|
||||
}
|
||||
@ -0,0 +1,24 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Titre</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<nav id="menu-haut">
|
||||
<ul>
|
||||
<li class="current">Accueil</li>
|
||||
<li>Contact</li>
|
||||
<li>Qui sommes nous?</li>
|
||||
<li>Mentions Légales</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<h1>titre 1</h1>
|
||||
<h2>titre 2</h2>
|
||||
<h3>titre 3</h3>
|
||||
<h4>titre 4</h4>
|
||||
<h5>titre 5</h5>
|
||||
<h6>titre 6</h6>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,38 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>A hompage</title>
|
||||
<link rel="stylesheet" href="style-all.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<nav id="main-menu">
|
||||
<input type="checkbox" id="switch" hidden />
|
||||
<label for="switch" class="menu-label"><span class="burger"><b class="burger-line"></b><b class="burger-line"></b><b class="burger-line"></b></span><span class="menu-text">Menu</span></label>
|
||||
<ul>
|
||||
<li class="top-menu-item "><a href="">About</a></li>
|
||||
<li class="top-menu-item current"><span>Home</span></li>
|
||||
<li class="top-menu-item "><a href="">Blog</a></li>
|
||||
<li class="top-menu-item "><a href="">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="img-wrap">
|
||||
<picture>
|
||||
<img src="./espresso-vert.jpg" alt="">
|
||||
</picture>
|
||||
</div>
|
||||
<h1>A hompage</h1>
|
||||
</header>
|
||||
<main>
|
||||
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
|
||||
<section>
|
||||
<h2>Lorem Ipsum has been the industry's standard dummy text</h2>
|
||||
<p>ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
|
||||
</section>
|
||||
<p>ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
|
||||
</main>
|
||||
<aside></aside>
|
||||
<footer></footer>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,41 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>A hompage</title>
|
||||
<link rel="stylesheet" href="style-main.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<nav id="main-menu">
|
||||
<input type='checkbox' id="switch">
|
||||
<a href="#" class="menu-label"><span class="burger"><b></b><b></b><b></b></span><span class="menu-text">Menu</span></a>
|
||||
<ul>
|
||||
<li class="top-menu-item "><a href="">About</a></li>
|
||||
<li class="top-menu-item current"><span>Home</span></li>
|
||||
<li class="top-menu-item "><a href="">Blog</a></li>
|
||||
<li class="top-menu-item "><a href="">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="img-wrap">
|
||||
<picture>
|
||||
<source media="(max-width: 479px)" srcset="./espresso-vert.jpg">
|
||||
<source media="(max-width: 779px)" srcset="./espresso-neg.jpg">
|
||||
<source media="(min-width: 780px)" srcset="./espresso.jpg">
|
||||
<img src="./espresso-vert.jpg" alt="">
|
||||
</picture>
|
||||
</div>
|
||||
<h1>A hompage</h1>
|
||||
</header>
|
||||
<main>
|
||||
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
|
||||
<section>
|
||||
<h2>Lorem Ipsum has been the industry's standard dummy text</h2>
|
||||
<p>ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
|
||||
</section>
|
||||
<p>ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
|
||||
</main>
|
||||
<aside></aside>
|
||||
<footer></footer>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,47 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>A hompage</title>
|
||||
<link rel="stylesheet" href="style-main.css" />
|
||||
<link rel="stylesheet" href="desktop.css" media="screen and (min-width: 480px)" />
|
||||
<link rel="stylesheet" href="print.css" media="print" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<nav id="main-menu">
|
||||
<input type="checkbox" id="switch" hidden />
|
||||
<label for="switch" class="menu-label">
|
||||
<span class="burger"><b class="burger-line"></b><b class="burger-line"></b><b class="burger-line"></b></span>
|
||||
<span class="menu-text">Menu</span>
|
||||
</label>
|
||||
<ul>
|
||||
<li class="top-menu-item "><a href="">About</a></li>
|
||||
<li class="top-menu-item current"><span>Home</span></li>
|
||||
<li class="top-menu-item "><a href="">Blog</a></li>
|
||||
<li class="top-menu-item "><a href="">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="img-wrap">
|
||||
<picture>
|
||||
<source type="image/webp" media="(max-width: 359px)" srcset="./espresso.webp">
|
||||
<source media="(max-width: 359px)" srcset="./espresso-vert.jpg">
|
||||
<source media="(orientation: landscape) and (min-width: 360px) and (max-width: 989px)" srcset="./espresso-neg.jpg">
|
||||
<source media="(min-width: 990px)" srcset="./espresso.jpg">
|
||||
<img src="./espresso-vert.jpg" alt="">
|
||||
</picture>
|
||||
</div>
|
||||
<h1>A hompage</h1>
|
||||
</header>
|
||||
<main>
|
||||
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
|
||||
<section>
|
||||
<h2>Lorem Ipsum has been the industry's standard dummy text</h2>
|
||||
<p>ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
|
||||
</section>
|
||||
<p>ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
|
||||
</main>
|
||||
<aside></aside>
|
||||
<footer></footer>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Titre</title>
|
||||
</head>
|
||||
<body>
|
||||
contenu
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,151 @@
|
||||
$font : Arial, Helvetica, sans-serif;
|
||||
$normalfontsize : 12px;
|
||||
$marge : 8px;
|
||||
|
||||
body
|
||||
{
|
||||
font-family: $font;
|
||||
font-size:$normalfontsize;
|
||||
}
|
||||
|
||||
h4
|
||||
{
|
||||
font-size:$normalfontsize + 2px;
|
||||
}
|
||||
|
||||
body,figure,img
|
||||
{
|
||||
padding:0;
|
||||
border:none;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
#switch:checked ~ p
|
||||
{
|
||||
background-color:green;
|
||||
}
|
||||
|
||||
img
|
||||
{
|
||||
// avec interpolation
|
||||
width:calc(100% - (#{$marge}*2));
|
||||
height:auto;
|
||||
margin:0 auto;
|
||||
}
|
||||
|
||||
picture
|
||||
{
|
||||
display:block;
|
||||
max-height:40vh;
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
#main-menu
|
||||
{
|
||||
text-align:center;
|
||||
ul
|
||||
{
|
||||
list-style:none;
|
||||
}
|
||||
|
||||
li
|
||||
{
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
li a,
|
||||
li span
|
||||
{
|
||||
color:black;
|
||||
text-decoration:none;
|
||||
font-size:1.1rem;
|
||||
}
|
||||
|
||||
li span
|
||||
{
|
||||
color:#666;
|
||||
}
|
||||
|
||||
.menu-label
|
||||
{
|
||||
font-size:1.5rem;
|
||||
color:black;
|
||||
text-decoration:none;
|
||||
font-weight:bold;
|
||||
display:inline-block;
|
||||
line-height:2rem;
|
||||
}
|
||||
}
|
||||
.burger
|
||||
{
|
||||
float:left;
|
||||
margin: 3px 8px;
|
||||
.burger-line
|
||||
{
|
||||
display: block;
|
||||
width: 20px;
|
||||
}
|
||||
.burger-line
|
||||
{
|
||||
height: 2px;
|
||||
margin-bottom: 5px;
|
||||
position: relative;
|
||||
background: #000;
|
||||
border-radius: 2px;
|
||||
z-index: 1;
|
||||
&:first-of-type
|
||||
{
|
||||
margin-top:5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#main-menu ul
|
||||
{
|
||||
display:none;
|
||||
}
|
||||
|
||||
main, h1
|
||||
{
|
||||
margin:1rem;
|
||||
padding:1rem;
|
||||
}
|
||||
|
||||
#main-menu #switch:checked ~ ul
|
||||
{
|
||||
display:block;
|
||||
}
|
||||
|
||||
@media (min-width: 480px)
|
||||
{
|
||||
#main-menu
|
||||
{
|
||||
.menu-label
|
||||
{
|
||||
display:none;
|
||||
}
|
||||
ul
|
||||
{
|
||||
display:block;
|
||||
margin-block-start: 1em;
|
||||
margin-block-end: 1em;
|
||||
margin-inline-start: 0px;
|
||||
margin-inline-end: 0px;
|
||||
padding-inline-start: 0px;
|
||||
margin:0px;
|
||||
li
|
||||
{
|
||||
display:inline-block;
|
||||
width:24%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media print
|
||||
{
|
||||
#main-menu
|
||||
{
|
||||
display: none!important;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,123 @@
|
||||
$font : Arial, Helvetica, sans-serif;
|
||||
$normalfontsize : 12px;
|
||||
$marge : 8px;
|
||||
|
||||
body
|
||||
{
|
||||
font-family: $font;
|
||||
font-size:$normalfontsize;
|
||||
}
|
||||
|
||||
h4
|
||||
{
|
||||
font-size:$normalfontsize + 2px;
|
||||
}
|
||||
|
||||
body,figure,img
|
||||
{
|
||||
padding:0;
|
||||
border:none;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
#switch:checked ~ p
|
||||
{
|
||||
background-color:green;
|
||||
}
|
||||
|
||||
img
|
||||
{
|
||||
// avec interpolation
|
||||
width:calc(100% - (#{$marge}*2));
|
||||
height:auto;
|
||||
margin:0 auto;
|
||||
}
|
||||
/*
|
||||
picture
|
||||
{
|
||||
display:block;
|
||||
max-height:40vh;
|
||||
overflow:hidden;
|
||||
}
|
||||
*/
|
||||
|
||||
#main-menu
|
||||
{
|
||||
text-align:center;
|
||||
ul
|
||||
{
|
||||
list-style:none;
|
||||
}
|
||||
|
||||
li
|
||||
{
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
li a,
|
||||
li span
|
||||
{
|
||||
color:black;
|
||||
text-decoration:none;
|
||||
font-size:1.1rem;
|
||||
}
|
||||
|
||||
li span
|
||||
{
|
||||
color:#666;
|
||||
}
|
||||
|
||||
.menu-label
|
||||
{
|
||||
font-size:1.5rem;
|
||||
color:black;
|
||||
text-decoration:none;
|
||||
font-weight:bold;
|
||||
display:inline-block;
|
||||
line-height:2rem;
|
||||
}
|
||||
}
|
||||
.burger
|
||||
{
|
||||
float:left;
|
||||
margin: 3px 8px;
|
||||
b,i
|
||||
{
|
||||
display: block;
|
||||
width: 20px;
|
||||
}
|
||||
b
|
||||
{
|
||||
height: 2px;
|
||||
margin-bottom: 5px;
|
||||
position: relative;
|
||||
background: #000;
|
||||
border-radius: 2px;
|
||||
z-index: 1;
|
||||
&:first-of-type
|
||||
{
|
||||
margin-top:5px;
|
||||
}
|
||||
}
|
||||
i
|
||||
{
|
||||
color:blue;
|
||||
}
|
||||
}
|
||||
|
||||
#main-menu ul
|
||||
{
|
||||
display:none;
|
||||
}
|
||||
|
||||
main, h1
|
||||
{
|
||||
margin:1rem;
|
||||
padding:1rem;
|
||||
}
|
||||
|
||||
#main-menu #switch:checked ~ ul
|
||||
{
|
||||
display:block;
|
||||
}
|
||||
|
||||
@ -0,0 +1,16 @@
|
||||
$espacestd:8px
|
||||
|
||||
body
|
||||
padding:0px
|
||||
margin:0px
|
||||
font-size:12px
|
||||
|
||||
nav#menu-haut
|
||||
background-color:#ccc
|
||||
ul
|
||||
margin:0
|
||||
padding:$espacestd
|
||||
li
|
||||
margin-bottom:$espacestd
|
||||
&.current
|
||||
background-color:#eee
|
||||
@ -0,0 +1,54 @@
|
||||
$espacestd:8px;
|
||||
$stdfontsize:12px;
|
||||
|
||||
@mixin reset-margins
|
||||
{
|
||||
margin: 0;
|
||||
margin-block-start: 0;
|
||||
margin-block-end: 0;
|
||||
}
|
||||
|
||||
body
|
||||
{
|
||||
padding:0px;
|
||||
@include reset-margins;
|
||||
font-size:$stdfontsize;
|
||||
}
|
||||
|
||||
nav#menu-haut
|
||||
{
|
||||
background-color:#ccc;
|
||||
//exemple avec interpolation;
|
||||
width:calc(100% - #{$espacestd * 2});
|
||||
ul
|
||||
{
|
||||
list-style:none;
|
||||
margin:0;
|
||||
padding:$espacestd;
|
||||
li
|
||||
{
|
||||
margin-bottom:$espacestd;
|
||||
&.current
|
||||
{
|
||||
background-color:#eee;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h1,h2,h3,h4,h5,h6
|
||||
{
|
||||
@include reset-margins;
|
||||
}
|
||||
|
||||
@for $i from 0 through 5 {
|
||||
h#{$i+1} {
|
||||
font-size:$stdfontsize*2 - $i*2px;
|
||||
}
|
||||
}
|
||||
|
||||
@for $i from 0 through 100 {
|
||||
.c#{$i}pourcent {
|
||||
width: #{$i} + '%';
|
||||
}
|
||||
}
|
||||
|
After Width: | Height: | Size: 136 KiB |
|
After Width: | Height: | Size: 68 KiB |
Loading…
Reference in new issue