Kennel Linux

Sofiya · Post by **Sofiya** » Tue Feb 18, 2025 11:29 pm

Kennel Linux

___________________________________

Just for a test without any fuss

Sofiya · Post by **Sofiya** » Wed Feb 19, 2025 1:56 am

Kennel Linux

KL-linux https://sofijacom.github.io/

Sofiya · Post by **Sofiya** » Wed Feb 19, 2025 4:12 am

Kennel Linux

Sofiya · Post by **Sofiya** » Wed Feb 19, 2025 1:34 pm

Kennel Linux

KL-linux https://sofijacom.github.io/

many different ways to customize, settled on this style with a choice of 6 color styles

all themes are good, but you need to choose one for yourself

Sofiya · Post by **Sofiya** » Wed Feb 19, 2025 1:39 pm

Kennel Linux

KL-linux https://sofijacom.github.io/

Sofiya · Post by **Sofiya** » Wed Feb 19, 2025 11:05 pm

Kennel Linux

KL-linux https://sofijacom.github.io/

I thought about it and realized that a second page was needed after all.

that's why I created a second page (About)

_____________________________________________________
Something needs to be written there, so if anyone wants to, please write a description.
and I'll put it there, or clone the repository and add the description yourself

IdfbAn · Post by **IdfbAn** » Thu Feb 20, 2025 10:46 am

I assume this site is just for your KL distros?

Sofiya · Post by **Sofiya** » Thu Feb 20, 2025 7:57 pm

Kennel Linux

KL-linux https://sofijacom.github.io/

In general, don't scold me too much. This is my first time creating a website.

Sofiya · Post by **Sofiya** » Fri Feb 21, 2025 3:48 am

Kennel Linux

an attempt to write my own _macchiato.scss, it seems to be a good theme. A little bit of tweaking and it will be what you need

Post by **fredx181** » Fri Feb 21, 2025 11:48 am

Sofiya wrote: Thu Feb 20, 2025 7:57 pm
Kennel Linux

KL-linux https://sofijacom.github.io/

In general, don't scold me too much. This is my first time creating a website.

I wouldn't dare to think for a second to scold you ! Very nice website !
Direct visible links to the ISO's would be nice though.

Sofiya · Post by **Sofiya** » Fri Feb 21, 2025 1:37 pm

Kennel Linux

KL-linux https://sofijacom.github.io/

I'll leave this version of my theme " _macchiato.scss "

Clone the site - make changes, in general, create guys, everything is in your hands

Sofiya · Post by **Sofiya** » Fri Feb 21, 2025 5:46 pm

fredx181 wrote: Fri Feb 21, 2025 11:48 am
Sofiya wrote: Thu Feb 20, 2025 7:57 pm
Kennel Linux

KL-linux https://sofijacom.github.io/

In general, don't scold me too much. This is my first time creating a website.

I wouldn't dare to think for a second to scold you ! Very nice website !
Direct visible links to the ISO's would be nice though.

Direct visible links to the ISO's would be nice though.

Do you mean like this?

________________________________

I'll make a post below on the main page

Post by **fredx181** » Fri Feb 21, 2025 6:19 pm

Not that I really thought out, just less clicks needed to download an ISO would be nice, perhaps something like:

KLA 64 bit.

- KLA-OT2baseCE Download: (link to)KLA-OT2baseCE-3.1.iso
- KLA-HyprlandCE Download: (link to)KLA-HyprlandCE-1.5.iso
etc....

Sofiya · Post by **Sofiya** » Fri Feb 21, 2025 6:58 pm

fredx181 wrote: Fri Feb 21, 2025 6:19 pm
Not that I really thought out, just less clicks needed to download an ISO would be nice, perhaps something like:

KLA 64 bit.

- KLA-OT2baseCE Download: (link to)KLA-OT2baseCE-3.1.iso
- KLA-HyprlandCE Download: (link to)KLA-HyprlandCE-1.5.iso
etc....

The thing is why I don't want to specify the version, because it can change and I'll have to constantly edit the name

https://sofijacom.github.io/

as long as it stays like this

Sofiya · Post by **Sofiya** » Fri Feb 21, 2025 11:28 pm

