Flex menu on its way
This commit is contained in:
parent
f898676f3e
commit
1ace9d2759
5 changed files with 153 additions and 71 deletions
|
|
@ -4,55 +4,134 @@
|
|||
@import url("../fonts/firasans-regular.css");
|
||||
|
||||
html, body {
|
||||
background-color: white;
|
||||
font-family: "Space Mono", Monaco, monospace !important;
|
||||
background-color: white;
|
||||
font-family: "Space Mono", Monaco, monospace !important;
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: "Fira Sans";
|
||||
font-family: "Fira Sans", sans-serif;
|
||||
}
|
||||
|
||||
|
||||
nav {
|
||||
background: white;
|
||||
background: rgba(255, 255, 255, .8);
|
||||
z-index: 10;
|
||||
/*padding: 1rem 2rem;*/
|
||||
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
/*position: -webkit-sticky;
|
||||
position: sticky;
|
||||
top: 0;*/
|
||||
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: stretch;
|
||||
-ms-flex-align: stretch;
|
||||
align-items: stretch;
|
||||
-webkit-flex-wrap: wrap;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
nav a {
|
||||
display: block;
|
||||
padding: 1rem 2rem;
|
||||
line-height: 1;
|
||||
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
nav h1 {
|
||||
margin: 0;
|
||||
}
|
||||
nav .home {
|
||||
font-weight: normal;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
nav .nav-left, nav .nav-right {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
}
|
||||
nav .nav-left {
|
||||
-webkit-box-pack: start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
nav .nav-right {
|
||||
-webkit-box-pack: end;
|
||||
-ms-flex-pack: end;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
|
||||
-webkit-flex-wrap: wrap;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
header {
|
||||
background-image: url("../images/ronce/illustration-ronce_1200x765px.png");
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
/* Create the parallax scrolling effect */
|
||||
/* background-attachment: fixed; */
|
||||
background-position: center;
|
||||
/* background-repeat: no-repeat; */
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
margin-bottom: 5rem;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
background-image: url("../images/ronce/illustration-ronce_1200x765px.png");
|
||||
/* Create the parallax scrolling effect */
|
||||
/*background-attachment: fixed;*/
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
margin-bottom: 5rem;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
header > p {
|
||||
width: 40%;
|
||||
position: relative;
|
||||
left: 55%;
|
||||
bottom: -75%;
|
||||
text-align: right;
|
||||
width: 40%;
|
||||
position: relative;
|
||||
left: 55%;
|
||||
bottom: -75%;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
header > nav {
|
||||
background: none;
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
nav.nav a {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
header > p, header > nav.nav a {
|
||||
color: white;
|
||||
/* color | offset-x | offset-y | blur-radius */
|
||||
text-shadow: black 0px 0px 4px;
|
||||
header > p, nav a {
|
||||
color: white;
|
||||
/* color | offset-x | offset-y | blur-radius */
|
||||
text-shadow: black 0px 0px 4px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
footer {
|
||||
border-top: black solid 2px;
|
||||
margin-top: 3rem;
|
||||
padding-top: 2rem;
|
||||
border-top: black solid 2px;
|
||||
margin-top: 3rem;
|
||||
padding-top: 2rem;
|
||||
}
|
||||
|
|
@ -1,24 +1,24 @@
|
|||
@font-face {
|
||||
font-family: 'Fira Sans';
|
||||
src: url('../fonts/spacemono/FiraSans-BoldItalic.ttf') format('truetype');
|
||||
src: url('../fonts/firasans/FiraSans-BoldItalic.ttf') format('truetype');
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Fira Sans';
|
||||
src: url('../fonts/spacemono/FiraSans-Bold.ttf') format('truetype');
|
||||
src: url('../fonts/firasans/FiraSans-Bold.ttf') format('truetype');
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Fira Sans';
|
||||
src: url('../fonts/spacemono/FiraSans-Italic.ttf') format('truetype');
|
||||
src: url('../fonts/firasans/FiraSans-Italic.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Fira Sans';
|
||||
src: url('../fonts/spacemono/FiraSans-Regular.ttf') format('truetype');
|
||||
src: url('../fonts/firasans/FiraSans-Regular.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
1
blueprint/charpente.css
Symbolic link
1
blueprint/charpente.css
Symbolic link
|
|
@ -0,0 +1 @@
|
|||
../charpente/charpente.css
|
||||
|
|
@ -1,40 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="fr">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
|
||||
<title>Deuxfleurs</title>
|
||||
|
||||
<link rel="stylesheet" href="assets/css/normalize.css">
|
||||
<link rel="stylesheet" href="assets/css/chota.min.css">
|
||||
<link rel="stylesheet" href="charpente.css">
|
||||
<!-- <link rel="stylesheet" href="assets/css/chota.css"> -->
|
||||
<link rel="stylesheet" href="assets/css/blueprint.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<nav class="nav">
|
||||
|
||||
<div class="nav-left">
|
||||
<h1>
|
||||
<a class="home" href="#">Deuxfleurs</a>
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div class="nav-right">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">Documentation</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Blog</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Mon compte</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<header>
|
||||
<nav class="nav">
|
||||
<div class="nav-left">
|
||||
<a href="#" class="home"><h1>Deuxfleurs</h1></a>
|
||||
</div>
|
||||
|
||||
<div class="nav-right">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">Documentation</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Blog</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Mon compte</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<p>
|
||||
Nous sommes un hébergeur associatif expérimental.<br>
|
||||
Avec nos machines et nos logiciels, <br>
|
||||
|
|
@ -109,7 +113,7 @@
|
|||
|
||||
<div id="trombinoscope" class="row">
|
||||
<figure class="col-6 col-3-md">
|
||||
<img src="">
|
||||
<!-- <img src=""> -->
|
||||
<figcaption>
|
||||
<h4>Esther</h4>
|
||||
Magicienne des images
|
||||
|
|
@ -117,7 +121,7 @@
|
|||
</figure>
|
||||
|
||||
<figure class="col-6 col-3-md">
|
||||
<img src="">
|
||||
<!-- <img src=""> -->
|
||||
<figcaption>
|
||||
<h4>Quentin</h4>
|
||||
Bidouilleur d'ordinateurs
|
||||
|
|
@ -125,7 +129,7 @@
|
|||
</figure>
|
||||
|
||||
<figure class="col-6 col-3-md">
|
||||
<img src="">
|
||||
<!-- <img src=""> -->
|
||||
<figcaption>
|
||||
<h4>Adrien</h4>
|
||||
Généraliste
|
||||
|
|
@ -133,7 +137,7 @@
|
|||
</figure>
|
||||
|
||||
<figure class="col-6 col-3-md">
|
||||
<img src="">
|
||||
<!-- <img src=""> -->
|
||||
<figcaption>
|
||||
<h4>Maximilien</h4>
|
||||
Ordinateurologue
|
||||
|
|
@ -141,7 +145,7 @@
|
|||
</figure>
|
||||
|
||||
<figure class="col-6 col-3-md">
|
||||
<img src="">
|
||||
<!-- <img src=""> -->
|
||||
<figcaption>
|
||||
<h4>Alex</h4>
|
||||
Bâtisseur d'empires
|
||||
|
|
@ -149,14 +153,12 @@
|
|||
</figure>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<p>Brodé avec amour par Deuxfleurs.</p>
|
||||
|
||||
<p class="is-right">Il y a sans doute un copyright.</p>
|
||||
</footer>
|
||||
</main>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1 +1 @@
|
|||
Subproject commit a418d3037177a70c6a83f0d543c780a2559126d1
|
||||
Subproject commit 9fd5420ce9fb61d93a219a0e6faf37dcc0b0f69a
|
||||
Loading…
Reference in a new issue