diff --git a/lektor/lektordata/project/assets/static/style.css b/lektor/lektordata/project/assets/static/style.css index c70e946..602115e 100644 --- a/lektor/lektordata/project/assets/static/style.css +++ b/lektor/lektordata/project/assets/static/style.css @@ -60,144 +60,6 @@ } body { -<<<<<<< HEAD -<<<<<<< HEAD - font-family: "Roboto-Regular","Arial",sans-serif; - margin: 0px; - padding: 0px; - background: #f4f4f4; -======= -======= ->>>>>>> e2630e6 (Complete rework of CSS (and some content too)) - 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 ->>>>>>> e4c4875 (Constant font sizes above viewport width of 1540px and tried to reduce jumpiness between 1530p and 1540px) -} - -a { -<<<<<<< HEAD - text-decoration: none; -======= - 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 ->>>>>>> 4a6b860 (Wooohaaa! Look! I did magic: I converted a list into a table. How beautiful ist that?) -} - -header { -<<<<<<< HEAD - 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; -} - -nav{ - padding: 12px 0; - width: 100%; - display: flex; - justify-content: space-between; - align-items: center; -} - -.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; -======= - font-size: 20px; -} - -footer { - font-size: 16px; -} - -header h1 { - margin: 0; - font-weight: 700; - font-size: 38px; -<<<<<<< HEAD ->>>>>>> e4c4875 (Constant font sizes above viewport width of 1540px and tried to reduce jumpiness between 1530p and 1540px) -} - -======= -======= font-family: "Roboto-Regular","Arial",sans-serif; margin: 0px; padding: 0px; @@ -233,10 +95,8 @@ nav{ display: flex; align-items: center; padding: 0 0 0 28px; ->>>>>>> c2e8c55 (Complete rework of CSS (and some content too)) } ->>>>>>> e2630e6 (Complete rework of CSS (and some content too)) .left_header ul.nav{ padding: 0; } @@ -268,20 +128,10 @@ nav{ align-items: center; } -ul { - list-style: none; -} - -li { - list-style: none; -} - .navbar-nav{ color: #f00; } -<<<<<<< HEAD -<<<<<<< HEAD .right_header .nav li { margin: 0 20px; } @@ -505,79 +355,6 @@ div.left_footer, div.middle_footer, div.right_footer { } div.left_footer, div.middle_footer, div.right_footer { padding: calc(28px * 0.7); -======= -======= ->>>>>>> e2630e6 (Complete rework of CSS (and some content too)) - - -.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) { - background: #fff; -} - -.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; - font-weight: normal; -} - - -@media (max-width:768px) { - header h1 { - font-size: 3.15vw -<<<<<<< HEAD ->>>>>>> 4a6b860 (Wooohaaa! Look! I did magic: I converted a list into a table. How beautiful ist that?) } @@ -616,495 +393,11 @@ div.left_footer, div.middle_footer, div.right_footer { font-size: 20px; align-self: self-start; } -<<<<<<< HEAD - input[type='checkbox']:not(:checked)+ul { - display: none; -======= -======= -======= -.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{ - 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; -} - -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 { - 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); ->>>>>>> c2e8c55 (Complete rework of CSS (and some content too)) - } - - - nav { - justify-content: start; - flex-direction: column; - flex-wrap: wrap; - margin-left: 0; - margin-right: 0; - align-items: start; - } - .left_header .nav, .right_header .nav, nav ul { - display: block; - } - nav ul:last-child { - width: 100%; - flex-basis: 100%; - } - nav ul li { - margin-bottom: 0; - width: 100%; - text-align: right; - padding: 0em; - } - nav .left_header ul li { - margin: 0; - padding: 0; - } - nav .right_header ul li { - padding: 0.5em; - } - nav label { - text-align: right; - display: block; - padding: 0.5em; - font-size: 20px; - align-self: self-start; - } -<<<<<<< HEAD ->>>>>>> e2630e6 (Complete rework of CSS (and some content too)) - - .termine ul { - display: table; - border-collapse: collapse; - padding: 0; - 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;*/ - } - - .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 */ - } - - .termine ul > li > ul > div{ - font-weight: normal; - padding: 0; - margin: 0; - text-align: left; - } - - .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) ->>>>>>> 835da7c (Responsive table on termine page! Woohoo!) - } -<<<<<<< HEAD - .threecolumn{ - flex-direction: column; - flex-wrap: wrap; -======= - - 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; - 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 -<<<<<<< HEAD ->>>>>>> e4c4875 (Constant font sizes above viewport width of 1540px and tried to reduce jumpiness between 1530p and 1540px) -======= -======= input[type='checkbox']:not(:checked)+ul { display: none; } .threecolumn{ flex-direction: column; flex-wrap: wrap; ->>>>>>> c2e8c55 (Complete rework of CSS (and some content too)) ->>>>>>> e2630e6 (Complete rework of CSS (and some content too)) - } - - - .termine ul { - display: table; - border-collapse: collapse; - padding: 0; - margin: 0; - } - - .termine ul > li{ - display: table-row; - width: 75vw; - padding: 0; - margin: 0; - } - - .termine ul > li > div{ - width: 70vw; - text-align: left; - padding: 0; - margin: 0; - display: inline-block; - white-space: nowrap; - } - - .termine ul > li > ul { - display: table-row; - } - - .termine ul > li > ul > div{ - font-weight: normal; - padding: 0; - margin: 0; - text-align: left; - } - - .termine ul > li > ul > li { - display: table-cell; - } - - .termine ul > li > ul > li:nth-child(1) { width: 27vw; } - .termine ul > li > ul > li:nth-child(2) { width: 1.5vw; } - .termine ul > li > ul > li:nth-child(3) { width: 46.5vw; } - - .termine ul > li > ul > li:nth-child(1) > div{ width: 27vw; } - .termine ul > li > ul > li:nth-child(2) > div{ width: 1.5vw; } - .termine ul > li > ul > li:nth-child(3) > div{ width: 46.5vw; } - - .termine ul > li > div, .termine ul > li > ul > li > div { - font-size: 2.5vw; } } \ No newline at end of file