Ajout des fichiers pour la première version du thème

static/css/style.css

@@ -1,3 +1,13 @@
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@300&display=swap');
+@font-face {
+  font-family: 'icomoon';
+  src: url('/theme/fonts/icomoon.woff') format('woff');
+  /*font-weight: normal;
+  font-style: normal;
+  font-display: block;*/
+}
+
 /* Parametres generaux */
 
 * {
@@ -7,9 +17,8 @@
 
 header {
   height: 3em;
-  /*padding: 3%;*/
+  padding-left: 10px;
-  padding-left: 20px;
+  margin-bottom: 2em;
-  margin-bottom: 10%;
   box-shadow: 0 4px 15px;
   background-color: #0E0E1B;
   display: flex;
@@ -19,22 +28,37 @@ header * {
     background-color: #0E0E1B;
 }
 
-header p {
-  padding-top: 1em;
-  margin-right: 1.5em;
-}
-
 header a {
+  padding-top: 1em;
+  padding-right: 1em;
+  padding-left: 1em;
   color: white;
   text-decoration: none;
 }
 
+header a:hover {
+  background-color: white;
+  color: #0E0E1B
+}
+
 footer {
+  position: relative;
+  width: 100%;
+  bottom: 0;
+  margin-bottom: 1em;
   text-align: center;
   color: white;
 }
 
-/* Parametres pour index */
+a {
+  color: white;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: 'Open Sans', sans-serif;
+}
+
+/* Parametres pour macro de prévisualisation d’articles */
 
 .pre-art  * {
     background-color: #0E0E1B;
@@ -52,25 +76,289 @@ footer {
   margin-bottom: 5%;
 }
 
-.pre-art a {
-  color: white;
-  text-decoration: none;
-}
-
 .summary {
   margin-bottom: 5%;
 }
 
+.pre-art a {
+  text-decoration: none;
+}
+
 .author:link {
   color: #6A89CC;
+  text-decoration: none;
 }
 
 .category:link {
   color: #2DCF29;
+  text-decoration: none;
 }
 
 .continue:link {
   background-color: #3C5DA4;
   border-radius: 50px;
   padding: 15px;
-}
+}
+
+/* parametres pour catehory */
+h1 {
+  color: white;
+  text-align: center;
+  font-size: 60px;
+}
+
+#cat-header hr {
+  margin: 40px auto;
+  width: 70%;
+  margin-top: 2em;
+  margin-bottom: 3em;
+}
+
+/* Parametres pour article */
+
+#article-header {
+  color: grey;
+  font-size: smaller;
+}
+
+#article-header h1 {
+  color: white;
+  font-size: 4em;
+}
+
+#article {
+  color: white;
+  margin-right: 20%;
+  margin-left: 20%;
+  font-family: 'Merriweather', sans-serif;
+  margin-bottom: 5em;
+  line-height: 1.6;
+}
+
+#article h1 {
+  text-align: center;
+  margin-bottom: 2em;
+  line-height: 1;
+}
+
+#article h2 {
+  font-size: 36px;
+  margin-top: .75em;
+  margin-bottom: .75em;
+}
+
+#article p {
+  margin-top: 1em;
+  font-size: 18px;
+}
+
+#article hr {
+  width: 50%;
+  margin: 40px auto;
+}
+
+pre, code {
+  font-family: DejaVu Sans Mono;
+  font-size: 16px;
+  line-height: 1.4;
+  background-color: #F8F8F8;
+  border-color: #E6E6E6;
+  border-radius: 2px;
+}
+
+code {
+  color: black;
+  padding: 3px;
+  padding-left: 5px;
+  padding-right: 5px;
+}
+
+pre {
+  margin-top: 1em;
+  margin-bottom: 1em;
+  padding: 10px;
+  color: black;
+  overflow: auto;
+  border-style: solid;
+  border-width: 1px;
+}
+
+pre code {
+  font-weight: normal;
+}
+
+pre * {
+  background-color: #F8F8F8;
+}
+
+#auth-desc {
+  color: white;
+  text-align: center;
+  line-height: 1.4;
+}
+
+#auth-info {
+  margin-bottom: 2em;
+}
+
+[class^="icone-"] {
+  font-family: 'icomoon' !important;
+  font-size: 70px;
+  text-decoration: none;
+  margin-right: 20px;
+}
+
+.icone-mastodon:before {
+  content: "\e900";
+}
+
+.icone-twitter:before {
+  content: "\e901";
+}
+
+.icone-gitea:before {
+  content: "\e902";
+}
+
+.icone-github:before {
+  content: "\e903";
+}
+
+/* pygments */
+.highlight .c { color: #8f5902; font-style: italic; }
+
+.highlight .err { color: #a40000; border: 1px solid #ef2929; }
+
+.highlight .g { color: #000000; }
+
+.highlight .k { color: #204a87; font-weight: bold; }
+
+.highlight .l { color: #000000; }
+
+.highlight .n { color: #000000; }
+
+.highlight .o { color: #ce5c00; font-weight: bold; }
+
+.highlight .x { color: #000000; }
+
+.highlight .p { color: #000000; font-weight: bold; }
+
+.highlight .cm { color: #8f5902; font-style: italic; }
+
+.highlight .cp { color: #8f5902; font-style: italic; }
+
+.highlight .c1 { color: #8f5902; font-style: italic; }
+
+.highlight .cs { color: #8f5902; font-style: italic; }
+
+.highlight .gd { color: #a40000; }
+
+.highlight .ge { color: #000000; font-style: italic; }
+
+.highlight .gr { color: #ef2929; }
+
+.highlight .gh { color: #000080; font-weight: bold; }
+
+.highlight .gi { color: #00A000; }
+
+.highlight .go { color: #000000; font-style: italic; }
+
+.highlight .gp { color: #8f5902; }
+
+.highlight .gs { color: #000000; font-weight: bold; }
+
+.highlight .gu { color: #800080; font-weight: bold; }
+
+.highlight .gt { color: #a40000; font-weight: bold; }
+
+.highlight .kc { color: #204a87; font-weight: bold; }
+
+.highlight .kd { color: #204a87; font-weight: bold; }
+
+.highlight .kn { color: #204a87; font-weight: bold; }
+
+.highlight .kp { color: #204a87; font-weight: bold; }
+
+.highlight .kr { color: #204a87; font-weight: bold; }
+
+.highlight .kt { color: #204a87; font-weight: bold; }
+
+.highlight .ld { color: #000000; }
+
+.highlight .m { color: #0000cf; font-weight: bold; }
+
+.highlight .s { color: #4e9a06; }
+
+.highlight .na { color: #c4a000; }
+
+.highlight .nb { color: #204a87; }
+
+.highlight .nc { color: #000000; }
+
+.highlight .no { color: #000000; }
+
+.highlight .nd { color: #5c35cc; font-weight: bold; }
+
+.highlight .ni { color: #ce5c00; }
+
+.highlight .ne { color: #cc0000; font-weight: bold; }
+
+.highlight .nf { color: #000000; }
+
+.highlight .nl { color: #f57900; }
+
+.highlight .nn { color: #000000; }
+
+.highlight .nx { color: #000000; }
+
+.highlight .py { color: #000000; }
+
+.highlight .nt { color: #204a87; font-weight: bold; }
+
+.highlight .nv { color: #000000; }
+
+.highlight .ow { color: #204a87; font-weight: bold; }
+
+.highlight .w { color: #f8f8f8; text-decoration: underline; }
+
+.highlight .mb { color: #0000cf; font-weight: bold; }
+
+.highlight .mf { color: #0000cf; font-weight: bold; }
+
+.highlight .mh { color: #0000cf; font-weight: bold; }
+
+.highlight .mi { color: #0000cf; font-weight: bold; }
+
+.highlight .mo { color: #0000cf; font-weight: bold; }
+
+.highlight .sb { color: #4e9a06; }
+
+.highlight .sc { color: #4e9a06; }
+
+.highlight .sd { color: #8f5902; font-style: italic; }
+
+.highlight .s2 { color: #4e9a06; }
+
+.highlight .se { color: #4e9a06; }
+
+.highlight .sh { color: #4e9a06; }
+
+.highlight .si { color: #4e9a06; }
+
+.highlight .sx { color: #4e9a06; }
+
+.highlight .sr { color: #4e9a06; }
+
+.highlight .s1 { color: #4e9a06; }
+
+.highlight .ss { color: #4e9a06; }
+
+.highlight .bp { color: #3465a4; }
+
+.highlight .vc { color: #000000; }
+
+.highlight .vg { color: #000000; }
+
+.highlight .vi { color: #000000; }
+
+.highlight .il { color: #0000cf; font-weight: bold; }

templates/author.html

@@ -0,0 +1,21 @@
+{%extends "base.html" %}
+{% import "macros.html" as macro %}
+{% block content %}
+
+    <div id="auth-info">
+        <h1>{{ author.name }}</h1>
+        {% if author|string in NUIR_AUTHORS %}
+        <div id="auth-desc"> 
+        <p>{{ NUIR_AUTHORS.get(author|string).description }}</p>
+        {% for icone, lien in NUIR_AUTHORS.get(author|string).links %}
+        <!-- <a href="{{ lien }}"><i class="icone-{{ icone }}"></i></a> -->
+        <a href="{{ lien }}" class="icone-{{ icone }}"></a>
+        {% endfor %}
+        </div>
+        {% endif %}
+        <!-- <hr /> -->
+    </div>
+
+    {{ macro.listArticles(articles_page.object_list) }}
+
+{% endblock content %}

templates/base.html

@@ -5,14 +5,17 @@
     <title> {% block title %}{{ SITENAME }}{% endblock title %}</title>
     <meta charset="utf-8" />
     <link rel="stylesheet" href="{{ SITEURL  }}/{{ THEME_STATIC_DIR }}/css/{{ CSS_FILE }}" /> 
+    <link rel="stylesheet" href="{{ SITEURL  }}/{{ THEME_STATIC_DIR }}/css/style.css" /> 
+    <!-- <link rel="stylesheet" href="{{ SITEURL  }}/{{ THEME_STATIC_DIR }}/css/fort-awesome.css" /> -->
+	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css">
     {% endblock head %}
 </head>
 <body>
     <header>
-        <p><a href="{{ SITEURL }}/">{{ SITENAME.upper() }}</a></p>
+        <a href="{{ SITEURL }}/">{{ SITENAME.upper() }}</a>
         {% if DISPLAY_CATEGORIES_ON_MENU %}
             {% for name, tmp in categories %}
-        <p><a href="{{ SITEURL }}/{{ name.url }}">{{ name }}</a></p>
+        <a href="{{ SITEURL }}/{{ name.url }}">{{ name }}</a>
             {% endfor %}
         {% endif %}
     </header>

templates/index.html

@@ -1,23 +1,7 @@
 {% extends "base.html" %}
+{% import "macros.html" as macro %}
 {% block content %}
 
-{% for art in articles_page.object_list %}
+{{ macro.listArticles(articles_page.object_list) }}
-    <div class="pre-art">
-        <p class="infos-art">Par 
-            {% for author in art.authors %}
-            <a href="{{ SITEURL }}/{{ author.url }}" class="author">{{ author }}</a>
-            {% endfor %}
-            dans <a href="{{ SITEURL }}/{{ art.category.url }}" class="category">{{ art.category }}</a> le 21/08/2020.
-        </p>
-        <br />
-
-        <h2><a href="{{ SITEURL }}/{{ art.url }}">{{ art.title }}</a></h2>
-        <br />
-        <div class="summary">
-            {{ art.summary }}
-        </div>
-        <a href="{{ SITEURL }}/{{ art.url }}" class="continue">Continuer à lire</a>
-    </div>
-{% endfor %}
 
 {% endblock content %}