rulrich/pcs-website-test
1
0
Fork 0
mirror of https://git.bolliret.ch/pcs/pcs-website synced 2026-01-18 16:41:37 +01:00
Code Issues Projects Releases Packages Wiki Activity

CSSing table on page vorstand as well

Browse source
This commit is contained in:
Reto Bollinger 2024-11-27 12:08:19 +01:00
parent fec3a02700
commit 8410fbbfd6
3 changed files with 121 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

129
lektor/lektordata/project/assets/static/style.css
View file

@ -247,12 +247,12 @@ div.left_footer, div.middle_footer, div.right_footer {
.termine *{ .termine *, .vorstand *{
box-sizing: border-box; box-sizing: border-box;
} }
.termine ul { .termine ul, .vorstand ul {
list-style: none; list-style: none;
padding: 0 0 50px 50px; padding: 0 0 50px 50px;
margin: 0; margin: 0;
@ -260,35 +260,43 @@ div.left_footer, div.middle_footer, div.right_footer {
width: 1100px; width: 1100px;
} }
.termine li { .termine li, .vorstand li {
display: flex; display: flex;
} }
.termine ul > li { .termine ul > li, .vorstand ul > li {
font-family: "Roboto-Light","Arial",sans-serif; font-family: "Roboto-Light","Arial",sans-serif;
width: 1000px; width: 1000px;
max-width: 1140px; max-width: 1140px;
} }
.termine .inner_page > ul > li{ .termine .inner_page > ul > li, .vorstand .inner_page > ul > li {
padding: 10px; padding: 10px;
} }
.termine ul > li > div, .vorstand ul > li > div {
font-size: 20px;
}
.termine ul > li > div { .termine ul > li > div {
width: 470px; width: 470px;
font-size: 20px;
}
.vorstand ul > li > div {
width: 200px;
} }
.termine .inner_page > ul > li:nth-child(odd) {
.termine .inner_page > ul > li:nth-child(odd), .vorstand .inner_page > ul > li:nth-child(odd) {
background: #f4f4f4; background: #f4f4f4;
} }
.termine .inner_page > ul > li:nth-child(even) { .termine .inner_page > ul > li:nth-child(even), .vorstand .inner_page > ul > li:nth-child(even) {
background: #fff; background: #fff;
} }
.termine ul > li > ul { .termine ul > li > ul, .vorstand ul > li > ul {
display: flex; display: flex;
padding: 0; padding: 0;
margin: 0; margin: 0;
@ -296,20 +304,32 @@ div.left_footer, div.middle_footer, div.right_footer {
} }
.termine ul > li > ul > li, .vorstand ul > li > ul > li {
margin-right: 0;
}
.termine ul > li > ul > li { .termine ul > li > ul > li {
width: 155px; width: 155px;
margin-right: 0; }
.vorstand ul > li > ul > li {
width: 400px;
} }
.termine ul > li > ul > li:nth-child(1) { .termine ul > li > ul > li:nth-child(1) {
width: 240px; width: 240px;
} }
.vorstand ul > li > ul > li:nth-child(1) {
width: 400px;
}
.termine ul > li > ul > li:nth-child(2) { .termine ul > li > ul > li:nth-child(2) {
width: 55px; width: 55px;
} }
.vorstand ul > li > ul > li:nth-child(2) {
width: 400px;
}
.termine ul > li > ul > li > div{ .termine ul > li > ul > li > div, .vorstand ul > li > ul > li > div {
font-size: 20px; font-size: 20px;
font-weight: normal; font-weight: normal;
width: auto; width: auto;
@ -317,38 +337,57 @@ div.left_footer, div.middle_footer, div.right_footer {
@media (min-width: 1025px) and (max-width: 1100px) { @media (min-width: 1025px) and (max-width: 1100px) {
.termine ul { .termine ul, .vorstand ul {
padding: 0 0 calc(50vw * 0.091) calc(50vw * 0.091); padding: 0 0 calc(50vw * 0.091) calc(50vw * 0.091);
width: calc(1100vw * 0.091); width: calc(1100vw * 0.091);
} }
.termine ul > li { .termine ul > li, .vorstand ul > li {
width: calc(1000vw * 0.091); width: calc(1000vw * 0.091);
max-width: calc(1140vw * 0.091); max-width: calc(1140vw * 0.091);
} }
.termine .inner_page > ul > li{ .termine .inner_page > ul > li, .vorstand .inner_page > ul > li {
padding: calc(10vw * 0.091); padding: calc(10vw * 0.091);
} }
.termine ul > li > div, .vorstand ul > li > div{
font-size: calc(20vw * 0.091);
}
.termine ul > li > div { .termine ul > li > div {
width: calc(470vw * 0.091); width: calc(470vw * 0.091);
font-size: calc(20vw * 0.091); }
.vorstand ul > li > div {
width: calc(200vw * 0.091);
} }
.termine ul > li > ul > li { .termine ul > li > ul > li {
width: calc(155vw * 0.091); width: calc(155vw * 0.091);
} }
.vorstand ul > li > ul > li {
width: calc(400vw * 0.091);
}
.termine ul > li > ul > li:nth-child(1){ .termine ul > li > ul > li:nth-child(1){
width: calc(240vw * 0.091); width: calc(240vw * 0.091);
} }
.vorstand ul > li > ul > li:nth-child(1){
width: calc(400vw * 0.091);
}
.termine ul > li > ul > li:nth-child(2){ .termine ul > li > ul > li:nth-child(2){
width: calc(55vw * 0.091); width: calc(55vw * 0.091);
} }
.termine ul > li > ul > li > div{ .vorstand ul > li > ul > li:nth-child(2){
width: calc(400vw * 0.091);
}
.termine ul > li > ul > li > div, .vorstand ul > li > ul > li > div{
font-size: calc(20vw * 0.091); font-size: calc(20vw * 0.091);
} }
@ -357,7 +396,7 @@ div.left_footer, div.middle_footer, div.right_footer {
@media (min-width:769px) and (max-width:1024px) { @media (min-width:769px) and (max-width:1024px) {
.termine ul { .termine ul, .vorstand ul {
display: table; display: table;
border-collapse: collapse; border-collapse: collapse;
padding: 0 0 calc(50vw * 0.091) calc(50vw * 0.091); padding: 0 0 calc(50vw * 0.091) calc(50vw * 0.091);
@ -365,13 +404,13 @@ div.left_footer, div.middle_footer, div.right_footer {
width: calc(1000vw * 0.091); width: calc(1000vw * 0.091);
} }
.termine ul > li{ .termine ul > li, .vorstand ul > li{
display: table-row; display: table-row;
margin: 0; margin: 0;
} }
.termine ul > li > div{ .termine ul > li > div, .vorstand ul > li > div{
width: calc(900vw * 0.091); width: calc(900vw * 0.091);
max-width: calc(900vw * 0.091); max-width: calc(900vw * 0.091);
text-align: left; text-align: left;
@ -382,22 +421,22 @@ div.left_footer, div.middle_footer, div.right_footer {
font-family: "Roboto-Regular","Arial",sans-serif; font-family: "Roboto-Regular","Arial",sans-serif;
} }
.termine ul > li > ul { .termine ul > li > ul, .vorstand ul > li > ul {
display: table-row; display: table-row;
} }
.termine ul > li > ul > div{ .termine ul > li > ul > div, .vorstand ul > li > ul > div {
font-weight: normal; font-weight: normal;
padding: 0; padding: 0;
margin: 0; margin: 0;
text-align: left; text-align: left;
} }
.termine ul > li > ul > li { .termine ul > li > ul > li, .vorstand ul > li > ul > li {
display: table-cell; display: table-cell;
} }
.termine ul > li > ul > li > div { .termine ul > li > ul > li > div, .vorstand ul > li > ul > li > div {
font-family: "Roboto-Light","Arial",sans-serif; font-family: "Roboto-Light","Arial",sans-serif;
padding: 0 0 calc(10vw * 0.091) calc(10vw * 0.091); padding: 0 0 calc(10vw * 0.091) calc(10vw * 0.091);
} }
@ -406,11 +445,18 @@ div.left_footer, div.middle_footer, div.right_footer {
.termine ul > li > ul > li:nth-child(2) { width: calc(100vw * 0.091); } .termine ul > li > ul > li:nth-child(2) { width: calc(100vw * 0.091); }
.termine ul > li > ul > li:nth-child(3) { width: calc(450vw * 0.091); } .termine ul > li > ul > li:nth-child(3) { width: calc(450vw * 0.091); }
.vorstand ul > li > ul > li:nth-child(1) { width: calc(550vw * 0.091); }
.vorstand ul > li > ul > li:nth-child(2) { width: calc(350vw * 0.091); }
.termine ul > li > ul > li:nth-child(1) > div{ width: calc(340vw * 0.091); } .termine ul > li > ul > li:nth-child(1) > div{ width: calc(340vw * 0.091); }
.termine ul > li > ul > li:nth-child(2) > div{ width: calc(90vw * 0.091); } .termine ul > li > ul > li:nth-child(2) > div{ width: calc(90vw * 0.091); }
.termine ul > li > ul > li:nth-child(3) > div{ width: calc(440vw * 0.091); } .termine ul > li > ul > li:nth-child(3) > div{ width: calc(440vw * 0.091); }
.termine ul > li > div, .termine ul > li > ul > li > div { .vorstand ul > li > ul > li:nth-child(1) > div{ width: calc(540vw * 0.091); }
.vorstand ul > li > ul > li:nth-child(2) > div{ width: calc(340vw * 0.091); }
.termine ul > li > div, .termine ul > li > ul > li > div, .vorstand ul > li > div, .vorstand ul > li > ul > li > div {
font-size: 2.5vw; font-size: 2.5vw;
} }
} }
@ -584,7 +630,7 @@ div.left_footer, div.middle_footer, div.right_footer {
flex-wrap: wrap; flex-wrap: wrap;
} }
.termine ul { .termine ul, .vorstand ul {
display: table; display: table;
border-collapse: collapse; border-collapse: collapse;
padding: 0 0 calc(50px * 0.7) calc(50px * 0.7); padding: 0 0 calc(50px * 0.7) calc(50px * 0.7);
@ -592,12 +638,12 @@ div.left_footer, div.middle_footer, div.right_footer {
width: calc(1000px * 0.7); width: calc(1000px * 0.7);
} }
.termine ul > li{ .termine ul > li, .vorstand ul > li {
display: table-row; display: table-row;
margin: 0; margin: 0;
} }
.termine ul > li > div{ .termine ul > li > div, .vorstand ul > li > div{
width: 680px; width: 680px;
max-width: 700px; max-width: 700px;
text-align: left; text-align: left;
@ -608,24 +654,33 @@ div.left_footer, div.middle_footer, div.right_footer {
font-family: "Roboto-Regular","Arial",sans-serif; font-family: "Roboto-Regular","Arial",sans-serif;
} }
.termine ul > li > ul { .termine ul > li > ul, .vorstand ul > li > ul {
list-style: none; list-style: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
display: grid; display: grid;
grid-gap: 0;
}
.termine ul > li > ul,{
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto; grid-template-rows: auto auto;
}
.vorstand ul > li > ul {
grid-template-columns: 1fr;
grid-template-rows: auto auto;
grid-gap: 0; grid-gap: 0;
} }
.termine ul > li > ul > div{ .termine ul > li > ul > div, .vorstand ul > li > ul > div{
font-weight: normal; font-weight: normal;
padding: 0; padding: 0;
margin: 0; margin: 0;
text-align: left; text-align: left;
} }
.termine ul > li > ul > li { .termine ul > li > ul > li, .vorstand ul > li > ul > li {
display: table-cell; display: table-cell;
} }
@ -642,7 +697,13 @@ div.left_footer, div.middle_footer, div.right_footer {
grid-column: span 2; grid-column: span 2;
} }
.termine ul > li > ul > li > div { .vorstand ul > li > ul > li:nth-child(1), .vorstand ul > li > ul > li:nth-child(2){
width: 700px;
grid-column: span 1;
}
.termine ul > li > ul > li > div, .vorstand ul > li > ul > li > div {
font-family: "Roboto-Light","Arial",sans-serif; font-family: "Roboto-Light","Arial",sans-serif;
padding: calc(10px * 0.7) calc(10px * 0.7); padding: calc(10px * 0.7) calc(10px * 0.7);
} }
@ -654,7 +715,11 @@ div.left_footer, div.middle_footer, div.right_footer {
padding: calc(10px * 0.7) calc(10px * 0.7) calc(20px * 0.7) calc(10px * 0.7); padding: calc(10px * 0.7) calc(10px * 0.7) calc(20px * 0.7) calc(10px * 0.7);
} }
.termine ul > li > div, .termine ul > li > ul > li > div { .vorstand ul > li > ul > li:nth-child(1) > div, .vorstand ul > li > ul > li:nth-child(2) > div{ width: 680px; }
.vorstand ul > li > ul > li:nth-child(2) > div { padding: calc(10px * 0.7) calc(10px * 0.7) calc(20px * 0.7) calc(10px * 0.7); }
.termine ul > li > div, .termine ul > li > ul > li > div, .vorstand ul > li > div, .vorstand ul > li > ul > li > div {
font-size: 24px; font-size: 24px;
} }

26
lektor/lektordata/project/content/vorstand/contents.lr
View file

@ -4,13 +4,23 @@ title: Vorstand
--- ---
body: body:
| Name | Funktion(en) | E-Mail-Adresse | * <div>Ulrich Roland</div>&nbsp;
|--|--|--| * <div>Präsident</div>&nbsp;
| **Ulrich Roland** | Präsident | praesidium@pc-stammertal.ch | * <div>praesidium@pc-stammertal.ch</div>&nbsp;
| **Ita Regula** | Kassierin | kasse@pc-stammertal.ch | * <div>Ita Regula</div>&nbsp;
| **Arnold Sonja** | Aktuarin | aktuariat@pc-stammertal.ch | * <div>Kassierin</div>&nbsp;
| **Müller Konrad** | 1. Schützenmeister | schiesswesen@pc-stammertal.ch | * <div>kasse@pc-stammertal.ch</div>&nbsp;
| **Bollinger Reto** | Schützenmeister, Beisitz | beisitz@pc-stammertal.ch | * <div>Arnold Sonja</div>&nbsp;
| **Horvath Richard** | Schützenmeister, Fähnrich, Standwart | infrastruktur@pc-stammertal.ch | * <div>Aktuarin</div>&nbsp;
* <div>aktuariat@pc-stammertal.ch</div>&nbsp;
* <div>Müller Konrad</div>&nbsp;
* <div>1. Schützenmeister</div>&nbsp;
* <div>schiesswesen@pc-stammertal.ch</div>&nbsp;
* <div>Bollinger Reto</div>&nbsp;
* <div>Schützenmeister, Beisitz</div>&nbsp;
* <div>beisitz@pc-stammertal.ch</div>&nbsp;
* <div>Horvath Richard</div>&nbsp;
* <div>Schützenmeister, Fähnrich, Standwart</div>&nbsp;
* <div>infrastruktur@pc-stammertal.ch</div>&nbsp;
--- ---
_template: page.html _template: page.html

1
lektor/lektordata/project/templates/layout.html
View file

@ -42,6 +42,7 @@
</header> </header>
<div class="page{% if this._path == '/' %} home{% endif <div class="page{% if this._path == '/' %} home{% endif
%}{%if this._path == '/termine' %} termine{% endif %}{%if this._path == '/termine' %} termine{% endif
%}{%if this._path == '/vorstand' %} vorstand{% endif
%}"> %}">
{% block body %}{% endblock %} {% block body %}{% endblock %}
</div> </div>