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

website: design updated, better support for very old browsers

Browse Source 
git-svn-id: file:///var/kolibrios-org-repos@55 ae7b2cb0-843d-483b-9e9e-b8a90ea88d30
This commit is contained in:
leency 2023-03-16 22:38:58 +00:00
parent 123bb01942
commit a8d247c816
24 changed files with 500 additions and 558 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
de/download.htm.template
View File

@ -12,7 +12,7 @@
</head> </head>
<body onkeydown='checkkey(event)'> <body onkeydown='checkkey(event)'>
<nav id="lang-dropdown"> <div id="lang-dropdown">
<ul> <ul>
<li><a href='../en/download.htm'><img src='../i/fl/en.png' alt='en'/>English</a></li> <li><a href='../en/download.htm'><img src='../i/fl/en.png' alt='en'/>English</a></li>
<li><a class='sel' href='../de/download.htm'><img src='../i/fl/de.png' alt='de'/>Deutsch</a></li> <li><a class='sel' href='../de/download.htm'><img src='../i/fl/de.png' alt='de'/>Deutsch</a></li>
@ -22,7 +22,7 @@
<li><a href='../nl/download.htm'><img src='../i/fl/nl.png' alt='nl'/>Nederlands</a></li> <li><a href='../nl/download.htm'><img src='../i/fl/nl.png' alt='nl'/>Nederlands</a></li>
<li><a href='../ru/download.htm'><img src='../i/fl/ru.png' alt='ru'/>Русский</a></li> <li><a href='../ru/download.htm'><img src='../i/fl/ru.png' alt='ru'/>Русский</a></li>
</ul> </ul>
</nav> </div>
<nav id="menu"> <nav id="menu">
<a href="../de/index.htm">Kolibri</a> <a href="../de/index.htm">Kolibri</a>

4
de/index.htm
View File

@ -12,7 +12,7 @@
</head> </head>
<body onkeydown='checkkey(event)'> <body onkeydown='checkkey(event)'>
<nav id="lang-dropdown"> <div id="lang-dropdown">
<ul> <ul>
<li><a href='../en/index.htm'><img src='../i/fl/en.png' alt='en'/>English</a></li> <li><a href='../en/index.htm'><img src='../i/fl/en.png' alt='en'/>English</a></li>
<li><a class='sel' href='../de/index.htm'><img src='../i/fl/de.png' alt='de'/>Deutsch</a></li> <li><a class='sel' href='../de/index.htm'><img src='../i/fl/de.png' alt='de'/>Deutsch</a></li>
@ -22,7 +22,7 @@
<li><a href='../nl/index.htm'><img src='../i/fl/nl.png' alt='nl'/>Nederlands</a></li> <li><a href='../nl/index.htm'><img src='../i/fl/nl.png' alt='nl'/>Nederlands</a></li>
<li><a href='../ru/index.htm'><img src='../i/fl/ru.png' alt='ru'/>Русский</a></li> <li><a href='../ru/index.htm'><img src='../i/fl/ru.png' alt='ru'/>Русский</a></li>
</ul> </ul>
</nav> </div>
<nav id="menu"> <nav id="menu">
<a href="../de/index.htm" class='a'>Kolibri</a> <a href="../de/index.htm" class='a'>Kolibri</a>

4
de/screen.htm
View File

@ -12,7 +12,7 @@
</head> </head>
<body onkeydown='checkkey(event)'> <body onkeydown='checkkey(event)'>
<nav id="lang-dropdown"> <div id="lang-dropdown">
<ul> <ul>
<li><a href='../en/screen.htm'><img src='../i/fl/en.png' alt='en'/>English</a></li> <li><a href='../en/screen.htm'><img src='../i/fl/en.png' alt='en'/>English</a></li>
<li><a class='sel' href='../de/screen.htm'><img src='../i/fl/de.png' alt='de'/>Deutsch</a></li> <li><a class='sel' href='../de/screen.htm'><img src='../i/fl/de.png' alt='de'/>Deutsch</a></li>
@ -22,7 +22,7 @@
<li><a href='../nl/screen.htm'><img src='../i/fl/nl.png' alt='nl'/>Nederlands</a></li> <li><a href='../nl/screen.htm'><img src='../i/fl/nl.png' alt='nl'/>Nederlands</a></li>
<li><a href='../ru/screen.htm'><img src='../i/fl/ru.png' alt='ru'/>Русский</a></li> <li><a href='../ru/screen.htm'><img src='../i/fl/ru.png' alt='ru'/>Русский</a></li>
</ul> </ul>
</nav> </div>
<nav id="menu"> <nav id="menu">
<a href="../de/index.htm">Kolibri</a> <a href="../de/index.htm">Kolibri</a>

74
dropdown.css
View File

@ -1,74 +0,0 @@
#lang-dropdown
{
position: fixed;
z-index:9100;
color: #fff;
display: none;
opacity: 0;
filter:alpha(opacity=0);
}
#lang-dropdown::before
{
content: '';
display: block;
position: absolute;
border: 11px solid #333;
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: -10px;
}
#lang-dropdown > ul
{
display: block;
border-radius: 5px;
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;
}
#lang-dropdown > ul > li a
{
display: block;
padding: 0 50px 0 20px;
font-size: 0.8em;
line-height: 3;
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 > ul > li a:hover
{
background: #444;
border-bottom: 1px solid rgba(0, 0, 0, 0.32);
}
#lang-dropdown > ul > li a.sel {
color: #888 !important;
}
#lang-dropdown > ul > li a > img
{
display: inline-block;
vertical-align: middle;
margin-right: 10px;
margin-top: -3px;
}
#lang-dropdown > ul > li:first-child a
{
border-top: none;
}
#lang-dropdown > ul > li:last-child a
{
border-bottom: none;
}

4
en/download.htm.template
View File

