diff --git a/app/routes/index.py b/app/routes/index.py index 517485d..a435e59 100644 --- a/app/routes/index.py +++ b/app/routes/index.py @@ -5,7 +5,7 @@ from app.utils.render import render @app.route('/') def index(): - return render('index.html') + return render('index.html', styles=["+css/homepage.css"]) @app.errorhandler(404) diff --git a/app/static/css/global.css b/app/static/css/global.css index 0a84f86..1485828 100644 --- a/app/static/css/global.css +++ b/app/static/css/global.css @@ -163,6 +163,7 @@ input[type="submit"]:focus { background: var(--links); color: var(--warn-text); border-radius: 1px; + overflow: hidden; } .skip-to-content-link:focus { transform: translateY(0%); diff --git a/app/static/css/homepage.css b/app/static/css/homepage.css index c0d487e..9a9c93c 100644 --- a/app/static/css/homepage.css +++ b/app/static/css/homepage.css @@ -1,135 +1,100 @@ -.home-title { - margin: 20px 0; - padding: 10px 5%; - background: #bf1c11; - box-shadow: 0 2px 2px rgba(0,0,0,.3); - border-top: 10px solid #ab170c; -} -.home-title h1 { - margin-top: 0; - color: #ffffff; - border-color: #ffffff; -} -.home-title p { - margin-bottom: 0; - text-align: justify; - color: #ffffff; -} -.home-title a { - color: inherit; - text-decoration: underline; -} -.home-pinned-content > div { - display: flex; - justify-content: space-between; -} -.home-pinned-content h2 { - display: block; - margin: 5px 0; - font-size: 18px; - font-family: NotoSans; - font-weight: 200; - line-height: 20px; -} -.home-pinned-content a { - display: block; -} -.home-pinned-content a:hover img, -.home-pinned-content a:focus img { - filter: blur(3px); -} -.home-pinned-content a:hover div, -.home-pinned-content a:focus div { - padding: 200px 5% 10px 5%; - background-image: linear-gradient(180deg,transparent 0,rgba(0,0,0,.7)40px,rgba(0,0,0,.8)); -} -.home-pinned-content img { - width: 100%; - filter: blur(0px); -} -.home-pinned-content article { - flex-grow: 1; - margin: 0 1px; - padding: 0; - position: relative; - max-width: 250px; - overflow: hidden; -} -.home-pinned-content article div { - position: absolute; - bottom: 0; - z-index: 3; +.home-pinned-content { width: 90%; - margin: 0; - padding: 30px 5% 10px 5%; - color: #ffffff; - text-shadow: 1px 1px 0 rgba(0,0,0,.6); - background-image: linear-gradient(180deg,transparent 0,rgba(0,0,0,.7)40px,rgba(0,0,0,.8)); + display: grid; + grid-template-areas: 'banner news''welcome news''shout news''projects projects'; + grid-template-rows: auto auto minmax(200px,1fr)auto; + grid-template-columns: 4fr 3fr; } -.home-articles { +.home-pinned-content > * { + margin: 10px 20px; +} +.home-pinned-content > * h1 { + font-size: 18px; +} +@media screen and (max-width:1449px) { + .home-pinned-content { + width: 97%; + } +} +@media screen and (max-width:1199px) { + .home-pinned-content { + width: 100%; + grid-template-areas: 'welcome''banner''news''shout''projects'; + grid-template-rows: auto; + grid-template-columns: 1fr; + } +} +.home-banner { + grid-area: banner; + text-align: center; +} +.home-banner img { + max-width: 100%; +} +.home-welcome { + grid-area: welcome; display: flex; - justify-content: space-between; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; } -.home-articles > div { +.home-welcome h1 { + width: 100%; + margin-bottom: 0; +} +.home-welcome ul { + padding-left: 20px; +} +.home-welcome div { flex-grow: 1; - max-width: 48%; } -.home-articles h1 { - display: flex; - justify-content: space-between; - align-items: center; -} -.home-articles h1 a { - padding: 0; - font-family: NotoSans; - font-size: 16px; - font-weight: 400; - color: #234d5f; -} -.home-articles h1 a:hover, -.home-articles h1 a:focus { - padding-right: 10px; -} -.home-articles p { +.home-welcome h2 { margin: 5px 0; - text-align: justify; - color: #808080; } -.home-articles article { - padding: 10px; - margin: 10px 0; +.home-news { + grid-area: news; +} +.home-news ul { + padding: 0; +} +.home-news li { display: flex; + flex-direction: row; align-items: center; - background: #ffffff; - border: 1px solid rgba(0,0,0,.2); + flex-wrap: nowrap; + padding: 10px 0; + border-bottom: var(--hr-border); } -.home-articles article > img { - float: left; - margin-right: 10px; - flex-shrink: 0; +.home-news li > a { + align-self: baseline; } -.home-articles article > img.screeshot { - width: 128px; - height: 64px; +.home-news li img { + max-width: 100px; + max-height: 100px; + margin-right: 8px; } -.home-articles article > div { - flex-shrink: 1; -} -.home-articles article h3 { +.home-news li h3 { margin: 0; - color: #424242; - font-weight: normal; + font-size: 16px; + font-weight: bold; + font-family: Cantarell; } -.home-articles article a:hover, -.home-articles article a:focus { - text-decoration: underline; +.home-news li .date { + margin: 4px 0 10px 0; } -.home-articles .metadata { - margin: 0; - color: #22292c; +.home-news li div { + font-size: 13px; + line-height: 150%; } -.home-articles .metadata a { - color: #22292c; - font-weight: 400; - font-style: italic; +@media screen and (max-width:499px) { + .home-news li { + flex-direction: column; + align-items: start; + } +} +.home-shoutbox { + grid-area: shout; +} +.home-projects { + grid-area: projects; } \ No newline at end of file diff --git a/app/static/less/global.less b/app/static/less/global.less index b175aa0..74dac5d 100644 --- a/app/static/less/global.less +++ b/app/static/less/global.less @@ -161,6 +161,7 @@ button, .button, input[type="button"], input[type="submit"] { background: var(--links); color: var(--warn-text); border-radius: 1px; + overflow: hidden; &:focus { transform: translateY(0%); diff --git a/app/static/less/homepage.less b/app/static/less/homepage.less index 37eda35..5e7889c 100644 --- a/app/static/less/homepage.less +++ b/app/static/less/homepage.less @@ -1,140 +1,131 @@ -/* - home-title -*/ +@import "vars"; -.home-title { - margin: 20px 0; padding: 10px 5%; - background: #bf1c11; box-shadow: 0 2px 2px rgba(0, 0, 0, .3); - border-top: 10px solid #ab170c; +.home-pinned-content { + width: 90%; + display: grid; + grid-template-areas: + 'banner news' + 'welcome news' + 'shout news' + 'projects projects'; + grid-template-rows: auto auto minmax(200px, 1fr) auto; + grid-template-columns: 4fr 3fr; - h1 { - margin-top: 0; - color: #ffffff; border-color: #ffffff; + @media screen and (max-width: @normal) { + width: 97%; } - p { - margin-bottom: 0; text-align: justify; - color: #ffffff; + @media screen and (max-width: @small) { + width: 100%; + grid-template-areas: + 'welcome' + 'banner' + 'news' + 'shout' + 'projects'; + grid-template-rows: auto; + grid-template-columns: 1fr; } - a { - color: inherit; text-decoration: underline; + & > * { + //border: 1px solid red; + margin: 10px 20px; + + h1 { + font-size: 18px; + } } } +.home-banner { + grid-area: banner; + text-align: center; + + img { + max-width: 100%; + } +} -/* - pinned-content -*/ +.home-welcome { + grid-area: welcome; -.home-pinned-content { - & > div { - display: flex; justify-content: space-between; + display: flex; + flex-direction: row; + flex-wrap: wrap; + + justify-content: center; + + h1 { + width: 100%; + margin-bottom: 0; + } + + ul { + padding-left: 20px; + } + + div { + flex-grow: 1; } h2 { - display: block; margin: 5px 0; - font-size: 18px; font-family: NotoSans; font-weight: 200; - line-height: 20px; - } - - a { - display: block; - - &:hover, &:focus { - img { - filter: blur(3px); - } - div { - padding: 200px 5% 10px 5%; - background-image: linear-gradient(180deg,transparent 0,rgba(0,0,0,.7) 40px,rgba(0,0,0,.8)); - } - } - } - - img { - width: 100%; filter: blur(0px); - } - - article { - flex-grow: 1; margin: 0 1px; padding: 0; - position: relative; - max-width: 250px; overflow: hidden; - - div { - position: absolute; bottom: 0; z-index: 3; - width: 90%; margin: 0; - padding: 30px 5% 10px 5%; - color: #ffffff; text-shadow: 1px 1px 0 rgba(0,0,0,.6); - background-image: linear-gradient(180deg,transparent 0,rgba(0,0,0,.7) 40px,rgba(0,0,0,.8)); - } + margin: 5px 0; } } +.home-news { + grid-area: news; -/* - home-articles -*/ - -.home-articles { - display: flex; justify-content: space-between; - - & > div { - flex-grow: 1; max-width: 48%; + ul { + padding: 0; } - h1 { - display: flex; justify-content: space-between; align-items: center; + li { + display: flex; + flex-direction: row; + align-items: center; + flex-wrap: nowrap; + padding: 10px 0; - a { - padding: 0; - font-family: NotoSans; font-size: 16px; - font-weight: 400; color: /*#015078*/ /*#bf1c11*/ #234d5f; + border-bottom: var(--hr-border); - &:hover, &:focus { - padding-right: 10px; - } - } - } - - p { - margin: 5px 0; - text-align: justify; - color: #808080; - } - - article { - padding: 10px; margin: 10px 0; display: flex; align-items: center; - background: #ffffff; border: 1px solid rgba(0, 0, 0, .2); - - & > img { - float: left; margin-right: 10px; flex-shrink: 0; - - &.screeshot { - width: 128px; height: 64px; - } + @media screen and (max-width: @micro) { + flex-direction: column; + align-items: start; } - & > div { - flex-shrink: 1; + & > a { + align-self: baseline; + } + + img { + max-width: 100px; + max-height: 100px; + margin-right: 8px; } h3 { margin: 0; - color: #424242; font-weight: normal; + font-size: 16px; + font-weight: bold; + font-family: Cantarell; } - a:hover, a:focus { - text-decoration: underline; + .date { + margin: 4px 0 10px 0; } - } - - .metadata { - margin: 0; - color: #22292c; - - a { - color: #22292c; font-weight: 400; font-style: italic; + + div { + font-size: 13px; + line-height: 150%; } } } + +.home-shoutbox { + grid-area: shout; +} + +.home-projects { + grid-area: projects; +} diff --git a/app/templates/base/base.html b/app/templates/base/base.html index 6f72252..1c8f1ad 100644 --- a/app/templates/base/base.html +++ b/app/templates/base/base.html @@ -14,8 +14,8 @@ {% include "base/flash.html" %} -
{% block content %} +
{% endblock %} {% include "base/footer.html" %} diff --git a/app/templates/index.html b/app/templates/index.html index 0403f75..f86738a 100644 --- a/app/templates/index.html +++ b/app/templates/index.html @@ -8,11 +8,114 @@ {% block content %}
-
+
+ +
+
+

Bienvenue sur Planète Casio !

+

Planète Casio est la communauté française de référence pour toutes les calculatrices Casio. + Apprenez à utiliser votre machine, téléchargez et partagez des programmes, ou initiez-vous à l'informatique sur le forum. + Ou bien venez développer des jeux avec nous pour passer le temps !

+
+

Les calculatrices

+
    +
  • Tout sur sa Casio
    • +
  • Graph 25+E II
    • +
  • Graph 35+E II
    • +
  • Graph 90+E
    • +
  • Classpad 400+E
    • +
  • Comparer les calculatrices CASIO
    • +
+
+
+

La communauté

+
    +
  • S’inscrire ou se connecter
    • +
  • Index du forum
    • +
  • Nos jeux outils et cours
    • +
+
+
+

Programmer

+
    +
  • Apprendre à programmer
    • +
  • Articles et astuces
    • +
+
+
+
+

Actualitées

+
+
+
+ Ici y’aura la shoutbox (plus tard) +
+
+
+

Projets du moment

+
    +
  • La v5, bien sûr
    • +
  • Chaos drop
    • +
  • Un easter egg