Puppy Linux Discussion Forum

stemsee wrote: Mon Mar 17, 2025 2:05 pm

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.

Sofiya wrote: Mon Mar 17, 2025 2:34 pm

stemsee wrote: Mon Mar 17, 2025 2:05 pm

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.

geo_c wrote: Tue Mar 18, 2025 12:47 am

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!

stemsee wrote: Tue Mar 18, 2025 3:36 am

geo_c wrote: Tue Mar 18, 2025 12:47 am

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.

geo_c wrote: Wed Mar 19, 2025 7:21 pm

stemsee wrote: Tue Mar 18, 2025 3:36 am

geo_c wrote: Tue Mar 18, 2025 12:47 am

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

/* By Sofiya */

/* dark-theme.css */
/* @import url(' '); */

:root {
    --base-color: #1e1e2e;
    --code-background-color: #cdd6f3;
    --border-color: #cdd6f3;
    --overlay-color: #cdd6f3;
    --sidebar-background-color: #181825;
    --background-color: #181825;
    --text-color: #cdd6f3;
    --accent-color: #c09bef;
}

body {
    background: #181825f7 !important;
    color: #cdd6f3 !important;
}

a {
  /* color: #4c4f69 !important; */
    align-items: normal !important;
}

/* text-decoration: underline; */
a:hover, a:focus {
    color: #cba6f7 !important;  
}

/* &:hover {
    color: shade(#c09bef, 25%) !important;
} */

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

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

.sidebar .contact-list {
    font-size: 24px;
}

/* цвет текста в баре соц-сети */
.sidebar .contact-list a {
    display: block;
    color: #cdd6f3;
    text-decoration: none;
}

.sidebar-toggle-wrapper {
    background-color: #181825 !important;
}

 /* часть сидебара с кнопками */
.wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #181825 !important;
    color: #cdd6f3;
}

/* линия бара */
* {
    scrollbar-color: #a3aac5 #2f3234 !important;
}

/* надписи */
p {
    background-color: #18182500 !important;
    display: block;
}

/* кнопка переключения тем */
.btn-toggle {
    background: #18182505;
    color: #cdd6f3;
    height: auto;
    display: inline-block;
    padding: 2px 10px 2px 10px;
    border: 1px solid #a6adc8;
    border-radius: 8px;
    margin-right: 10px;
}

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

 .btn:hover {
    background-color: #26074b !important;
    transition: 0.5s;
}

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

/* .btn:active {
    background-color: #021635 !important;
    transition: 0.5s;
} */

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

.site-title {
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-align: center;
    -webkit-box-align: center;
    min-height: 50px;
    color: #4c4f69 !important;
    text-decoration: none;
    line-height: normal !important;
}
.sub-title {
    color: #8838ef !important;
    font-size: 12px;
    font-weight: normal;
  }

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

 .icon--github {
    fill: var(--base-color) !important;
}

.icon--email {
    fill: var(--base-color) !important;
}

.icon--twitter {
    fill: var(--base-color) !important;
}
.icon--rss {
    fill: var(--base-color) !important;
}

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

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

@media screen and (min-width: 1280px) {
    .intro-title {
        font-size: 70px !important;
    }
}

.intro-title {
    margin-bottom: 1rem;
    color: #cdd6f3;
    line-height: 1;
}

.entry:not(:last-child) {
    border-bottom: 1px solid #4c4f69 !important;
}

.taxonomy-section:not(:last-child) {
    border-bottom: solid 1px #4c4f69 !important;
}

.taxonomy-index a {
    border-bottom: 1px solid #797b8f !important;
}

.taxonomy-count {
    color: #797b8f !important;
}

.back-to-top {
    display: block;
    color: #4c4f69 !important;
    font-size: 0.75em;
    text-transform: uppercase;
    text-align: right;
    text-decoration: none;
}

/* divider line */
&::after {
      position: absolute;
      bottom: 0;
      width: 1.5em;
      height: 1px;
      background-color: #1e1e2e !important;
      content: "";
}

@media screen and (min-width: 1280px) {
    .search-content .search-input {
        padding-left: 15px !important;
        width: 400px;
        height: 50px;
        margin: 0;
        color: #797b8f;
        line-height: 50px;
        background-color: #313244 !important;
        border: 1px solid #797b8f !important;
        border-radius: 30px;
    }
}

::selection {
    background: #8838ef42 !important;
    text-shadow: none;
}

geo_c wrote: Wed Mar 19, 2025 7:21 pm

stemsee wrote: Tue Mar 18, 2025 3:36 am

geo_c wrote: Tue Mar 18, 2025 12:47 am

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

<!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

// Выбираем кнопку
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";
 }

<!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

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.

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

That looks really good! Easy to navigate.

Your Sun looks like the universal symbol for 'Settings

'

stemsee wrote: Thu Mar 20, 2025 11:21 pm

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 wrote: Thu Mar 20, 2025 11:21 pm

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 wrote: Fri Mar 21, 2025 1:49 am

stemsee wrote: Thu Mar 20, 2025 11:21 pm

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)!

Kennel Linux

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

And finally, the cherry on the cake!

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..

Kennel Linux

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

Changed default layout for " title ", added " subtitle " to display second line in title

To be honest, everything is written a bit confusingly. Was it really necessary to make such a fuss in order to display the icon and the name? Of course, I don't know from what point of view the author of this topic looked, which has been untouched for 10 years, I managed to choose this particular topic

maybe of course it could have been written differently, but I see it this way, since I have little experience

I'm just an amateur, this is my hobby!

Now you can write any captions in your own line in "_config.yml"

Kennel Linux

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

@Sofiya

Well I looked, but I couldn't see one!

I did see:

• bezels without diplomas

• polymers like shellac

• and IBM styling from an Electromatic!

But I'll keep on looking, Who knows? Perhaps definitions can recover their ... err ... definitions ... because maybe your definition lacks clarity, or has too much ... IDK!