tests mise en page avec largeur max de texte
This commit is contained in:
hugogogo
@@ -1,47 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title></title>
|
||||
<meta name="description" content="description du site web">
|
||||
<meta name="keywords" content="truc, bidule, chouette">
|
||||
<style>
|
||||
#fullpage {
|
||||
margin: 40px;
|
||||
padding: 50px;
|
||||
border: 1px solid red;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'cabrion';
|
||||
src: url('./fonts/cabrion/cabrion-light.woff2') format('woff2'),
|
||||
url('./fonts/cabrion/cabrion-light.woff') format('woff');
|
||||
url('./fonts/cabrion/cabrion-light.otf') format('opentype');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'paradroid';
|
||||
src: url('./fonts/paradroid/paradroidmono-light.woff2') format('woff2'),
|
||||
url('./fonts/paradroid/paradroidmono-light.woff') format('woff');
|
||||
url('./fonts/paradroid/paradroidmono-light.ttf') format('truetype');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'louisgeorge';
|
||||
src: url('./fonts/louisgeorge/louis_george_cafe.woff2') format('woff2'),
|
||||
url('./fonts/louisgeorge/louis_george_cafe.woff') format('woff');
|
||||
url('./fonts/louisgeorge/louis_george_cafe.ttf') format('truetype');
|
||||
}
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: 'louisgeorge', sans-serif;
|
||||
}
|
||||
a, p, li {
|
||||
font-family: 'cabrion', sans-serif;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="fullpage">
|
||||
<h1>titre exemple</h1>
|
||||
<p>texte exemple</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,223 +1,49 @@
|
||||
/*DEBUG*/
|
||||
/* borders on mains elements of pages for debugging*/
|
||||
body * {
|
||||
/*
|
||||
border: 1px solid red;
|
||||
*/
|
||||
}
|
||||
body > *, body > .container_main > * {
|
||||
/*
|
||||
border: 1px solid red;
|
||||
*/
|
||||
}
|
||||
/*----------------------------------------------*/
|
||||
/*GLOBAL VARIABLE*/
|
||||
:root {
|
||||
/* color range */
|
||||
--color-purple: hsl(324, 86%, 52%); /* #ee1998 - rgb(238, 25, 152) */
|
||||
--color-pink: hsl(324, 100%, 74%); /* #ff7bca - rgb(255, 123, 202) */
|
||||
--color-green: hsl(86, 60%, 52%); /* #8fce3c - rgb(143, 206, 60 ) */
|
||||
--color-yellow: hsl(59, 92%, 46%); /* #e3e00a - rgb(227, 224, 10 ) */
|
||||
--color-blue: hsl(189, 73%, 61%); /* #51cee4 - rgb(81, 206, 228) */
|
||||
--color-water: hsl(189, 88%, 38%); /* #0c9cb5 - rgb(12, 156, 181) */
|
||||
|
||||
/*---------------------------------------------*/
|
||||
/*global settings*/
|
||||
/*
|
||||
--------------------- ---------------------
|
||||
' NAV ' ' NAV '
|
||||
'---------------------' '---------------------'
|
||||
' ------------------- ' ' S ' PATHS ' A '
|
||||
'' CONTAINER '' ' U ' ----- ' S '
|
||||
'' --- ------- --- '' ' M ' TITLE ' I '
|
||||
''' S '' PATHS '' A ''' ' M ' ----- ' D '
|
||||
''' U '' ----- '' S ''' ' A ' M ' E '
|
||||
''' M '' TITLE '' I ''' ' R ' A ' S '
|
||||
''' M '' ----- '' D ''' ' Y ' I ' '
|
||||
''' A '' M '' E ''' ' ' N ' '
|
||||
''' R '' A '' S ''' '---------------------'
|
||||
''' Y '' I '' ''' ' FOOTER '
|
||||
''' '' N '' ''' '---------------------'
|
||||
'''---''-------''---'''
|
||||
''-------------------''
|
||||
' FOOTER '
|
||||
'---------------------'
|
||||
/* colors buttons */
|
||||
--hue-btn: 12;
|
||||
--color-btn: hsl(var(--hue-btn), 1%, 1%);
|
||||
|
||||
navbar -> nav
|
||||
container -> .container_main
|
||||
summary -> aside.page_content
|
||||
main -> main
|
||||
paths -> .page.path
|
||||
asides -> aside.relative_content
|
||||
footer ->
|
||||
*/
|
||||
/*TEXTE*/
|
||||
/* fonts */
|
||||
--font-titles: 'paradroid';
|
||||
--font-texts: 'louisgeorge';
|
||||
--font-fallback: 'cabrion';
|
||||
|
||||
/*ALL*/
|
||||
/* by default all elements are verticals*/
|
||||
body, body * {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
body aside, body main {
|
||||
padding: calc(var(--gap-unit) / 2);
|
||||
}
|
||||
/* colors texts */
|
||||
/*text*/
|
||||
--color-text: hsl(0, 0%, 10%);
|
||||
--color-text-light: hsl(0, 0%, 25%);
|
||||
--color-text-strong: hsl(0, 0%, 5%);
|
||||
/*links*/
|
||||
--hue-link: 324;
|
||||
--hue-link: 189;
|
||||
--hue-link: 59;
|
||||
--color-link: hsl(var(--hue-link), 70%, 40%);
|
||||
--color-link-hover: hsl(var(--hue-link), 70%, 50%);
|
||||
--color-link-active: hsl(var(--hue-link), 70%, 50%);
|
||||
--color-link-visited: hsl(var(--hue-link), 60%, 30%);
|
||||
/*titles*/
|
||||
--color-title-1: hsl(0, 0%, 10%);
|
||||
--color-title-2: hsl(0, 0%, 10%);
|
||||
|
||||
/*HTML*/
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
/*default font-size for rem*/
|
||||
font-size: var(--base-font-size);
|
||||
}
|
||||
/*skeleton*/
|
||||
--gap-unit: 10px;
|
||||
--max-screen: 1110px;
|
||||
--base-font-size: 10px;
|
||||
--nav-height: 40px;
|
||||
--base-back-color: white;
|
||||
--aside-left-width: 200px;
|
||||
--aside-right-width: 200px;
|
||||
--aside-margin: 30px;
|
||||
|
||||
/*BODY*/
|
||||
/* the page is designed for a maximum screen*/
|
||||
body {
|
||||
background-color: var(--base-back-color);
|
||||
}
|
||||
|
||||
/*NAVBAR*/
|
||||
body nav {
|
||||
flex-direction: row;
|
||||
/*we have to set the height to use the height % for childs elements*/
|
||||
height: var(--nav-height);
|
||||
border-bottom: 1px solid lightgrey;
|
||||
background-color: var(--base-back-color);
|
||||
z-index: 10;
|
||||
}
|
||||
body nav * {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin: auto;
|
||||
max-height: 100%;
|
||||
}
|
||||
/* nav_left is used for links to pages*/
|
||||
body nav .nav_left {
|
||||
/*we have to set the height to use the height % for childs elements*/
|
||||
height: 100%;
|
||||
margin-left: 0px;
|
||||
margin-right: auto;
|
||||
}
|
||||
/* nav_right is used for actions such as connection, search or language*/
|
||||
body nav .nav_right {
|
||||
height: 100%;
|
||||
margin-left: auto;
|
||||
margin-right: 0px;
|
||||
}
|
||||
/* appearence on hover and click*/
|
||||
body nav a {
|
||||
/*gap-unit * 1.5 because there are 2 * (1/2) for aside and (1/2) for main*/
|
||||
padding: 0px calc(var(--gap-unit) * 1.5);
|
||||
height: 100%;
|
||||
}
|
||||
body nav a:hover, body nav a:focus {
|
||||
background-color: lightgrey;
|
||||
}
|
||||
/* special settings for the logo*/
|
||||
body nav a.nav_logo {
|
||||
padding: 0px;
|
||||
width: var(--aside-left-width);
|
||||
}
|
||||
|
||||
/*CONTAINER*/
|
||||
body .container_main {
|
||||
margin: auto;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
/*ASIDE LEFT SUMMARY*/
|
||||
/* aside left is for page table of content */
|
||||
body aside.page_content {
|
||||
top: calc(var(--nav-height) + 1px);
|
||||
height: calc(100vh - var(--nav-height));
|
||||
margin-right: var(--aside-margin);
|
||||
}
|
||||
/* asides elements only have width if they have a child*/
|
||||
body aside.page_content .table_box {
|
||||
width: calc(var(--aside-left-width) - 2 * var(--aside-margin));
|
||||
margin: var(--aside-margin) 0px var(--aside-margin) var(--aside-margin);
|
||||
/*border-box so changing padding has no effect on total width*/
|
||||
box-sizing: border-box;
|
||||
padding: var(--gap-unit);
|
||||
/*for style*/
|
||||
border-left: 1px solid lightgrey;
|
||||
}
|
||||
/*to put space between elements*/
|
||||
body aside.page_content .table_box > * {
|
||||
margin-bottom: var(--gap-unit);
|
||||
}
|
||||
|
||||
/*MAIN*/
|
||||
body main {
|
||||
max-width: var(--max-main-width);
|
||||
}
|
||||
body main > * {
|
||||
margin: var(--gap-unit) 0px;
|
||||
}
|
||||
body main h1 {
|
||||
padding: 70px 0px;
|
||||
border-bottom: 1px solid lightgrey;
|
||||
}
|
||||
body main h2 {
|
||||
padding: 10px 0px;
|
||||
border-bottom: 1px solid lightgrey;
|
||||
}
|
||||
|
||||
/*TITLE*/
|
||||
body main .page_title {
|
||||
position: relative;
|
||||
}
|
||||
body main .page_title .date {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
/*ASIDE RIGHT RELATIVES*/
|
||||
/* aside right is for links to relatives content*/
|
||||
body aside.relative_content {
|
||||
}
|
||||
/* asides elements only have width if they have a child*/
|
||||
body aside.relative_content *:first-child {
|
||||
width: var(--aside-right-width);
|
||||
}
|
||||
body aside.relative_content .relative_box {
|
||||
margin: var(--aside-margin);
|
||||
padding: var(--gap-unit);
|
||||
width: fit-content;
|
||||
border: 1px solid lightgrey;
|
||||
}
|
||||
body aside.relative_content .box_name {
|
||||
border-bottom: 1px solid lightgrey;
|
||||
padding-bottom: var(--gap-unit);
|
||||
}
|
||||
body aside.relative_content .relative_box > * {
|
||||
margin-bottom: var(--gap-unit);
|
||||
}
|
||||
|
||||
/*FOOTER*/
|
||||
body footer.page_footer {
|
||||
height: 100px;
|
||||
border-top: 1px solid lightgrey;
|
||||
}
|
||||
|
||||
|
||||
/*---------------------------------------------*/
|
||||
/*DESIGN KEYWORDS*/
|
||||
/* contains elements oriented vertically (default) or horizontally*/
|
||||
.vertical {
|
||||
flex-direction: column;
|
||||
}
|
||||
/* horizontal is only in web version, it becomes vertical in mobile design*/
|
||||
.horizontal {
|
||||
flex-direction: row;
|
||||
}
|
||||
/* self position of elements to the left, the right, or the center of their container*/
|
||||
.right {
|
||||
margin-right: 0px;
|
||||
margin-left: auto;
|
||||
text-align: right;
|
||||
}
|
||||
.left > * {
|
||||
margin-left: 0px;
|
||||
}
|
||||
.center {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
text-align: center;
|
||||
}
|
||||
.sticky {
|
||||
position: -webkit-sticky; /*safari*/
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
|
||||
225
styles/skeleton.css
vendored
Normal file
225
styles/skeleton.css
vendored
Normal file
@@ -0,0 +1,225 @@
|
||||
/*DEBUG*/
|
||||
/* borders on mains elements of pages for debugging*/
|
||||
body * {
|
||||
/*
|
||||
border: 1px solid red;
|
||||
*/
|
||||
}
|
||||
body > *, body > .container_main > * {
|
||||
/*
|
||||
border: 1px solid red;
|
||||
*/
|
||||
}
|
||||
|
||||
/*---------------------------------------------*/
|
||||
/*global settings*/
|
||||
/*
|
||||
--------------------- ---------------------
|
||||
' NAV ' ' NAV '
|
||||
'---------------------' '---------------------'
|
||||
' ------------------- ' ' S ' PATHS ' A '
|
||||
'' CONTAINER '' ' U ' ----- ' S '
|
||||
'' --- ------- --- '' ' M ' TITLE ' I '
|
||||
''' S '' PATHS '' A ''' ' M ' ----- ' D '
|
||||
''' U '' ----- '' S ''' ' A ' M ' E '
|
||||
''' M '' TITLE '' I ''' ' R ' A ' S '
|
||||
''' M '' ----- '' D ''' ' Y ' I ' '
|
||||
''' A '' M '' E ''' ' ' N ' '
|
||||
''' R '' A '' S ''' '---------------------'
|
||||
''' Y '' I '' ''' ' FOOTER '
|
||||
''' '' N '' ''' '---------------------'
|
||||
'''---''-------''---'''
|
||||
''-------------------''
|
||||
' FOOTER '
|
||||
'---------------------'
|
||||
|
||||
navbar -> nav
|
||||
container -> .container_main
|
||||
summary -> aside.page_content
|
||||
main -> main
|
||||
paths -> .page.path
|
||||
asides -> aside.relative_content
|
||||
footer ->
|
||||
*/
|
||||
|
||||
/*ALL*/
|
||||
/* by default all elements are verticals*/
|
||||
body, body * {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
body aside, body main {
|
||||
padding: calc(var(--gap-unit) / 2);
|
||||
}
|
||||
|
||||
/*HTML*/
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
/*default font-size for rem*/
|
||||
font-size: var(--base-font-size);
|
||||
}
|
||||
|
||||
/*BODY*/
|
||||
/* the page is designed for a maximum screen*/
|
||||
body {
|
||||
background-color: var(--base-back-color);
|
||||
}
|
||||
|
||||
/*NAVBAR*/
|
||||
body nav {
|
||||
flex-direction: row;
|
||||
/*we have to set the height to use the height % for childs elements*/
|
||||
height: var(--nav-height);
|
||||
width: 100%;
|
||||
border-bottom: 1px solid lightgrey;
|
||||
background-color: var(--base-back-color);
|
||||
z-index: 10;
|
||||
}
|
||||
body nav * {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin: auto;
|
||||
max-height: 100%;
|
||||
}
|
||||
/* nav_left is used for links to pages*/
|
||||
body nav .nav_left {
|
||||
/*we have to set the height to use the height % for childs elements*/
|
||||
height: 100%;
|
||||
margin-left: 0px;
|
||||
margin-right: auto;
|
||||
}
|
||||
/* nav_right is used for actions such as connection, search or language*/
|
||||
body nav .nav_right {
|
||||
height: 100%;
|
||||
margin-left: auto;
|
||||
margin-right: 0px;
|
||||
}
|
||||
/* appearence on hover and click*/
|
||||
body nav a {
|
||||
/*gap-unit * 1.5 because there are 2 * (1/2) for aside and (1/2) for main*/
|
||||
padding: 0px calc(var(--gap-unit) * 1.5);
|
||||
height: 100%;
|
||||
}
|
||||
body nav a:hover, body nav a:focus {
|
||||
background-color: lightgrey;
|
||||
}
|
||||
/* special settings for the logo*/
|
||||
body nav a.nav_logo {
|
||||
padding: 0px;
|
||||
width: var(--aside-left-width);
|
||||
}
|
||||
|
||||
/*CONTAINER*/
|
||||
body .container_main {
|
||||
margin: auto;
|
||||
flex-direction: row;
|
||||
max-width: var(--max-screen);
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
/*ASIDE LEFT SUMMARY*/
|
||||
/* aside left is for page table of content */
|
||||
body aside.page_content {
|
||||
top: calc(var(--nav-height) + 1px);
|
||||
height: calc(100vh - var(--nav-height));
|
||||
margin-right: var(--aside-margin);
|
||||
}
|
||||
/* asides elements only have width if they have a child*/
|
||||
body aside.page_content .table_box {
|
||||
width: calc(var(--aside-left-width) - 2 * var(--aside-margin));
|
||||
margin: var(--aside-margin) 0px var(--aside-margin) var(--aside-margin);
|
||||
/*border-box so changing padding has no effect on total width*/
|
||||
box-sizing: border-box;
|
||||
padding: var(--gap-unit);
|
||||
/*for style*/
|
||||
border-left: 1px solid lightgrey;
|
||||
}
|
||||
/*to put space between elements*/
|
||||
body aside.page_content .table_box > * {
|
||||
margin-bottom: var(--gap-unit);
|
||||
}
|
||||
|
||||
/*MAIN*/
|
||||
body main {
|
||||
}
|
||||
body main > * {
|
||||
margin: var(--gap-unit) 0px;
|
||||
}
|
||||
body main h1 {
|
||||
padding: 70px 0px;
|
||||
border-bottom: 1px solid lightgrey;
|
||||
}
|
||||
body main h2 {
|
||||
padding: 10px 0px;
|
||||
border-bottom: 1px solid lightgrey;
|
||||
}
|
||||
|
||||
/*TITLE*/
|
||||
body main .page_title {
|
||||
position: relative;
|
||||
}
|
||||
body main .page_title .date {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
/*ASIDE RIGHT RELATIVES*/
|
||||
/* aside right is for links to relatives content*/
|
||||
body aside.relative_content {
|
||||
}
|
||||
/* asides elements only have width if they have a child*/
|
||||
body aside.relative_content *:first-child {
|
||||
width: var(--aside-right-width);
|
||||
}
|
||||
body aside.relative_content .relative_box {
|
||||
margin: var(--aside-margin);
|
||||
padding: var(--gap-unit);
|
||||
width: fit-content;
|
||||
border: 1px solid lightgrey;
|
||||
}
|
||||
body aside.relative_content .box_name {
|
||||
border-bottom: 1px solid lightgrey;
|
||||
padding-bottom: var(--gap-unit);
|
||||
}
|
||||
body aside.relative_content .relative_box > * {
|
||||
margin-bottom: var(--gap-unit);
|
||||
}
|
||||
|
||||
/*FOOTER*/
|
||||
body footer.page_footer {
|
||||
height: 100px;
|
||||
border-top: 1px solid lightgrey;
|
||||
}
|
||||
|
||||
|
||||
/*---------------------------------------------*/
|
||||
/*DESIGN KEYWORDS*/
|
||||
/* contains elements oriented vertically (default) or horizontally*/
|
||||
.vertical {
|
||||
flex-direction: column;
|
||||
}
|
||||
/* horizontal is only in web version, it becomes vertical in mobile design*/
|
||||
.horizontal {
|
||||
flex-direction: row;
|
||||
}
|
||||
/* self position of elements to the left, the right, or the center of their container*/
|
||||
.right {
|
||||
margin-right: 0px;
|
||||
margin-left: auto;
|
||||
text-align: right;
|
||||
}
|
||||
.left > * {
|
||||
margin-left: 0px;
|
||||
}
|
||||
.center {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
text-align: center;
|
||||
}
|
||||
.sticky {
|
||||
position: -webkit-sticky; /*safari*/
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
@@ -3,6 +3,7 @@
|
||||
/*IMPORT CSS*/
|
||||
@import url(./reset.css);
|
||||
@import url(./global.css);
|
||||
@import url(./skeleton.css);
|
||||
@import url(./fonts.css);
|
||||
@import url(./text.css);
|
||||
@import url(./header.css);
|
||||
@@ -10,58 +11,3 @@
|
||||
@import url(./images.css);
|
||||
|
||||
|
||||
|
||||
|
||||
/*----------------------------------------------*/
|
||||
/*GLOBAL VARIABLE*/
|
||||
:root {
|
||||
/* color range */
|
||||
--color-purple: hsl(324, 86%, 52%); /* #ee1998 - rgb(238, 25, 152) */
|
||||
--color-pink: hsl(324, 100%, 74%); /* #ff7bca - rgb(255, 123, 202) */
|
||||
--color-green: hsl(86, 60%, 52%); /* #8fce3c - rgb(143, 206, 60 ) */
|
||||
--color-yellow: hsl(59, 92%, 46%); /* #e3e00a - rgb(227, 224, 10 ) */
|
||||
--color-blue: hsl(189, 73%, 61%); /* #51cee4 - rgb(81, 206, 228) */
|
||||
--color-water: hsl(189, 88%, 38%); /* #0c9cb5 - rgb(12, 156, 181) */
|
||||
|
||||
/* colors buttons */
|
||||
--hue-btn: 12;
|
||||
--color-btn: hsl(var(--hue-btn), 1%, 1%);
|
||||
|
||||
/*TEXTE*/
|
||||
/* fonts */
|
||||
--font-titles: 'paradroid';
|
||||
--font-texts: 'louisgeorge';
|
||||
--font-fallback: 'cabrion';
|
||||
|
||||
--max-p-width: 700px;
|
||||
|
||||
/* colors texts */
|
||||
/*text*/
|
||||
--color-text: hsl(0, 0%, 10%);
|
||||
--color-text-light: hsl(0, 0%, 25%);
|
||||
--color-text-strong: hsl(0, 0%, 5%);
|
||||
/*links*/
|
||||
--hue-link: 324;
|
||||
--hue-link: 189;
|
||||
--hue-link: 59;
|
||||
--color-link: hsl(var(--hue-link), 70%, 40%);
|
||||
--color-link-hover: hsl(var(--hue-link), 70%, 50%);
|
||||
--color-link-active: hsl(var(--hue-link), 70%, 50%);
|
||||
--color-link-visited: hsl(var(--hue-link), 60%, 30%);
|
||||
/*titles*/
|
||||
--color-title-1: hsl(0, 0%, 10%);
|
||||
--color-title-2: hsl(0, 0%, 10%);
|
||||
|
||||
/*skeleton*/
|
||||
--gap-unit: 10px;
|
||||
--max-screen: 1560px;
|
||||
--base-font-size: 10px;
|
||||
--nav-height: 40px;
|
||||
--base-back-color: white;
|
||||
--aside-left-width: 200px;
|
||||
--aside-right-width: 200px;
|
||||
--aside-margin: 30px;
|
||||
--max-main-width: var(--max-p-width);
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -35,7 +35,6 @@ main {
|
||||
p {
|
||||
font-size: 1.8em;
|
||||
line-height: 1.5em;
|
||||
max-width: var(--max-p-width);
|
||||
}
|
||||
h1 {
|
||||
font-size: 3.5em;
|
||||
@@ -83,7 +82,7 @@ b, em {
|
||||
}
|
||||
.quote_credit {
|
||||
font-size: 1.8em;
|
||||
margin-top: var(--gap-unit);
|
||||
margin-top: 0.2em;
|
||||
}
|
||||
.quote_credit p {
|
||||
font-size: 0.8em;
|
||||
|
||||
Reference in New Issue
Block a user