blob: c4364396deaf7028a81923ab6be6bdfbc03fd8ad (
plain) (
blame)
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
|
---
import {Markdown} from 'astro/components'
import formatName from './function/format-name.js'
const {data:{name,pkgJSON:{description}}} = Astro.props
---
<!-- Example 1 -->
<!-- <div class="thumbnail">
<a href={`/example/${name}`}>
<h3>{formatName(name)}
</h3>
<img src="/default-og-image.png" alt="">
</a>
<pre data-lang='bash'>--template {name}</pre>
</div> -->
<!-- Example 2 -->
<!-- <div class="thumbnail">
<a href={`/example/${name}`}>
<img src="/default-og-image.png" alt="">
<h3>{formatName(name)}
</h3>
</a>
<pre data-lang='bash'>--template {name}</pre>
</div> -->
<!-- Example 3 -->
<div class="wrapper">
<div class="thumbnail">
<div class="title">
<a href={`/example/${name}`}>
<h3 >{formatName(name)}
</h3>
</a>
<code class="code-inline">{name}</code>
</div>
<p class="description">{description}</p>
<pre data-lang='bash' class="code-block">--template {name}</pre>
</div>
</div>
<style lang="scss">
.wrapper{
box-sizing: border-box;
width: 45%;
display:flex;
flex-direction:column;
border-radius: 5rem;
box-shadow: 2px 2px 2px #cacaca;
}
.thumbnail{
flex-basis:1;
flex-grow: 1;
transition: all 0.25s ease-out ;
transform: perspective(1000rem); //hack but needed,
&:hover{
transform: scale(1.015);
}
> a h3{
margin:0.5rem;
}
> a img{
margin-top:0.5rem;
border-radius: 1rem;
}
> a{
color:var(--theme-accent)
}
>p{
word-break: keep-all;
white-space: wrap;
overflow: hidden;
text-overflow: ellipsis
}
> pre{
width:99%;
margin-top: 0.85rem;
margin-left:0;
overflow: auto;
&::-webkit-scrollbar{
height:10px;
background-color: #383740;
color:white;
}
&::-webkit-scrollbar-track{
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
&::-webkit-scrollbar-thumb {
width: 25%;
background-color: darkgrey;
outline: 1px solid slategrey;
border-radius: 5rem;
}
}
.title{
display: flex;
flex-wrap: wrap;
flex-direction: row;
align-items: baseline;
> * + * {
margin-inline-start: 0.5rem;
}
}
}
@media(max-width:603px){
.thumbnail{
width: 100%;
height: fit-content;
>pre{
border-radius:0.5rem;
overflow: auto;
}
}
}
</style>
|
