zumepro/libre-liberec-web
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

clean-up the design a bit

Browse Source
This commit is contained in:
Ondřej Mekina
2025-04-14 15:43:07 +02:00
parent 8efe853806
commit c17bea6cb2
5 changed files with 103 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
components/cz/header.html
View File

@@ -1,6 +1,10 @@
<header>
<div class="header-title">Svobodný software Liberec</div>
<div class="header-subtitle">Richard Stallman na Technické univerzitě v Liberci</div>
<img src="data:," alt="Přepínač světlého a tmavého režimu" class="light-dark-switch" onclick="switch_theme();">
<img src="data:," alt="Přepínač širokého a úzkého rozvržení" class="layout-switch" onclick="switch_layout();">
<div>
<div class="header-title">Svobodný software Liberec</div>
<div class="header-subtitle">Richard Stallman na Technické univerzitě v Liberci</div>
</div>
<div class="buttons">
<img src="data:," alt="Přepínač světlého a tmavého režimu" class="light-dark-switch" onclick="switch_theme();">
<img src="data:," alt="Přepínač širokého a úzkého rozvržení" class="layout-switch" onclick="switch_layout();">
</div>
</header>

14
components/cz/nav.html
View File

@@ -1,8 +1,10 @@
<nav>
<ul>
<li><a href=".">Domovská stránka</a></li>
<li><a href="stallman">Richard Stallman</a></li>
<li><a href="free">Svobodný software</a></li>
<li><a href="javascript">JavaScript</a></li>
</ul>
<div>
<ul>
<li><a href=".">Domovská stránka</a></li>
<li><a href="stallman">Richard Stallman</a></li>
<li><a href="free">Svobodný software</a></li>
<li><a href="javascript">JavaScript</a></li>
</ul>
</div>
</nav>

12
components/en/header.html
View File

@@ -1,6 +1,10 @@
<header>
<div class="header-title">Software Libre Liberec</div>
<div class="header-subtitle">Richard Stallman at Technical University of Liberec</div>
<img src="data:," alt="Přepínač světlého a tmavého režimu" class="light-dark-switch" onclick="switch_theme();">
<img src="data:," alt="Přepínač širokého a úzkého rozvržení" class="layout-switch" onclick="switch_layout();">
<div>
<div class="header-title">Software Libre Liberec</div>
<div class="header-subtitle">Richard Stallman at Technical University of Liberec</div>
</div>
<div class="buttons">
<img src="data:," alt="Přepínač světlého a tmavého režimu" class="light-dark-switch" onclick="switch_theme();">
<img src="data:," alt="Přepínač širokého a úzkého rozvržení" class="layout-switch" onclick="switch_layout();">
</div>
</header>

14
components/en/nav.html
View File

@@ -1,8 +1,10 @@
<nav>
<ul>
<li><a href=".">Homepage</a></li>
<li><a href="stallman">Richard Stallman</a></li>
<li><a href="free">Software Libre</a></li>
<li><a href="javascript">JavaScript</a></li>
</ul>
<div>
<ul>
<li><a href=".">Homepage</a></li>
<li><a href="stallman">Richard Stallman</a></li>
<li><a href="free">Software Libre</a></li>
<li><a href="javascript">JavaScript</a></li>
</ul>
</div>
</nav>

119
styles.css
View File

