wip: programme

src/thsf/static/css/colors.css

@@ -0,0 +1,49 @@
+@font-face {
+  font-family: pfdintextcomppromedium;
+  src: url(../fonts/PFDinTextCompPro-Medium.ttf);
+}
+
+@font-face {
+  font-family: pfdintextcompprothin;
+  src: url(../fonts/PFDinTextCompPro-Thin.ttf);
+}
+
+:root {
+  --main-bg-color: #e6007e;
+  --alt-bg-color: #E59730;
+  --alt2-bg-color: #9EBF43;
+  --alt3-bg-color: #3096E5;
+  --main-color: #ffffff;
+  --alt-main-color: #1A000D;
+}
+
+.white {
+  color: var(--main-color);
+}
+
+.black {
+  color: var(--alt-main-color);
+}
+
+.thin {
+  font-family: pfdintextcompprothin;
+}
+
+.bold {
+  font-family: pfdintextcomppromedium;
+}
+
+.bg1 {
+  background-color: var(--alt-bg-color);
+  border-color: var(--alt-bg-color);
+}
+
+.bg2 {
+  background-color: var(--alt2-bg-color);
+  border-color: var(--alt2-bg-color);
+}
+
+.bg3 {
+  background-color: var(--alt3-bg-color);
+  border-color: var(--alt3-bg-color);
+}

src/thsf/static/css/custom.css

@@ -0,0 +1,59 @@
+.logo {
+  width: inherit;
+}
+
+.header {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  gap: 0;
+  text-align: center;
+  font-size: 9.75em;
+  font-weight: bold;
+  padding: 0;
+}
+
+.header > span {
+  margin: 0;
+}
+
+.subheader {
+  margin: -1em 0 0 0;
+  font-size: 3.47em;
+}
+
+.place {
+  margin: 0;
+  font-size: 2.145em;
+}
+
+.important {
+  font-family: pfdintextcomppromedium;
+}
+
+.left {
+  float: left;
+  margin-right: 0.5em;
+}
+
+.right {
+  float: right;
+  margin-left: 0.5em;
+}
+
+.logo_partner {
+  max-width: 250px;
+  max-height: 250px;
+  margin: 1em;
+}
+
+.button {
+  font-size: 2.5em;
+  transition-property: color;
+  transition-duration: 1s;
+}
+
+.button:hover {
+  color: var(--main-color);
+  cursor: pointer;
+}

src/thsf/static/css/elements.css

@@ -0,0 +1,18 @@
+a {
+  font-family: pfdintextcomppromedium;
+  font-weight: 250;
+  color: var(--alt-main-color);
+  transition-property: color;
+  transition-duration: 1s;
+  text-decoration: wavy;
+}
+
+a:hover {
+  color: var(--main-color);
+  cursor: pointer;
+}
+
+.content > p,
+.content > h2 {
+  margin-top: 0.5em;
+}

src/thsf/static/css/planning.css

@@ -1,12 +1,3 @@
-#schedule {
-  margin: 2em 0 2em;
-  font-size: 2em;
-  font-family: pfdintextcompprothin;
-  color: var(--main-color);
-  width: 20em;
-  text-align:justify;
-  text-justify:inter-word;
-}
 
 .slot {
   display: flex;
@@ -15,7 +6,6 @@
   text-align: center;
   flex-direction: row;
   margin: 0.3em 0;
-  width: 20em;
 }
 
 .slot_info,

src/thsf/static/css/style.css

@@ -1,22 +1,3 @@
-@font-face {
-  font-family: pfdintextcomppromedium;
-  src: url(../fonts/PFDinTextCompPro-Medium.ttf);
-}
-
-@font-face {
-  font-family: pfdintextcompprothin;
-  src: url(../fonts/PFDinTextCompPro-Thin.ttf);
-}
-
-:root {
-  --main-bg-color: #e6007e;
-  --alt-bg-color: #E59730;
-  --alt2-bg-color: #9EBF43;
-  --alt3-bg-color: #3096E5;
-  --main-color: #ffffff;
-  --alt-main-color: #1A000D;
-}
-
 * {
   box-sizing: border-box;
 }
