add mastodon timeline

This commit is contained in:
2025-04-08 08:22:02 +04:00
parent 4564778567
commit eaa95838c6
5 changed files with 63 additions and 13 deletions
+1
View File
File diff suppressed because one or more lines are too long
+24 -7
View File
@@ -187,16 +187,32 @@ img {
} }
/* Hero Section */ /* Hero Section */
.hero-mastodon-wrapper {
display: flex;
gap: 20px;
margin-bottom: 30px;
}
.hero { .hero {
position: relative; position: relative;
width: 100%; width: 50%;
height: 400px; height: 400px;
background-color: #888; background-color: #888;
margin-bottom: 30px;
overflow: hidden; overflow: hidden;
border-radius: 8px; border-radius: 8px;
} }
#mt-container {
width: 50%;
height: 400px;
border-radius: 8px;
}
.mt-body {
height: 100%;
overflow-y: auto;
}
.hero-content { .hero-content {
position: absolute; position: absolute;
top: 0; top: 0;
@@ -572,7 +588,12 @@ img {
display: none; display: none;
} }
.hero { .hero-mastodon-wrapper {
flex-direction: column;
}
.hero, #mt-container {
width: 100%;
height: 300px; height: 300px;
} }
@@ -590,10 +611,6 @@ img {
font-size: 20px; font-size: 20px;
} }
.hero {
height: 250px;
}
.hero-logo { .hero-logo {
font-size: 36px; font-size: 36px;
} }
+13
View File
@@ -6,6 +6,7 @@
<title>Kaubuntu.re - Plateforme Multimédia</title> <title>Kaubuntu.re - Plateforme Multimédia</title>
<link rel="stylesheet" href="css/styles.css"> <link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<link rel="stylesheet" href="css/mastodon-timeline.min.css">
</head> </head>
<body> <body>
<!-- Sidebar de navigation --> <!-- Sidebar de navigation -->
@@ -88,6 +89,8 @@
</div> </div>
</div> </div>
<!-- Hero and Mastodon container -->
<div class="hero-mastodon-wrapper">
<!-- Hero Banner --> <!-- Hero Banner -->
<div class="hero"> <div class="hero">
<div class="hero-content"> <div class="hero-content">
@@ -98,6 +101,14 @@
</div> </div>
</div> </div>
<div id="mt-container" class="mt-container">
<div class="mt-body" role="feed">
<div class="mt-loading-spinner"></div>
</div>
</div>
</div>
<!-- Hashtags en ligne --> <!-- Hashtags en ligne -->
<div class="tags-section"> <div class="tags-section">
<a href="#" class="tag">#Justice</a> <a href="#" class="tag">#Justice</a>
@@ -444,5 +455,7 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="js/main.js"></script> <script src="js/main.js"></script>
<script src="js/mastodon-timeline.umd.js"></script>
<script src="js/mastodon-config.js"></script>
</body> </body>
</html> </html>
+10
View File
@@ -0,0 +1,10 @@
window.addEventListener("load", () => {
const myTimeline = new MastodonTimeline.Init({
instanceUrl: 'https://mamot.fr',
dateFormatLocale: 'fr-FR',
btnSeeMore: "Vori plus de post",
btnReload: "Rafraichir",
maxNbPostFetch: '10',
maxNbPostShow: '10'
});
});
File diff suppressed because one or more lines are too long