@ -12,7 +12,7 @@
</head> </head>
<body onkeydown='checkkey(event)'> <body onkeydown='checkkey(event)'>
<nav id="lang-dropdown"> <div id="lang-dropdown">
<ul> <ul>
<li><a class='sel' href='../en/download.htm'><img src='../i/fl/en.png' alt='en'/>English</a></li> <li><a class='sel' href='../en/download.htm'><img src='../i/fl/en.png' alt='en'/>English</a></li>
<li><a href='../de/download.htm'><img src='../i/fl/de.png' alt='de'/>Deutsch</a></li> <li><a href='../de/download.htm'><img src='../i/fl/de.png' alt='de'/>Deutsch</a></li>
@ -22,7 +22,7 @@
<li><a href='../nl/download.htm'><img src='../i/fl/nl.png' alt='nl'/>Nederlands</a></li> <li><a href='../nl/download.htm'><img src='../i/fl/nl.png' alt='nl'/>Nederlands</a></li>
<li><a href='../ru/download.htm'><img src='../i/fl/ru.png' alt='ru'/>Русский</a></li> <li><a href='../ru/download.htm'><img src='../i/fl/ru.png' alt='ru'/>Русский</a></li>
</ul> </ul>
</nav> </div>
<nav id="menu"> <nav id="menu">
<a href="../en/index.htm">Kolibri</a> <a href="../en/index.htm">Kolibri</a>

4
en/index.htm
View File

@ -12,7 +12,7 @@
</head> </head>
<body onkeydown='checkkey(event)'> <body onkeydown='checkkey(event)'>
<nav id="lang-dropdown"> <div id="lang-dropdown">
<ul> <ul>
<li><a class='sel' href='../en/index.htm'><img src='../i/fl/en.png' alt='en'/>English</a></li> <li><a class='sel' href='../en/index.htm'><img src='../i/fl/en.png' alt='en'/>English</a></li>
<li><a href='../de/index.htm'><img src='../i/fl/de.png' alt='de'/>Deutsch</a></li> <li><a href='../de/index.htm'><img src='../i/fl/de.png' alt='de'/>Deutsch</a></li>
@ -22,7 +22,7 @@
<li><a href='../nl/index.htm'><img src='../i/fl/nl.png' alt='nl'/>Nederlands</a></li> <li><a href='../nl/index.htm'><img src='../i/fl/nl.png' alt='nl'/>Nederlands</a></li>
<li><a href='../ru/index.htm'><img src='../i/fl/ru.png' alt='ru'/>Русский</a></li> <li><a href='../ru/index.htm'><img src='../i/fl/ru.png' alt='ru'/>Русский</a></li>
</ul> </ul>
</nav> </div>
<nav id="menu"> <nav id="menu">
<a href="../en/index.htm" class='a'>Kolibri</a> <a href="../en/index.htm" class='a'>Kolibri</a>

4
en/screen.htm
View File

@ -12,7 +12,7 @@
</head> </head>
<body onkeydown='checkkey(event)'> <body onkeydown='checkkey(event)'>
<nav id="lang-dropdown"> <div id="lang-dropdown">
<ul> <ul>
<li><a class='sel' href='../en/screen.htm'><img src='../i/fl/en.png' alt='en'/>English</a></li> <li><a class='sel' href='../en/screen.htm'><img src='../i/fl/en.png' alt='en'/>English</a></li>
<li><a href='../de/screen.htm'><img src='../i/fl/de.png' alt='de'/>Deutsch</a></li> <li><a href='../de/screen.htm'><img src='../i/fl/de.png' alt='de'/>Deutsch</a></li>
@ -22,7 +22,7 @@
<li><a href='../nl/screen.htm'><img src='../i/fl/nl.png' alt='nl'/>Nederlands</a></li> <li><a href='../nl/screen.htm'><img src='../i/fl/nl.png' alt='nl'/>Nederlands</a></li>
<li><a href='../ru/screen.htm'><img src='../i/fl/ru.png' alt='ru'/>Русский</a></li> <li><a href='../ru/screen.htm'><img src='../i/fl/ru.png' alt='ru'/>Русский</a></li>
</ul> </ul>
</nav> </div>
<nav id="menu"> <nav id="menu">
<a href="../en/index.htm">Kolibri</a> <a href="../en/index.htm">Kolibri</a>

4
es/download.htm.template
View File

@ -12,7 +12,7 @@
</head> </head>
<body onkeydown='checkkey(event)'> <body onkeydown='checkkey(event)'>
<nav id="lang-dropdown"> <div id="lang-dropdown">
<ul> <ul>
<li><a href='../en/download.htm'><img src='../i/fl/en.png' alt='en'/>English</a></li> <li><a href='../en/download.htm'><img src='../i/fl/en.png' alt='en'/>English</a></li>
<li><a href='../de/download.htm'><img src='../i/fl/de.png' alt='de'/>Deutsch</a></li> <li><a href='../de/download.htm'><img src='../i/fl/de.png' alt='de'/>Deutsch</a></li>
@ -22,7 +22,7 @@
<li><a href='../nl/download.htm'><img src='../i/fl/nl.png' alt='nl'/>Nederlands</a></li> <li><a href='../nl/download.htm'><img src='../i/fl/nl.png' alt='nl'/>Nederlands</a></li>
<li><a href='../ru/download.htm'><img src='../i/fl/ru.png' alt='ru'/>Русский</a></li> <li><a href='../ru/download.htm'><img src='../i/fl/ru.png' alt='ru'/>Русский</a></li>
</ul> </ul>
</nav> </div>
<nav id="menu"> <nav id="menu">
<a href="../es/index.htm" >Kolibri</a> <a href="../es/index.htm" >Kolibri</a>

4
es/index.htm
View File

