Kennel Linux

[Sofiya]

I feel that the light theme is too light and could, potentially, damage a users eye sight, especially if their laptop screen is fully turned up to 800nits! On the other hand I do tend to think the dark theme is too dark in the domain of modern linux desktops and could potentially make users feel depressed or even suicidal! Therefore I propose a third option, a three-way switch with the middle position labelled 'Not so light, but also not so dark'! Going forward with this remarkably awe-inspiring production that @Sofiya is providing for the community and quite possibly all of mankind! ...

@stemsee
And I think clone the repository and write at least a line of code. And a three-position switch with a central position, and we will continue to work.

[geo_c]

I feel that the light theme is too light and could, potentially, damage a users eye sight, especially if their laptop screen is fully turned up to 800nits! On the other hand I do tend to think the dark theme is too dark in the domain of modern linux desktops and could potentially make users feel depressed or even suicidal! Therefore I propose a third option, a three-way switch with the middle position labelled 'Not so light, but also not so dark'! Going forward with this remarkably awe-inspiring production that @Sofiya is providing for the community and quite possibly all of mankind! ...

@stemsee
And I think clone the repository and write at least a line of code. And a three-position switch with a central position, and we will continue to work.

While you two are at it, making the theme switches, can you add a whole lot of java script pop-ups, and annoying terms and conditions choices, and cookie/privacy policy notifications, and cap it off with a set of 15 impossible CAPTCHA puzzles to solve before entering the downloads sections? And it would be nice if every time you hovered over certain areas, giant pop-ups cover the entire screen with tiny cancel buttons hidden in the corners.

That would bring it up to the level of most websites nowadays.

[stemsee]

And it would be nice if every time you hovered over certain areas, giant pop-ups cover the entire screen with tiny cancel buttons hidden in the corners.

That would bring it up to the level of most websites nowadays.

I have no idea what types of websites hide cancel buttons, to force you to watch ads!

[geo_c]

And it would be nice if every time you hovered over certain areas, giant pop-ups cover the entire screen with tiny cancel buttons hidden in the corners.

That would bring it up to the level of most websites nowadays.

I have no idea what types of websites hide cancel buttons, to force you to watch ads!

Since @Sofiya went quiet, she must be working on those 15 impossible captcha puzzles

I hope she knows I was only making a joke.

[Sofiya]

And it would be nice if every time you hovered over certain areas, giant pop-ups cover the entire screen with tiny cancel buttons hidden in the corners.

That would bring it up to the level of most websites nowadays.

I have no idea what types of websites hide cancel buttons, to force you to watch ads!

Since @Sofiya went quiet, she must be working on those 15 impossible captcha puzzles

I hope she knows I was only making a joke.

I write two scripts for dark and light theme
and I can't understand why ( body { } ) doesn't want to override the color. This is stupid ( *.scss ) really incomprehensible. Why not write the color of themes in ( css ) . Or maybe my basic knowledge is not enough to understand this.

dark-theme.css

Code: Select all

/* dark-theme.css */

:root {
    --base-color: #1e1e2e !important;
    --code-background-color: #cdd6f3 !important;
    --border-color: rgba(--text-color, 0.5) !important;
    --overlay-color: #1e1e2e !important;
    --sidebar-background-color: #181825 !important;
    --background-color: #181825 !important;
    --text-color: #cdd6f3 !important;
    --accent-color: #c09bef !important;
}

body {
    background: var(--background-color);
    color: var(--text-color);
}

body a {
    color: var(--accent-color);
}

.sidebar .menu {
    font-family: "Jost", sans-serif;
    font-size: 32px;
}

.sidebar li a {
    /* position: relative; */
    color: #cdd6f3;     /* цвет текста в баре */
}

.sidebar .contact-list {
    font-size: 24px;
}
/* цвет текста в баре соц-сети */
.sidebar .contact-list a {
    color: #cdd6f3;    
    text-decoration: none;
}
 /* часть сидебара с кнопками */
.wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #181825;   
    color: #cdd6f3;
}
/* базовый блочный элемент */
div {
    background-color: #181825;   
    /* display: block; */
    /* unicode-bidi: isolate; */
}
/* линия бара */
* {
    scrollbar-color: #a3aac5 #2f3234;   
}
 /* надписи */
p {
    background-color: #181825;   
    /* display: block; */
}
 /* нижний блок */
 html, body, input, textarea, select, button {
    background: #11111b;
    color: #cdd6f3;
    height:auto;
}

.btn {
    display: inline-block;
    padding: 2px 10px 2px 10px;
    border: 1px solid #a6adc8;
    border-radius: 8px;
    background-color: #18182505;
    color: #a6adc8;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    border-color: #a6adc8;
}
.btn:hover {

    transition: 0.5s;
}
.btn:focus {
    background-color: #021635;
    transition: 0.7s
}