Kennel Linux

KL-linux https://sofijacom.github.io/

Does anyone know why ( description: ) does not display information?

Sofiya · Post by **Sofiya** » Mon Feb 24, 2025 3:36 pm

Added a clock to the site. I wanted to make it with a border, radius, and background color, but for some reason I can't place them in the right place. I don't know HTML very well at all. If anyone knows the coding for moving left, right, and centered, I'd be grateful!

KL-linux https://sofijacom.github.io/

Sofiya · Post by **Sofiya** » Mon Feb 24, 2025 3:47 pm

Here's what I wrote, how can I enter the position of the clock on the page?

clock.html

Code: Select all

---
layout: default
---

<!DOCTYPE html>
<html lang="en">

<!-- 01 -->
 
        <script>
            function getRandom(number) {
                return Math.round(number * Math.random());
            };

            function getRandomColor() {

                var red = getRandom(255);
                var green = getRandom(255);
                var blue = getRandom(255);

                var color = "rgb(" + red + "," + green + "," + blue + ")";

                return color;
            };

            function clock33() {

                var date = new Date();
                var hours = date.getHours();
                var minutes = date.getMinutes();
                var seconds = date.getSeconds();

                var clockHours = document.getElementById("clockHours");
                var clockMinutes = document.getElementById("clockMinutes");
                var clockSeconds = document.getElementById("clockSeconds");

                if (hours < 10)
                    hours = "0" + hours;
                if (minutes < 10)
                    minutes = "0" + minutes;
                if (seconds < 10)
                    seconds = "0" + seconds;

                clockHours.innerHTML = hours;
                clockMinutes.innerHTML = minutes;
                clockSeconds.innerHTML = seconds;

                clockHours.style.color = getRandomColor();
                clockMinutes.style.color = getRandomColor();
                clockSeconds.style.color = getRandomColor();

                setTimeout("clock33()", 1000);
            };
        </script>

        <div class="center" style="width: 250px;">
            <div id="clock33" class="bg-3" style="font-weight: normal; text-align: center; font-size: 40px; margin-bottom: 15px; border: 2px solid #ff00ff;  border-radius: 40px; background: #3b424a; color: grey;">

                <span id="clockHours"></span> : <span id="clockMinutes"></span> : <span id="clockSeconds"></span>

            </div>
</div>
<script>
        clock33();
</script>


</body>

</html>

Post by **rockedge** » Mon Feb 24, 2025 5:47 pm

@Sofiya Adding in some CSS something like this?

Code: Select all

<style>
.center {
  position: relative;
  top: 420px;
  left: 430px;
}	

