diff --git a/app.bak b/app.bak new file mode 100644 index 0000000..800c2c3 --- /dev/null +++ b/app.bak @@ -0,0 +1,81 @@ +from flask import Flask +from flask import render_template, request +import Markdown +from flask_flatpages import FlatPages +import markdown2, os + +app = Flask(__name__) +application = app + +FLATPAGES_EXTENSION = '.md' +FLATPAGES_MARKDOWN_EXTENSIONS = ['extra'] +FLATPAGES_AUTO_RELOAD = True + +app.config['APPLICATION_ROOT'] = '/lpe' + +app.config.from_object(__name__) +BASE_DIR = os.path.abspath(os.path.dirname(__file__)) +app.config.from_object(__name__) + +Markdown(app) +pages = FlatPages(app) +pages.get('foo') + +def Liste_cat(): + articles = (p for p in pages if 'date' in p.meta and 'type' in p.meta and p.meta['type']=='blog') + catList = [] + for a in articles: + catList.append(a.meta['category']) + catList = list(dict.fromkeys(catList)) + return catList + +def imagelist(articlename): + dir_path = os.path.dirname(os.path.realpath(articlename))+'/pages/blog/' + gallery_path = os.path.join(dir_path, articlename) + if os.path.exists(gallery_path): + images = [f for f in os.listdir(gallery_path) if f.endswith('.jpg') or f.endswith('.jpeg') or f.endswith('.png') or f.endswith('.gif')] + return gallery_path ,images + else: + return None, None + +@app.route('/') +def index(): + infobox = pages.get('info-box') + page = pages.get_or_404('home') + return render_template('home.html' , page=page , infobox=infobox ) + +@app.route('/home/') +def home(): + infobox = pages.get('info-box') + page = pages.get_or_404('home') + return render_template('home.html' , page=page , infobox=infobox ) + +@app.route('//') +def pageStat(path): + page = pages.get_or_404(path) + return render_template('home.html' , page=page ) + + +@app.route('/pages/') +def serve_pages(path): + return send_from_directory('pages', path) + +@app.route('/blog/') +def blog(): + articles = (p for p in pages if 'date' in p.meta and 'type' in p.meta and p.meta['type']=='blog') + latest = sorted(articles, reverse=True, + key=lambda p: p.meta['date']) + catList = Liste_cat() + return render_template('archive.html', articles=latest , catList=catList ) + +@app.route('/actu/') +def actu(): + articles = (p for p in pages if 'date' in p.meta and 'type' in p.meta and p.meta['type']=='actu') + latest = sorted(articles, reverse=True, + key=lambda p: p.meta['date']) + catList = Liste_cat() + return render_template('archive.html', articles=latest , catList=catList ) + +if __name__ == '__main__': + app.run(host='0.0.0.0') + diff --git a/app.py b/app.py index 800c2c3..3ca365e 100644 --- a/app.py +++ b/app.py @@ -1,6 +1,5 @@ from flask import Flask from flask import render_template, request -import Markdown from flask_flatpages import FlatPages import markdown2, os @@ -17,7 +16,6 @@ app.config.from_object(__name__) BASE_DIR = os.path.abspath(os.path.dirname(__file__)) app.config.from_object(__name__) -Markdown(app) pages = FlatPages(app) pages.get('foo') diff --git a/html_int/home.html b/html_int/home.html index eb09531..0adfd15 100644 --- a/html_int/home.html +++ b/html_int/home.html @@ -10,9 +10,8 @@ -
- +
diff --git a/static/css/facebook.svg b/static/css/facebook.svg deleted file mode 100644 index ab31dc0..0000000 --- a/static/css/facebook.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - diff --git a/static/css/fonts/courierprime-regular-webfont.woff b/static/css/fonts/courierprime-regular-webfont.woff new file mode 100644 index 0000000..df79261 Binary files /dev/null and b/static/css/fonts/courierprime-regular-webfont.woff differ diff --git a/static/css/fonts/courierprime-regular-webfont.woff2 b/static/css/fonts/courierprime-regular-webfont.woff2 new file mode 100644 index 0000000..b0dbbc1 Binary files /dev/null and b/static/css/fonts/courierprime-regular-webfont.woff2 differ diff --git a/static/css/fonts/courierprime.css b/static/css/fonts/courierprime.css new file mode 100644 index 0000000..7cd90b0 --- /dev/null +++ b/static/css/fonts/courierprime.css @@ -0,0 +1,12 @@ +/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on August 28, 2024 */ + + + +@font-face { + font-family: 'courier_primeregular'; + src: url('courierprime-regular-webfont.woff2') format('woff2'), + url('courierprime-regular-webfont.woff') format('woff'); + font-weight: normal; + font-style: normal; + +} \ No newline at end of file diff --git a/static/css/fonts/script.css b/static/css/fonts/script.css new file mode 100644 index 0000000..554d541 --- /dev/null +++ b/static/css/fonts/script.css @@ -0,0 +1,12 @@ +/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on July 4, 2024 */ + + + +@font-face { + font-family: 'script12_btroman'; + src: url('script_12_pitch_bt-webfont.woff2') format('woff2'), + url('script_12_pitch_bt-webfont.woff') format('woff'); + font-weight: normal; + font-style: normal; + +} \ No newline at end of file diff --git a/static/css/fonts/script_12_pitch_bt-webfont.woff b/static/css/fonts/script_12_pitch_bt-webfont.woff new file mode 100644 index 0000000..ddf44b3 Binary files /dev/null and b/static/css/fonts/script_12_pitch_bt-webfont.woff differ diff --git a/static/css/fonts/script_12_pitch_bt-webfont.woff2 b/static/css/fonts/script_12_pitch_bt-webfont.woff2 new file mode 100644 index 0000000..f648e23 Binary files /dev/null and b/static/css/fonts/script_12_pitch_bt-webfont.woff2 differ diff --git a/static/css/img/barre.svg b/static/css/img/barre.svg new file mode 100644 index 0000000..e963efc --- /dev/null +++ b/static/css/img/barre.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/css/img/gradient-back.svg b/static/css/img/gradient-back.svg new file mode 100644 index 0000000..aab29b5 --- /dev/null +++ b/static/css/img/gradient-back.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/static/css/img/logo.svg b/static/css/img/logo.svg new file mode 100644 index 0000000..1b0a443 --- /dev/null +++ b/static/css/img/logo.svg @@ -0,0 +1,439 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/static/css/img/p02.svg b/static/css/img/p02.svg new file mode 100644 index 0000000..8e150ae --- /dev/null +++ b/static/css/img/p02.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/css/img/picto/picto_pe_07.svg b/static/css/img/picto/picto_pe_07.svg new file mode 100644 index 0000000..2057a1c --- /dev/null +++ b/static/css/img/picto/picto_pe_07.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/css/img/picto/sun.svg b/static/css/img/picto/sun.svg new file mode 100644 index 0000000..a9c044c --- /dev/null +++ b/static/css/img/picto/sun.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/css/img/picto/sun_lite.svg b/static/css/img/picto/sun_lite.svg new file mode 100644 index 0000000..476799d --- /dev/null +++ b/static/css/img/picto/sun_lite.svg @@ -0,0 +1 @@ + diff --git a/static/css/instagram.svg b/static/css/instagram.svg deleted file mode 100644 index ca4441e..0000000 --- a/static/css/instagram.svg +++ /dev/null @@ -1,24 +0,0 @@ - - - - - - - - - diff --git a/static/css/menu_burger_close.svg b/static/css/menu_burger_close.svg deleted file mode 100644 index f069dc7..0000000 --- a/static/css/menu_burger_close.svg +++ /dev/null @@ -1,26 +0,0 @@ - - - - - - - - - - - - - - - - - - - diff --git a/static/css/menu_burger_open.svg b/static/css/menu_burger_open.svg deleted file mode 100644 index a15c12d..0000000 --- a/static/css/menu_burger_open.svg +++ /dev/null @@ -1,30 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - diff --git a/static/css/style.bak b/static/css/style.bak new file mode 100644 index 0000000..d2ff50d --- /dev/null +++ b/static/css/style.bak @@ -0,0 +1,381 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ +@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;600&display=swap'); + + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} + +body { + line-height: 1,2; + font-family: 'Fira Code', monospace; +} + +ol, ul { + list-style: none; +} + +blockquote, q { + quotes: none; +} + +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +@font-face { + font-weight: normal; + font-style: normal; +} + +@keyframes menu_color { + 0% {color: #ffe609;} + 30% {color: #e2b1aa;} + 60% {color: #f1885f;} + 90% {color: #70ba89;} + 100% {color: #ffe609;} +} + +html{ + font-size:16pt; + scroll-behavior: smooth; +} + +.page_data a { + text-decoration: none; + color: #0000; + animation-name: menu_color; + animation-iteration-count: infinite; + -moz-animation-iteration-count: infinite; + -webkit-animation-iteration-count: infinite; + -o-animation-iteration-count: infinite; + animation-duration: 6s; + font-size:1em; +} + +::selection { + color:rgba(255,230,9,1); +} + + +nav{ + z-index:1000; + height:70px; + background:rgba(255,255,255,0.9); + position: fixed; + top: 0; + width: 100%; +} + +nav #top_nav ul li{ + display:inline-block; + margin: 15px 0 0 15px; + padding-bottom: 5px; +} + +nav #top_nav ul li:hover{ + +} + +nav #top_nav ul li a { + color: black; + font-size : 1em; + text-decoration: none; +} + + +nav #burger_nav , #burger_btn{ + display : none; +} + +#intro{ + font-size : 50pt; + min-height: 100vh; + min-width: 100hw; + text-align:center; + background:url('../img/photoAccueil.jpg') center center no-repeat; + background-size:cover; +} + +#intro #intro_title { + display : block; + width:300px; + height:300px; + background:#fff; + border-radius:50%; + position:absolute; + top:calc(50% - 150px); + left:calc(50% - 150px); + line-height:84px; +} + +.page_data { + /*! top:25px; */ + padding : 150px 50px 50px 50px ; + width:85%; + background: #fff; + min-height: calc(100vh - 200px); +} + +.page_data h1{ + font-size: 2em; + line-height: 1; + //text-align: center; +} + +.page_data p{ + margin: 20px 0; +} + +.page_data p img{ + max-width:100%; +} + +#infobox{ + width: 150%; + background: rgba(255, 255, 255,0.9); + font-size:2.5em; + position: absolute; + top: 20%; + left: 15%; + padding: 5%; + z-index: 10000; + border-top: silver 1px solid; + border-bottom: silver 1px solid ; + vertical-align: bottom; + display: table-cell; + display: inline-block; + height: auto; + text-align: center; +} + +#infobox::before { + content: ""; + background: url(menu_burger_close.svg); + width: 50px; + height: 50px; + position: absolute; + top: -20px; + right: -20px; + border-radius: 25px; +} + +#soc_med{ + position:fixed; + width: 110px; + bottom:10px; + right:20px; + } + +#soc_med ul li { + display:inline-block; + width: 40px; + height:40px; + } + +#soc_med ul li a img { + width: 100%; + } + +.content_wrapper { + display: grid; + grid-template-columns: 1fr 1fr; + z-index : 1000; + /*! background:rgba(255,255,255,0.9); */ + } + +.content_wrapper.wide_content { + grid-template-columns: 2fr 1fr; + } +.page_data article{ + margin-bottom: 20px; +} + +.page_data article .a_content{ + border-bottom:1px solid #000; +} + +.img_container{ + background:url('../img/bg.jpg') center center no-repeat; + background-size:cover; + width:100%; + min-height:100vh; + +} + + + + + +/*###############################################################################*/ + +/* On screens that are 800px or less, set the background color to olive */ +@media only screen and (max-width: 1024px) { + html{ + font-size : 24pt; + } + + .content_wrapper { + width:80%; + padding:10%; + padding-top : 220px; +} + +.page_data{ + width:80%; + margin:auto; + } + + +nav { + height: 100px; + position: relative ; + z-index: 1222; + text-align: center; + } + +nav #top_nav{ + display: none; + } + +nav #burger_btn { + display : block ; + width: 100%; + height:100px; + background: url('menu_burger_open.svg') left center no-repeat ; + background-size: auto 100%; + margin-left : 50px; + margin-top: 30px; + z-index: 1201; + position:fixed; + } + +nav #burger_btn.close { + background: url('menu_burger_close.svg') left center no-repeat !important; + background-size: auto 100% !important; + } + +nav #burger_nav { + display : block; + padding : 20px ; + background : rgba(255, 255, 255,0.8); + height: 0vh; + width : 100vw; + margin-top:-40px; + z-index: 1200; + overflow:hidden; + position:fixed; + top:0; + transition :0.2s linear; + } + + nav #burger_nav.open { + height: auto; + width : 100vw; + min-height : 100vh; + transition :0.2s linear; + } + + nav #burger_nav ul li:first-child { + padding-top : 300px; + } + + nav #burger_nav ul li a{ + display : block ; + padding : 20px; + text-decoration:none; + color :#000; + font-size: 3em; + } + + #intro{ + font-size : 150pt; + min-height: 100vh; + min-width: 100hw; + text-align:center; +} + + #intro #intro_title { + display : inline-block; + padding-top: 20%; +} + + img.logo { + height: 100px; +} + #infobox{ + width: 60%; + background: rgba(255, 255, 255,0.9); + font-size:1em; + position: absolute; + top: 20%; + left: 15%; + padding: 5%; + z-index: 10000; + border: solid 1px rgba(200, 200, 200,0.5); + border-radius: 5%; + vertical-align: bottom; + display: table-cell; + display: inline-block; + height: auto; + text-align: center; +} + +#infobox::before { + content: ""; + background: url(menu_burger_close.svg); + width: 50px; + height: 50px; + position: absolute; + top: -20px; + right: -20px; + border-radius: 25px; +} + + #soc_med{ + position:fixed; + width: 200px; + height:50px; + bottom:70px; + right:15px; + } + +#soc_med ul li { + display:inline-block; + width: 70px; + height:70px; +} + + } diff --git a/static/css/style.css b/static/css/style.css index d2ff50d..3ef413c 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -2,8 +2,6 @@ v2.0 | 20110126 License: none (public domain) */ -@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;600&display=swap'); - html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, @@ -18,364 +16,235 @@ article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font: inherit; - vertical-align: baseline; + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { - display: block; + display: block; } - body { - line-height: 1,2; - font-family: 'Fira Code', monospace; + line-height: 1; } - ol, ul { - list-style: none; + list-style: none; } - blockquote, q { - quotes: none; + quotes: none; } - blockquote:before, blockquote:after, q:before, q:after { - content: ''; - content: none; + content: ''; + content: none; } - table { - border-collapse: collapse; - border-spacing: 0; + border-collapse: collapse; + border-spacing: 0; } -@font-face { - font-weight: normal; - font-style: normal; -} +/* END OF RESET */ -@keyframes menu_color { - 0% {color: #ffe609;} - 30% {color: #e2b1aa;} - 60% {color: #f1885f;} - 90% {color: #70ba89;} - 100% {color: #ffe609;} -} +/*edit variable here*/ -html{ - font-size:16pt; - scroll-behavior: smooth; +:root{ + --menu_h: 70px; + --base_padding:20px; + --hover_color-menu: #fae5d4; + --menu-font-size : 3em; } -.page_data a { - text-decoration: none; - color: #0000; - animation-name: menu_color; - animation-iteration-count: infinite; - -moz-animation-iteration-count: infinite; - -webkit-animation-iteration-count: infinite; - -o-animation-iteration-count: infinite; - animation-duration: 6s; - font-size:1em; -} - -::selection { - color:rgba(255,230,9,1); +body{ + + font-family: 'courier_primeregular'; + min-height:100vh; + font-size:10px; + height:auto; + background:url('img/gradient-back.svg') no-repeat center center; + background-size:cover; } -nav{ +#homeSpacer{ + height:calc(100vh - var(--menu_h)); + transition:all 0.6s ease; z-index:1000; - height:70px; - background:rgba(255,255,255,0.9); - position: fixed; - top: 0; - width: 100%; } -nav #top_nav ul li{ - display:inline-block; - margin: 15px 0 0 15px; - padding-bottom: 5px; +nav{ + position: fixed; + width: 100%; + cursor: pointer; } -nav #top_nav ul li:hover{ +#menu #topBtn{ + height:var(--menu_h); + width:100%; + background:#fff; + position: relative; + border-bottom: solid 3px var(--hover_color-menu) + } +#menu #topBtn { + display: grid; + grid-template-columns: 9fr 1fr; + grid-template-rows: 1fr; + min-height: 100%; + /*! align-self: center; */ } -nav #top_nav ul li a { - color: black; - font-size : 1em; - text-decoration: none; +#menu #topBtn div{ + align-self: center; + padding:var(--base_padding); + font-size:var(--menu-font-size); } - - -nav #burger_nav , #burger_btn{ - display : none; +#menu #topBtn div:last-of-type{ + text-align: center; } -#intro{ - font-size : 50pt; - min-height: 100vh; - min-width: 100hw; - text-align:center; - background:url('../img/photoAccueil.jpg') center center no-repeat; - background-size:cover; +.open{ + height:calc(var(--menu_h)) !important; + border: solid 3px var(--hover_color-menu)!important; + } -#intro #intro_title { - display : block; - width:300px; - height:300px; - background:#fff; - border-radius:50%; - position:absolute; - top:calc(50% - 150px); - left:calc(50% - 150px); - line-height:84px; -} - -.page_data { - /*! top:25px; */ - padding : 150px 50px 50px 50px ; - width:85%; - background: #fff; - min-height: calc(100vh - 200px); -} - -.page_data h1{ - font-size: 2em; - line-height: 1; - //text-align: center; -} - -.page_data p{ - margin: 20px 0; -} - -.page_data p img{ - max-width:100%; -} - -#infobox{ - width: 150%; - background: rgba(255, 255, 255,0.9); - font-size:2.5em; - position: absolute; - top: 20%; - left: 15%; - padding: 5%; - z-index: 10000; - border-top: silver 1px solid; - border-bottom: silver 1px solid ; - vertical-align: bottom; - display: table-cell; - display: inline-block; - height: auto; - text-align: center; -} - -#infobox::before { - content: ""; - background: url(menu_burger_close.svg); - width: 50px; - height: 50px; - position: absolute; - top: -20px; - right: -20px; - border-radius: 25px; -} - -#soc_med{ - position:fixed; - width: 110px; - bottom:10px; - right:20px; - } -#soc_med ul li { - display:inline-block; - width: 40px; - height:40px; - } +.active{ + height:calc(var(--menu_h)) !important; + border: solid 3px var(--hover_color-menu)!important; -#soc_med ul li a img { - width: 100%; - } + +} -.content_wrapper { - display: grid; - grid-template-columns: 1fr 1fr; - z-index : 1000; - /*! background:rgba(255,255,255,0.9); */ - } +#menu ul{ + width:100%; + background: #fff; + line-height: var(--menu_h); + transition: all ease 0.3s; + height: 0; + //overflow: hidden; +} -.content_wrapper.wide_content { - grid-template-columns: 2fr 1fr; - } -.page_data article{ - margin-bottom: 20px; -} -.page_data article .a_content{ - border-bottom:1px solid #000; +#menu ul li{ + box-sizing: border-box; + padding:calc(var(--base_padding)-6); + height:0; + border: solid 0px var(--hover_color-menu); + background: #fff; + font-size:var(--menu-font-size); + overflow: hidden; + transition: all ease 0.3s; + } -.img_container{ - background:url('../img/bg.jpg') center center no-repeat; - background-size:cover; - width:100%; - min-height:100vh; - +#menu ul li span{ + width: 100px; + display:block; + padding: 0 20px 0 15px; } +#menu ul li span img{ + width: 20px; + display:inline-block; + //padding: 0 20px 0 15px; +} +#menu ul li h3, #menu ul li span{ + display: inline; +} +#menu ul li:hover{ + background:var(--hover_color-menu); +} -/*###############################################################################*/ +#content{ +// min-height: 100vh; + /*! z-index: -1; */ +} +.picto_sun{ + width: 250px; + height: 250px; + position: fixed; + z-index: -1; +} -/* On screens that are 800px or less, set the background color to olive */ -@media only screen and (max-width: 1024px) { - html{ - font-size : 24pt; - } +.picto_shape{ + width: 2250px; + height: 950px; + position: fixed; + z-index: -1; + opacity:0.8; +} +.yellow_filter{ + filter: invert(95%) sepia(46%) saturate(2939%) hue-rotate(354deg) brightness(107%) contrast(107%); +} - .content_wrapper { - width:80%; - padding:10%; - padding-top : 220px; +.pink_filter{ + filter: invert(92%) sepia(27%) saturate(4960%) hue-rotate(292deg) brightness(137%) contrast(104%); } -.page_data{ - width:80%; - margin:auto; - } +@keyframes pulse { + 0% { + fill: #FFF33B; + } + 50% { + fill: #FF4136; + } + 100% { + fill: #FFF33B; + } +} - -nav { - height: 100px; - position: relative ; - z-index: 1222; - text-align: center; - } +.picto svg{ + animation: pulse 25s infinite; + /*! fill:yellow; */ +} -nav #top_nav{ - display: none; - } +#content{ + position : relative; -nav #burger_btn { - display : block ; - width: 100%; - height:100px; - background: url('menu_burger_open.svg') left center no-repeat ; - background-size: auto 100%; - margin-left : 50px; - margin-top: 30px; - z-index: 1201; - position:fixed; - } +} -nav #burger_btn.close { - background: url('menu_burger_close.svg') left center no-repeat !important; - background-size: auto 100% !important; - } +#logo{ + position: absolute; + width:150px; + height:auto; + top:calc(var(--menu_h)*2); + left:var(--menu_h); + z-index: 500; + + +} +.wrapper{ + padding-top:150px; + width:60%; + margin:auto; + z-index:100; + position: relative; +} +.wrapper h1{ + font-size: 6em; + padding-bottom: 0.5em; + font-family: 'script12_btroman'; +} +.wrapper p{ + font-size: 2em; +} -nav #burger_nav { - display : block; - padding : 20px ; - background : rgba(255, 255, 255,0.8); - height: 0vh; - width : 100vw; - margin-top:-40px; - z-index: 1200; - overflow:hidden; - position:fixed; - top:0; - transition :0.2s linear; - } - - nav #burger_nav.open { - height: auto; - width : 100vw; - min-height : 100vh; - transition :0.2s linear; - } - - nav #burger_nav ul li:first-child { - padding-top : 300px; - } - - nav #burger_nav ul li a{ - display : block ; - padding : 20px; - text-decoration:none; - color :#000; - font-size: 3em; - } - - #intro{ - font-size : 150pt; - min-height: 100vh; - min-width: 100hw; - text-align:center; -} - - #intro #intro_title { - display : inline-block; - padding-top: 20%; -} - - img.logo { - height: 100px; -} - #infobox{ - width: 60%; - background: rgba(255, 255, 255,0.9); - font-size:1em; - position: absolute; - top: 20%; - left: 15%; - padding: 5%; - z-index: 10000; - border: solid 1px rgba(200, 200, 200,0.5); - border-radius: 5%; - vertical-align: bottom; - display: table-cell; - display: inline-block; - height: auto; - text-align: center; -} - -#infobox::before { - content: ""; - background: url(menu_burger_close.svg); - width: 50px; - height: 50px; - position: absolute; - top: -20px; - right: -20px; - border-radius: 25px; +.wrapper .gal{ + margin: 3em 0 3em 0; + display: grid; + grid-template-columns: 1fr 1fr 1fr; + column-gap:3em; } - - #soc_med{ - position:fixed; - width: 200px; - height:50px; - bottom:70px; - right:15px; - } -#soc_med ul li { - display:inline-block; - width: 70px; - height:70px; +.wrapper .gal .gal-img img{ + max-width: 100%; + height:auto; } - - } diff --git a/static/img/barre.svg b/static/img/barre.svg new file mode 100644 index 0000000..e963efc --- /dev/null +++ b/static/img/barre.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/img/logo.svg b/static/img/logo.svg new file mode 100644 index 0000000..1b0a443 --- /dev/null +++ b/static/img/logo.svg @@ -0,0 +1,439 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/static/img/photoAccueil.jpg b/static/img/photoAccueil.jpg deleted file mode 100644 index e8fd382..0000000 Binary files a/static/img/photoAccueil.jpg and /dev/null differ diff --git a/static/img/shape/.DS_Store b/static/img/shape/.DS_Store new file mode 100644 index 0000000..5008ddf Binary files /dev/null and b/static/img/shape/.DS_Store differ diff --git a/static/img/shape/picto_pe_02.svg b/static/img/shape/picto_pe_02.svg new file mode 100644 index 0000000..0d99738 --- /dev/null +++ b/static/img/shape/picto_pe_02.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/static/img/shape/picto_pe_03.svg b/static/img/shape/picto_pe_03.svg new file mode 100644 index 0000000..809b767 --- /dev/null +++ b/static/img/shape/picto_pe_03.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/static/img/shape/picto_pe_04.svg b/static/img/shape/picto_pe_04.svg new file mode 100644 index 0000000..3fb433f --- /dev/null +++ b/static/img/shape/picto_pe_04.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/static/img/shape/picto_pe_05.svg b/static/img/shape/picto_pe_05.svg new file mode 100644 index 0000000..67e8849 --- /dev/null +++ b/static/img/shape/picto_pe_05.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/static/img/shape/picto_pe_06.svg b/static/img/shape/picto_pe_06.svg new file mode 100644 index 0000000..4c5d875 --- /dev/null +++ b/static/img/shape/picto_pe_06.svg @@ -0,0 +1,41 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/static/img/shape/picto_pe_07.svg b/static/img/shape/picto_pe_07.svg new file mode 100644 index 0000000..b3c6cf7 --- /dev/null +++ b/static/img/shape/picto_pe_07.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/static/img/shape/picto_pe_08.svg b/static/img/shape/picto_pe_08.svg new file mode 100644 index 0000000..f9de788 --- /dev/null +++ b/static/img/shape/picto_pe_08.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/static/img/shape/picto_pe_09.svg b/static/img/shape/picto_pe_09.svg new file mode 100644 index 0000000..127484f --- /dev/null +++ b/static/img/shape/picto_pe_09.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/static/img/shape/picto_pe_10.svg b/static/img/shape/picto_pe_10.svg new file mode 100644 index 0000000..5d84ec6 --- /dev/null +++ b/static/img/shape/picto_pe_10.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/static/img/shape/picto_pe_11.svg b/static/img/shape/picto_pe_11.svg new file mode 100644 index 0000000..31f2dac --- /dev/null +++ b/static/img/shape/picto_pe_11.svg @@ -0,0 +1,47 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/static/img/shape/picto_pe_12.svg b/static/img/shape/picto_pe_12.svg new file mode 100644 index 0000000..d0ce751 --- /dev/null +++ b/static/img/shape/picto_pe_12.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/static/img/shape/picto_pe_13.svg b/static/img/shape/picto_pe_13.svg new file mode 100644 index 0000000..498bfff --- /dev/null +++ b/static/img/shape/picto_pe_13.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + \ No newline at end of file diff --git a/static/img/shape/picto_pe_14.svg b/static/img/shape/picto_pe_14.svg new file mode 100644 index 0000000..5e8a4d2 --- /dev/null +++ b/static/img/shape/picto_pe_14.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/static/img/shape/picto_pe_15.svg b/static/img/shape/picto_pe_15.svg new file mode 100644 index 0000000..0a33b05 --- /dev/null +++ b/static/img/shape/picto_pe_15.svg @@ -0,0 +1,40 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/static/img/shape/picto_pe_16.svg b/static/img/shape/picto_pe_16.svg new file mode 100644 index 0000000..61c8078 --- /dev/null +++ b/static/img/shape/picto_pe_16.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/static/img/shape/picto_pe_17.svg b/static/img/shape/picto_pe_17.svg new file mode 100644 index 0000000..47caa22 --- /dev/null +++ b/static/img/shape/picto_pe_17.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/static/img/shape/picto_pe_18.svg b/static/img/shape/picto_pe_18.svg new file mode 100644 index 0000000..5526288 --- /dev/null +++ b/static/img/shape/picto_pe_18.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/static/img/sun.svg b/static/img/sun.svg new file mode 100644 index 0000000..a9c044c --- /dev/null +++ b/static/img/sun.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/js/script.bak b/static/js/script.bak new file mode 100644 index 0000000..1e28551 --- /dev/null +++ b/static/js/script.bak @@ -0,0 +1,8 @@ +$(document).ready(function(){ + + $('#infobox').click(function(){$(this).hide();}); + + $('#burger_btn').click(function(){$(this).next('#burger_nav').toggleClass('open');}); + $('#burger_btn').click(function(){$(this).toggleClass('close');}); + +}) diff --git a/static/js/script.js b/static/js/script.js index 1e28551..f72cb3f 100644 --- a/static/js/script.js +++ b/static/js/script.js @@ -1,8 +1,46 @@ + $(document).ready(function(){ + + if ($('#homeSpacer')){ + $('#content').css({height:'0',overflow:'hidden'}); + $('#homeSpacer').click(function(){ + $(this).css('height','0'); + $('#content').css({height:'auto',overflow:'auto'}); + $('nav').css('z-index','1000'); + $("body").css('overflow','auto'); + + }); + } + function getRndInteger(min, max) { + return Math.floor(Math.random() * (max - min + 1) ) + min; + } - $('#infobox').click(function(){$(this).hide();}); + var sun_x = getRndInteger(0, 850); + var sun_y = getRndInteger(0, 550); + var shape_x = getRndInteger(-1500, 200); + var shape_y = getRndInteger(0, 500); + + + $('.picto_sun').css({top:sun_y , left:sun_x,}); + $('.picto_shape').css({top:shape_y , left:shape_x,}); + + $('#topBtn').click(function(){ + $('.menuItem').toggleClass('open') + }); + + $('.menuItem').click(function(){ + $('.menuItem').removeClass('active'); + $('.menuItem').toggleClass('open'); + $(this).addClass('active'); + }); - $('#burger_btn').click(function(){$(this).next('#burger_nav').toggleClass('open');}); - $('#burger_btn').click(function(){$(this).toggleClass('close');}); + $(document).scroll(function() { + var dtop = $(document).scrollTop(); + var maxH = $(document).height(); + var windowh = $(window).height(); + var ratio = maxH / windowh; + var topval = dtop+(dtop/ratio)+140; + $('#logo').css('top',topval ); + }) }) diff --git a/templates/base.html b/templates/base.html index 4710fff..f5952e2 100644 --- a/templates/base.html +++ b/templates/base.html @@ -2,21 +2,33 @@ {% block head %} + {% endblock head %} + {% block title %}{% endblock title %} - {% endblock head %} + + + {% block intro %} {% endblock intro %} - + {% block nav %} {% endblock nav %} +
+ +
+ +
+ +
+ {% block content %} {% endblock content %} @@ -25,16 +37,6 @@ {% block script %} {% endblock script %} -
-
    -
  • - -
    • -
  • - -
    • -
-
diff --git a/templates/home.html b/templates/home.html index 3006de6..b2713f3 100644 --- a/templates/home.html +++ b/templates/home.html @@ -1,17 +1,15 @@ {% extends "base.html" %} {% block head %} - {% endblock head%} {% block intro %} + {% if request.path == "/" %} -
- - la
petite
ecole - -
+
+
{% endif %} + {% endblock %} {% block nav %} diff --git a/templates/menu.html b/templates/menu.html index c906d9f..d2445c9 100644 --- a/templates/menu.html +++ b/templates/menu.html @@ -1,24 +1,17 @@ + + +