@@ -1,21 +1,19 @@
:root {
--light-fg-color: black;
--light-bg-color: white;
--light-outer-shadow-color: #BBBBBB;
--light-outer-bg-color: #E4E4E4;
--light-alt-bg-color: #FFFFD0;
--light-field-hover-bg-color: #F0F0F0;
--light-field-active-bg-color: #E0E0E0;
--light-link-idle-color: blue;
--light-link-idle-color: darkred;
--light-sep-color: gainsboro;
--dark-fg-color: white;
--dark-bg-color: #202020;
--dark-outer-shadow-color: #000000;
--dark-outer-bg-color: black;
--dark-alt-bg-color: #101010;
--dark-field-hover-bg-color: #000000;
--dark-field-active-bg-color: #404040;
--dark-link-idle-color: lightblue;
--dark-link-idle-color: #ff8e8e;
--dark-sep-color: #2e2e2e;
}
:root {
@@ -24,15 +22,13 @@
--nav-fg-color: white;
--nav-bg-color: darkred;
--nav-bg-color-selected: #C00000;
--sep-color: gray;
--text-subtle-color: gray;
}
@media (prefers-color-scheme: light) {
:root {
--fg-color: var(--light-fg-color);
--bg-color: var(--light-bg-color);
--outer-shadow-color: var(--light-outer-shadow-color);
--outer-bg-color: var(--light-outer-bg-color);
--alt-bg-color: var(--light-alt-bg-color);
--field-hover-bg-color: var(--light-field-hover-bg-color);
--field-active-bg-color: var(--light-field-active-bg-color);
@@ -43,13 +39,13 @@
--wide-layout-switch-icon: var(--light-wide-layout-switch-icon);
--fg-gnu-head: var(--dark-gnu-head);
--bg-gnu-head: var(--light-gnu-head);
--sep-color: var(--light-sep-color);
}
[data-color-scheme="invert"] {
--fg-color: var(--dark-fg-color);
--bg-color: var(--dark-bg-color);
--outer-shadow-color: var(--dark-outer-shadow-color);
--outer-bg-color: var(--dark-outer-bg-color);
--alt-bg-color: var(--dark-alt-bg-color);
--field-hover-bg-color: var(--dark-field-hover-bg-color);
--field-active-bg-color: var(--dark-field-active-bg-color);
@@ -60,6 +56,8 @@
--wide-layout-switch-icon: var(--dark-wide-layout-switch-icon);
--fg-gnu-head: var(--light-gnu-head);
--bg-gnu-head: var(--dark-gnu-head);
--sep-color: var(--dark-sep-color);
}
}
@@ -67,8 +65,6 @@
:root {
--fg-color: var(--dark-fg-color);
--bg-color: var(--dark-bg-color);
--outer-shadow-color: var(--dark-outer-shadow-color);
--outer-bg-color: var(--dark-outer-bg-color);
--alt-bg-color: var(--dark-alt-bg-color);
--field-hover-bg-color: var(--dark-field-hover-bg-color);
--field-active-bg-color: var(--dark-field-active-bg-color);
@@ -79,13 +75,13 @@
--wide-layout-switch-icon: var(--dark-wide-layout-switch-icon);
--fg-gnu-head: var(--light-gnu-head);
--bg-gnu-head: var(--dark-gnu-head);
--sep-color: var(--dark-sep-color);
}
[data-color-scheme="invert"] {
--fg-color: var(--light-fg-color);
--bg-color: var(--light-bg-color);
--outer-shadow-color: var(--light-outer-shadow-color);
--outer-bg-color: var(--light-outer-bg-color);
--alt-bg-color: var(--light-alt-bg-color);
--field-hover-bg-color: var(--light-field-hover-bg-color);
--field-active-bg-color: var(--light-field-active-bg-color);
@@ -96,6 +92,8 @@
--wide-layout-switch-icon: var(--light-wide-layout-switch-icon);
--fg-gnu-head: var(--dark-gnu-head);
--bg-gnu-head: var(--light-gnu-head);
--sep-color: var(--light-sep-color);
}
}
@@ -108,9 +106,9 @@
}
html {
margin: 0;
background-color: var(--outer-bg-color);
background-color: var(--bg-color);
min-height: calc(100% - 32px);
margin: 0;
}
body {
@@ -120,27 +118,37 @@ body {
flex-direction: column;
color: var(--fg-color);
background-color: var(--bg-color);
margin: 0;
}
header {
padding: calc(16px - 8px) 16px;
display: flex;
padding: 1.5em 0;
position: relative;
background-color: var(--bg-color);
align-items: center;
justify-content: space-between;
width: min(90%, 50em);
margin: auto;
}
[data-layout="wide"] header {
width: 90%;
}
header .buttons {
display: flex;
flex-direction: column;
align-items: center;
}
.light-dark-switch {
position: absolute;
top: 16px;
right: 16px;
cursor: pointer;
content: var(--theme-switch-icon);
width: 20px;
}
.layout-switch {
position: absolute;
top: 48px;
right: 16px;
cursor: pointer;
content: var(--layout-switch-icon);
width: 20px;
@@ -155,11 +163,13 @@ header * {
}
.header-title {
font-size: 32px;
font-size: 2em;
font-weight: bold;
}
.header-subtitle {
font-size: 24px;
color: var(--text-subtle-color);
font-size: 1.3em;
}
.full-width {
@@ -203,9 +213,24 @@ nav {
user-select: none;
}
nav div {
width: min(90%, 50em);
margin: auto;
}
[data-layout="wide"] nav div {
width: 90%;
}
main {
flex-grow: 1;
padding: 16px;
width: min(90%, 50em);
margin: auto;
}
[data-layout="wide"] main {
width: 90%;
}
.gnu-head {
@@ -213,8 +238,9 @@ main {
}
footer {
border-top: 2px solid var(--sep-color);
padding: calc(16px - 8px) 16px;
border-top: 1px solid var(--sep-color);
color: gray;
padding: 1em;
text-align: center;
}
@@ -223,15 +249,15 @@ footer>* {
}
h1 {
font-size: 32px;
font-size: 1.5em;
}
h2 {
font-size: 26px;
font-size: 1.25em;
}
h3 {
font-size: 20px;
font-size: 1em;
}
table {
@@ -275,35 +301,38 @@ nav ul {
height: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin: 0;
padding: 0;
list-style-type: none;
}
@media (width < 750px) {
[data-layout="wide"] nav ul {
justify-content: left;
margin-left: -1em;
}
@media (width < 50rem) {
nav ul {
flex-direction: column;
}
}
nav ul li {
flex-grow: 1;
flex-basis: 0;
display: flex;
margin: 0;
}
nav ul li a {
display: flex;
flex-direction: column;
justify-content: center;
display: block;
flex-grow: 1;
padding: 8px 16px;
padding: .5em 1em;
text-align: center;
text-decoration: none;
color: var(--nav-fg-color);
font-weight: bold;
transition: background-color .3s;
}
@@ -321,15 +350,9 @@ nav ul li a:visited {
color: var(--nav-fg-color);
}
@media (width >= 900px) {
html:not([data-layout="wide"]) {
padding: 16px 0;
}
@media (width >= 50rem) {
:not([data-layout="wide"]) body {
margin: 0 auto;
max-width: 800px;
box-shadow: 0 0 5px 5px var(--outer-shadow-color);
}
[data-layout="wide"] body {
@@ -337,7 +360,7 @@ nav ul li a:visited {
}
}
@media (width < 900px) {
@media (width < 50rem) {
body {
margin: 0;
}