</style>[

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<!-- 01 -->
 
        <script>
            function getRandom(number) {
                return Math.round(number * Math.random());
            };

            function getRandomColor() {

                var red = getRandom(255);
                var green = getRandom(255);
                var blue = getRandom(255);

                var color = "rgb(" + red + "," + green + "," + blue + ")";

                return color;
            };

            function clock33() {

                var date = new Date();
                var hours = date.getHours();
                var minutes = date.getMinutes();
                var seconds = date.getSeconds();
                var clockHours = document.getElementById("clockHours");
                var clockMinutes = document.getElementById("clockMinutes");
                var clockSeconds = document.getElementById("clockSeconds");

                if (hours < 10)
                    hours = "0" + hours;
                if (minutes < 10)
                    minutes = "0" + minutes;
                if (seconds < 10)
                    seconds = "0" + seconds;

                clockHours.innerHTML = hours;
                clockMinutes.innerHTML = minutes;
                clockSeconds.innerHTML = seconds;

                clockHours.style.color = getRandomColor();
                clockMinutes.style.color = getRandomColor();
                clockSeconds.style.color = getRandomColor();

                setTimeout("clock33()", 1000);
            };
        </script>
<style>
.center {
  position: relative;
  top: 420px;
  left: 430px;
}	

</style>

</head>

<body>
        <div class="center" style="width: 250px;">
            <div id="clock33" class="bg-3" style="font-weight: normal; text-align: center; font-size: 40px; margin-bottom: 15px; border: 2px solid #ff00ff;  border-radius: 40px; background: #3b424a; color: grey;">

                <span id="clockHours"></span> : <span id="clockMinutes"></span> : <span id="clockSeconds"></span>

            </div>
</div>
<script>
        clock33();
</script>

</body>
</html>

: Screenshot_2025-02-24_12-44-50.jpg (11.98 KiB) Viewed 4780 times

Sofiya · Post by **Sofiya** » Mon Feb 24, 2025 5:55 pm

rockedge wrote: Mon Feb 24, 2025 5:47 pm

@Sofiya Adding in some CSS something like this?

Code: Select all

<style>
.center {
  position: relative;
  top: 420px;
  left: 430px;
}	

</style>[

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<!-- 01 -->
 
        <script>
            function getRandom(number) {
                return Math.round(number * Math.random());
            };

            function getRandomColor() {

                var red = getRandom(255);
                var green = getRandom(255);
                var blue = getRandom(255);

                var color = "rgb(" + red + "," + green + "," + blue + ")";

                return color;
            };

            function clock33() {

                var date = new Date();
                var hours = date.getHours();
                var minutes = date.getMinutes();
                var seconds = date.getSeconds();
                var clockHours = document.getElementById("clockHours");
                var clockMinutes = document.getElementById("clockMinutes");
                var clockSeconds = document.getElementById("clockSeconds");

                if (hours < 10)
                    hours = "0" + hours;
                if (minutes < 10)
                    minutes = "0" + minutes;
                if (seconds < 10)
                    seconds = "0" + seconds;

                clockHours.innerHTML = hours;
                clockMinutes.innerHTML = minutes;
                clockSeconds.innerHTML = seconds;

                clockHours.style.color = getRandomColor();
                clockMinutes.style.color = getRandomColor();
                clockSeconds.style.color = getRandomColor();

                setTimeout("clock33()", 1000);
            };
        </script>
<style>
.center {
  position: relative;
  top: 420px;
  left: 430px;
}	

</style>

</head>

<body>
        <div class="center" style="width: 250px;">
            <div id="clock33" class="bg-3" style="font-weight: normal; text-align: center; font-size: 40px; margin-bottom: 15px; border: 2px solid #ff00ff;  border-radius: 40px; background: #3b424a; color: grey;">

                <span id="clockHours"></span> : <span id="clockMinutes"></span> : <span id="clockSeconds"></span>

            </div>
</div>
<script>
        clock33();
</script>

</body>
</html>

Screenshot_2025-02-24_12-44-50.jpg

WOW! I just need to figure this out because this is my first time writing a website.

Thank you very much! I will try it

Sofiya · Post by **Sofiya** » Mon Feb 24, 2025 11:10 pm

Kennel Linux

KL-linux https://sofijacom.github.io/

Thank you very much for your help @rockedge

with "css" he doesn't see it, I placed everything in html

I just don't have "css" I have "style.scss"

home.html

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
   <title>.</title>
 <style>
  .center {
   position: relative;
   top: 10px;
   left: 60px;
}
 </style>

<script> 
        function getRandom(number) {
        return Math.round(number * Math.random());
        };

        function getRandomColor() {

        var red = getRandom(255);
        var green = getRandom(255);
        var blue = getRandom(255);

        var color = "rgb(" + red + "," + green + "," + blue + ")";

        return color;
 };

        function clock33() {

        var date = new Date();
        var hours = date.getHours();
        var minutes = date.getMinutes();
        var seconds = date.getSeconds();

        var clockHours = document.getElementById("clockHours");
        var clockMinutes = document.getElementById("clockMinutes");
        var clockSeconds = document.getElementById("clockSeconds");

        if (hours < 10)
                hours = "0" + hours;
        if (minutes < 10)
                minutes = "0" + minutes;
                if (seconds < 10)
                seconds = "0" + seconds;

        clockHours.innerHTML = hours;
        clockMinutes.innerHTML = minutes;
        clockSeconds.innerHTML = seconds;

        clockHours.style.color = getRandomColor();
        clockMinutes.style.color = getRandomColor();
        clockSeconds.style.color = getRandomColor();

        setTimeout("clock33()", 1000);
};
</script>
              
<div class="center" style="width: 250px;">
<div id="clock33" class="bg-3" style="font-weight: normal; font-family:'digital-clock-font'; text-align: center; font-size: 40px; margin-bottom: 10px; border: 1px solid #875eb0; border-radius: 40px; background: #23273a; color: grey;">

        <span id="clockHours"></span> : <span id="clockMinutes"></span> : <span id="clockSeconds"></span>
        
        </div>
</div>
<script>
        clock33();
</script>

Sofiya · Post by **Sofiya** » Tue Feb 25, 2025 4:09 pm

My personal blog!

Building My Aesthetic Personal Site
with a custom Catppuccin-dark Jekyll theme

Jekyll https://jekyllrb.com/

Sofiya · Post by **Sofiya** » Tue Feb 25, 2025 4:21 pm

My personal blog!

Building My Aesthetic Personal Site
with a custom Catppuccin-light Jekyll theme

Sofiya · Post by **Sofiya** » Thu Feb 27, 2025 2:17 am

Kennel Linux - Calendar

I finally found how to enable (*.CSS)

is used: HTML , CSS , JS

We need to think about how to make it more beautiful.

Sofiya · Post by **Sofiya** » Thu Feb 27, 2025 3:48 am

Sofiya · Post by **Sofiya** » Thu Feb 27, 2025 6:37 am

Kennel Linux

everything turned out as planned!

KL-linux https://sofijacom.github.io/

Sofiya · Post by **Sofiya** » Thu Feb 27, 2025 8:26 pm

Kennel Linux

everything turned out as planned!

KL-linux https://sofijacom.github.io/

improved font (replaced) from Google to Roboto

Sofiya · Post by **Sofiya** » Thu Feb 27, 2025 9:57 pm

Calendar

If anyone wants a calendar, please!
I combined 3 codes into one for testing and customization, if necessary, separate them, I signed where which (HTML, CSS, JS)

Code: Select all

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <title>Calendar</title>
  </head>
  
  <div class="calendar"></div>   <!--  HTML -->
  
 <style>
  /* CSS */
  @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@100;200;300;400;500;600;700&display=swap');
:root {
    --calendar-bg-color: #262829;
    --calendar-font-color: #FFF;
    --weekdays-border-bottom-color: #404040;
    --calendar-date-hover-color: #505050;
    --calendar-current-date-color: #1b1f21;
    --calendar-today-color: linear-gradient(to bottom, #03a9f4, #2196f3);
    --calendar-today-innerborder-color: transparent;
    --calendar-nextprev-bg-color: transparent;
    --next-prev-arrow-color : #FFF;
    --calendar-border-radius: 16px;
    --calendar-prevnext-date-color: #484848
}

* {
    padding: 0;
    margin: 0;
}

.calendar {
    font-family: 'IBM Plex Sans', sans-serif;
    position: relative;
    max-width: 400px; /*change as per your design need */
    min-width: 320px;
    background: var(--calendar-bg-color);
    color: var(--calendar-font-color);
   /* margin: 20px auto; */
    margin: 20px;
    box-sizing: border-box;
    overflow: hidden;
    font-weight: normal;
    border-radius: var(--calendar-border-radius);
}

.calendar-inner {
    padding: 10px 10px;
}

.calendar .calendar-inner .calendar-body {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
}

.calendar .calendar-inner .calendar-body div {
    padding: 4px;
    min-height: 30px;
    line-height: 30px;
    border: 1px solid transparent;
    margin: 10px 2px 0px;
}

.calendar .calendar-inner .calendar-body div:nth-child(-n+7) {
    border: 1px solid transparent;
    border-bottom: 1px solid var(--weekdays-border-bottom-color);
}

.calendar .calendar-inner .calendar-body div:nth-child(-n+7):hover {
    border: 1px solid transparent;
    border-bottom: 1px solid var(--weekdays-border-bottom-color);
}

.calendar .calendar-inner .calendar-body div>a {
    color: var(--calendar-font-color);
    text-decoration: none;
    display: flex;
    justify-content: center;
}

.calendar .calendar-inner .calendar-body div:hover {
    border: 1px solid var(--calendar-date-hover-color);
    border-radius: 4px;
}

.calendar .calendar-inner .calendar-body div.empty-dates:hover {
    border: 1px solid transparent;
}

.calendar .calendar-inner .calendar-controls {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.calendar .calendar-inner .calendar-today-date {
    display: grid;
    text-align: center;
    cursor: pointer;
    margin: 3px 0px;
    background: var(--calendar-current-date-color);
    padding: 8px 0px;
    border-radius: 10px;
    width: 80%;
    margin: auto;
}

.calendar .calendar-inner .calendar-controls .calendar-year-month {
    display: flex;
    min-width: 100px;
    justify-content: space-evenly;
    align-items: center;
}

.calendar .calendar-inner .calendar-controls .calendar-next {
    text-align: right;
}

.calendar .calendar-inner .calendar-controls .calendar-year-month .calendar-year-label,
.calendar .calendar-inner .calendar-controls .calendar-year-month .calendar-month-label {
    font-weight: 500;
    font-size: 20px;
}

.calendar .calendar-inner .calendar-body .calendar-today {
    background: var(--calendar-today-color);
    border-radius: 4px;
}

.calendar .calendar-inner .calendar-body .calendar-today:hover {
    border: 1px solid transparent;
}

.calendar .calendar-inner .calendar-body .calendar-today a {
    outline: 2px solid var(--calendar-today-innerborder-color);
}

.calendar .calendar-inner .calendar-controls .calendar-next a,
.calendar .calendar-inner .calendar-controls .calendar-prev a {
    color: var(--calendar-font-color);
    font-family: arial, consolas, sans-serif;
    font-size: 26px;
    text-decoration: none;
    padding: 4px 12px;
    display: inline-block;
    background: var(--calendar-nextprev-bg-color);
    margin: 10px 0 10px 0;
}

.calendar .calendar-inner .calendar-controls .calendar-next a svg,
.calendar .calendar-inner .calendar-controls .calendar-prev a svg {
    height: 20px;
    width: 20px;
}

.calendar .calendar-inner .calendar-controls .calendar-next a svg path,
.calendar .calendar-inner .calendar-controls .calendar-prev a svg path{
    fill: var(--next-prev-arrow-color);
}

.calendar .calendar-inner .calendar-body .prev-dates,
.calendar .calendar-inner .calendar-body .next-dates {
    color: var(--calendar-prevnext-date-color);
}

.calendar .calendar-inner .calendar-body .prev-dates:hover,
.calendar .calendar-inner .calendar-body .next-dates:hover {
  border: 1px solid transparent;
  pointer-events: none;
}
 </style>

<!--  <script>  JS -->

 <script>
function CalendarControl() {
    const calendar = new Date();
    const calendarControl = {
      localDate: new Date(),
      prevMonthLastDate: null,
      calWeekDays: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
      calMonthName: [
        "Jan",
        "Feb",
        "Mar",
        "Apr",
        "May",
        "Jun",
        "Jul",
        "Aug",
        "Sep",
        "Oct",
        "Nov",
        "Dec"
      ],
      daysInMonth: function (month, year) {
        return new Date(year, month, 0).getDate();
      },
      firstDay: function () {
        return new Date(calendar.getFullYear(), calendar.getMonth(), 1);
      },
      lastDay: function () {
        return new Date(calendar.getFullYear(), calendar.getMonth() + 1, 0);
      },
      firstDayNumber: function () {
        return calendarControl.firstDay().getDay() + 1;
      },
      lastDayNumber: function () {
        return calendarControl.lastDay().getDay() + 1;
      },
      getPreviousMonthLastDate: function () {
        let lastDate = new Date(
          calendar.getFullYear(),
          calendar.getMonth(),
          0
        ).getDate();
        return lastDate;
      },
      navigateToPreviousMonth: function () {
        calendar.setMonth(calendar.getMonth() - 1);
        calendarControl.attachEventsOnNextPrev();
      },
      navigateToNextMonth: function () {
        calendar.setMonth(calendar.getMonth() + 1);
        calendarControl.attachEventsOnNextPrev();
      },
      navigateToCurrentMonth: function () {
        let currentMonth = calendarControl.localDate.getMonth();
        let currentYear = calendarControl.localDate.getFullYear();
        calendar.setMonth(currentMonth);
        calendar.setYear(currentYear);
        calendarControl.attachEventsOnNextPrev();
      },
      displayYear: function () {
        let yearLabel = document.querySelector(".calendar .calendar-year-label");
        yearLabel.innerHTML = calendar.getFullYear();
      },
      displayMonth: function () {
        let monthLabel = document.querySelector(
          ".calendar .calendar-month-label"
        );
        monthLabel.innerHTML = calendarControl.calMonthName[calendar.getMonth()];
      },
      selectDate: function (e) {
        console.log(
          `${e.target.textContent} ${
            calendarControl.calMonthName[calendar.getMonth()]
          } ${calendar.getFullYear()}`
        );
      },
      plotSelectors: function () {
        document.querySelector(
          ".calendar"
        ).innerHTML += `<div class="calendar-inner"><div class="calendar-controls">
          <div class="calendar-prev"><a href="#"><svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 128 128"><path fill="#666" d="M88.2 3.8L35.8 56.23 28 64l7.8 7.78 52.4 52.4 9.78-7.76L45.58 64l52.4-52.4z"/></svg></a></div>
          <div class="calendar-year-month">
          <div class="calendar-month-label"></div>
          <div>-</div>
          <div class="calendar-year-label"></div>
          </div>
          <div class="calendar-next"><a href="#"><svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 128 128"><path fill="#666" d="M38.8 124.2l52.4-52.42L99 64l-7.77-7.78-52.4-52.4-9.8 7.77L81.44 64 29 116.42z"/></svg></a></div>
          </div>
          <div class="calendar-today-date">Today:
            ${calendarControl.calWeekDays[calendarControl.localDate.getDay()]},
            ${calendarControl.localDate.getDate()},
            ${calendarControl.calMonthName[calendarControl.localDate.getMonth()]}
            ${calendarControl.localDate.getFullYear()}
          </div>
          <div class="calendar-body"></div></div>`;
      },
      plotDayNames: function () {
        for (let i = 0; i < calendarControl.calWeekDays.length; i++) {
          document.querySelector(
            ".calendar .calendar-body"
          ).innerHTML += `<div>${calendarControl.calWeekDays[i]}</div>`;
        }
      },
      plotDates: function () {
        document.querySelector(".calendar .calendar-body").innerHTML = "";
        calendarControl.plotDayNames();
        calendarControl.displayMonth();
        calendarControl.displayYear();
        let count = 1;
        let prevDateCount = 0;

        calendarControl.prevMonthLastDate = calendarControl.getPreviousMonthLastDate();
        let prevMonthDatesArray = [];
        let calendarDays = calendarControl.daysInMonth(
          calendar.getMonth() + 1,
          calendar.getFullYear()
        );
        // dates of current month
        for (let i = 1; i < calendarDays; i++) {
          if (i < calendarControl.firstDayNumber()) {
            prevDateCount += 1;
            document.querySelector(
              ".calendar .calendar-body"
            ).innerHTML += `<div class="prev-dates"></div>`;
            prevMonthDatesArray.push(calendarControl.prevMonthLastDate--);
          } else {
            document.querySelector(
              ".calendar .calendar-body"
            ).innerHTML += `<div class="number-item" data-num=${count}><a class="dateNumber" href="#">${count++}</a></div>`;
          }
        }
        //remaining dates after month dates
        for (let j = 0; j < prevDateCount + 1; j++) {
          document.querySelector(
            ".calendar .calendar-body"
          ).innerHTML += `<div class="number-item" data-num=${count}><a class="dateNumber" href="#">${count++}</a></div>`;
        }
        calendarControl.highlightToday();
        calendarControl.plotPrevMonthDates(prevMonthDatesArray);
        calendarControl.plotNextMonthDates();
      },
      attachEvents: function () {
        let prevBtn = document.querySelector(".calendar .calendar-prev a");
        let nextBtn = document.querySelector(".calendar .calendar-next a");
        let todayDate = document.querySelector(".calendar .calendar-today-date");
        let dateNumber = document.querySelectorAll(".calendar .dateNumber");
        prevBtn.addEventListener(
          "click",
          calendarControl.navigateToPreviousMonth
        );
        nextBtn.addEventListener("click", calendarControl.navigateToNextMonth);
        todayDate.addEventListener(
          "click",
          calendarControl.navigateToCurrentMonth
        );
        for (var i = 0; i < dateNumber.length; i++) {
            dateNumber[i].addEventListener(
              "click",
              calendarControl.selectDate,
              false
            );
        }
      },
      highlightToday: function () {
        let currentMonth = calendarControl.localDate.getMonth() + 1;
        let changedMonth = calendar.getMonth() + 1;
        let currentYear = calendarControl.localDate.getFullYear();
        let changedYear = calendar.getFullYear();
        if (
          currentYear === changedYear &&
          currentMonth === changedMonth &&
          document.querySelectorAll(".number-item")
        ) {
          document
            .querySelectorAll(".number-item")
            [calendar.getDate() - 1].classList.add("calendar-today");
        }
      },
      plotPrevMonthDates: function(dates){
        dates.reverse();
        for(let i=0;i<dates.length;i++) {
            if(document.querySelectorAll(".prev-dates")) {
                document.querySelectorAll(".prev-dates")[i].textContent = dates[i];
            }
        }
      },
      plotNextMonthDates: function(){
       let childElemCount = document.querySelector('.calendar-body').childElementCount;
       //7 lines
       if(childElemCount > 42 ) {
           let diff = 49 - childElemCount;
           calendarControl.loopThroughNextDays(diff);
       }

       //6 lines
       if(childElemCount > 35 && childElemCount <= 42 ) {
        let diff = 42 - childElemCount;
        calendarControl.loopThroughNextDays(42 - childElemCount);
       }

      },
      loopThroughNextDays: function(count) {
        if(count > 0) {
            for(let i=1;i<=count;i++) {
                document.querySelector('.calendar-body').innerHTML += `<div class="next-dates">${i}</div>`;
            }
        }
      },
      attachEventsOnNextPrev: function () {
        calendarControl.plotDates();
        calendarControl.attachEvents();
      },
      init: function () {
        calendarControl.plotSelectors();
        calendarControl.plotDates();
        calendarControl.attachEvents();
      }
    };
    calendarControl.init();
  }

  const calendarControl = new CalendarControl();
</script>

  </body>
</html>

Sofiya · Post by **Sofiya** » Thu Feb 27, 2025 11:46 pm

Experiment with adding a background image from a website

add to css

Code: Select all

body {
  position: relative;
 /* justify-content: center; */
  align-items: center;
  top: 10px;
  left: 10px;
  display: flex;
  height: 100vh;
  background: url("https://www.shutterstock.com/shutterstock/photos/2187372715/display_1500/stock-vector-abstract-green-blue-wave-light-effect-in-perspective-vector-illustration-magic-luminous-azure-glow-2187372715.jpg") no-repeat center / cover;
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: inherit;
    filter: blur(10px);
  }
}

Sofiya · Post by **Sofiya** » Fri Feb 28, 2025 6:56 pm

Kennel Linux

Sofiya · Post by **Sofiya** » Sat Mar 01, 2025 5:22 am

Kennel Linux

Reduced the width and font of the sidebar.it's too bulky by default

KL-linux https://sofijacom.github.io/

Puppy Linux Discussion Forum

Kennel Linux

Kennel Linux

Re: Kennel Linux

Re: Kennel Linux

Re: Kennel Linux

Re: Kennel Linux

Re: Kennel Linux

Re: Kennel Linux

Re: Kennel Linux

Re: Kennel Linux

Re: Kennel Linux

Re: Kennel Linux

Re: Kennel Linux

Re: Kennel Linux

Re: Kennel Linux

Re: Kennel Linux

Re: Kennel Linux

Re: Kennel Linux

Re: Kennel Linux

Re: Kennel Linux

Re: Kennel Linux

Re: Kennel Linux

Re: Kennel Linux

Re: Kennel Linux

Re: Kennel Linux

Re: Kennel Linux

Re: Kennel Linux

Re: Kennel Linux

Re: Kennel Linux

Re: Kennel Linux

Re: Kennel Linux