vielle.dev
Personal Site
Add proper styles to landing
+32
-7
src/components/home/Landing.astro
+32
-7
src/components/home/Landing.astro
···
52
52
</section>
53
53
54
54
<style>
55
-
img {
55
+
section {
56
+
padding: 10px;
57
+
}
58
+
59
+
figure {
56
60
float: right;
57
-
aspect-ratio: 1;
58
-
width: 100px;
59
-
border-radius: 100%;
60
-
shape-outside: circle(50px);
61
-
shape-margin: 10px;
62
-
margin: 10px;
61
+
box-sizing: border-box;
62
+
width: 120px;
63
+
height: 180px;
64
+
margin: 0 0 10px 10px;
65
+
66
+
image-rendering: pixelated;
67
+
background-image: var(--box-rounded-top-png);
68
+
background-repeat: no-repeat;
69
+
background-size: 100% 100%;
70
+
71
+
img {
72
+
aspect-ratio: 1;
73
+
width: 100%;
74
+
background-color: #008282;
75
+
mask-image: var(--box-circle-mask-png);
76
+
mask-size: 120px 120px;
77
+
}
78
+
79
+
figcaption {
80
+
margin: auto;
81
+
width: fit-content;
82
+
margin-block: 10px;
83
+
}
84
+
}
85
+
86
+
p {
87
+
margin-block: 5px;
63
88
}
64
89
</style>