KolibriOS/kolibrios.org
11
0
Fork 0
Code Issues Pull Requests 1 Projects Releases Activity

feat: css to scss

Browse Source
This commit is contained in:
Gleb Zaharov
2025-08-22 21:44:31 +03:00
parent d5682232b5
commit 6936e2f163
4 changed files with 475 additions and 466 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@@ -19,3 +19,5 @@ docs/_build/
# Our's # Our's
Dockerfile Dockerfile
.env .env
./static/*.css
./static/*.css.map

5
app.py
View File

@@ -1,4 +1,4 @@
from os import path, listdir from os import path, listdir, system
from datetime import date from datetime import date
from configparser import ConfigParser from configparser import ConfigParser
@@ -18,6 +18,9 @@ from flask import (
app = Flask(__name__) app = Flask(__name__)
if app.debug:
system("sass static/style.scss static/style.css")
# ---------- LOCALES FUNCTIONS ----------------------------------------------- # ---------- LOCALES FUNCTIONS -----------------------------------------------

465
static/style.css
View File

@@ -1,465 +0,0 @@
body {
margin: 0;
font-family: "Source Sans Pro", "Open Sans", sans-serif;
background: #e1e2e2 url(img/bg.png) repeat fixed 0 0;
}
#menu {
background: rgba(22, 22, 23, .8);
color: #FFFFFF;
cursor: default;
line-height: 2em;
padding: 0.5em 0;
text-align: center;
text-shadow: 2px 2px 2px #00000063;
top: 0;
left: 0;
width: 100%;
z-index: 9000;
}
#menu > * {
color: #fff;
cursor: pointer;
margin: 0 1em;
text-decoration: none;
transition: color 0.15s ease;
}
#menu a:hover,
#menu a.a-sel {
color: #ffe36a;
}
#menu img {
filter: drop-shadow(2px 2px 2px #00000020);
}
#lang-butt {
background: transparent;
border: none;
}
/* LANG-DROPDOWN */
#lang-dropdown {
position: fixed;
z-index: 9100;
display: none;
opacity: 0;
filter: alpha(opacity=0);
}
#lang-dropdown::before {
content: '';
display: block;
position: absolute;
border: 11px solid #333C;
border-left: 10px solid rgba(255, 255, 255, 0);
border-right: 10px solid rgba(255, 255, 255, 0);
border-top: 0px solid rgba(255, 255, 255, 0);
top: -10px;
left: 50%;
margin-left: -6px;
}
#lang-dropdown > div {
display: block;
margin-left: 4px;
border-radius: 4px;
border: 1px solid #333;
box-shadow: 0 0 5px #000;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
overflow: hidden;
background: #333;
background: #333E;
backdrop-filter: saturate(180%) blur(6px);
}
#lang-dropdown > div a {
display: block;
padding: 0 3em 0 1em;
font-size: 90%;
line-height: 2.5;
border-top: 1px solid rgba(255, 255, 255, 0.06);
border-bottom: 1px solid rgba(0, 0, 0, 0.07);
text-decoration: none;
color: #fff !important;
}
#lang-dropdown > div a:hover {
border-bottom: 1px solid #34312eff;
border-top: 1px solid #4c4c4cff;
background: #444;
background: linear-gradient(328deg, #c20d2c7d, #3928c78a);
}
#lang-dropdown > div a.a-sel {
color: #888 !important;
}
#lang-dropdown > div a.a-sel img {
color: #888 !important;
filter: brightness(0.5);
}
#lang-dropdown > div a img {
display: inline-block;
vertical-align: middle;
margin-right: 10px;
margin-top: -3px;
width: 16px;
height: 11px;
filter: drop-shadow(1px 2px 2px #0003);
}
#lang-dropdown>div a:first-child {
border-top: none;
}
#lang-dropdown>div a:last-child {
border-bottom: none;
}
/* ARTICLE */
#article {
background: rgba(254, 255, 255, 1);
border: 1px solid #c0b9c491;
border-radius: 4px;
box-shadow: rgb(28 26 40 / 12%) 0px 4px 4px -2px;
margin: 2em auto;
max-width: 910px;
padding: 2em;
text-align: justify;
color: #333;
}
#banner {
box-sizing: border-box;
border-radius: 4px;
box-shadow: inset 0 0 0 1px #00000020;
transition: box-shadow 0.3s ease;
display: block;
margin: 0px 0px 1em;
padding: 1.25em;
text-decoration: none;
}
#banner:hover {
box-shadow: inset 0 0 0 4px #609A21AA;
}
#banner td {
text-align: center;
vertical-align: center;
}
#banner img {
height: 7em;
}
#banner h1 {
margin-top: 0em;
color: #609A21;
font-size: 2.5em;
margin: 0 0 16px;
}
#banner p {
margin: 0em;
}
#banner .p-link {
margin-top: 16px;
color: #609A21;
font-weight: bold;
}
#banner a {
color: #609A21;
}
h1 {
font-size: 125%;
padding: 0;
margin: 0 0 16px;
}
a {
color: #1F1F1F;
}
a:hover {
color: #000;
}
p {
line-height: 1.5;
}
.p-socials {
text-align: center;
margin-bottom: 0px;
}
.p-socials a {
margin: 1em 1em;
text-decoration: none;
}
.p-socials br {
margin: 0em 0em 1em;
display: none;
}
.p-socials img {
height: 1em;
margin-right: 0.5em;
margin-bottom: -0.15em;
}
.p-subscription
{
text-align: center;
}
/* DOWNLOADS */
table {
width: 100%;
border-spacing: 0;
}
table a {
padding-bottom: 1px;
border-bottom: 1px solid;
text-decoration: none;
color: #0472D8
}
table a:hover
{
color: #0053B9;
}
tr {
vertical-align: middle;
}
.tr-margin-bot>td{
padding-bottom: 1em;
}
.tr-margin-top>td{
padding-top: 1em;
}
td {
vertical-align: middle;
}
td img {
vertical-align: middle;
}
.td-image {
width: 3em;
}
.td-description {
text-align: left;
width: 40%;
}
.td-description .beta {
border: 1px solid grey;
color: grey;
font-size: 0.75em;
font-weight: bold;
border-radius: 0.25em;
padding: 0.25em;
}
.td-date {
text-align: right;
padding-right: 2em;
}
.td-languages {
text-align: right;
}
.td-languages a + a {
display: inline;
margin-left: 1em;
margin-top: 0em;
}
hr {
margin: 0;
}
.help-button {
cursor: pointer;
display: inline-block;
background: #FF9800;
border-radius: 4px;
box-shadow: inset 0 1px rgba(254,181,94,0.9), inset 0 -2px rgba(0,0,0,0.04);
color: #FFFFFF;
padding: 0.5em 1em;
text-align: center;
transition: 0.5s;
}
.help-button:hover {
background: #F6920B;
}
acronym {
border-bottom: 1px dashed #ccc;
text-decoration: none;
cursor: help;
}
/* SCREENS.CSS */
#show {
max-width: 1280px;
max-height: 800px;
width: 100%;
height: 100%;
cursor: pointer;
border: 1px solid #182028;
display: block;
position: relative;
border-radius: 4px;
overflow: hidden;
}
#show img {
display: none;
max-width: 100%;
}
#show img.visible {
display: block;
}
iframe {
width: 100%;
border: none;
border-radius: 4px;
aspect-ratio: 16 / 9;
}
#carousel {
text-align: center;
margin: 1.25em auto 1em;
}
#dots {
text-align: center;
line-height: 1;
}
.dot {
display: inline-block;
width: 0.625em;
height: 0.625em;
background: #ccc;
border-radius: 50%;
margin: 0 0.25em;
cursor: pointer;
}
.dot.active {
background: #333;
}
/* FOOTER */
#footer {
margin: 2em auto;
text-align: center;
color: #848585;
display: block;
text-align: center;
width: 100%;
color: rgb(132, 133, 133);
text-shadow: rgb(255, 255, 255) 1px 1px 0px;
font-size: 90%;
}
#footer img
{
margin-bottom: 0.5em;
height: 7em;
}
#footer p
{
margin: 0;
}
/* ADAPTIVE LAYOUT */
@media (max-width:864px) {
#article {
margin: 0 0 1em;
padding: 1em 1em 1.5em;
border-radius: 0;
}
#banner {
max-width: calc(100% - 2px);
margin: 1px 0 1em;
outline: 1px solid rgb(227 227 227);;
}
#banner table td:first-child,
#banner table td:last-child {
display: none;
}
#banner h1 {
font-size: 1.5em;
margin-bottom: 0;
}
#banner p, #banner .p-link {
margin-top: 0.5em;
}
.p-socials a {
display: block;
margin: 1em 0 0;
}
#menu>* {
margin: 0 0.5em;
}
.td-description {
width: auto;
}
.td-date {
display: none;
padding-right: 1em;
padding-left: 1em;
}
.td-languages a + a {
display: inline-block;
white-space: nowrap;
margin-top: 0.5em;
margin-left: 0em;
}
#footer {
margin: 1em auto;
}
}