@ -12,7 +12,7 @@
</head> </head>
<body onkeydown='checkkey(event)'> <body onkeydown='checkkey(event)'>
<nav id="lang-dropdown"> <div id="lang-dropdown">
<ul> <ul>
<li><a href='../en/index.htm'><img src='../i/fl/en.png' alt='en'/>English</a></li> <li><a href='../en/index.htm'><img src='../i/fl/en.png' alt='en'/>English</a></li>
<li><a href='../de/index.htm'><img src='../i/fl/de.png' alt='de'/>Deutsch</a></li> <li><a href='../de/index.htm'><img src='../i/fl/de.png' alt='de'/>Deutsch</a></li>
@ -22,7 +22,7 @@
<li><a href='../nl/index.htm'><img src='../i/fl/nl.png' alt='nl'/>Nederlands</a></li> <li><a href='../nl/index.htm'><img src='../i/fl/nl.png' alt='nl'/>Nederlands</a></li>
<li><a href='../ru/index.htm'><img src='../i/fl/ru.png' alt='ru'/>Русский</a></li> <li><a href='../ru/index.htm'><img src='../i/fl/ru.png' alt='ru'/>Русский</a></li>
</ul> </ul>
</nav> </div>
<nav id="menu"> <nav id="menu">
<a href="../es/index.htm" class='a'>Kolibri</a> <a href="../es/index.htm" class='a'>Kolibri</a>

4
es/screen.htm
View File

@ -12,7 +12,7 @@
</head> </head>
<body onkeydown='checkkey(event)'> <body onkeydown='checkkey(event)'>
<nav id="lang-dropdown"> <div id="lang-dropdown">
<ul> <ul>
<li><a href='../en/screen.htm'><img src='../i/fl/en.png' alt='en'/>English</a></li> <li><a href='../en/screen.htm'><img src='../i/fl/en.png' alt='en'/>English</a></li>
<li><a href='../de/screen.htm'><img src='../i/fl/de.png' alt='de'/>Deutsch</a></li> <li><a href='../de/screen.htm'><img src='../i/fl/de.png' alt='de'/>Deutsch</a></li>
@ -22,7 +22,7 @@
<li><a href='../nl/screen.htm'><img src='../i/fl/nl.png' alt='nl'/>Nederlands</a></li> <li><a href='../nl/screen.htm'><img src='../i/fl/nl.png' alt='nl'/>Nederlands</a></li>
<li><a href='../ru/screen.htm'><img src='../i/fl/ru.png' alt='ru'/>Русский</a></li> <li><a href='../ru/screen.htm'><img src='../i/fl/ru.png' alt='ru'/>Русский</a></li>
</ul> </ul>
</nav> </div>
<nav id="menu"> <nav id="menu">
<a href="../es/index.htm" >Kolibri</a> <a href="../es/index.htm" >Kolibri</a>

4
fr/download.htm.template
View File

@ -12,7 +12,7 @@
</head> </head>
<body onkeydown='checkkey(event)'> <body onkeydown='checkkey(event)'>
<nav id="lang-dropdown"> <div id="lang-dropdown">
<ul> <ul>
<li><a href='../en/download.htm'><img src='../i/fl/en.png' alt='en'/>English</a></li> <li><a href='../en/download.htm'><img src='../i/fl/en.png' alt='en'/>English</a></li>
<li><a href='../de/download.htm'><img src='../i/fl/de.png' alt='de'/>Deutsch</a></li> <li><a href='../de/download.htm'><img src='../i/fl/de.png' alt='de'/>Deutsch</a></li>
@ -22,7 +22,7 @@
<li><a href='../nl/download.htm'><img src='../i/fl/nl.png' alt='nl'/>Nederlands</a></li> <li><a href='../nl/download.htm'><img src='../i/fl/nl.png' alt='nl'/>Nederlands</a></li>
<li><a href='../ru/download.htm'><img src='../i/fl/ru.png' alt='ru'/>Русский</a></li> <li><a href='../ru/download.htm'><img src='../i/fl/ru.png' alt='ru'/>Русский</a></li>
</ul> </ul>
</nav> </div>
<nav id="menu"> <nav id="menu">
<a href="../fr/index.htm" >Kolibri</a> <a href="../fr/index.htm" >Kolibri</a>

4
fr/index.htm
View File

@ -12,7 +12,7 @@
</head> </head>
<body onkeydown='checkkey(event)'> <body onkeydown='checkkey(event)'>
<nav id="lang-dropdown"> <div id="lang-dropdown">
<ul> <ul>
<li><a href='../en/index.htm'><img src='../i/fl/en.png' alt='en'/>English</a></li> <li><a href='../en/index.htm'><img src='../i/fl/en.png' alt='en'/>English</a></li>
<li><a href='../de/index.htm'><img src='../i/fl/de.png' alt='de'/>Deutsch</a></li> <li><a href='../de/index.htm'><img src='../i/fl/de.png' alt='de'/>Deutsch</a></li>
@ -22,7 +22,7 @@
<li><a href='../nl/index.htm'><img src='../i/fl/nl.png' alt='nl'/>Nederlands</a></li> <li><a href='../nl/index.htm'><img src='../i/fl/nl.png' alt='nl'/>Nederlands</a></li>
<li><a href='../ru/index.htm'><img src='../i/fl/ru.png' alt='ru'/>Русский</a></li> <li><a href='../ru/index.htm'><img src='../i/fl/ru.png' alt='ru'/>Русский</a></li>
</ul> </ul>
</nav> </div>
<nav id="menu"> <nav id="menu">
<a href="../fr/index.htm" class='a'>Kolibri</a> <a href="../fr/index.htm" class='a'>Kolibri</a>

4
fr/screen.htm
View File

@ -12,7 +12,7 @@
</head> </head>
<body onkeydown='checkkey(event)'> <body onkeydown='checkkey(event)'>
<nav id="lang-dropdown"> <div id="lang-dropdown">
<ul> <ul>
<li><a href='../en/screen.htm'><img src='../i/fl/en.png' alt='en'/>English</a></li> <li><a href='../en/screen.htm'><img src='../i/fl/en.png' alt='en'/>English</a></li>
<li><a href='../de/screen.htm'><img src='../i/fl/de.png' alt='de'/>Deutsch</a></li> <li><a href='../de/screen.htm'><img src='../i/fl/de.png' alt='de'/>Deutsch</a></li>
@ -22,7 +22,7 @@
<li><a href='../nl/screen.htm'><img src='../i/fl/nl.png' alt='nl'/>Nederlands</a></li> <li><a href='../nl/screen.htm'><img src='../i/fl/nl.png' alt='nl'/>Nederlands</a></li>
<li><a href='../ru/screen.htm'><img src='../i/fl/ru.png' alt='ru'/>Русский</a></li> <li><a href='../ru/screen.htm'><img src='../i/fl/ru.png' alt='ru'/>Русский</a></li>
</ul> </ul>
</nav> </div>
<nav id="menu"> <nav id="menu">
<a href="../fr/index.htm" >Kolibri</a> <a href="../fr/index.htm" >Kolibri</a>

