start-page.less 2.68 KB
Newer Older
1
2
/* Startseite */

3
4
@main-content-width: 1000px;
#main-content {
5
6
7
    flex-grow: 1;
    display: flex;
    flex-direction: column;
8
    @media(max-width: @main-content-width) {
9
        width: 100%;
10
    }
11
12
    @media(min-width: @main-content-width) {
        width: @main-content-width;
13
    }
14
    
Karl Hasselbring's avatar
Karl Hasselbring committed
15
    #plugin-btn-div {
16
17
        display: flex;
        justify-content: center;
18
        margin-top: 16px;
Karl Hasselbring's avatar
Karl Hasselbring committed
19
20
21
    }
    #plugin-btn {
        color: @text-color;
22
    }
23
24
25
26
27
    #scroll-helper {
        .card-light;
        position: absolute;
        bottom: 0px;
        right: 8px;
Dominik Hebeler's avatar
Dominik Hebeler committed
28
        padding: 11px;
29
30
31
32
33
34
35
36
37
38
        color: #777;
        border: 0;
        width: 30px;
        height: 30px;
        align-items: center;
        display: none;
        &:hover{
            color: red;
            background-color: #ccc;
        }
Dominik Hebeler's avatar
Dominik Hebeler committed
39
        @media(max-width: 503px) {
40
41
42
43
44
45
46
            display: flex;
        }
    }

}

.startpage #main-content {
47
    justify-content: center;
Aria's avatar
Aria committed
48
49
50
51
52
53
54
    #about-us {
        font-size: 1.4em;
        color: #777;
        text-align: center;
        margin-top: 60px;
        width: 100%;
        top: 100vh;
55
        left: 0;
Aria's avatar
Aria committed
56
        position: absolute;
Dominik Hebeler's avatar
Dominik Hebeler committed
57
        @media(min-width: 552px){
Aria's avatar
Aria committed
58
            top: inherit;
59
            left: inherit;
Aria's avatar
Aria committed
60
61
62
63
64
65
            bottom: 100px;
            position: inherit;
        }
        > div {
            display: flex;
            flex-wrap: wrap;
Dominik Hebeler's avatar
Dominik Hebeler committed
66
67
68
69
70
71
72
            justify-content: space-around;
            @media(min-width: 552px){
                margin: 24px 0;
            }
            @media(min-width: 761px){
                justify-content: space-between;
                max-width: 600px;
Dominik Hebeler's avatar
Dominik Hebeler committed
73
                margin: 24px auto;
Dominik Hebeler's avatar
Dominik Hebeler committed
74
            }
Aria's avatar
Aria committed
75
76
77
            > a {
                display: flex;
                flex-direction: column;
78
                align-items: center;
Aria's avatar
Aria committed
79
80
                cursor: pointer;
                color: inherit;
Dominik Hebeler's avatar
Dominik Hebeler committed
81
82
83
84
85
86
87
                width: 268px;
                padding: 0px 8px;
                min-width: 268;
                margin: 8px 0;
                @media(min-width: 552px){
                    margin: 0;
                }
88
                > img {
89
                    max-width: 2.3em;
90
                }
Aria's avatar
Aria committed
91
                > div.teaser {
92
                    width: 100%;
Aria's avatar
Aria committed
93
94
95
96
97
98
99
                    font-size: .7em;
                    text-align: justify;
                    hyphens: auto;
                }
                &:hover > div.teaser {
                    visibility: inherit;
                }
Dominik Hebeler's avatar
Dominik Hebeler committed
100
101
            }
        }
Aria's avatar
Aria committed
102
103
104
105
106
107
108
109
110
111
        #gradient {
            background-image: linear-gradient( red, yellow);
            color:transparent;
            -webkit-background-clip: text;
            background-clip: text;
        }
        #green-leaf {
            color: green;
        }
    }
112
}