Refactor com scss and add basic unified event calendar

com/templates/com/news_detail.jinja

@@ -11,6 +11,11 @@
   {{ gen_news_metatags(news) }}
 {% endblock %}
 
+
+{% block additional_css %}
+  <link rel="stylesheet" href="{{ static('com/css/news-detail.scss') }}">
+{% endblock %}
+
 {% block content %}
   <p><a href="{{ url('com:news_list') }}">{% trans %}Back to news{% endtrans %}</a></p>
   <section id="news_details">

com/templates/com/news_list.jinja

@@ -5,6 +5,15 @@
   {% trans %}News{% endtrans %}
 {% endblock %}
 
+{% block additional_css %}
+  <link rel="stylesheet" href="{{ static('com/css/news-list.scss') }}">
+  <link rel="stylesheet" href="{{ static('com/components/ics-calendar.scss') }}">
+{% endblock %}
+
+{% block additional_js %}
+  <script type="module" src={{ static("bundled/com/components/ics-calendar-index.ts") }}></script>
+{% endblock %}
+
 {% block content %}
   {% if user.is_com_admin %}
     <div id="news_admin">
@@ -98,16 +107,6 @@ type="EVENT").order_by('dates__start_date') %}
   {% endfor %}
 {% endif %}
 
-<h3>{% trans %}All coming events{% endtrans %}</h3>
-<iframe
-  src="https://embed.styledcalendar.com/#2mF2is8CEXhr4ADcX6qN"
-  title="Styled Calendar"
-  class="styled-calendar-container"
-  style="width: 100%; border: none; height: 1060px"
-  data-cy="calendar-embed-iframe">
-</iframe>
-</div>
-
 <div id="right_column" class="news_column">
   <div id="agenda">
     <div id="agenda_title">{% trans %}Agenda{% endtrans %}</div>
@@ -154,8 +153,14 @@ type="EVENT").order_by('dates__start_date') %}
       {%- endif -%}
     </div>
   </div>
+
+  <h3>{% trans %}All coming events{% endtrans %}</h3>
+
+  <ics-calendar locale="{{ get_language() }}"></ics-calendar>
+
 </div>
 
+
 </div>
 {% endblock %}
 

com/templates/com/poster_list.jinja

@@ -10,6 +10,10 @@
   {% trans %}Poster{% endtrans %}
 {% endblock %}
 
+{% block additional_css %}
+  <link rel="stylesheet" href="{{ static('com/css/posters.scss') }}">
+{% endblock %}
+
 {% block content %}
   <div id="poster_list">
 

com/templates/com/poster_moderate.jinja

@@ -5,6 +5,10 @@
   <script src="{{ static('com/js/poster_list.js') }}"></script>
 {% endblock %}
 
+{% block additional_css %}
+  <link rel="stylesheet" href="{{ static('com/css/posters.scss') }}">
+{% endblock %}
+
 {% block content %}
   <div id="poster_list">