@@ -24,158 +5,10 @@
 body {
   background-color: var(--main-bg-color);
   font-family: pfdintextcomppromedium;
-  text-align: center;
-}
-
-.white {
-  color: var(--main-color);
-}
-
-.black {
-  color: var(--alt-main-color);
-}
-
-.thin {
-  font-family: pfdintextcompprothin;
-}
-
-.bold {
-  font-family: pfdintextcomppromedium;
-}
-
-.button {
-  font-size: 2.5em;
-  transition-property: color;
-  transition-duration: 1s;
-}
-
-.button:hover {
-  color: var(--main-color);
-  cursor: pointer;
-}
-
-.logo {
-  width: inherit;
-}
-
-.bg1 {
-  background-color: var(--alt-bg-color);
-  border-color: var(--alt-bg-color);
-}
-
-.bg2 {
-  background-color: var(--alt2-bg-color);
-  border-color: var(--alt2-bg-color);
-}
-
-.bg3 {
-  background-color: var(--alt3-bg-color);
-  border-color: var(--alt3-bg-color);
-}
-
-a {
-  font-family: pfdintextcomppromedium;
-  font-weight: 250;
-  color: var(--alt-main-color);
-  transition-property: color;
-  transition-duration: 1s;
-  text-decoration: wavy;
-}
-
-a:hover {
-  color: var(--main-color);
-  cursor: pointer;
-}
-
-#main_wrapper {
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   align-content: center;
-  margin-bottom: 5em;
-}
-
-#center_wrapper, #header_wrapper {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-
-#header {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  gap: 0;
   text-align: center;
-  font-size: 9.75em;
-  font-weight: bold;
-  padding: 0;
-}
-
-#header > span {
-  margin: 0;
-}
-
-#subheader {
-  margin: -1em 0 0 0;
-  font-size: 3.47em;
-}
-
-#place {
-  margin: 0;
-  font-size: 2.145em;
-}
-
-#logo_wrapper {
-  margin-top: 1em;
-  width: 40em;
-}
-
-#navbar_wrapper {
-  position: fixed;
-  bottom: 0;
-  padding: 1em 0;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  gap: 2em;
-  background-color: var(--main-bg-color);
-  width: 100vw;
-}
-
-#blah {
-  margin: 2em 0 2em;
-  font-size: 2em;
-  font-family: pfdintextcompprothin;
-  color: var(--main-color);
-  width: 20em;
-  text-align:justify;
-  text-justify:inter-word;
-}
-
-#blah > p, #blah.h2 {
-  margin-top: 0.5em;
-}
-
-.important {
-  font-family: pfdintextcomppromedium;
-}
-
-.left {
-  float: left;
-  margin-right: 0.5em;
-}
-
-.right {
-  float: right;
-  margin-left: 0.5em;
-}
-
-.logo_partner {
-  max-width: 250px;
-  max-height: 250px;
-  margin: 1em;
 }

src/thsf/static/css/wrappers.css

@@ -0,0 +1,45 @@
+.page_wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  align-content: center;
+  text-align: center;
+  padding-bottom: 5em;
+}
+
+.center_wrapper,
+.header_wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+
+.logo_wrapper {
+  margin-top: 1em;
+  width: 40em;
+}
+
+.navbar_wrapper {
+  position: fixed;
+  bottom: 0;
+  padding: 1em 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: 2em;
+  background-color: var(--main-bg-color);
+  width: 100vw;
+}
+
+.content {
+  font-size: 2em;
+  font-family: pfdintextcompprothin;
+  color: var(--main-color);
+  width: 20em;
+  text-align:justify;
+  text-justify: inter-word;
+}

src/thsf/templates/base.html

@@ -4,6 +4,14 @@
   <title>THSF 2023: S/Extraire</title>
   <meta name="viewport" content="initial-scale=1.0">
   <meta http-equiv="content-type" content="text/html; charset=utf-8">
