links/style.css at main · lucytrep/links · 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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
/* Best Practice */
/* what I was trying to do */
/* what is the resource I used */
/* what I learned from it */

.build-icon {
    width: 18px;
    height: 18px;
}

.dropdown {
    position: relative;
}

.dropdown-menu {
    display: none;
    position: absolute;
    background-color: var(--background-color);
    border: 1px solid var(--global-border-color);
    padding: 0.5rem 0;
    margin-top: 0;
    list-style: none;
    z-index: 1000;
	text-align: left;
}

.dropdown:hover .dropdown-menu {
    display: block;
}

.dropdown-menu a {
    padding-block: 0.3rem;
    padding-inline: 0.8rem;
    display: block;
    text-decoration: none;
}

.dropdown-menu a:hover {
    color: var(--underline-hover);
    text-decoration: none;
}

h1 {
    text-align: center;
    letter-spacing: -0.3rem;
    font-size: 6rem;
    padding-block-start: 3rem;

    @media (width > 800px) {
        font-size: 7rem;
    }
}

h2 {
    text-align: center;
    font-size: 1.3rem;
    line-height: 1.5rem;

    @media (width > 800px) {
        font-size: 1.5rem;
    }
}

main {
    padding: 0;
    margin: 0;
    overflow: hidden;
}

.theme {
	text-align: center;
	padding-block-start: 1rem;
}

/* I wanted to create a continuously scrolling carousel that would loop smoothly */
/* https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@keyframes */
/* The animation uses translateX to move the track horizontally from 0 to -50%, which shifts the first half of duplicated content off-screen while the second half slides in to create a seamless loop. The animation-play-state on hover lets users pause to see content */
.carousel-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding-block-start: 3rem;
    padding-inline: 0;
    margin: 0;
}

.carousel-track {
    display: flex;
    gap: 0.5rem;
    animation: scroll 40s linear infinite;
}

@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* I wanted to have my blocks clipped in a similar shape as my SVG in the top corner */
/* https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path */
/* The polygon points trace the house shape, starting at the peak (50% 0%), moving down to the roof edges (100% 20% and 0% 20%), then outlining the door cutout at the bottom before completing the shape (going back and forth on shape). Each percentage pair is an x,y coordinate that connects to form the clipping path */
.content-block {
	min-width: 17.5rem;
    width: 17.5rem;
    height: 31.25rem;
    flex-shrink: 0;
    background: white;
    box-shadow: 0 0.625rem 1.875rem var(--shadow);
    clip-path: polygon(50% 0%, 100% 25%, 100% 100%, 0% 100%, 0% 25%);


    @media (width > 800px) {
        min-width: 20rem;
        width: 20rem;
        height: 34.375rem;
    }
}

.block-image {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.block-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}