From 586c045604b29d6bf256e1cff5baf5e26b0f9322 Mon Sep 17 00:00:00 2001 From: Darks Date: Tue, 20 Jun 2023 22:34:06 +0200 Subject: [PATCH] landing page: WIP --- app/routes/index.py | 2 +- app/static/css/homepage.css | 145 ++++------------------------- app/static/less/homepage.less | 169 +++++++--------------------------- app/templates/index.html | 51 +++++++++- 4 files changed, 104 insertions(+), 263 deletions(-) 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/homepage.css b/app/static/css/homepage.css index c0d487e..f8643bb 100644 --- a/app/static/css/homepage.css +++ b/app/static/css/homepage.css @@ -1,135 +1,26 @@ -.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 { + display: grid; + grid-template-areas: 'banner news''welcome news''welcome news''shout news''shout news''projects projects'; + grid-template-rows: minmax(100px,auto); + gap: 10px; } -.home-title h1 { - margin-top: 0; - color: #ffffff; - border-color: #ffffff; +.home-pinned-content > * { + border: 1px solid red; } -.home-title p { - margin-bottom: 0; - text-align: justify; - color: #ffffff; +.home-banner { + grid-area: 'banner'; } -.home-title a { - color: inherit; - text-decoration: underline; -} -.home-pinned-content > div { +.home-welcome { + grid-area: 'welcome'; display: flex; - justify-content: space-between; + flex-direction: row; } -.home-pinned-content h2 { - display: block; - margin: 5px 0; - font-size: 18px; - font-family: NotoSans; - font-weight: 200; - line-height: 20px; +.home-news { + grid-area: 'news'; } -.home-pinned-content a { - display: block; +.home-shoutbox { + grid-area: 'shout'; } -.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; - 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)); -} -.home-articles { - display: flex; - justify-content: space-between; -} -.home-articles > 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 { - margin: 5px 0; - text-align: justify; - color: #808080; -} -.home-articles article { - padding: 10px; - margin: 10px 0; - display: flex; - align-items: center; - background: #ffffff; - border: 1px solid rgba(0,0,0,.2); -} -.home-articles article > img { - float: left; - margin-right: 10px; - flex-shrink: 0; -} -.home-articles article > img.screeshot { - width: 128px; - height: 64px; -} -.home-articles article > div { - flex-shrink: 1; -} -.home-articles article h3 { - margin: 0; - color: #424242; - font-weight: normal; -} -.home-articles article a:hover, -.home-articles article a:focus { - text-decoration: underline; -} -.home-articles .metadata { - margin: 0; - color: #22292c; -} -.home-articles .metadata a { - color: #22292c; - font-weight: 400; - font-style: italic; +.home-projects { + grid-area: 'projects'; } \ No newline at end of file diff --git a/app/static/less/homepage.less b/app/static/less/homepage.less index 37eda35..ddc1bcc 100644 --- a/app/static/less/homepage.less +++ b/app/static/less/homepage.less @@ -1,140 +1,41 @@ -/* - home-title -*/ - -.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; - - h1 { - margin-top: 0; - color: #ffffff; border-color: #ffffff; - } - - p { - margin-bottom: 0; text-align: justify; - color: #ffffff; - } - - a { - color: inherit; text-decoration: underline; - } -} - - -/* - pinned-content -*/ - .home-pinned-content { - & > div { - display: flex; justify-content: space-between; - } + display: grid; + grid-template-areas: + 'banner news' + 'welcome news' + 'welcome news' + 'shout news' + 'shout news' + 'projects projects'; + + grid-template-rows: minmax(100px, auto); + + gap: 10px; - 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)); - } + & > * { + border: 1px solid red; } } - -/* - home-articles -*/ - -.home-articles { - display: flex; justify-content: space-between; - - & > div { - flex-grow: 1; max-width: 48%; - } - - h1 { - display: flex; justify-content: space-between; align-items: center; - - a { - padding: 0; - font-family: NotoSans; font-size: 16px; - font-weight: 400; color: /*#015078*/ /*#bf1c11*/ #234d5f; - - &: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; - } - } - - & > div { - flex-shrink: 1; - } - - h3 { - margin: 0; - color: #424242; font-weight: normal; - } - - a:hover, a:focus { - text-decoration: underline; - } - } - - .metadata { - margin: 0; - color: #22292c; - - a { - color: #22292c; font-weight: 400; font-style: italic; - } - } +.home-banner { + grid-area: 'banner'; } + +.home-welcome { + grid-area: 'welcome'; + + display: flex; + flex-direction: row; +} + +.home-news { + grid-area: 'news'; +} + +.home-shoutbox { + grid-area: 'shout'; +} + +.home-projects { + grid-area: 'projects'; +} \ No newline at end of file diff --git a/app/templates/index.html b/app/templates/index.html index 0403f75..95048b9 100644 --- a/app/templates/index.html +++ b/app/templates/index.html @@ -8,12 +8,61 @@ {% block content %}
-
+
+

Bannière (optionelle)

+
+
+

Bienvenue sur Planète Casio !

+
+

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

  • Inscription : dans le menu "Compte" à gauche (les comptes seront ultimement reconnectés à la version originale du site)
  • Le forum est fonctionnel, les programmes arrivent sous peu.
  • Pour toute demande particulière, vous pouvez envoyer un email à contact (at) planet-casio (dot) com.
+
+

Shoutbox

+
    +
  • Inscription : dans le menu "Compte" à gauche (les comptes seront ultimement reconnectés à la version originale du site)
    • +
  • Le forum est fonctionnel, les programmes arrivent sous peu.
    • +
  • Pour toute demande particulière, vous pouvez envoyer un email à contact (at) planet-casio (dot) com.
    • +
+
+
+

Projets du moment

+
    +
  • La v5, bien sûr
    • +
  • Chaos drop
    • +
  • Un easter egg
    • +
+
{% endblock %}