+  <link rel="stylesheet"
+        href="{{ url_for('static', filename='css/colors.css') }}">
+  <link rel="stylesheet"
+        href="{{ url_for('static', filename='css/wrappers.css') }}">
+  <link rel="stylesheet"
+        href="{{ url_for('static', filename='css/custom.css') }}">
+  <link rel="stylesheet"
+        href="{{ url_for('static', filename='css/elements.css') }}">
   <link rel="stylesheet"
         href="{{ url_for('static', filename='css/style.css') }}">
   <link rel="stylesheet"
@@ -20,24 +28,24 @@
 </head>
 
 <body>
-  <div id="main_wrapper">
+  <div class="page_wrapper">
-    <div id="center_wrapper">
+    <div class="center_wrapper">
-      <div id="header_wrapper">
+      <div class="header_wrapper">
-        <div id="header">
+        <div class="header">
             <span class="black bold">THSF</span>
             <span class="white thin">2023</span>
         </div>
-        <div id="subheader">
+        <div class="subheader">
           <span class="white thin">Toulouse Hacker Space Factory</span>
         </div>
-        <div id="place">
+        <div class="place">
           <span class="black thin">26 28 mai 2023 - </span>
           <span class="white bold">CINÉMA UTOPIA BORDEROUGE</span>
         </div>
       </div>
       {% block content %}
       {% endblock %}
-      <div id="#partners">
+      <div class="partners">
         <a href="https://www.tetalab.org/">
           <img src="{{ url_for('static', filename='images/tetalab.png')}}"
                alt="Tetalab"
@@ -65,9 +73,9 @@
         </a>
       </div>
     </div>
-  </div>
     {% block navbar %}
     {% include "navbar.html" %}
     {% endblock %}
+  </div>
 </body>
 </html>

src/thsf/templates/goodies.html

@@ -1,12 +1,12 @@
 {% extends "base.html" %}
 {% block content %}
-      <div id="logo_wrapper">
+      <div class="logo_wrapper">
         <img class="logo"
             src="{{ url_for('static', filename='images/logo.svg') }}"
             alt="THSF 2023 - S/Extraire"
             title="THSF 2023 - S/Extraire">
       </div>
-      <div id="blah" class="goodies">
+      <div class="content" class="goodies">
         <h2>Nous avons besoin de votre soutien</h2>
         <p>
           Nous avons besoin de <a href="https://www.leetchi.com/c/thsf23">votre soutien financier</a> pour faire du <strong>Toulouse Hacker Space Factory</strong> un événement toujours différent des autres festivals. Ainsi, comme chaque année, nous faisons venir des artistes, des associations, des conférenciers, mais cela nécessite des frais importants pour leur transport et leur hébergement. C'est pourquoi nous sollicitons votre aide pour couvrir ces coûts et garantir le succès du <strong>THSF</strong>.

src/thsf/templates/index.html

@@ -1,12 +1,12 @@
 {% extends "base.html" %}
 {% block content %}
-      <div id="logo_wrapper">
+      <div class="logo_wrapper">
         <img class="logo"
             src="{{ url_for('static', filename='images/logo.svg') }}"
             alt="THSF 2023 - S/Extraire"
             title="THSF 2023 - S/Extraire">
       </div>
-      <div id="blah">
+      <div class="content">
         <h2>Le T.H.S.F est enfin de retour !</h2>
         <p>Nous vous invitons à passer un week-end de 3 jours à <a href="https://www.cinemas-utopia.org/toulouse/">Utopia Borderouge Toulouse</a> pour partager avec vous nos projets, nos réflexions, nos performances, nos poésies et nos doutes sur la technologie.</p>
 

src/thsf/templates/navbar.html

@@ -1,4 +1,4 @@
-  <div id="navbar_wrapper">
+  <div class="navbar_wrapper">
   {% for item in navbar %}
     <i class="button tooltip black {{ item.classes }}"
       onclick="document.location='{{item.url}}'">

src/thsf/templates/planning.html

@@ -1,6 +1,6 @@
 {% extends "base.html" %}
 {% block content %}
-      <div id="schedule">
+      <div class="content">
         {% for slot in slots %}
           {% if filter %}
             {% if slot.submission_type.en | lower in filter %}