BIN
i/bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 128 B

4
it/download.htm.template
View File

@ -12,7 +12,7 @@
</head> </head>
<body onkeydown='checkkey(event)'> <body onkeydown='checkkey(event)'>
<nav id="lang-dropdown"> <div id="lang-dropdown">
<ul> <ul>
<li><a href='../en/download.htm'><img src='../i/fl/en.png' alt='en'/>English</a></li> <li><a href='../en/download.htm'><img src='../i/fl/en.png' alt='en'/>English</a></li>
<li><a href='../de/download.htm'><img src='../i/fl/de.png' alt='de'/>Deutsch</a></li> <li><a href='../de/download.htm'><img src='../i/fl/de.png' alt='de'/>Deutsch</a></li>
@ -22,7 +22,7 @@
<li><a href='../nl/download.htm'><img src='../i/fl/nl.png' alt='nl'/>Nederlands</a></li> <li><a href='../nl/download.htm'><img src='../i/fl/nl.png' alt='nl'/>Nederlands</a></li>
<li><a href='../ru/download.htm'><img src='../i/fl/ru.png' alt='ru'/>Русский</a></li> <li><a href='../ru/download.htm'><img src='../i/fl/ru.png' alt='ru'/>Русский</a></li>
</ul> </ul>
</nav> </div>
<nav id="menu"> <nav id="menu">
<a href="../it/index.htm" >Kolibri</a> <a href="../it/index.htm" >Kolibri</a>

4
it/index.htm
View File

@ -12,7 +12,7 @@
</head> </head>
<body onkeydown='checkkey(event)'> <body onkeydown='checkkey(event)'>
<nav id="lang-dropdown"> <div id="lang-dropdown">
<ul> <ul>
<li><a href='../en/index.htm'><img src='../i/fl/en.png' alt='en'/>English</a></li> <li><a href='../en/index.htm'><img src='../i/fl/en.png' alt='en'/>English</a></li>
<li><a href='../de/index.htm'><img src='../i/fl/de.png' alt='de'/>Deutsch</a></li> <li><a href='../de/index.htm'><img src='../i/fl/de.png' alt='de'/>Deutsch</a></li>
@ -22,7 +22,7 @@
<li><a href='../nl/index.htm'><img src='../i/fl/nl.png' alt='nl'/>Nederlands</a></li> <li><a href='../nl/index.htm'><img src='../i/fl/nl.png' alt='nl'/>Nederlands</a></li>
<li><a href='../ru/index.htm'><img src='../i/fl/ru.png' alt='ru'/>Русский</a></li> <li><a href='../ru/index.htm'><img src='../i/fl/ru.png' alt='ru'/>Русский</a></li>
</ul> </ul>
</nav> </div>
<nav id="menu"> <nav id="menu">
<a href="../it/index.htm" class='a'>Kolibri</a> <a href="../it/index.htm" class='a'>Kolibri</a>

4
it/screen.htm
View File

@ -12,7 +12,7 @@
</head> </head>
<body onkeydown='checkkey(event)'> <body onkeydown='checkkey(event)'>
<nav id="lang-dropdown"> <div id="lang-dropdown">
<ul> <ul>
<li><a href='../en/screen.htm'><img src='../i/fl/en.png' alt='en'/>English</a></li> <li><a href='../en/screen.htm'><img src='../i/fl/en.png' alt='en'/>English</a></li>
<li><a href='../de/screen.htm'><img src='../i/fl/de.png' alt='de'/>Deutsch</a></li> <li><a href='../de/screen.htm'><img src='../i/fl/de.png' alt='de'/>Deutsch</a></li>
@ -22,7 +22,7 @@
<li><a href='../nl/screen.htm'><img src='../i/fl/nl.png' alt='nl'/>Nederlands</a></li> <li><a href='../nl/screen.htm'><img src='../i/fl/nl.png' alt='nl'/>Nederlands</a></li>
<li><a href='../ru/screen.htm'><img src='../i/fl/ru.png' alt='ru'/>Русский</a></li> <li><a href='../ru/screen.htm'><img src='../i/fl/ru.png' alt='ru'/>Русский</a></li>
</ul> </ul>
</nav> </div>
<nav id="menu"> <nav id="menu">
<a href="../it/index.htm" >Kolibri</a> <a href="../it/index.htm" >Kolibri</a>

4
nl/download.htm.template
View File

@ -12,7 +12,7 @@
</head> </head>
<body onkeydown='checkkey(event)'> <body onkeydown='checkkey(event)'>
<nav id="lang-dropdown"> <div id="lang-dropdown">
<ul> <ul>
<li><a href='../en/download.htm'><img src='../i/fl/en.png' alt='en'/>English</a></li> <li><a href='../en/download.htm'><img src='../i/fl/en.png' alt='en'/>English</a></li>
<li><a href='../de/download.htm'><img src='../i/fl/de.png' alt='de'/>Deutsch</a></li> <li><a href='../de/download.htm'><img src='../i/fl/de.png' alt='de'/>Deutsch</a></li>
@ -22,7 +22,7 @@
<li><a href='../nl/download.htm' class='sel'><img src='../i/fl/nl.png' alt='nl'/>Nederlands</a></li> <li><a href='../nl/download.htm' class='sel'><img src='../i/fl/nl.png' alt='nl'/>Nederlands</a></li>
<li><a href='../ru/download.htm'><img src='../i/fl/ru.png' alt='ru'/>Русский</a></li> <li><a href='../ru/download.htm'><img src='../i/fl/ru.png' alt='ru'/>Русский</a></li>
</ul> </ul>
</nav> </div>
<nav id="menu"> <nav id="menu">
<a href="../nl/index.htm">Kolibri</a> <a href="../nl/index.htm">Kolibri</a>

4
nl/index.htm
View File