a {
    color: #cdd6f3;
}

a:hover, a:focus {
    /* color: var(--accent-color); */
    color: #cba6f7;
    /* text-decoration: underline; */
}

.site-title:hover {
    color: #cba6f7;
    transition: 0.7s;
    text-decoration: underline;          /* dotted , double */
    text-decoration-thickness: 1px;
}

h1, h2, h3, h4, h5, h6 {
    /* font-family: "Fira Sans", sans-serif; */
    font-family: "Inter", sans-serif;
}

/* .icon--github {
    fill: #b4befe;
}

.icon--email {
    fill: #b4befe;
}

.icon--twitter {
    fill: #b4befe;
}
.icon--rss {
    fill: #b4befe;
} */

.highlight pre {
    width: 100%;
    background-color: #1e1e2e;
}

/* .header .container, .footer .container {
   background-color: #181825;
} */

header {
    display: block;
    background-color: #181825;
}

[Sofiya]

And it would be nice if every time you hovered over certain areas, giant pop-ups cover the entire screen with tiny cancel buttons hidden in the corners.

That would bring it up to the level of most websites nowadays.

I have no idea what types of websites hide cancel buttons, to force you to watch ads!

Since @Sofiya went quiet, she must be working on those 15 impossible captcha puzzles

I hope she knows I was only making a joke.

*.js I wrote but only for switching from light to dark theme

Maybe it's possible to write a more beautiful button. WHO knows???

html

Code: Select all

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
     <title>btn-togle</title>
     <link href="/assets/css/light-theme.css" rel="stylesheet" id="theme-link">
  </head>
	 
     <body>
  <button class="btn-toggle">Dark/Light</button>
  <script src="/assets/js/theme.js"></script>
</body>
</html>

theme.js

Code: Select all

// Выбираем кнопку
const btn = document.querySelector(".btn-toggle");
// Выбираем таблицу стилей
const theme = document.querySelector("#theme-link");
// Отслеживаем щелчок по кнопке
btn.addEventListener("click", function() {
    // Если текущий адрес содержит "light-theme.css"
    if (theme.getAttribute("href") == "/assets/css/light-theme.css") {
        // …то переключаемся на "dark-theme.css"
        theme.href = "/assets/css/dark-theme.css";
        // В противном случае…
             // Добавьте следующую строку для записи в память.
     localStorage.setItem("my-theme","dark");
    } else {
        // …переключаемся на "light-theme.css"
        theme.href = "/assets/css/light-theme.css";
             // Добавьте следующую строку для записи в память.
     localStorage.setItem("my-theme",null);
    }    
});

     // Проверяйте локальное хранилище при каждой перезагрузке, чтобы знать, какую тему использовать.
 if (localStorage.getItem("my-theme")==="dark") {
   // Используйте тёмную тему.
   theme.href = "/assets/css/dark-theme.css";
 }
 else {
   // Использовать тему по умолчанию.
   theme.href = "/assets/css/light-theme.css";
 }

[stemsee]

Code: Select all

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
     <title>btn-toggle</title>
     <link href="/assets/css/light-theme.css" rel="stylesheet" id="theme-link">
  </head>
	 
     <body>
  <button class="btn-toggle">🌓️</button>
  <script src="/assets/js/theme.js"></script>
</body>

From pRussia with love! 001

[Sofiya]

[Sofiya]

Kennel Linux

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

Let's sum it up:
I successfully completed the task set before myself. Having learned a lot of interesting things about "html, css, scss, js , ruby ", thereby adding a little more knowledge to my knowledge. You can clone this repository, make changes to it, etc....
Most of the default code has been changed, so if you compare the original you will immediately see the changes

[rockedge]

@Sofiya I like it. Good display of the various design elements

[geo_c]

That looks really good! Easy to navigate.

[stemsee]

Your Sun looks like the universal symbol for 'Settings

xscreenshot-20250320T231816.png (1.22 KiB) Viewed 125 times

'

[Sofiya]

Your Sun looks like the universal symbol for 'Settingsxscreenshot-20250320T231816.png'

File a claim with the font manufacturer https://fontawesome.com/search?ic=free

[Sofiya]

Your Sun looks like the universal symbol for 'Settingsxscreenshot-20250320T231816.png'

File a claim with the font manufacturer https://fontawesome.com/search?ic=free

[stemsee]

Your Sun looks like the universal symbol for 'Settings' screenshot-20250320T231816.png

File a claim with the font manufacturer https://fontawesome.com/search?ic=free

(crickets)!

[Sofiya]

Kennel Linux

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

Necessary additions have been made, the code has been cleaned, and beauty has been added to the main page in the form of a beautiful picture..