469
static/style.scss Normal file
View File

@@ -0,0 +1,469 @@
body {
margin: 0;
font-family: "Source Sans Pro", "Open Sans", sans-serif;
background: #e1e2e2 url(img/bg.png) repeat fixed 0 0;
}
#menu {
background: rgba(22, 22, 23, .8);
color: #FFFFFF;
cursor: default;
line-height: 2em;
padding: 0.5em 0;
text-align: center;
text-shadow: 2px 2px 2px #00000063;
top: 0;
left: 0;
width: 100%;
z-index: 9000;
& > * {
color: #fff;
cursor: pointer;
margin: 0 1em;
text-decoration: none;
transition: color 0.15s ease;
}
a:hover,
a.a-sel {
color: #ffe36a;
}
img {
filter: drop-shadow(2px 2px 2px #00000020);
}
}
#lang-butt {
background: transparent;
border: none;
}
/* LANG-DROPDOWN */
#lang-dropdown {
position: fixed;
z-index: 9100;
display: none;
opacity: 0;
filter: alpha(opacity=0);
&::before {
content: '';
display: block;
position: absolute;
border: 11px solid #333C;
border-left: 10px solid rgba(255, 255, 255, 0);
border-right: 10px solid rgba(255, 255, 255, 0);
border-top: 0px solid rgba(255, 255, 255, 0);
top: -10px;
left: 50%;
margin-left: -6px;
}
& > div {
display: block;
margin-left: 4px;
border-radius: 4px;
border: 1px solid #333;
box-shadow: 0 0 5px #000;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
overflow: hidden;
background: #333;
background: #333E;
backdrop-filter: saturate(180%) blur(6px);
a {
display: block;
padding: 0 3em 0 1em;
font-size: 90%;
line-height: 2.5;
border-top: 1px solid rgba(255, 255, 255, 0.06);
border-bottom: 1px solid rgba(0, 0, 0, 0.07);
text-decoration: none;
color: #fff !important;
&:hover {
border-bottom: 1px solid #34312eff;
border-top: 1px solid #4c4c4cff;
background: #444;
background: linear-gradient(328deg, #c20d2c7d, #3928c78a);
}
&.a-sel {
color: #888 !important;
img {
color: #888 !important;
filter: brightness(0.5);
}
}
img {
display: inline-block;
vertical-align: middle;
margin-right: 10px;
margin-top: -3px;
width: 16px;
height: 11px;
filter: drop-shadow(1px 2px 2px #0003);
}
&:first-child {
border-top: none;
}
&:last-child {
border-bottom: none;
}
}
}
}
/* ARTICLE */
#article {
background: rgba(254, 255, 255, 1);
border: 1px solid #c0b9c491;
border-radius: 4px;
box-shadow: rgb(28 26 40 / 12%) 0px 4px 4px -2px;
margin: 2em auto;
max-width: 910px;
padding: 2em;
text-align: justify;
color: #333;
}
#banner {
box-sizing: border-box;
border-radius: 4px;
box-shadow: inset 0 0 0 1px #00000020;
transition: box-shadow 0.3s ease;
display: block;
margin: 0px 0px 1em;
padding: 1.25em;
text-decoration: none;
&:hover {
box-shadow: inset 0 0 0 4px #609A21AA;
}
td {
text-align: center;
vertical-align: center;
}
img {
height: 7em;
}
h1 {
margin-top: 0em;
color: #609A21;
font-size: 2.5em;
margin: 0 0 16px;
}
p {
margin: 0em;
}
.p-link {
margin-top: 16px;
color: #609A21;
font-weight: bold;
}
a {
color: #609A21;
}
}
h1 {
font-size: 125%;
padding: 0;
margin: 0 0 16px;
}
a {
color: #1F1F1F;
a:hover {
color: #000;
}
}
p {
line-height: 1.5;
}
.p {
&-socials {
text-align: center;
margin-bottom: 0px;
a {
margin: 1em 1em;
text-decoration: none;
}
br {
margin: 0em 0em 1em;
display: none;
}
img {
height: 1em;
margin-right: 0.5em;
margin-bottom: -0.15em;
}
}
&-subscription {
text-align: center;
}
}
/* DOWNLOADS */
table {
width: 100%;
border-spacing: 0;
a {
padding-bottom: 1px;
border-bottom: 1px solid;
text-decoration: none;
color: #0472D8;
&:hover {
color: #0053B9;
}
}
}
tr {
vertical-align: middle;
}
.tr-margin {
&-bot > td {
padding-bottom: 1em;
}
&-top > td {
padding-top: 1em;
}
}
td {
vertical-align: middle;
img {
vertical-align: middle;
}
}
.td {
&-image {
width: 3em;
}
&-description {
text-align: left;
width: 40%;
.beta {
border: 1px solid grey;
color: grey;
font-size: 0.75em;
font-weight: bold;
border-radius: 0.25em;
padding: 0.25em;
}
}
&-date {
text-align: right;
padding-right: 2em;
}
&-languages {
text-align: right;
a + a {
display: inline;
margin-left: 1em;
margin-top: 0em;
}
}
}
hr {
margin: 0;
}
.help-button {
cursor: pointer;
display: inline-block;
background: #FF9800;
border-radius: 4px;
box-shadow: inset 0 1px rgba(254,181,94,0.9), inset 0 -2px rgba(0,0,0,0.04);
color: #FFFFFF;
padding: 0.5em 1em;
text-align: center;
transition: 0.5s;
&:hover {
background: #F6920B;
}
}
acronym {
border-bottom: 1px dashed #ccc;
text-decoration: none;
cursor: help;
}
/* SCREENS.CSS */
#show {
max-width: 1280px;
max-height: 800px;
width: 100%;
height: 100%;
cursor: pointer;
border: 1px solid #182028;
display: block;
position: relative;
border-radius: 4px;
overflow: hidden;
img {
display: none;
max-width: 100%;
&.visible {
display: block;
}
}
}
iframe {
width: 100%;
border: none;
border-radius: 4px;
aspect-ratio: 16 / 9;
}
#carousel {
text-align: center;
margin: 1.25em auto 1em;
}
#dots {
text-align: center;
line-height: 1;
}
.dot {
display: inline-block;
width: 0.625em;
height: 0.625em;
background: #ccc;
border-radius: 50%;
margin: 0 0.25em;
cursor: pointer;
.active {
background: #333;
}
}
/* FOOTER */
#footer {
margin: 2em auto;
text-align: center;
color: #848585;
display: block;
text-align: center;
width: 100%;
color: rgb(132, 133, 133);
text-shadow: rgb(255, 255, 255) 1px 1px 0px;
font-size: 90%;
img {
margin-bottom: 0.5em;
height: 7em;
}
p {
margin: 0;
}
}
/* ADAPTIVE LAYOUT */
@media (max-width:864px) {
#article {
margin: 0 0 1em;
padding: 1em 1em 1.5em;
border-radius: 0;
}
#banner {
max-width: calc(100% - 2px);
margin: 1px 0 1em;
outline: 1px solid rgb(227 227 227);;
table td {
&:first-child,
&:last-child {
display: none;
}
}
h1 {
font-size: 1.5em;
margin-bottom: 0;
}
p, .p-link {
margin-top: 0.5em;
}
}
.p-socials a {
display: block;
margin: 1em 0 0;
}
#menu > * {
margin: 0 0.5em;
}
.td {
&-description {
width: auto;
}
&-date {
display: none;
padding-right: 1em;
padding-left: 1em;
}
&-languages a + a {
display: inline-block;
white-space: nowrap;
margin-top: 0.5em;
margin-left: 0em;
}
}
#footer {
margin: 1em auto;
}
}