blob: 33c118e51b2b4934c099522e95ef1d19f99e0bfd (
plain)
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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
|
@use "../abstracts/functions" as fun;
@use "../abstracts/mixins" as mix;
@use "../abstracts/placeholders";
.main {
display: flex;
flex-flow: column nowrap;
height: calc(100% - #{fun.get-var(toolbar-height)});
@include mix.media("screen") {
@include mix.dimensions("lg") {
display: grid;
grid-template-columns: 5fr 2fr;
}
@include mix.dimensions("xl") {
grid-template-columns: 4fr 1fr;
}
}
}
// NoScript extension seems to replace noscript tag with a span.
.main > span,
.instructions,
noscript {
background: fun.get-var(color-bg);
padding: fun.get-var(spacing-md);
text-align: center;
@include mix.media("screen") {
@include mix.dimensions("lg") {
grid-column: 1 / -1;
}
}
}
.instructions {
align-items: center;
display: flex;
justify-content: center;
}
.legal-notice {
height: 100%;
overflow-y: auto;
padding: clamp(#{fun.get-var(spacing-md)}, 3vw, #{fun.get-var(spacing-lg)});
scrollbar-color: fun.get-var(color-primary-light-opacity)
fun.get-var(color-bg-tertiary);
width: 100%;
@include mix.media("screen") {
@include mix.dimensions("lg") {
grid-column: 1 / -1;
}
}
}
.legal-notice {
height: 100%;
overflow-y: auto;
padding: clamp(#{fun.get-var(spacing-md)}, 3vw, #{fun.get-var(spacing-lg)});
scrollbar-color: fun.get-var(color-primary-light-opacity)
fun.get-var(color-bg-tertiary);
width: 100%;
@include mix.media("screen") {
@include mix.dimensions("lg") {
grid-column: 1 / -1;
}
}
}
.project-preview {
background: fun.get-var(color-bg);
flex: 0 1 100%;
min-height: 0;
width: 100%;
@include mix.media("screen") {
@include mix.dimensions("lg") {
height: 100%;
}
}
iframe {
border: 0;
height: 100%;
width: 100%;
}
}
.project-details {
background: fun.get-var(color-bg-secondary);
box-shadow: 0 -1px 2px 0 fun.get-var(color-shadow);
flex: 1 0 100%;
overflow-y: auto;
padding: fun.get-var(spacing-md);
scrollbar-color: fun.get-var(color-primary-light-opacity)
fun.get-var(color-bg-tertiary);
@include mix.media("screen") {
@include mix.dimensions("lg") {
font-size: fun.get-var(font-size-md);
}
}
&__description {
margin-bottom: fun.get-var(spacing-md);
white-space: pre-wrap;
}
.list {
&--tech {
padding-left: fun.get-var(spacing-sm);
}
&--repos {
@extend %flex-list;
gap: fun.get-var(spacing-xs);
}
&__link {
background-repeat: no-repeat;
background-size: contain;
box-shadow: 0 0 0 0 fun.get-var(color-shadow);
display: block;
height: fun.convert-px(50);
transition: transform 0.3s ease-in-out 0s,
box-shadow 0.15s ease-in-out 0.15s;
width: fun.convert-px(50);
&--github {
background: url(#{fun.encode-svg('<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path style="fill:#1b1817;fill-opacity:1;opacity:1;stroke-width:6.55748" d="M0 0h100v100H0z"/><path d="M50.003 15.864C69.33 15.864 85 31.534 85 50.865c0 15.464-10.028 28.581-23.936 33.211-1.75.32-2.389-.76-2.389-1.689 0-.829.03-3.031.047-5.951 9.736 2.114 11.79-4.693 11.79-4.693 1.592-4.044 3.887-5.12 3.887-5.12 3.178-2.17-.241-2.127-.241-2.127-3.513.247-5.36 3.607-5.36 3.607-3.123 5.348-8.193 3.803-10.187 2.907-.318-2.26-1.22-3.803-2.222-4.677 7.772-.883 15.943-3.887 15.943-17.299 0-3.82-1.365-6.944-3.604-9.391.361-.886 1.563-4.444-.341-9.263 0 0-2.94-.941-9.626 3.588-2.791-.778-5.786-1.164-8.762-1.177-2.972.013-5.967.4-8.762 1.177-6.682-4.53-9.615-3.588-9.615-3.588-1.91 4.82-.71 8.377-.348 9.263-2.243 2.447-3.6 5.571-3.6 9.391 0 13.446 8.185 16.405 15.982 17.271-1.257 1.08-2.376 3.216-2.376 6.482 0 4.678.043 8.453.043 9.6 0 .937-.63 2.027-2.407 1.685C25.02 79.433 15 66.324 15 50.865c0-19.331 15.672-35.001 35.003-35.001" style="fill:#fff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:.999999"/></svg>')});
}
&--gitlab {
background: url(#{fun.encode-svg('<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path style="opacity:1;fill:#ccc;fill-opacity:1;stroke-width:7.26231" d="M0 0h100v100H0z"/><path class="st3" d="m49.998 82.237 12.895-39.668H37.121Z" style="fill:#e24329;stroke-width:1"/><path class="st4" d="M19.058 42.57 15.13 54.62a2.67 2.67 0 0 0 .966 2.984l33.9 24.632Z" style="fill:#fca326;stroke-width:1"/><path class="st3" d="M19.058 42.57H37.12l-7.774-23.89c-.398-1.222-2.132-1.222-2.544 0z" style="fill:#e24329;stroke-width:1"/><path class="st4" d="m80.956 42.57 3.914 12.05a2.67 2.67 0 0 1-.966 2.984L49.998 82.237Z" style="fill:#fca326;stroke-width:1"/><path class="st3" d="M80.956 42.57H62.894l7.759-23.89c.398-1.222 2.132-1.222 2.544 0z" style="fill:#e24329;stroke-width:1"/><path style="fill:#fc6d26;stroke-width:4.82321" class="st5" d="m50.017 82.237 30.94-39.667H62.893Zm-.019 0L19.058 42.57H37.12z"/></svg>')});
}
&:hover,
&:focus {
box-shadow: fun.convert-px(-1) fun.convert-px(1) fun.convert-px(4)
fun.convert-px(2) fun.get-var(color-shadow-light);
transform: scale(1.15);
}
&:active {
opacity: 1;
}
}
}
}
|