@ -12,7 +12,7 @@
</head> </head>
<body onkeydown='checkkey(event)'> <body onkeydown='checkkey(event)'>
<nav id="lang-dropdown"> <div id="lang-dropdown">
<ul> <ul>
<li><a href='../en/index.htm'><img src='../i/fl/en.png' alt='en'/>English</a></li> <li><a href='../en/index.htm'><img src='../i/fl/en.png' alt='en'/>English</a></li>
<li><a href='../de/index.htm'><img src='../i/fl/de.png' alt='de'/>Deutsch</a></li> <li><a href='../de/index.htm'><img src='../i/fl/de.png' alt='de'/>Deutsch</a></li>
@ -21,7 +21,7 @@
<li><a href='../it/index.htm'><img src='../i/fl/it.png' alt='it'/>Italiano</a></li> <li><a href='../it/index.htm'><img src='../i/fl/it.png' alt='it'/>Italiano</a></li>
<li><a href='../nl/index.htm' class='sel'><img src='../i/fl/nl.png' alt='nl'/>Nederlands</a></li> <li><a href='../nl/index.htm' class='sel'><img src='../i/fl/nl.png' alt='nl'/>Nederlands</a></li>
<li><a href='../ru/index.htm'><img src='../i/fl/ru.png' alt='ru'/>Русский</a></li> </ul> <li><a href='../ru/index.htm'><img src='../i/fl/ru.png' alt='ru'/>Русский</a></li> </ul>
</nav> </div>
<nav id="menu"> <nav id="menu">
<a href="../nl/index.htm" class='a'>Kolibri</a> <a href="../nl/index.htm" class='a'>Kolibri</a>

4
nl/screen.htm
View File

@ -12,7 +12,7 @@
</head> </head>
<body onkeydown='checkkey(event)'> <body onkeydown='checkkey(event)'>
<nav id="lang-dropdown"> <div id="lang-dropdown">
<ul> <ul>
<li><a href='../en/screen.htm'><img src='../i/fl/en.png' alt='en'/>English</a></li> <li><a href='../en/screen.htm'><img src='../i/fl/en.png' alt='en'/>English</a></li>
<li><a href='../de/screen.htm'><img src='../i/fl/de.png' alt='de'/>Deutsch</a></li> <li><a href='../de/screen.htm'><img src='../i/fl/de.png' alt='de'/>Deutsch</a></li>
@ -21,7 +21,7 @@
<li><a href='../it/screen.htm'><img src='../i/fl/it.png' alt='it'/>Italiano</a></li> <li><a href='../it/screen.htm'><img src='../i/fl/it.png' alt='it'/>Italiano</a></li>
<li><a href='../nl/screen.htm' class='sel'><img src='../i/fl/nl.png' alt='nl'/>Nederlands</a></li> <li><a href='../nl/screen.htm' class='sel'><img src='../i/fl/nl.png' alt='nl'/>Nederlands</a></li>
<li><a href='../ru/screen.htm'><img src='../i/fl/ru.png' alt='ru'/>Русский</a></li> </ul> <li><a href='../ru/screen.htm'><img src='../i/fl/ru.png' alt='ru'/>Русский</a></li> </ul>
</nav> </div>
<nav id="menu"> <nav id="menu">
<a href="../nl/index.htm">Kolibri</a> <a href="../nl/index.htm">Kolibri</a>

4
ru/download.htm.template
View File

@ -12,7 +12,7 @@
</head> </head>
<body onkeydown='checkkey(event)'> <body onkeydown='checkkey(event)'>
<nav id="lang-dropdown"> <div id="lang-dropdown">
<ul> <ul>
<li><a href='../en/download.htm'><img src='../i/fl/en.png' alt='en'/>English</a></li> <li><a href='../en/download.htm'><img src='../i/fl/en.png' alt='en'/>English</a></li>
<li><a href='../de/download.htm'><img src='../i/fl/de.png' alt='de'/>Deutsch</a></li> <li><a href='../de/download.htm'><img src='../i/fl/de.png' alt='de'/>Deutsch</a></li>
@ -22,7 +22,7 @@
<li><a href='../nl/download.htm'><img src='../i/fl/nl.png' alt='nl'/>Nederlands</a></li> <li><a href='../nl/download.htm'><img src='../i/fl/nl.png' alt='nl'/>Nederlands</a></li>
<li><a href='../ru/download.htm' class='sel'><img src='../i/fl/ru.png' alt='ru'/>Русский</a></li> <li><a href='../ru/download.htm' class='sel'><img src='../i/fl/ru.png' alt='ru'/>Русский</a></li>
</ul> </ul>
</nav> </div>
<nav id="menu"> <nav id="menu">
<a href="../ru/index.htm">Колибри</a> <a href="../ru/index.htm">Колибри</a>

4
ru/index.htm
View File

@ -12,7 +12,7 @@
</head> </head>
<body onkeydown='checkkey(event)'> <body onkeydown='checkkey(event)'>
<nav id="lang-dropdown"> <div id="lang-dropdown">
<ul> <ul>
<li><a href='../en/index.htm'><img src='../i/fl/en.png' alt='en'/>English</a></li> <li><a href='../en/index.htm'><img src='../i/fl/en.png' alt='en'/>English</a></li>
<li><a href='../de/index.htm'><img src='../i/fl/de.png' alt='de'/>Deutsch</a></li> <li><a href='../de/index.htm'><img src='../i/fl/de.png' alt='de'/>Deutsch</a></li>
@ -22,7 +22,7 @@
<li><a href='../nl/index.htm'><img src='../i/fl/nl.png' alt='nl'/>Nederlands</a></li> <li><a href='../nl/index.htm'><img src='../i/fl/nl.png' alt='nl'/>Nederlands</a></li>
<li><a href='../ru/index.htm' class='sel'><img src='../i/fl/ru.png' alt='ru'/>Русский</a></li> <li><a href='../ru/index.htm' class='sel'><img src='../i/fl/ru.png' alt='ru'/>Русский</a></li>
</ul> </ul>
</nav> </div>
<nav id="menu"> <nav id="menu">
<a href="../ru/index.htm" class='a'>Колибри</a> <a href="../ru/index.htm" class='a'>Колибри</a>

