mirror of
https://git.bolliret.ch/pcs/pcs-website
synced 2026-01-18 15:01:37 +01:00
No clue what I'm doing4
This commit is contained in:
Reto Bollinger
parent
f03bab8af1
commit
fab490633a
1 changed files with 326 additions and 0 deletions
|
|
@ -60,12 +60,15 @@
|
|||
}
|
||||
|
||||
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
|
||||
|
|
@ -189,9 +192,51 @@ 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;
|
||||
background: #f4f4f4;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
header {
|
||||
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;
|
||||
>>>>>>> c2e8c55 (Complete rework of CSS (and some content too))
|
||||
}
|
||||
|
||||
>>>>>>> e2630e6 (Complete rework of CSS (and some content too))
|
||||
.left_header ul.nav{
|
||||
padding: 0;
|
||||
}
|
||||
|
|
@ -235,6 +280,7 @@ li {
|
|||
color: #f00;
|
||||
}
|
||||
|
||||
<<<<<<< HEAD
|
||||
<<<<<<< HEAD
|
||||
.right_header .nav li {
|
||||
margin: 0 20px;
|
||||
|
|
@ -460,6 +506,8 @@ 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 *{
|
||||
|
|
@ -528,6 +576,7 @@ div.left_footer, div.middle_footer, div.right_footer {
|
|||
@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?)
|
||||
}
|
||||
|
||||
|
|
@ -571,6 +620,272 @@ div.left_footer, div.middle_footer, div.right_footer {
|
|||
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;
|
||||
|
|
@ -728,7 +1043,18 @@ div.left_footer, div.middle_footer, div.right_footer {
|
|||
|
||||
.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))
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue