197 lines
4.0 KiB
CSS
197 lines
4.0 KiB
CSS
/*---------------------------------------------*/
|
|
/*GLOBAL VARIABLE*/
|
|
:root {
|
|
--gap-unit: 10px;
|
|
--max-screen: 1500px;
|
|
--base-font-size: 10px;
|
|
--nav-height: 40px;
|
|
--base-back-color: white;
|
|
}
|
|
|
|
|
|
/*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
|
|
title -> .page_title
|
|
asides -> aside.relative_content
|
|
footer ->
|
|
*/
|
|
|
|
/*ALL*/
|
|
/* by default all elements are verticals*/
|
|
body, body * {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
body > *:not(.container_main), aside, 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 {
|
|
max-width: var(--max-screen);
|
|
margin: auto;
|
|
background-color: var(--base-back-color);
|
|
}
|
|
|
|
/*NAVBAR*/
|
|
body nav {
|
|
flex-direction: row;
|
|
height: var(--nav-height);
|
|
border-bottom: 1px solid lightgrey;
|
|
background-color: var(--base-back-color);
|
|
z-index: 10;
|
|
}
|
|
body nav *:first-child {
|
|
margin-left: var(--gap-unit);
|
|
padding-left: 0px;
|
|
}
|
|
body nav > * {
|
|
margin: auto 20px;
|
|
padding: 0px 10px;
|
|
}
|
|
body nav * {
|
|
max-height: var(--nav-height);
|
|
}
|
|
|
|
/*CONTAINER*/
|
|
body .container_main {
|
|
flex-direction: row;
|
|
}
|
|
|
|
/*ASIDE LEFT SUMMARY*/
|
|
/* aside left is for page table of content */
|
|
body aside.page_content {
|
|
top: calc(var(--nav-height) + var(--gap-unit) + 1px);
|
|
height: calc(100vh - var(--nav-height) - 2 * var(--gap-unit));
|
|
}
|
|
body aside.page_content > * {
|
|
margin: var(--gap-unit) 0px;
|
|
}
|
|
/* asides elements only have width if they have a child*/
|
|
body aside.page_content *:first-child {
|
|
width: 150px;
|
|
}
|
|
|
|
/*MAIN*/
|
|
body main {
|
|
}
|
|
body main > * {
|
|
margin: var(--gap-unit) 0px;
|
|
}
|
|
|
|
/*PATH*/
|
|
body main .page_path {
|
|
margin-top: 0px;
|
|
}
|
|
|
|
/*TITLE*/
|
|
body main .page_title {
|
|
position: relative;
|
|
height: 150px;
|
|
border-bottom: 1px solid lightgrey;
|
|
}
|
|
body main .page_title h1 {
|
|
margin: auto 0px;
|
|
}
|
|
body main .page_title .date {
|
|
position: absolute;
|
|
bottom: 0px;
|
|
left: 0px;
|
|
}
|
|
|
|
/*ASIDE RIGHT RELATIVES*/
|
|
body aside.relative_content > * {
|
|
margin: var(--gap-unit) 0px;
|
|
}
|
|
/* 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: 200px;
|
|
}
|
|
|
|
/*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;
|
|
}
|
|
|