forked from om/chatcontrol_dk
a3ebfe46a2
Also disable the automatic swipe to the right at the very beginning, because people tend to not notice it. Also change the background color of the contact list contacts to make it a bit more obvious that you can click on things. And remove help text about blue arrow because the user will start from the contact list.
130 lines
2 KiB
CSS
130 lines
2 KiB
CSS
|
|
/*First lets set some basic styles*/
|
|
body {
|
|
font-family:"Inter", Arial, Helvetica, sans-serif;
|
|
color:white;
|
|
background-image: linear-gradient(to right, #434343 0%, black 100%);
|
|
font-size:1.1em;
|
|
}
|
|
|
|
a{
|
|
color:rgb(0, 191, 255);
|
|
font-weight:bold;
|
|
text-decoration:none;
|
|
}
|
|
|
|
p{
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/*Throw a CSS grid in for layout*/
|
|
#content {
|
|
display: grid;
|
|
grid-template-columns: minmax(350px,4fr) minmax(30px,0.5fr) minmax(350px,4fr);
|
|
grid-column-gap: 0px;
|
|
grid-row-gap: 20px;
|
|
align-items: center;
|
|
max-width:1000px;
|
|
margin:auto;
|
|
}
|
|
/*h1 overrides for the bubble*/
|
|
#intro h1 {
|
|
font-weight:Normal;
|
|
}
|
|
#intro h1 strong{
|
|
font-weight:bolder;
|
|
}
|
|
|
|
#intro p{
|
|
padding-left:10px;
|
|
margin: 15px 0 15px 0;
|
|
}
|
|
.div4 { grid-area: 3 / 1 / 4 / 4; }
|
|
.div5 { grid-area: 4 / 1 / 5 / 4; }
|
|
|
|
#language_choice{
|
|
grid-area: 1 / 1 / 2 / 4;
|
|
font-size: 24px;
|
|
}
|
|
|
|
#language_choice img{
|
|
object-fit:cover;
|
|
width:42px;
|
|
border-radius:5px;
|
|
}
|
|
|
|
#intro{
|
|
grid-area: 2 / 3 / 3 / 4;
|
|
}
|
|
#phone{
|
|
grid-area: 2 / 1 / 3 / 2;
|
|
}
|
|
|
|
#more{
|
|
padding-top:80px;
|
|
grid-area: 3 / 1 / 3 / 4;
|
|
}
|
|
|
|
#more, #sponsors{
|
|
font-size:1.3em;
|
|
}
|
|
|
|
#sponsors{
|
|
grid-area: 4 / 1 / 4 / 4;
|
|
}
|
|
|
|
.besked {
|
|
color: #FFFFFF;
|
|
background-color: #0084FF;
|
|
border-radius: 25px;
|
|
padding-top: 10px;
|
|
padding-bottom: 10px;
|
|
padding-left: 20px;
|
|
padding-right: 20px;
|
|
position: relative;
|
|
}
|
|
|
|
.besked:after {
|
|
content: '';
|
|
position: absolute;
|
|
right: 0;
|
|
top: 50%;
|
|
width: 0;
|
|
height: 0;
|
|
border: 20px solid transparent;
|
|
border-left-color: #0084FF;
|
|
border-right: 0;
|
|
border-bottom: 0;
|
|
margin-top: -10px;
|
|
margin-right: -20px;
|
|
}
|
|
|
|
#phone>div{
|
|
background-repeat:no-repeat;
|
|
}
|
|
|
|
#movie {
|
|
margin-left: 17px;
|
|
margin-top: 77px;
|
|
}
|
|
|
|
#movie-sidetext {
|
|
grid-column: 2;
|
|
grid-row: 1;
|
|
}
|
|
|
|
a[href="#more"]{
|
|
display:inline-block;
|
|
padding: 6px 8px;
|
|
border-radius:5px;
|
|
background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
|
|
font-size:1.3em;
|
|
color:rgba(39, 15, 15, 0.746);
|
|
border:1px solid rgba(255, 255, 255, 0.717);
|
|
float:right;
|
|
}
|
|
|
|
.about-link {
|
|
float: right;
|
|
}
|