LinkInBio/style.css at main · RaduMiu/LinkInBio · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
html{
    background: black url(background8.jpg) ;background-size: cover;
    color: white;

}

body{
    display: block;
    place-items: center;
    margin: 0;
    font-family: Inter, Helvetica, Arial, sans-serif;
    font-size: 20px;
    line-height: 1.5em;
}
@media (min-width: 500px) { body { display: grid;}}


.Container{

     background: rgb(79, 109, 245, 0.8);
     padding: 1rem;

     font-size: clam(1rem, 2vw, 2rem);
     line-height: 1.5em;
}
@media (min-width: 300px) { .Container { margin: 2vh;padding: 2rem;
border-radius: 2rem;}}
@media (min-width: 500px) { .Container { margin: 7vw;padding: 3rem;}}

    header{ }

        .Avatar{ display: block;  width: 112px; height: auto;
             margin: 0 1em 1em 0; border-radius: 45%;}
        @media (min-width: 300px) { .Avatar { float: left;} }
        /* @media (min-width: 930px) { .Avatar { width: clamp(130px,14vw, 12rem);} } */
        .TitlulPaginii{display: block; margin: 0; font-size: clamp(2rem, 6vw, 4rem);
        line-height: 1em;}
        .DescrierePrincipala{display: block; margin: 0.5em 0 1.5em;}
        @media (min-width: 500px) { .DescrierePrincipala { margin-bottom: 0.5em;}}
    main{
        clear: both;
    }
        .ListaLinkuri{ display: block; margin: 0; padding: 0; border-top: 1px solid #fff;}
            .ListaItem{ display: block; margin: 0; padding: 0; border-bottom: 1px solid #fff;}
                .ListaLink{ display: block; padding: 0.2em; color: #fff; text-decoration: none;}
                .ListaLink:hover { background: rgb(149,128,255); color: black;}
                    .ListaTitlu{ display: block; margin: 0; padding: 0; font-size: 1em; line-height: 1.5em;}
                    .ListaText{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}  /*primul cu nowrap(nu lasa sa iasa de pe un rand textul
                    al doilea taie textul cand se termina containerul si ultumul cand exista overflow pune... la fiinal*/