MapOfTheAbsentees
2026-08-13T18:02:57+02:00
1
21
CMS Menu-Page
https://heurist.huma-num.fr/heurist/?recID=21&db=MapOfTheAbsentees
<i>webpage:</i> <b>Map Of The Absentees by Bahar Majdzadeh</b> <i> </i>
2021-05-08 16:07:27
2024-10-07 21:43:52
public
Map Of The Absentees by Bahar Majdzadeh
MOA is a an interactive, participatory and oral cartography of Tehran developped by Bahar Majdzadeh. Scattered all around the world, some political refugees whose exile originated in episodes of political violence that occurred between 1979 and 1988 in Iran have participated in the creation of this mapping.
This project is called la carte des absent.e.s in french and نقشه غایبین in persan.
<h2 class="webpageheading" style="display:none;">MapOfTheAbsentees
</h2>
<!-- MAP -->
<div style="position: absolute; top: 0px; left: 0; bottom: 0; width: 100%; height: 100%; border-color: #6A5ACD;">
<div class="ent_wrapper" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;">
<div id="mywidget_965" class="mceNonEditable" style="background: #FFFFFF; position: absolute; top: 0px; width: 100%; left: 0px; height: 100%; border: 0px;" data-heurist-app-id="heurist_Map">
{"custom_links":"?db=MapOfTheAbsentees&file=bb68be637ebf9ee5c66ca2fd038a5d38e6dd6963","layout_params":{"notimeline":true,"nocluster":true,"editstyle":false,"map_rollover":true,"published":1,"controls":"none","legend":"off","template":"Map Popup.tpl", "basemap":"Stamen.Toner","basemap_filter":{"invert":1}, "selection_style":{"iconType":"circle","color":"#ffff00","fillColor":"#ffff00","weight":7,"opacity":1,"fillOpacity":0.1,"iconSize":60,"radius":60,"stroke":1,"fill":1}},"leaflet":true,"mapdocument":"11","init_at_once":true,"popup_width":"800px","maxzoom":"2"}
</div>
</div>
</div>
<div id="page-heading">
<h1 lang="english" class="english">Map of the Absentees (MOA)
</h1>
<h1 lang="farsi" class="farsi">نقشه غایبین
</h1>
<h1 lang="french" class="french">La carte des absent.e.s
</h1>
<p lang="english" class="english subtitle">Bahar Majdzadeh
</p>
<p lang="french" class="french subtitle">Bahar Majdzadeh
</p>
<p lang="farsi" class="farsi subtitle">بهار مجدزاده
</p>
</div>
<div id="menu">
<div id="about" class="menu-container">
<div class="content text-image-logos">
<div class="language-buttons">
<button lang="english">English
</button>
<button lang="farsi">فارسی
</button>
<button lang="french">Français
</button>
<img src="./?db=MapOfTheAbsentees&file=cb3aa5a68fd1d4735041a58ba805919a76e9c365" class="close-button" alt="close">
</div>
<div class="heading">
<h3 lang="english" class="english">Map of the Absentees
</h3>
<h3 lang="farsi" class="farsi">نقشه غایبین
</h3>
<h3 lang="french" class="french">La carte des absent.e.s
</h3>
</div>
<div class="text">
<div lang="english" class="english">
<p>As new forms of State appeared (after the Constitutional Revolution 1905-1911) and while Iran was entering modernity and was in the quest for an identity and a national history, the last two political regimes (the Pahlavi dynasty and the Islamic Republic), in a hurry to rewrite history, have shaped the public realm in accordance with their own version of it. Tehran, that is both the site of governance and of the popular uprisings that marked the history of modern Iran, went, after the fall of the Qajar dynasty, through continuous destructions and transformations. These spatial upheavals have been transposed on its map. Indeed, the map is the tool of the representation of space. It is always involved in the processes of power. It is the tool of the dominant group and symbolically strengthens its authority. Thus, the I.R.I has total control over the space, and through it, over time, over history, memories, and finally, the map. The I.R.I tries, by appropriating public spaces, to destroy the "space of appearance" (in the political sense). Its model of spatial organisation constitutes, per se, a form of violence that leaves the multi-layered memories of space in the shadows. One of them is the memory of the 1979 Revolution and its political forces, and another, antagonistic one is related to the 1980s. In these years, Tehran was the place where the corpses of the Iran-Iraq war martyrs were being returned. It was the prime target of the bombings and also the scene of political crimes. Its public spaces have witnessed bloody repression against young militants who were opposing the new Regime which wanted to subdue its people. They were fighting against a Regime which had been able to take advantage of the protest movement that they, themselves, had led at the time of the Shah. During this period, Tehran was the epicentre of State violence. It was the city of arrests, torture, political murders, and clandestinity.
</p>
<p>The participants of the Map of the Absentees are among these militants who were able to escape arrests, fleeing these morbid streets for remote destinations in order to stay alive, in the hope of continuing the struggle, or to come back one day, but who, until today, have not returned. Scattered all around the world, fifteen political Iranian refugees whose exile originated in the political destruction that occurred in Iran between 1979 and 1988 have participated in the creation of this map. These are people who see exile as a political stand, as the continuation of a struggle, as a resistance, symbolic as it may be. Each voice tells a memory, a thought, an analysis or an event linked to a specific place in Tehran. These voices that do not allow for building a historical and detailed story, try to establish, through the actual map of Tehran, a dialectical relation between the past and the present. This map, admittedly incomplete, tries to give the possibility of confronting the « Other » with the history of the Revolution, but also with an amputated and exiled memory, likely to rekindle a lost political alterity. This cartography, by trying to draw the traces of the absentees of the city, questions the neutrality which it claims to possess with regard to the political disasters. The Map of the Absentees, which is an open project, can be comprehended as a small act of resistance in the face of the map’s authoritarian power. It is the transposition of a sound cartographic installation by Bahar Majdzadeh.
</p>
<p>Bahar Majdzadeh is an Iranian artist-researcher who lives and works between Paris and Marseille. After finishing a thesis in Art (research and creation) at Paris 1 Panthéon-Sorbonne University in 2019, she is now a Temporary Research and Teaching Assistant (ATER) at Aix-Marseille University.
</p>
</div>
<div lang="farsi" class="farsi">
<p>با ظهور اشکال جدید دولت ( پس از انقلاب مشروطه) و ورود ایران به مدرنیته و جستجوی هویت و تاریخ ملی، دو رژیم سیاسی اخیر(سلسله پادشاهی پهلوی و جمهوری اسلامی)، شتابزده در بازنویسی تاریخ، فضاهای شهری را مطابق نسخه های تاریخی خود شکل دادند. تهران، که هم مرکز قدرت سیاسی و هم قیام های مردمیست که ردشان را بر تاریخ ایران مدرن گذاشته اند، به شکل مستمر(پس از فروپاشی سلسله قاجار) دچار ویرانی و دگرگونی شده است. این تغییرات بر روی نقشه شهر تهران هم منتقل شدهاند. درواقع نقشه ابزار بازنمای فضاست. نقشه ها همیشه در فرایند قدرت دخیل هستند، آنها ابزار گروه فاتح هستند و به طور نمادین اقتدار سیاسی این گروه را تقویت می کنند. از این منظر جمهوری اسلامی هم نظارتی تام، بر فضاهای عمومی و از این طریق بر زمان، تاریخ، حافظه ها و سرانجام بر نقشه اعمال می کند. جمهوری اسلامی میکوشد با تسلط بر فضاهای عمومی، «فضای پدیدار شدن» در مفهوم سیاسی را تخریب کند. شیوه سازماندهی فضاهای شهری در جمهوری اسلامی، صورتی از خشونت تخریب گریست که حافظه های چند لایه فضا را در سایه پنهان میکند. یکی از این حافظه ها متعلق به انقلاب پنجاه و هفت و نیروهای سیاسی کثرت گرایش است، دیگری حافظه آنتاگونیست دهه شصت است. تهران در سالهای دهه شصت، در حالی که محل بازگشت پیکرهای شهدای جنگ ایران و عراق بود به طور دایم موشک باران میشد، تهران آن سالها همچنین صحنه جنایات سیاسی بود. فضاهای عمومی شهر شاهد سرکوب خونین مبارزین سیاسی جوانی بودند که نظم متحجرانه قدرت سیاسی جدید را بر نمی تابیدند، قدرتی که در تدارک سلطه ای تمامعیار بر همگان بود. مخالفین جوان علیه رژیمی مبارزه میکردند که به قدرت رسیدنش را مدیون جنبش اعتراضی همین جوانان در بهمن ۵۷ بود. تهران دهه شصت مرکز خشونت های دولتی بود، شهر دستگیری ها، شهر شکنجه و قتل سیاسی و مخفیگاهی پرمخاطره برای جوانان انقلابی.
</p>
<p>شرکت کنندگان نقشه غایبین از میان آن دسته از مبارزینی هستند که توانستند از آن خیابانهای مرگ آور، به امید بازگشت و برای ادامه مبارزه یا نجات جان خود بگریزند ولی تا به کنون بازنگشتند. پانزده پناهنده سیاسی ایرانی، پراکنده در نقاط مختلف جهان، که تبعید ناگریز آنها ریشه در سرکوب های سیاسی یا تخریب سیاسی ایران پسا انقلاب، یعنی بین سالهای پنجاه و هفت و شصت و هفت دارد در تهیه این نقشه مشارکت کردند. آنها کسانی هستند که تبعید خودخواسته را، هر چند به صورت نمادین، به مثابه یک موضع سیاسی، تلاشی برای ادامه مبارزه و برای مقاومت تبدیل کردند. هر صدا خاطره، اندیشه، تحلیل یا واقعه ای را روایت میکند که با مکان خاصی در تهران مرتبط است. هر چند قصد این صداها ساختن تاریخ نیست، ولی از طریق نقشه امروز تهران یک رابطه دیالکتیکی بین گذشته و حال را ممکن می سازند. این نقشه (بدون شک ناکامل) سعی میکند امکان مواجهه با «دیگری» انقلاب پنجاه و هفت را، پیش روی قرار دهد ; رویارویی با یک حافظه قطع شده و به تبعید رفته. همچنین این نقشه مستعد عینی کردن حقیقت دیگری از یک امر سیاسی از دست رفته، در ایران است. این نقشه نگاری در حالی که میکوشد ردپای غایبین شهر را دوباره ترسیم کند، بیطرفی ای را که نقشه در مورد بلایای سیاسی مدعی آن است ، به چالش میکشد. نقشه غایبین که یک پروژه باز است را میتوان همچون یک مقاومت سمبلیک در برابر قدرت سیاسی نقشه موجود دید. این نقشه درواقع صورت مجازی یک چیدمان نقشه نگارانه از بهار مجدزاده است
</p>
<p>بهار مجدزاده هنرمند- محقق ایرانی است که بین پاریس و مارسی زندگی و کار می کند. او تز دکترایش را، سال ۲۰۱۹ در رشته هنر (تحقیق و آفرینش) در دانشگاه پاریس یک پانتئون-سوربون به پایان رسانده و اکنون استاد و محقق موقت در دانشگاه اکس مارسی در جنوب فرانسه است.
</p>
</div>
<div lang="french" class="french">
<p>Au moment où apparaissaient de nouvelles formes d’État (après la révolution constitutionnelle de 1905-1911 ) et alors que l’Iran entrait dans la modernité et était à la recherche d’une identité et d’une histoire nationale, les deux derniers régimes politiques (la dynastie Pahlavi et la République Islamique), pressés de réécrire l’histoire, ont entrepris de façonner les espaces publics conformément à leurs versions de l’Histoire. Téhéran, qui est à la fois le lieu d'exercice du pouvoir politique et le lieu des soulèvements populaires qui ont marqué l'histoire de l'Iran moderne, a subi (après le chute de la dynastie Kadjar 1925) des destructions et des transformations continues. Ces bouleversements spatiaux ont été transposés sur sa carte. En effet, la carte est l’instrument de la représentation de l’espace. Elle est toujours impliquée dans les processus de pouvoir, elle est l'outil du groupe dominant et renforce symboliquement son autorité. C'est ainsi que la République Islamique d'Iran exerce un contrôle total sur l’espace et à travers lui sur le temps, sur l'histoire, sur les mémoires et enfin sur la carte. La R.I.I. tente, en s’appropriant les espaces publics, de détruire « l’espace d’apparaître » (au sens politique du terme). Son modèle d’organisation spatiale constitue en soit une forme de violence qui laisse dans l'ombre les mémoires multi-couches de l'espace. L'une de ces mémoires est celle de la Révolution de 1979 et de ses forces pluralistes, une autre est celle, antagoniste, des années 1980. Téhéran a été pendant ces années-là un lieu de rapatriement des corps des martyrs de la guerre Iran-Irak et une cible privilégiée des bombardements, elle fut également le théâtre de crimes politiques. Ses espaces publics ont été les témoins d'une répression sanglante à l'encontre de jeunes militants qui s’opposaient au nouveau pouvoir politique qui voulait soumettre la population. Ils luttaient contre ce régime qui avait su tirer parti du mouvement de contestation qu’eux-mêmes avaient mené à l’époque du Chah. Téhéran fût durant cette période l’épicentre de la violence étatique. Elle était la ville des arrestations, de la torture, des assassinats politiques et de la clandestinité.
</p>
<p>Les participants de la carte des absent.e.s font partie de ces militants qui ont pu échapper à la traque, en fuyant ces rues morbides vers des destinations lointaines pour rester en vie ou dans l’espoir de continuer la lutte ou encore de rentrer un jour, mais qui jusqu’à maintenant ne sont pas revenus. Répartis à travers le monde, quinze réfugiés politiques iraniens dont l’exil trouve son origine dans la destruction politique intervenue dans l'Iran post-révolutionnaire, ont participé à l’élaboration de cette carte. Ce sont celles et ceux qui conçoivent l'exil comme une prise de position politique, comme la poursuite d'une lutte, d'une résistance, aussi symbolique soit-elle. Chaque voix raconte un souvenir, une pensée, une analyse ou un événement liée à un lieu précis de Téhéran. Ces voix, qui, ne permettent pas de construire un récit historique et détaillé, tentent d'établir à travers la carte actuelle de Téhéran, un rapport dialectique entre le passé et le présent. Cette carte, certes lacunaire, tente de donner la possibilité de se confronter à cet « Autre » de l’histoire de la Révolution, à une mémoire amputée, exilée, susceptible de faire ressurgir une altérité politique perdue. Cette cartographie, en tentant de dessiner les empreintes des absent.e.s de la ville, interroge la neutralité à laquelle la carte semble prétendre à l’égard des désastres politiques. La carte des absent.e.s, qui est un projet ouvert, peut être appréhendée comme un petit acte de résistance face au pouvoir autoritaire de la carte. Elle est la transposition d’une installation cartographique sonore de Bahar Majdzadeh.
</p>
<p>Bahar Majdzadeh est une artiste - chercheuse iranienne qui vit et travaille entre Paris et Marseille. Après avoir soutenu en 2019, sa thèse en Art (Recherche et création) à l'Université Paris 1 Panthéon-Sorbonne, elle est actuellement Attachée Temporaire d'Enseignement et de Recherche (ATER) à l'Université Aix-Marseille(Inspe).
</p>
</div>
</div>
<div class="image">
<img src="https://heurist.huma-num.fr:443/heurist/?db=MapOfTheAbsentees&file=2a747ff2614338f89cf6d34ce572e3e12fd6728a&fancybox=1" data-id="2a747ff2614338f89cf6d34ce572e3e12fd6728a" alt="Decorative image of map with loudspeaker">
</div>
<div class="logos">
<a href="https://offsite.hypotheses.org/" target="_blank">
<img src="https://heurist.huma-num.fr:443/heurist/?db=MapOfTheAbsentees&file=3e3ff0fc91e09006ddfc41813c26cc7834f39327&fancybox=1" data-id="3e3ff0fc91e09006ddfc41813c26cc7834f39327" alt="Off-Site Project logo">
</a>
<a href="https://european-union.europa.eu/" target="_blank">
<img src="https://heurist.huma-num.fr:443/heurist/?db=MapOfTheAbsentees&file=8e1d19dcc8717a2d5fce724fdce77c7187495941&fancybox=1" data-id="8e1d19dcc8717a2d5fce724fdce77c7187495941" alt="EU Flag">
</a>
<a href="https://erc.europa.eu/" target="_blank">
<img src="https://heurist.huma-num.fr:443/heurist/?db=MapOfTheAbsentees&file=f9c71c24b0771fcb5bea3fd2ca6e006ea626c73e&fancybox=1" data-id="f9c71c24b0771fcb5bea3fd2ca6e006ea626c73e" alt="ERC Logo">
</a>
<div>
<p lang="english" class="small english">This project has received funding from the European Research Council (ERC) under the Horizon 2020 research and innovation programme (grant agreement No 803208)
</p>
<p lang="farsi" class="small farsi">این پروژه حمایت مالی شورای تحقیقات اروپا را در چهار چوب برنامه سال 2020 تحقیاقات و نو آوری اتحادیه اروپا دریافت کرده است ( شماره توافق No 803208)
</p>
<p lang="french" class="small french">Ce projet a reçu le financement du Conseil Européen de la Recherche (ERC) dans le cadre du programme de recherche et d'innovation, Horizon 2020 (accord de financement N° 803208).
</p>
</div>
</div>
</div>
<div id="about-head" class="menu-header">
<p class="english" lang="english">About
</p>
<p class="farsi" lang="farsi">درباره
</p>
<p class="french" lang="french">à propos
</p>
</div>
</div>
<div id="news" class="menu-container">
<div id="publications-content" class="content text-only-twocols">
<div class="language-buttons">
<button lang="english">English
</button>
<button lang="farsi">فارسی
</button>
<button lang="french">Français
</button>
<img src="./?db=MapOfTheAbsentees&file=cb3aa5a68fd1d4735041a58ba805919a76e9c365" class="close-button" alt="close">
</div>
<div class="heading col1">
<h3 class="english" lang="english">Publications
</h3>
<h3 class="farsi" lang="farsi">مقالات
</h3>
<h3 class="french" lang="french">Publications
</h3>
</div>
<div class="heading col2">
<h3 lang="english" class="english">News
</h3>
<h3 lang="farsi" class="farsi">اخبار
</h3>
<h3 lang="french" class="french">Actualités
</h3>
</div>
<div class="text col1">
<p lang="english" class="english">The map of the absentees is part of a work that is both theoretical and practical. It is the subject of the first two articles below. This map, along with two others cartographic works, is part of an ensemble called "geography of destruction" that the last article tackles succinctly
</p>
<p class="farsi" lang="farsi">نقشه غایبین بخشی از یک کار علمی و نظری است. دو مقاله اول به مباحث نظری مرتبط با این نقشه می پردازند. نقشه غایبین همچنین به همراه دو نقشه نگاری دیگر، بخشی از مجموعه ای بزرگتر به نام «جغرافیای تخریب» است، آخرین مقاله به طور مختصر به این مجموعه پرداخته است
</p>
<p class="french" lang="french">La carte des absent.e.s s'inscrit dans un travail à la fois théorique et pratique. Elle constitue le sujet des deux premiers articles théoriques ci-dessous. Cette carte, accompagnée de deux autres travaux cartographiques, fait partie d’un ensemble appelé «Géographie de la destruction » que le dernier article aborde de manière succincte.
</p>
<p class="strong">
<a target="_blank" href="https://hal.archives-ouvertes.fr/hal-03320883">Memory map and the policy of space, Iran 1979-1988
</a>
</p>
<p class="strong">
<a target="_blank" href="https://hal.archives-ouvertes.fr/hal-03320906">Topography of the absence of the Iranian political exiles
</a>
</p>
<p class="strong">
<a href="https://hal.archives-ouvertes.fr/hal-03669725" target="_blank">Cartographier les exclus : géographie de la destruction (Iran 1979-1988)
</a>
</p>
</div>
<div class="text col2">
<iframe id="news-frame" src="https://heurist.huma-num.fr/heurist/viewers/smarty/showReps.php?db=MapOfTheAbsentees&w=all&q=%5B%7B%22t%22%3A%2295%22%7D%2C%7B%22sortby%22%3A%22-f%3A9%22%7D%5D&publish=1&debug=0&template=News+Item.tpl&mode=html" frameborder="0">
</iframe>
</div>
</div>
<div id="news-head" class="menu-header">
<p lang="english" class="english">News and Publications
</p>
<p lang="farsi" class="farsi">اخبار و مقالات
</p>
<p lang="french" class="french">Actualités et publications
</p>
</div>
</div>
<div id="contact" class="menu-container">
<div class="content text-only">
<div class="language-buttons">
<button lang="english">English
</button>
<button lang="farsi">تماس
</button>
<button lang="french">Français
</button>
<img src="./?db=MapOfTheAbsentees&file=cb3aa5a68fd1d4735041a58ba805919a76e9c365" class="close-button" alt="close">
</div>
<div class="heading">
<h3 class="english" lang="english">Contact Us
</h3>
<h3 class="farsi" lang="farsi">با ما تماس بگیرید
</h3>
<h3 class="french" lang="french">Nous contacter
</h3>
</div>
<div class="text">
<p class="farsi" lang="farsi">وب سایت نقشه غایبین یک پروژه باز است و پیوستن روایت های جدید را خوش آمد می گوید. چهار چوب این روایت های جدید همان طبیعت نخستین این نقشه نگاری خواهد ماند. پناهندگان سیاسی ایرانی که به دلیل یک مسیله سیاسی در دهه اول پس از انقلاب(57 تا 67 )از ایران خارج شدند و هرگز بازنگشتند و تمایل دارند خاطره، تحلیل، روایت، واقعه یا اندیشهای مرتبط با نقطهای مشخص در تهران را، از طریق این وب سایت با دیگران به اشتراک بگذارند، میتوانند از طریق فرم زیر با وب سایت خودشان تماس بگیرند
</p>
<div id="mywidget_9999" class="mceNonEditable" data-heurist-app-id="heurist_emailForm">{"rec_ID": 21,"page_name": "Map of Absentees 2"}
</div>
<div class="logos-large">
<a href="https://www.instagram.com/baharmajdzadeh/" target="_blank">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/95/Instagram_logo_2022.svg/1200px-Instagram_logo_2022.svg.png" alt="@baharmajdzadeh">
</a>
</div>
</div>
</div>
<div id="contact-head" class="menu-header">
<p class="english" lang="english">Contact
</p>
<p class="farsi" lang="farsi">تماس
</p>
<p class="french" lang="french">Contact
</p>
</div>
</div>
</div>
blackspring2002@yahoo.com
2-65
دهه شصت, map of theabsentees, la carte des absent.e.s, Bahar Majdzadeh, نقشه غایبین, Téhéran,Tehran, تهران, MOA, بهار مجدزاده, Révolution 1979, انقلاب 57, counter mapping, cartographie artistique, memory map, postrevolutionary Iran, cartographie sensible, radical cartography, mémoire collective, Exil
:root{--menu-container-mw:min(1000px, 100vw);--active-item-max-width:calc(var(--menu-container-mw) - 2px);--page-heading-width:500px;--contact-max-width:min(calc(100vw - var(--page-heading-width) - 20px), var(--menu-container-mw));--menu-heading-height:75px;--close-button-width:45px}*{box-sizing:border-box}body{font-family:'Lucida Sans','Lucida Sans Regular','Lucida Grande','Lucida Sans Unicode',Geneva,Verdana,sans-serif;margin:0;padding:0;min-height:100vh;min-height:-webkit-fill-available}html{height:-webkit-fill-available}:lang(farsi){font-family:Almarai,sans-serif;text-align:right}#page-heading :lang(farsi){text-align:left}button:lang(farsi){text-align:center}h1{margin-block-start:0;margin-block-end:0;font-size:2em;font-weight:500;width:max-content}h3{min-height:26px}.subtitle{font-size:.8em;margin-block-end:0;margin-block-start:0}#page-heading{position:absolute;display:flex;flex-direction:column;justify-content:center;row-gap:1px;bottom:0;left:0;color:#ff0;height:var(--menu-heading-height);width:var(--page-heading-width);padding-left:20px;background-image:url(https://heurist.huma-num.fr/heurist/?db=MapOfTheAbsentees&file=3799ad0b7694873a107fe6fc2253bf2cff4a489d);background-size:cover;background-position-x:100%;border-left:solid #ff0 2px;opacity:.8}#main-content{overflow:hidden;width:100%;height:100%;margin:0;padding:0}#main-content *{-moz-box-sizing:border-box;box-sizing:border-box}#main-content .frame_container{width:100%;padding:0!important}.ent_content_full{right:0!important}#menu{position:absolute;right:0;bottom:0;display:grid;justify-items:flex-end}.menu-container{display:flex;flex-direction:column;align-items:flex-end;width:max-content;max-width:var(--menu-container-mw);-webkit-transition:all .5s linear;-moz-transition:all .5s linear;-o-transition:all .5s linear;transition:all .5s linear}.menu-header{display:flex;align-items:center;font-size:1.5em;color:#fff;height:var(--menu-heading-height);width:0;min-width:max-content;-webkit-transition:all .5s linear;-moz-transition:all .5s linear;-o-transition:all .5s linear;transition:all .5s linear;padding-left:50px;padding-right:30px;border-right:solid #ff0 1px;background-size:cover;background-position-x:1px;background-repeat:no-repeat;opacity:.8}#about .menu-header{background-image:url(https://heurist.huma-num.fr/heurist/?db=MapOfTheAbsentees&file=2bd1c7ac95c7289cf9ad1f9c9b40e8c66939de41)}#news .menu-header{background-image:url(https://heurist.huma-num.fr/heurist/?db=MapOfTheAbsentees&file=a4a9bc33de15288921fe8a9e83f6e200ed7afb8f)}#contact .menu-header{background-image:url(https://heurist.huma-num.fr/heurist/?db=MapOfTheAbsentees&file=f2c3c4cd4a861a994d87662f32e06c3b61c3e51a)}.content{background:#ebebebf5;color:#000;padding:0;height:0;width:0;max-width:var(--active-item-max-width);max-height:calc(100vh - 3 * var(--menu-heading-height));border:none;overflow:scroll;-webkit-transition:all .5s linear;-moz-transition:all .5s linear;-o-transition:all .5s linear;transition:all .5s linear;display:grid;gap:0 10px}.text-image-logos{grid-template-columns:60% minmax(0,1fr) var(--close-button-width);grid-template-rows:min-content min-content minmax(0,1fr) min-content;grid-template-areas:"language-buttons language-buttons language-buttons" "heading . ." "text image ." "logos . ."}.text-only{grid-template-columns:minmax(0,1fr) var(--close-button-width);grid-template-rows:min-content min-content minmax(0,1fr);grid-template-areas:"language-buttons language-buttons" "heading ." "text ."}.text-only-twocols{grid-template-columns:minmax(0,1fr) minmax(0,1fr) var(--close-button-width);grid-template-rows:min-content min-content minmax(0,1fr);grid-template-areas:"language-buttons language-buttons language-buttons" "heading-1 heading-2 ." "text-1 text-2 ."}.language-buttons>button{border:none;font-weight:700;font-size:1.1em;min-width:90px;background:0 0;padding:2px}.language-buttons>button.active{color:#707070}.language-buttons>button:hover{background-color:#707070;color:#fff;cursor:pointer}.close-button{height:25px;width:var(--close-button-width);padding:0 10px;object-fit:contain;transition-property:rotate(),opacity;transition-duration:.7s;transition-timing-function:ease-in-out}.close-button:hover{transform:rotate(270deg);cursor:pointer;opacity:.5}.content p{-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;text-align:justify;text-justify:inter-word;margin-block-start:0}h3{margin-block-start:0}.content h3{margin-block-end:.5em;font-size:xx-large}.content .language-buttons{grid-area:language-buttons;display:flex;justify-content:flex-end}.content .heading{grid-area:heading;padding:.5em}.content .heading.col1{grid-area:heading-1}.content .heading.col2{grid-area:heading-2}.content .text{grid-area:text;overflow:scroll;padding:.5em;display:flex;flex-direction:column;justify-content:space-between}.content .text div.mceNonEditable{background:0 0!important;border:none!important}.content .logos-large{display:flex;flex-direction:row;justify-content:space-around}.content .logos-large img{height:4rem}#news-frame{height:100%;min-height:fit-content}.content .text.col1{grid-area:text-1}.content .text.col2{grid-area:text-2}.content .image{grid-area:image;overflow:hidden;display:flex;justify-content:center;align-items:center}.content .image>img{object-fit:cover;object-position:center center;min-height:100%;width:100%}.content .logos{grid-area:logos;display:flex}.content .logos img{max-height:55px;object-fit:contain;padding:5px}.content .logos>div{display:flex;align-items:center}.content .small{font-size:.6em;margin-block-end:0;margin-block-start:0}p.strong{font-size:large;font-weight:600}p.strong.two-cols{display:grid;grid-template-columns:12rem 1fr}p.strong>a:link,p.strong>a:visited{font-size:large;color:#000}p.strong>a:hover{color:#feff00}p.strong>a:active{color:#bfbf3f}.socials{font-size:large;font-weight:700}#menu .menu-header:hover{cursor:pointer}#menu>.menu-container.active .menu-header{color:#ff0;width:var(--menu-container-mw)}#menu #contact{max-width:var(--contact-max-width)}#menu #contact.active{width:var(--contact-max-width)}#menu #contact.active .menu-header{width:var(--contact-max-width)}#menu #about .content{max-width:calc(var(--menu-container-mw) - 20px)}#menu>.menu-container.active .content{padding:1em .5em 1em var(--close-button-width);height:500px}#menu>.menu-container.active .content{width:100%}@media only screen and (max-width:960px){#main-content{position:absolute;display:flex!important;flex-direction:column;justify-content:space-between;padding:0!important}#page-heading{flex:0 0 70px;position:relative;width:100%;height:70px;background-size:1000px 70px;padding-left:10px}#page-heading h1{font-size:1.5em}#menu{position:static;width:100%;height:100%;display:flex;flex-direction:column;justify-content:flex-end}#menu .content{flex:1 0 auto;height:0;z-index:1;gap:0}#menu .content .small{font-size:.6em}#menu .content h3{font-size:1.2em}#menu .content p{font-size:1em}#menu .menu-header{flex:0 0 auto;height:40px;background-size:1000px 40px;font-size:1em;margin-block-end:0;margin-block-start:0}#menu>.menu-container{flex:0 1 auto;height:40px;max-height:100%;max-width:100%;width:auto;justify-items:stretch}#menu>.menu-container>*{max-width:100%}#menu #contact{max-width:100%}#menu>.menu-container.active{width:100%;height:100%}#menu>.menu-container.active .content{height:0;max-height:100%}#menu #about .content{max-width:calc(100% - 20px)}#menu #about.active .content{width:calc(100% - 20px)}#menu>.menu-container.active .content,#menu>.menu-container.active .menu-header{width:100%}#menu>#contact.active,#menu>#contact.active>.content,#menu>#contact.active>.menu-header{width:100%}.text-image-logos{grid-template-areas:"language-buttons language-buttons" "heading ." "text ." "image ." "logos .";grid-template-rows:none;grid-template-columns:1fr var(--close-button-width);grid-auto-rows:min-content}.text-only-twocols{grid-template-areas:"language-buttons language-buttons" "heading-1 ." "text-1 ." "heading-2 ." "text-2 .";grid-template-rows:none;grid-template-columns:1fr var(--close-button-width);grid-auto-rows:min-content}}
No
$(function () {
// Reset scrollbars
for (let sheetI = 0; sheetI < document.styleSheets.length; ++sheetI) {
let sheet = document.styleSheets[sheetI];
try {
let ruleSet = sheet.rules || sheet.cssRules;
for (let i = 0; i < ruleSet.length; ++i) {
let rule = ruleSet[i];
if (/scrollbar/.test(rule.selectorText)) {
sheet.deleteRule(i--);
}
}
} catch (e) {
console.warn("Can't read the css rules of: " + sheet.href, e);
}
};
// Make side menu interactive
const menu_items = document.querySelectorAll("#menu .menu-container");
const close_buttons = document.querySelectorAll(".close-button");
let toggleItem = function (clicked_container) {
if (!clicked_container.classList.contains("active")) {
menu_items.forEach(function (menu_item) {
menu_item.classList.remove("active");
});
clicked_container.classList.add("active");
} else {
clicked_container.classList.remove("active");
}
}
menu_items.forEach(function (elem) {
let menu_header_element = elem.children[1];
menu_header_element.addEventListener("click", function () {
toggleItem(elem)
});
});
close_buttons.forEach(function (elem) {
let parent_container = elem.parentElement.parentElement.parentElement;
elem.addEventListener("click", function () {
toggleItem(parent_container)
});
})
// Enable language switcher
const langs = new Set(["english", "farsi", "french"])
// Returns all other members of set
const difference = function (item, set) {
let _difference = new Set(set)
_difference.delete(item);
return _difference
}
// Language switch handler
let switchToLanguage = function (lang) {
let other_langs = difference(lang, langs);
$(`.${lang}`).show();
$(`button[lang=${lang}]`).addClass("active");
for (let elem of other_langs) {
$(`.${elem}`).hide();
$(`button[lang=${elem}]`).removeClass("active");
}
}
// Attach to buttons
for (let elem of langs) {
$(`button[lang=${elem}]`).click(elem, function () {
switchToLanguage(elem);
});
}
// On page load, use English
switchToLanguage("english");
})
Standalone web page
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Almarai&display=swap" rel="stylesheet">
<link rel="icon" type="image/x-icon" href="https://heurist.huma-num.fr/heurist/?db=MapOfTheAbsentees&file=efac167190c6f736fa3f2b93223ea02aaaa9d5d1">
1