4
ru/screen.htm
View File

@ -12,7 +12,7 @@
</head> </head>
<body onkeydown='checkkey(event)'> <body onkeydown='checkkey(event)'>
<nav id="lang-dropdown"> <div id="lang-dropdown">
<ul> <ul>
<li><a href='../en/screen.htm'><img src='../i/fl/en.png' alt='en'/>English</a></li> <li><a href='../en/screen.htm'><img src='../i/fl/en.png' alt='en'/>English</a></li>
<li><a href='../de/screen.htm'><img src='../i/fl/de.png' alt='de'/>Deutsch</a></li> <li><a href='../de/screen.htm'><img src='../i/fl/de.png' alt='de'/>Deutsch</a></li>
@ -22,7 +22,7 @@
<li><a href='../nl/screen.htm'><img src='../i/fl/nl.png' alt='nl'/>Nederlands</a></li> <li><a href='../nl/screen.htm'><img src='../i/fl/nl.png' alt='nl'/>Nederlands</a></li>
<li><a href='../ru/screen.htm' class='sel'><img src='../i/fl/ru.png' alt='ru'/>Русский</a></li> <li><a href='../ru/screen.htm' class='sel'><img src='../i/fl/ru.png' alt='ru'/>Русский</a></li>
</ul> </ul>
</nav> </div>
<nav id="menu"> <nav id="menu">
<a href="../ru/index.htm">Колибри</a> <a href="../ru/index.htm">Колибри</a>

900
style.css
View File

