mirror of
https://git.bolliret.ch/pcs/pcs-website
synced 2026-01-18 15:11:37 +01:00
Merge branch 'cssrework' into 'main'
Complete rework of CSS (and some content too) See merge request pcs/pcs-website!1
This commit is contained in:
Reto
commit
fb4a22b329
17 changed files with 417 additions and 356 deletions
|
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 17 KiB |
|
Before Width: | Height: | Size: 8.7 KiB After Width: | Height: | Size: 8.7 KiB |
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 7.7 KiB After Width: | Height: | Size: 7.7 KiB |
BIN
lektor/lektordata/project/assets/images/about_square.jpg
Normal file
BIN
lektor/lektordata/project/assets/images/about_square.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
BIN
lektor/lektordata/project/assets/images/header-bg.jpg
Normal file
BIN
lektor/lektordata/project/assets/images/header-bg.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 698 KiB |
BIN
lektor/lektordata/project/assets/images/kontakt_square.jpg
Normal file
BIN
lektor/lektordata/project/assets/images/kontakt_square.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
1
lektor/lektordata/project/assets/images/logo.svg
Normal file
1
lektor/lektordata/project/assets/images/logo.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 7.3 KiB |
BIN
lektor/lektordata/project/assets/images/termine_square.jpg
Normal file
BIN
lektor/lektordata/project/assets/images/termine_square.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
|
|
@ -1,382 +1,404 @@
|
|||
|
||||
@font-face {
|
||||
font-family: "Roboto-Black";
|
||||
src: url(/static/webfonts/Roboto-Black.woff2)format("woff2"),url(/static/webfonts/Roboto-Black.woff)format("woff")
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Roboto-BlackItalic";
|
||||
src: url(/static/webfonts/Roboto-BlackItalic.woff2)format("woff2"),url(/static/webfonts/Roboto-BlackItalic.woff)format("woff")
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Roboto-Bold";
|
||||
src: url(/static/webfonts/Roboto-Bold.woff2)format("woff2"),url(/static/webfonts/Roboto-Bold.woff)format("woff")
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Roboto-BoldItalic";
|
||||
src: url(/static/webfonts/Roboto-BoldItalic.woff2)format("woff2"),url(/static/webfonts/Roboto-BoldItalic.woff)format("woff")
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family:"Roboto-Italic";
|
||||
src:url(/static/webfonts/Roboto-Italic.woff2)format("woff2"),url(/static/webfonts/Roboto-Italic.woff)format("woff")
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family:"Roboto-Light";
|
||||
src:url(/static/webfonts/Roboto-Light.woff2)format("woff2"),url(/static/webfonts/Roboto-Light.woff)format("woff")
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family:"Roboto-LightItalic";
|
||||
src:url(/static/webfonts/Roboto-LightItalic.woff2)format("woff2"),url(/static/webfonts/Roboto-LightItalic.woff)format("woff")
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family:"Roboto-Medium";
|
||||
src:url(/static/webfonts/Roboto-Medium.woff2)format("woff2"),url(/static/webfonts/Roboto-Medium.woff)format("woff")
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family:"Roboto-MediumItalic";
|
||||
src:url(/static/webfonts/Roboto-MediumItalic.woff2)format("woff2"),url(/static/webfonts/Roboto-MediumItalic.woff)format("woff")
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Roboto-Regular";
|
||||
src: url(/static/webfonts/Roboto-Regular.woff2)format("woff2"),url(/static/webfonts/Roboto-Regular.woff)format("woff")
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family:"Roboto-Light";src:url(/static/webfonts/Roboto-Light.woff2)format("woff2"),url(/static/webfonts/Roboto-Light.woff)format("woff")
|
||||
font-family:"Roboto-Thin";
|
||||
src:url(/static/webfonts/Roboto-Thin.woff2)format("woff2"),url(/static/webfonts/Roboto-Thin.woff)format("woff")
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family:"Roboto-ThinItalic";
|
||||
src:url(/static/webfonts/Roboto-ThinItalic.woff2)format("woff2"),url(/static/webfonts/Roboto-ThinItalic.woff)format("woff")
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: 23px;
|
||||
font-family: "Roboto-Light","Arial",sans-serif;
|
||||
margin: 50px 25px
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
padding-top: 10px
|
||||
}
|
||||
|
||||
.navbar-nav .active a,a:hover {
|
||||
color: #7f5e3c
|
||||
font-family: "Roboto-Regular","Arial",sans-serif;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
background: #f4f4f4;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #b78c66;
|
||||
text-decoration: none
|
||||
}
|
||||
|
||||
td,th {
|
||||
padding: 5px 15px
|
||||
}
|
||||
|
||||
div.page,footer,header {
|
||||
position: relative;
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
background: #ececec;
|
||||
max-width: 1200px
|
||||
}
|
||||
|
||||
div.page {
|
||||
color: #6c7d8c;
|
||||
}
|
||||
|
||||
div.page>div.inner_page,footer>div.inner_footer,header>div.inner_header {
|
||||
padding: 20px 30px;
|
||||
}
|
||||
|
||||
div.inner_page > * {
|
||||
margin: 0;
|
||||
padding:0 ;
|
||||
}
|
||||
|
||||
|
||||
body,div.page h1, div.page h2, div.page h3, div.page h4, div.page h5, div.page h6 {
|
||||
color: #5d5d5d;
|
||||
padding: 20px 30px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body,div.inner_page h1, div.inner_page h2, div.inner_page h3, div.inner_page h4, div.inner_page h5, div.inner_page h6 {
|
||||
color: #5d5d5d;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body,div.inner_page p + h3{
|
||||
padding: 1.5em 0 0 0;
|
||||
}
|
||||
|
||||
div.inner_page {
|
||||
position: relative;
|
||||
top: 0;
|
||||
padding: 0
|
||||
}
|
||||
|
||||
div.inner_page.bgimage {
|
||||
background-image: url(/images/bg_image_welcome_1.jpg);
|
||||
background-size: 100%;
|
||||
background-position: top;
|
||||
background-repeat: no-repeat;
|
||||
background-color: rgba(255,255,255,.6);
|
||||
background-blend-mode: lighten;
|
||||
min-height: 672px;
|
||||
box-sizing: border-box
|
||||
}
|
||||
|
||||
footer,header,header h1 {
|
||||
color: #b0b0b0
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
header {
|
||||
font-size: 20px;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
background-image: linear-gradient(to bottom, rgba(0.13, 0.13, 0.13, 0.80), rgba(0.13, 0.13, .13, 0.00)), url(/images/header-bg.jpg);
|
||||
background-blend-mode: multiply;
|
||||
background-size: 100%;
|
||||
background-position: 0 47%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
footer {
|
||||
font-size: 16px;
|
||||
nav{
|
||||
padding: 12px 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
margin: 0;
|
||||
font-weight: 700;
|
||||
font-size: 38px;
|
||||
.left_header{
|
||||
font-family: "Roboto-Black","Arial Bold",sans-serif;
|
||||
font-size: 24px;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 0 0 28px;
|
||||
}
|
||||
|
||||
header nav ul {
|
||||
.left_header ul.nav{
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.left_header a{
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.left_header img.header-logo{
|
||||
width: 43px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.right_header{
|
||||
font-family: "Roboto-Medium","Arial",sans-serif;
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.left_header .nav, .right_header .nav {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0
|
||||
padding: 0 20px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
header nav ul li {
|
||||
display: inline;
|
||||
margin: 0 8px 0 0;
|
||||
padding: 0
|
||||
.navbar-nav{
|
||||
color: #f00;
|
||||
}
|
||||
|
||||
.right_header .nav li {
|
||||
margin: 0 20px;
|
||||
}
|
||||
|
||||
nav input[type='checkbox'], nav label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.right_header a{
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
header .button a {
|
||||
padding: 0.5rem 1rem;
|
||||
background-color: #2563eb;
|
||||
color: #fff;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
div.page{
|
||||
background: #fafafa
|
||||
}
|
||||
|
||||
.inner_page.bgimage .image img {
|
||||
width: 283.66px
|
||||
}
|
||||
|
||||
|
||||
|
||||
.termine *{
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
.termine ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.termine li {
|
||||
display: flex;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
|
||||
.termine ul > li {
|
||||
font-weight: bold;
|
||||
width: 76vw;
|
||||
max-width: 1140px;
|
||||
}
|
||||
.termine ul > li > div {
|
||||
width: 500px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.termine > ul > li:nth-child(odd) {
|
||||
position: relative;
|
||||
top: 150px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 1100px;
|
||||
background: #fff;
|
||||
text-align: center;
|
||||
color: #2563eb;
|
||||
padding: 0;
|
||||
font-family: "Roboto-Thin","Arial",sans-serif;
|
||||
font-size:36px;
|
||||
line-height: 1em;
|
||||
margin: -230px 0 0 0;
|
||||
}
|
||||
|
||||
.termine > ul > li:nth-child(even) {
|
||||
background: #ececec;
|
||||
}
|
||||
|
||||
.termine ul > li > ul > li {
|
||||
width: 175px;
|
||||
}
|
||||
|
||||
.termine ul > li > ul > li:nth-child(1){
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
.termine ul > li > ul > li:nth-child(2){
|
||||
width: 75px;
|
||||
}
|
||||
|
||||
.termine ul > li > ul {
|
||||
display: flex;
|
||||
padding-left: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.termine ul > li > ul > li {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.termine ul > li > ul > li > div{
|
||||
font-size: 20px;
|
||||
div.page h2 {
|
||||
font-family: "Roboto-Black","Arial Bold",sans-serif;
|
||||
font-size:60px;
|
||||
margin: 30px 0 0 0;
|
||||
padding: 22px 0 0 0;
|
||||
font-weight: normal;
|
||||
line-height: 50px;
|
||||
}
|
||||
|
||||
div.page h3 {
|
||||
font-family: "Roboto-Thin","Arial",sans-serif;
|
||||
font-size:60px;
|
||||
margin: 0px;
|
||||
padding: 0;
|
||||
font-weight: normal;
|
||||
line-height: 30px;
|
||||
|
||||
}
|
||||
|
||||
div.page strong {
|
||||
font-family: "Roboto-Regular","Arial",sans-serif;
|
||||
color: #1e3a8a;
|
||||
}
|
||||
|
||||
div.page div.threecolumn{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 30px 50px;
|
||||
|
||||
}
|
||||
|
||||
div.page div.threecolumn div{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 300px;
|
||||
line-height: 50px;
|
||||
font-size:30px;
|
||||
}
|
||||
|
||||
div.inner_footer{
|
||||
z-index: -1;
|
||||
position: relative;
|
||||
top: 150px;
|
||||
left: 0;
|
||||
height: 200px;
|
||||
width: 100%;
|
||||
background: #2563eb;
|
||||
color: #fff;
|
||||
font-family: "Roboto-Thin","Arial",sans-serif;
|
||||
font-size:18px;
|
||||
line-height: 27px;
|
||||
margin: -50px 0 0 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
div.inner_footer a{
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
div.left_footer, div.middle_footer, div.right_footer {
|
||||
display: flex;
|
||||
align-items: end;
|
||||
padding: 28px;
|
||||
}
|
||||
|
||||
@media (min-width: 769px) and (max-width: 1100px) {
|
||||
header {
|
||||
height: calc(200vw /1100*100);
|
||||
}
|
||||
/* header > div.inner_header{
|
||||
padding: calc(12vw /1100*100) calc(28vw /1100*100);
|
||||
}*/
|
||||
header .left_header{
|
||||
font-size: calc(24vw /1100*100);
|
||||
}
|
||||
header .left_header img.header-logo{
|
||||
width: calc(43vw /1100*100);
|
||||
margin-right: calc(12vw /1100*100);
|
||||
}
|
||||
header .right_header{
|
||||
font-size: calc(18vw /1100*100);
|
||||
}
|
||||
header .right_header .nav {
|
||||
padding: 0 calc(20vw /1100*100);
|
||||
}
|
||||
header .right_header .nav li {
|
||||
margin: 0 calc(20vw /1100*100);
|
||||
}
|
||||
div.page{
|
||||
top: calc(150vw /1100*100);
|
||||
width: calc(1100vw /1100*100); /* That's actually 100% I know */
|
||||
font-size:calc(36vw /1100*100);
|
||||
margin: calc(-230vw /1100*100) 0 0 0;
|
||||
}
|
||||
div.page h2 {
|
||||
font-size:calc(60vw /1100*100);
|
||||
margin: calc(30vw /1100*100) 0 0 0;
|
||||
padding: calc(22vw /1100*100) 0 0 0;
|
||||
line-height: calc(50vw /1100*100);
|
||||
}
|
||||
div.page h3 {
|
||||
font-size:calc(60vw /1100*100);
|
||||
line-height: calc(30vw /1100*100);
|
||||
}
|
||||
div.page div.threecolumn{
|
||||
padding: calc(30vw /1100*100) calc(50vw /1100*100);
|
||||
|
||||
}
|
||||
div.page div.threecolumn div{
|
||||
width: calc(300vw /1100*100);
|
||||
line-height: calc(50vw /1100*100);
|
||||
font-size: calc(30vw /1100*100);
|
||||
}
|
||||
div.page div.threecolumn img{
|
||||
width: calc(300vw /1100*100);
|
||||
}
|
||||
div.inner_footer{
|
||||
top: calc(150vw /1100*100);
|
||||
height: calc(200vw /1100*100);
|
||||
font-size: calc(18vw /1100*100);
|
||||
line-height: calc(27vw /1100*100);
|
||||
margin: calc(-50vw /1100*100)px 0 0 0;
|
||||
}
|
||||
div.left_footer, div.middle_footer, div.right_footer {
|
||||
padding: calc(28vw /1100*100);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
header h1 {
|
||||
font-size: 3.15vw
|
||||
header {
|
||||
height: auto;
|
||||
}
|
||||
header .left_header{
|
||||
font-size: calc(24px * 0.7);
|
||||
}
|
||||
header .left_header img.header-logo{
|
||||
width: calc(43px * 0.7);
|
||||
margin-right: calc(12px * 0.7);
|
||||
}
|
||||
header .right_header{
|
||||
font-size: 18px;
|
||||
}
|
||||
header .right_header .nav {
|
||||
padding: 0 calc(20px * 0.7);
|
||||
}
|
||||
header .right_header .nav li {
|
||||
margin: 0 calc(20px * 0.7);
|
||||
}
|
||||
div.page{
|
||||
top: 0;
|
||||
width: 100%;
|
||||
font-size:calc(36px * 0.7);
|
||||
margin: 0;
|
||||
}
|
||||
div.page h2 {
|
||||
font-size:calc(60px * 0.7);
|
||||
margin: 0;
|
||||
padding: calc(22px * 0.7) 0 0 0;
|
||||
line-height: calc(50px * 0.7);
|
||||
}
|
||||
div.page h3 {
|
||||
font-size:calc(60px * 0.7);
|
||||
line-height: calc(30px * 0.7);
|
||||
}
|
||||
div.page div.threecolumn{
|
||||
padding: calc(30px * 0.7) calc(50px * 0.7);
|
||||
|
||||
}
|
||||
div.page div.threecolumn div{
|
||||
width: 300px;
|
||||
line-height: calc(50px * 0.7);
|
||||
font-size: calc(30px * 0.7);
|
||||
}
|
||||
div.page div.threecolumn img{
|
||||
width: 300px;
|
||||
}
|
||||
div.inner_footer{
|
||||
top: calc(150px * 0.7);
|
||||
height: auto;
|
||||
font-size: calc(18px * 0.7);
|
||||
line-height: calc(27px * 0.7);
|
||||
margin: 0;
|
||||
}
|
||||
div.left_footer, div.middle_footer, div.right_footer {
|
||||
padding: calc(28px * 0.7);
|
||||
}
|
||||
|
||||
header nav ul {
|
||||
display: flex;
|
||||
|
||||
nav {
|
||||
justify-content: start;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
width: 75%;
|
||||
font-size: 2.5vw
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
header nav ul li {
|
||||
flex-basis: 25%;
|
||||
box-sizing: border-box;
|
||||
padding: 5px 2.5% 5px 0;
|
||||
white-space: nowrap
|
||||
.left_header .nav, .right_header .nav, nav ul {
|
||||
display: block;
|
||||
}
|
||||
|
||||
div.inner_page.bgimage {
|
||||
background-image: none;
|
||||
min-height: 0
|
||||
nav ul:last-child {
|
||||
width: 100%;
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: 4vw
|
||||
nav ul li {
|
||||
margin-bottom: 0;
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
padding: 0em;
|
||||
}
|
||||
|
||||
header {
|
||||
font-size: 3vw
|
||||
}
|
||||
|
||||
footer {
|
||||
font-size: 2vw
|
||||
}
|
||||
|
||||
.inner_page.bgimage .image img {
|
||||
width: 80%
|
||||
}
|
||||
|
||||
.termine ul {
|
||||
display: table;
|
||||
border-collapse: collapse;
|
||||
padding: 0;
|
||||
nav .left_header ul li {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.termine ul > li{
|
||||
display: table-row;
|
||||
width: 80vw;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.termine ul > li > div{
|
||||
width: 70vw;
|
||||
text-align: left;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: inline-block;
|
||||
/*white-space: nowrap;*/
|
||||
nav .right_header ul li {
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
.termine ul > li > ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr; /* Zwei Spalten für die ersten beiden Einträge */
|
||||
grid-template-rows: auto auto; /* Drei Zeilen: Eine für die ersten beiden, zwei für die restlichen */
|
||||
grid-gap: 10px; /* Optional: Abstand zwischen den Zellen */
|
||||
nav label {
|
||||
text-align: right;
|
||||
display: block;
|
||||
padding: 0.5em;
|
||||
font-size: 20px;
|
||||
align-self: self-start;
|
||||
}
|
||||
|
||||
.termine ul > li > ul > div{
|
||||
font-weight: normal;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
text-align: left;
|
||||
input[type='checkbox']:not(:checked)+ul {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.termine ul > li > ul > li {
|
||||
display: table-cell;
|
||||
}
|
||||
|
||||
.termine ul > li > ul > li:nth-child(1) {
|
||||
width: 42.5vw;
|
||||
grid-column: span 1;
|
||||
}
|
||||
.termine ul > li > ul > li:nth-child(2) {
|
||||
width: 1.5vw;
|
||||
grid-column: span 1;
|
||||
}
|
||||
.termine ul > li > ul > li:nth-child(3) {
|
||||
width: 31vw;
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
|
||||
.termine ul > li > ul > li:nth-child(1) > div{ width: 45.5vw; }
|
||||
.termine ul > li > ul > li:nth-child(2) > div{ width: 1.5vw; }
|
||||
.termine ul > li > ul > li:nth-child(3) > div{ width: 31vw; }
|
||||
|
||||
.termine ul > li > div, .termine ul > li > ul > li > div {
|
||||
font-size: 4vw;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width:1025px) and (max-width:1540px) {
|
||||
div.inner_page.bgimage {
|
||||
min-height: calc((80vw - 60px)*.572)
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-size: 2.4vw
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: 1.5vw
|
||||
}
|
||||
|
||||
header {
|
||||
font-size: 1.25vw
|
||||
}
|
||||
|
||||
footer {
|
||||
font-size: 1vw
|
||||
}
|
||||
|
||||
|
||||
.termine ul > li {
|
||||
width: 76vw;
|
||||
|
||||
}
|
||||
.termine ul > li > div {
|
||||
width: 35vw;
|
||||
}
|
||||
|
||||
.termine ul > li > ul > li {
|
||||
width: 11vw;
|
||||
}
|
||||
|
||||
.termine ul > li > ul > li:nth-child(1){
|
||||
width: 16vw;
|
||||
}
|
||||
|
||||
.termine ul > li > ul > li:nth-child(2){
|
||||
width: 5vw;
|
||||
}
|
||||
|
||||
.termine ul > li > div, .termine ul > li > ul > li > div {
|
||||
font-size: 1.25vw;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (min-width:769px) and (max-width:1024px) {
|
||||
header h1 {
|
||||
font-size: 3.15vw
|
||||
}
|
||||
|
||||
header nav ul {
|
||||
display: flex;
|
||||
.threecolumn{
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
width: 75%
|
||||
}
|
||||
|
||||
header nav ul li {
|
||||
flex-basis: 25%;
|
||||
box-sizing: border-box;
|
||||
padding: 5px 2.5% 5px 0
|
||||
}
|
||||
|
||||
div.inner_page.bgimage {
|
||||
min-height: calc((80vw - 60px)*.572)
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: 2.5vw
|
||||
}
|
||||
|
||||
header {
|
||||
font-size: 2vw
|
||||
}
|
||||
|
||||
footer {
|
||||
font-size: 1.75vw
|
||||
}
|
||||
|
||||
.inner_page.bgimage .image img{
|
||||
width: 150px
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 51 KiB After Width: | Height: | Size: 51 KiB |
|
|
@ -1,8 +1,23 @@
|
|||
_model: HTMLPage
|
||||
---
|
||||
title: Willkommen beim Pistolenclub Stammertal!
|
||||
---
|
||||
body:
|
||||
|
||||
<h3>Unser nächster Anlass: </h3>
|
||||
<br/>
|
||||
<div class="image"><img src="/pc-stammertal-logo-minimal.svg"></div>
|
||||
<p>Sonntag <strong>8. Dezember, Gangfischschiessen</strong> in Ermatingen</p>
|
||||
<br/>
|
||||
<div class="threecolumn">
|
||||
<div>
|
||||
<a href="termine/"><img src=" /images/termine_square.jpg"> All unsere Termine</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="about/"><img src="/images/about_square.jpg"> Alle Infos über uns</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="kontakt/"><img src="/images/kontakt_square.jpg"> Kontaktiere uns</a>
|
||||
</div>
|
||||
|
||||
---
|
||||
_template: title_page.html
|
||||
_template: page.html
|
||||
|
|
|
|||
11
lektor/lektordata/project/models/html-page.ini
Normal file
11
lektor/lektordata/project/models/html-page.ini
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
[model]
|
||||
name = HTMLPage
|
||||
label = {{ this.title }}
|
||||
|
||||
[fields.title]
|
||||
label = Title
|
||||
type = string
|
||||
|
||||
[fields.body]
|
||||
label = Body
|
||||
type = html
|
||||
|
|
@ -1,31 +1,42 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="{{ '/static/style.css'|url }}">
|
||||
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<link rel="shortcut icon" href="/favicon.ico" />
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
|
||||
<link rel="icon" type="image/png" href="{{ '/favicon-96x96.png'|url }}" sizes="96x96" />
|
||||
<link rel="icon" type="image/svg+xml" href="{{ '/favicon.svg'|url }}" />
|
||||
<link rel="shortcut icon" href="{{ '/favicon.ico'|url }}" />
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="{{ '/apple-touch-icon.png'|url }}" />
|
||||
<meta name="apple-mobile-web-app-title" content="PCS" />
|
||||
<link rel="manifest" href="/site.webmanifest" />
|
||||
<link rel="manifest" href="{{ '/site.webmanifest'|url }}" />
|
||||
<title>{% block title %}Welcome{% endblock %} — PCS</title>
|
||||
<body>
|
||||
<header>
|
||||
<div class="inner_header">
|
||||
<h1>Pistolenclub Stammertal</h1>
|
||||
<nav>
|
||||
<div class="left_header">
|
||||
<ul class="nav">
|
||||
<li class="{% if this._path == '/' %}active{% endif
|
||||
%}"><a href="{{ '/'|url }}"><img class="header-logo" src="/images/logo.svg">Pistolenclub Stammertal</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="right_header">
|
||||
<label for='menu' tabindex="0">
|
||||
☰
|
||||
</label>
|
||||
<input id='menu' type='checkbox' />
|
||||
<ul class="nav navbar-nav">
|
||||
<li{% if this._path == '/' %} class="active"{% endif
|
||||
%}><a href="{{ '/'|url }}">Welcome</a></li>
|
||||
{% for href, title in [
|
||||
['/termine', 'Termine'],
|
||||
['/about', 'Über uns'],
|
||||
['/vorstand', 'Vorstand'],
|
||||
['/kontakt', 'Kontakt']
|
||||
['/about', 'Über uns'],
|
||||
['/kontakt', 'Kontakt aufnehmen']
|
||||
] %}
|
||||
<li{% if this.is_child_of(href) %} class="active"{% endif
|
||||
%}><a href="{{ href|url }}">{{ title }}</a></li>
|
||||
<li class="{% if this.is_child_of(href) %}active{% endif
|
||||
%}
|
||||
{% if title == 'Kontakt aufnehmen' %} button{% endif
|
||||
%}"><a href="{{ href|url }}">{{ title }}</a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
|
@ -33,8 +44,17 @@
|
|||
{% block body %}{% endblock %}
|
||||
</div>
|
||||
<footer>
|
||||
<div class="inner_footer">
|
||||
<div class="left_footer">
|
||||
Pistolenclub Stammertal<br/>
|
||||
Irgendwasmussdanochhin<br/>
|
||||
8476 Unterstammheim<br/>
|
||||
</div>
|
||||
<div class="middle_footer">
|
||||
<a href="impressum/">Impressum</a>
|
||||
</div>
|
||||
<div class="right_footer">
|
||||
© Copyright 2024 by PC Stammertal.
|
||||
</div>
|
||||
|
||||
</footer>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -1,8 +0,0 @@
|
|||
{% extends "layout.html" %}
|
||||
{% block title %}{{ this.title }}{% endblock %}
|
||||
{% block body %}
|
||||
<div class="inner_page bgimage">
|
||||
<h2>{{ this.title }}</h2>
|
||||
{{ this.body }}
|
||||
</div>
|
||||
{% endblock %}
|
||||
Loading…
Add table
Reference in a new issue