pro/2022_WEBSITE_kosmopolit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

tests mise en page avec largeur max de texte

Browse Source
This commit is contained in:
hugogogo
2021-03-10 23:04:21 +01:00
parent 360e10592a
commit b03d419a53
5 changed files with 270 additions and 321 deletions
Download Patch File Download Diff File Expand all files Collapse all files

225
styles/skeleton.css vendored Normal file
View 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;
}