@ -1,443 +1,459 @@
@import "reset.css"; @import "reset.css";
html { html {
overflow-y: scroll; overflow-y: scroll;
} }
body { body {
color: #333; color: #333;
background: #F4F5F5; line-height: 2em;
line-height: 2em; font-family: "Source Sans Pro", "Open Sans", sans-serif;
font-size: 12pt; background: #e1e2e2;
font-family: "Source Sans Pro", "Open Sans", sans-serif; background: url(i/bg.png) repeat fixed 0 0;
} }
#menu { #menu {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
text-align: center; text-align: center;
padding: 7px 0; padding: 7px 0;
background: #222325; background: #222325;
background: rgba(0,0,0, .7); background: rgb(0 0 0 / 59%);
background-image: linear-gradient(90deg,#222325,#3b3c3f,#222325); background-image: linear-gradient(90deg,rgb(33 35 38 / 80%),rgb(59 60 63 / 50%),rgb(34 35 37 / 80%));
background-image: linear-gradient(90deg,rgb(33 35 38 / 80%),rgb(59 60 63 / 50%),rgb(34 35 37 / 80%)); background-image: linear-gradient(90deg,rgb(0 103 255 / 53%),rgb(255 0 182 / 45%));
backdrop-filter: saturate(180%) blur(6px); backdrop-filter: saturate(180%) blur(6px);
z-index:9000; z-index:9000;
cursor: default; cursor: default;
text-shadow: 1px 1px #000; text-shadow: 2px 2px 2px #00000063;
} border-bottom: 4px solid #caddb5ff;
}
#menu > * {
color: #a7a7a7;; #menu > * {
text-decoration: none; color: #ffffff;;
margin: 0 1%; text-decoration: none;
font-size: 1rem; margin: 0 1%;
cursor: pointer; font-size: 0.97rem;
transition: color 0.15s ease; cursor: pointer;
} transition: color 0.15s ease;
}
#menu a:hover, #menu a.a {
color: white; #menu a:hover, #menu a.a {
} color: #ffe36a;
}
#article, #banner {
border-radius: 8px; #menu img {
box-shadow: rgb(27 20 65 / 10%) 0px 10px 20px 0px; filter: drop-shadow(1px 2px 3px #0002);
border: none; }
/*
box-shadow: 0 3px 8px -6px rgba(0,0,0,.1); #article, #banner {
border: 1px solid rgba(0,0,0,.14); border-radius: 5px;
*/ box-shadow: rgb(28 26 40 / 20%) 2px 6px 20px -2px;
} border: 1px solid #dbd7dd;
border: 1px solid #c0b9c491;
#article { /*
max-width: 910px; box-shadow: 0 3px 8px -6px rgba(0,0,0,.1);
margin: auto; border: 1px solid rgba(0,0,0,.14);
margin-top: 78px; */
text-align: justify; ;}
padding: 15px 35px;
background: #fff; #article {
} max-width: 910px;
margin: auto;
#banner { margin-top: 75px;
display: block; text-align: justify;
margin: auto; padding: 15px 35px;
margin-top: 18px; background: #fff;
margin-bottom: -10px; background: rgba(254, 255, 255, .7);
padding: 5px; }
max-width: 100%;
max-height: 100%; #banner {
width: 900px; display: block;
transition: border 0.5s ease; margin: auto;
border: 1px solid rgba(0,0,0,.14); margin-top: 18px;
box-shadow: none; margin-bottom: -10px;
} padding: 5px;
max-width: 100%;
#banner:hover { max-height: 100%;
border: 1px solid rgba(0,0,0,.34); width: 900px;
} transition: background 0.5s ease;
border: 1px solid rgba(0,0,0,.14);
#banner.big { box-shadow: none;
height: 250px; background: #f4e8d7;
} }
#banner:hover {
#article.index_russian > p { /* border: 1px solid rgba(0,0,0,.34);*/
text-indent: 25px; background: lightblue;
} }
strong { #banner.big {
color: #000; height: 250px;
font-weight: bold; }
}
h1 { #article.index_russian > p {
color: #000; text-indent: 25px;
padding: 10px 25px; }
font-size: 130%;
} strong {
color: #000;
#footer { font-weight: bold;
padding: 1.2%; }
font-size: 90%;
text-align: center; h1 {
color: #848585; color: #000;
text-shadow: 1px 1px 0 #fff; padding: 10px 25px;
} font-size: 130%;
}
a {
color: #1F1F1F; #footer {
text-decoration: underline; padding: 1.2%;
} font-size: 90%;
text-align: center;
a:hover { color: #848585;
text-decoration: none; text-shadow: 1px 1px 0 #fff;
} }
/* Dropdown */ a {
color: #1F1F1F;
#lang-dropdown { text-decoration: underline;
position: fixed; }
z-index:9100;
display: none; a:hover {
opacity: 0; text-decoration: none;
filter:alpha(opacity=0); }
}
/* Dropdown */
#lang-dropdown::before {
content: ''; #lang-dropdown {
display: block; position: fixed;
position: absolute; z-index:9100;
border: 11px solid #333C; display: none;
border-left: 10px solid rgba(255, 255, 255, 0); opacity: 0;
border-right: 10px solid rgba(255, 255, 255, 0); filter:alpha(opacity=0);
border-top: 0px solid rgba(255, 255, 255, 0); }
top: -10px;
left: 50%; #lang-dropdown::before {
margin-left: -10px; content: '';
} display: block;
position: absolute;
#lang-dropdown > ul { border: 11px solid #333C;
display: block; border-left: 10px solid rgba(255, 255, 255, 0);
border-radius: 5px; border-right: 10px solid rgba(255, 255, 255, 0);
border: 1px solid #333; border-top: 0px solid rgba(255, 255, 255, 0);
box-shadow: 0 0 5px #000; top: -10px;
box-shadow: 0 0 10px rgba(0,0,0,0.4); left: 50%;
overflow: hidden; margin-left: -10px;
background: #333E; }
backdrop-filter: saturate(180%) blur(6px);
} #lang-dropdown > ul {
display: block;
#lang-dropdown > ul > li a { border-radius: 5px;
display: block; border: 1px solid #333;
padding: 0 50px 0 20px; box-shadow: 0 0 5px #000;
font-size: 0.8em; box-shadow: 0 0 10px rgba(0,0,0,0.4);
line-height: 3; overflow: hidden;
border-top: 1px solid rgba(255, 255, 255, 0.06); background: #333;
border-bottom: 1px solid rgba(0, 0, 0, 0.07); background: #333E;
text-decoration: none; backdrop-filter: saturate(180%) blur(6px);
color: #fff !important; }
text-shadow: 1px 1px #000;
} #lang-dropdown > ul > li a {
display: block;
#lang-dropdown > ul > li a:hover { padding: 0 50px 0 20px;
border-bottom: 1px solid rgba(0, 0, 0, 0.32); font-size: 0.8em;
background: #444; line-height: 3;
background: linear-gradient(89.98deg, #c20d2c7d .39%, #3928c78a 99.99%); border-top: 1px solid rgba(255, 255, 255, 0.06);
} border-bottom: 1px solid rgba(0, 0, 0, 0.07);
text-decoration: none;
#lang-dropdown > ul > li a.sel { color: #fff !important;
color: #888 !important; text-shadow: 1px 1px #000;
} }
#lang-dropdown > ul > li a > img { #lang-dropdown > ul > li a:hover {
display: inline-block; border-bottom: 1px solid #34312eff;
vertical-align: middle; border-top:1px solid #4c4c4cff;
margin-right: 10px; background: #444;
margin-top: -3px; background: linear-gradient(328deg, #c20d2c7d, #3928c78a);
width:16px; }
height:11px;
} #lang-dropdown > ul > li a.sel {
color: #888 !important;
#lang-dropdown > ul > li:first-child a { }
border-top: none; #lang-dropdown > ul > li a.sel img {
} color: #888 !important;
filter: brightness(0.5);
#lang-dropdown > ul > li:last-child a { }
border-bottom: none;
} #lang-dropdown > ul > li a > img {
display: inline-block;
/* DOWNLOAD.CSS */ vertical-align: middle;
margin-right: 10px;
table { margin-top: -3px;
width: 95%; width:16px;
margin: auto; height:11px;
} filter: drop-shadow(1px 2px 2px #0003);
}
.download table {
margin-top: 24px; #lang-dropdown > ul > li:first-child a {
margin-bottom: 30px; border-top: none;
} }
.download table [colspan="3"] { #lang-dropdown > ul > li:last-child a {
padding-top: 30px; border-bottom: none;
} }
.download table [colspan="3"] a { /* DOWNLOAD.CSS */
padding-bottom: 1px;
border-bottom: 1px dashed #ccc; table {
margin-left: 10px; width: 95%;
text-align: right; margin: auto;
float: right; }
line-height: 1.2;
padding-top: 5px; .download table {
} margin-top: 24px;
margin-bottom: 30px;
td { }
vertical-align: middle;
padding: 10px 0; .download table [colspan="3"] {
text-align: right; padding-top: 30px;
} }
.date_cell { .download table [colspan="3"] a {
padding-left: 10px; padding-bottom: 1px;
padding-right: 15px; border-bottom: 1px dashed #ccc;
text-align: center; margin-left: 10px;
} text-align: right;
float: right;
.download table tr > :first-child { line-height: 1.2;
width: 32px; padding-top: 5px;
} }
.download td img { td {
vertical-align: middle; vertical-align: middle;
} padding: 10px 0;
text-align: right;
.download .description_cell { }
padding: 14px 18px;
padding-left: 18px; .date_cell {
padding-right: auto; padding-left: 10px;
line-height: 1.2em; padding-right: 15px;
text-align: left; text-align: center;
margin: 3px 0; }
width: 46%;
} .download table tr > :first-child {
width: 32px;
.download table a { }
margin: 0 6px;
padding-bottom: 1px; .download td img {
border-bottom: 1px solid; vertical-align: middle;
text-decoration: none; }
color: rgb(4, 114, 216);
position: relative; .download .description_cell {
top: -1px; padding: 14px 18px;
} padding-left: 18px;
padding-right: auto;
.download p { line-height: 1.2em;
line-height:1.4; text-align: left;
margin: 20px 0; margin: 3px 0;
} width: 46%;
}
/* SCREENS.CSS */
.download table a {
#screen { margin: 0 6px;
/* padding-bottom: 1px;
position: absolute; border-bottom: 1px solid;
top: 0; text-decoration: none;
left: 0; color: rgb(4, 114, 216);
width: 100%; position: relative;
height: 100%; top: -1px;
*/ }
}
.download p {
#show { line-height:1.4;
max-width: 1280px; margin: 20px 0;
max-height: 800px; }
width: 100%;
height: 100%; /* SCREENS.CSS */
cursor: pointer;
border: 1px solid #182028; #screen {
display: block; /*
position: relative; position: absolute;
top: 78px; top: 0;
left: 50%; left: 0;
margin-left: -640px; width: 100%;
border-radius: 8px; height: 100%;
overflow: hidden; */
} }
#show img { #show {
display: none; max-width: 1280px;
max-width: 100%; max-height: 800px;
} width: 100%;
height: 100%;
#show img.visible { cursor: pointer;
display: block; border: 1px solid #182028;
} display: block;
position: relative;
#carousel { top: 78px;
position: fixed; left: 50%;
bottom: 10px; margin-left: -640px;
right: 10px; border-radius: 8px;
width: 350px; overflow: hidden;
border-radius: 5px; }
text-align: center;
background: #333333; #show img {
background: #333333DD; display: none;
backdrop-filter: blur(2px); max-width: 100%;
z-index: 10; }
color: #fff;
text-shadow: 1px 1px 0 #111111; #show img.visible {
pointer-events: none; display: block;
} }
iframe { #carousel {
max-width: 100%; position: fixed;
} bottom: 10px;
right: 10px;
width: 350px;
/* Adaptive coding */ border-radius: 5px;
text-align: center;
@media (max-width:1280px) { background: #333333;
#menu { background: #333333DD;
position: static; backdrop-filter: blur(2px);
} z-index: 10;
#show { color: #fff;
margin-left: 0; text-shadow: 1px 1px 0 #111111;
border-radius: 0; pointer-events: none;
left: 0; }
top: 0;
border: none; iframe {
} max-width: 100%;
#carousel { }
width: auto;
padding: 0 11px;
} /* Adaptive coding */
#article {
margin-top: 20px; @media (max-width:1280px) {
} #menu {
} position: static;
}
@media (max-width:864px) { #show {
#article, #footer, #screen, #show, #menu { margin-left: 0;
position: static; border-radius: 0;
} left: 0;
html { top: 0;
overflow-y: auto; border: none;
} }
#article { #carousel {
margin-top: 0; width: auto;
line-height: 1.45em; padding: 0 11px;
padding: 1% 4%; }
border-radius: 0; #article {
} margin-top: 20px;
#banner { }
max-height: 98%; }
max-width: 98%;
width: auto; @media (max-width:864px) {
height: auto !important; #article, #footer, #screen, #show, #menu {
} position: static;
a.nav, #text_preview, .date_cell { }
display: none !important; html {
visibility: collapse; overflow-y: auto;
} }
table { #article {
width: 100%; margin-top: 0;
} line-height: 1.45em;
#menu { padding: 1% 4%;
padding: 5px 10px; border-radius: 0;
width: auto; }
} #banner {
#menu > a { max-height: 98%;
margin: 2%; max-width: 98%;
} width: auto;
#menu a.notrequired { height: auto !important;
display: none !important; }
visibility: collapse; a.nav, #text_preview, .date_cell {
} display: none !important;
#show { visibility: collapse;
display: inline; }
margin: 0; table {
display: block; width: 100%;
border: none; }
overflow: visible; #menu {
margin-top: 40px; padding: 5px 10px;
} width: auto;
.download table a { }
float: left; #menu > a {
display: block; margin: 2%;
margin: 5px; }
padding-bottom: 0; #menu a.notrequired {
} display: none !important;
} visibility: collapse;
}
#show {
.beta:after{ display: inline;
content: "BETA"; margin: 0;
border: 1px solid #708d9b; display: block;
border-radius: 3px; border: none;
color: #506d7b; overflow: visible;
text-align: center; margin-top: 40px;
font-size: 7px; }
font-family: sans-serif; .download table a {
font-weight: bold; float: left;
line-height: 27px; display: block;
padding: 2px 3px; margin: 5px;
letter-spacing: .5px; padding-bottom: 0;
position: relative; }
top: -4px; }
left: 5px;
}
.beta:after{
content: "BETA";
.download table button.help-button { border: 1px solid #708d9b;
font-weight: bold; border-radius: 3px;
text-decoration: none; color: #506d7b;
display: inline-block; text-align: center;
float: left; font-size: 7px;
font-family: sans-serif;
background-color: #ED8B16; font-weight: bold;
background-image: linear-gradient(center top , #EF962B 0%, #ED8B16 100%); line-height: 27px;
border: 0 none; padding: 2px 3px;
border-radius: 3px; letter-spacing: .5px;
box-shadow: 0 1px 0 rgba(254, 181, 94, 0.9) inset, 0 -2px 0 rgba(0, 0, 0, 0.04) inset; position: relative;
color: #FFFFFF; top: -4px;
font-size: 13px; left: 5px;
padding: 0.5em 1.5em; }
text-align: center;
text-shadow: 0 1px 0 rgba(222, 122, 0, 0.8);
margin: 0 0 0 18px; .download table button.help-button {
transition: .5s; font-weight: bold;
} text-decoration: none;
display: inline-block;
.download table button.help-button:hover { float: left;
background: #ff9800;
} background-color: #ED8B16;
background-image: linear-gradient(center top , #EF962B 0%, #ED8B16 100%);
acronym { border: 0 none;
border-bottom: 1px dashed #ccc; border-radius: 3px;
text-decoration: none; box-shadow: 0 1px 0 rgba(254, 181, 94, 0.9) inset, 0 -2px 0 rgba(0, 0, 0, 0.04) inset;
cursor: help; color: #FFFFFF;
font-size: 13px;
padding: 0.5em 1.5em;
text-align: center;
text-shadow: 0 1px 0 rgba(222, 122, 0, 0.8);
margin: 0 0 0 18px;
transition: .5s;
}
.download table button.help-button:hover {
background: #ff9800;
}
acronym {
border-bottom: 1px dashed #ccc;
text-decoration: none;
cursor: help;
} }