<section class="status-list">
    <ul>
        {{ with .Site.GetPage "section" "status" }}
            {{ $sortedPages := sort .Pages "Date" "desc" }}
            {{ $pinned := slice }}
            {{ $regular := slice }}
    
            {{ range $sortedPages }}
                {{ if .Params.pinned }}
                    {{ $pinned = $pinned | append . }}
                {{ else }}
                    {{ $regular = $regular | append . }}
                {{ end }}
            {{ end }}
    
            {{ range $pinned | append $regular }}
                <li class="sticker">
                    <div>
                        <a href="{{ .RelPermalink }}">   {{ if .Params.pinned }}<i class="fa-solid fa-thumbtack"></i> {{ end }} {{ .Title }}</a>
                        <span class="post-meta">
                            {{ .Date.Format "2006/01/02" }}
                        </span>
                    </div>
                    <p> {{ .Content }} </p>
                </li> 
            {{ end }}
        {{ else }}
            <li>No status updates yet.</li>
        {{ end }}
    </ul>    
</section>

// homepage status window
  .homepage-status {
    width: 80%; /* Adjust the width as needed */
    max-width: 800px; /* Maximum width */
    min-height: 400px; /* Minimum height for the window */
    margin: 30px auto; /* Center the window */
    background-color: $--bg-color; /* Light gray background for the window */
    border: 3px solid $--primary-text-color; /* Border for the window */
    border-radius: 5px; /* Rounded corners */
    position: relative; /* Needed for the header positioning */
    box-shadow: -4px 4px 0 $--secondary-text-color;
    overflow: hidden;
    max-height: 580px;
    padding: 0;
}


.window-header {
  border-bottom: solid 5px $--primary-text-color;
  padding: 10px 15px; /* Padding around the header */
  display: flex; /* Flexbox to align header contents */
  justify-content: space-between; /* Space between title and close button */
  align-items: center; /* Vertically center the contents */
}

.close-btn:hover {
    color: $--highlight; /* Change color when hovering */
}

/* Content area with scroll */
.homepage-status > .status-content {
max-height: 500px;
@media (max-width: $--mobile-breakpoint) {
  max-height: 300px; /* Limit the height of the content area */
}
overflow-y: auto; /* Enable vertical scroll if content overflows */
}

/* Scrollbar Styling */
.homepage-status > .status-content::-webkit-scrollbar {
width: 15px; /* Width of the vertical scrollbar */
}

.homepage-status > .status-content::-webkit-scrollbar-thumb {
background: $--highlight; /* Darker color for the scrollbar thumb */
border-radius: 5px; /* Rounded corners for the thumb */
}

.homepage-status > .status-content::-webkit-scrollbar-track {
border: 3px solid $--secondary-text-color; /* Light background for the scrollbar track */
border-radius: 5px; /* Rounded corners for the track */
}

function closeWindow() {
    document.querySelector('.homepage-status').style.display = 'none';
}

<ul>
    <li><span>
    <i class="fa-solid fa-hashtag"></i> 
    
    {{ $tagData := dict }} <!-- Store tag counts and latest update dates -->
    
    <!-- Iterate through all pages to collect tag information -->
    {{ range site.RegularPages }}
        {{ $pageDate := .Date }} <!-- Get the page's date -->
        {{ with .Params.tags }}
            {{ range . }}
                {{ if not (index $tagData .) }}
                    {{ $tagData = merge $tagData (dict . (dict "count" 1 "latest" $pageDate)) }}
                {{ else }}
                    {{ $existing := index $tagData . }}
                    {{ $newCount := add (index $existing "count") 1 }}
                    {{ $newLatest := cond (gt $pageDate (index $existing "latest")) $pageDate (index $existing "latest") }}
                    {{ $tagData = merge $tagData (dict . (dict "count" $newCount "latest" $newLatest)) }}
                {{ end }}
            {{ end }}
        {{ end }}
    {{ end }}
    
    <!-- Convert dictionary to a slice for sorting -->
    {{ $sortedTags := slice }}
    {{ range $tag, $info := $tagData }}
        {{ $sortedTags = $sortedTags | append (dict "tag" $tag "count" (index $info "count") "latest" (index $info "latest")) }}
    {{ end }}
    
    <!-- Sort by latest post date in descending order -->
    {{ $sortedTags = sort $sortedTags "latest" "desc" }}
    
    {{ $limit_num := .limit }}
    {{ $limit_exceeded := false }}
    
    <!-- Limit the number of displayed tags -->
    {{ if and $limit_num (gt (len $sortedTags) $limit_num) }}
        {{ $limit_exceeded = true }}
        {{ $sortedTags = first $limit_num $sortedTags }}
    {{ end }}
    
    <!-- Display the sorted tags -->
    {{ range $sortedTags }}
        <span class="post-tag">
            <a href="/tags/{{ .tag | urlize }}">{{ .tag }}</a> ({{ .count }})/
        </span>
    {{ end }}
    {{ if $limit_exceeded }}
        ...
    </span></li>
    
    <li>
            <a href="{{ .show_more_url }}">{{ .show_more_text }}</a>
    </li>
    {{ end }}
    </ul>