@prosophia/lab-minimal 0.0.2 → 0.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,213 @@
1
+ /* PublicationDetailPage.module.css - Verdant Edition */
2
+
3
+ .pageWrapper {
4
+ padding-top: var(--header-height, 80px);
5
+ min-height: 100vh;
6
+ }
7
+
8
+ .container {
9
+ max-width: 900px;
10
+ margin: 0 auto;
11
+ padding: var(--space-3xl, 6rem) var(--space-xl, 3rem);
12
+ }
13
+
14
+ /* Main Card - Glass morphism */
15
+ .card {
16
+ padding: var(--space-2xl, 4rem);
17
+ border-radius: var(--radius-2xl, 24px);
18
+ backdrop-filter: blur(20px) saturate(180%);
19
+ -webkit-backdrop-filter: blur(20px) saturate(180%);
20
+ }
21
+
22
+ :global(body:not(.dark-mode)) .card,
23
+ :global(.light-mode) .card {
24
+ background: rgba(255, 255, 255, 0.7);
25
+ border: 1px solid rgba(21, 48, 33, 0.08);
26
+ box-shadow: 0 8px 32px rgba(10, 24, 16, 0.08);
27
+ }
28
+
29
+ :global(.dark-mode) .card,
30
+ :global(.dark) .card {
31
+ background: var(--dark-bg-tertiary);
32
+ border: 1px solid rgba(var(--accent-primary-rgb, 139, 218, 163), 0.12);
33
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
34
+ }
35
+
36
+ @media (max-width: 768px) {
37
+ .card {
38
+ padding: var(--space-xl, 3rem);
39
+ }
40
+ }
41
+
42
+ /* Header */
43
+ .header {
44
+ padding-bottom: var(--space-xl, 3rem);
45
+ margin-bottom: var(--space-xl, 3rem);
46
+ text-align: center;
47
+ border-bottom: 1px solid;
48
+ }
49
+
50
+ :global(body:not(.dark-mode)) .header,
51
+ :global(.light-mode) .header {
52
+ border-bottom-color: rgba(21, 48, 33, 0.1);
53
+ }
54
+
55
+ :global(.dark-mode) .header,
56
+ :global(.dark) .header {
57
+ border-bottom-color: rgba(139, 218, 163, 0.1);
58
+ }
59
+
60
+ .title {
61
+ font-size: clamp(1.5rem, 3vw, 2rem);
62
+ font-weight: 600;
63
+ line-height: 1.3;
64
+ letter-spacing: -0.01em;
65
+ margin: 0 0 var(--space-md, 1.5rem) 0;
66
+ }
67
+
68
+ .metaRow {
69
+ display: flex;
70
+ justify-content: center;
71
+ align-items: center;
72
+ flex-wrap: wrap;
73
+ gap: var(--space-sm, 1rem);
74
+ margin-top: var(--space-md, 1.5rem);
75
+ font-size: 0.875rem;
76
+ }
77
+
78
+ :global(body:not(.dark-mode)) .metaRow,
79
+ :global(.light-mode) .metaRow {
80
+ color: var(--light-text-muted, #7F878B);
81
+ }
82
+
83
+ :global(.dark-mode) .metaRow,
84
+ :global(.dark) .metaRow {
85
+ color: var(--dark-text-muted, #5C6366);
86
+ }
87
+
88
+ /* Abstract Section */
89
+ .abstractSection {
90
+ margin: var(--space-xl, 3rem) 0;
91
+ padding: var(--space-lg, 2rem);
92
+ border-radius: var(--radius-lg, 16px);
93
+ position: relative;
94
+ }
95
+
96
+ :global(body:not(.dark-mode)) .abstractSection,
97
+ :global(.light-mode) .abstractSection {
98
+ background: rgba(42, 104, 71, 0.06);
99
+ border-left: 4px solid var(--accent-tertiary, #5CB87A);
100
+ }
101
+
102
+ :global(.dark-mode) .abstractSection,
103
+ :global(.dark) .abstractSection {
104
+ background: rgba(92, 184, 122, 0.08);
105
+ border-left: 4px solid var(--accent-tertiary, #5CB87A);
106
+ }
107
+
108
+ .abstractTitle {
109
+ font-size: 0.875rem;
110
+ font-weight: 600;
111
+ letter-spacing: 0.12em;
112
+ text-transform: uppercase;
113
+ margin: 0 0 var(--space-md, 1.5rem) 0;
114
+ }
115
+
116
+ :global(body:not(.dark-mode)) .abstractTitle,
117
+ :global(.light-mode) .abstractTitle {
118
+ color: var(--accent-secondary, #3A8F62);
119
+ }
120
+
121
+ :global(.dark-mode) .abstractTitle,
122
+ :global(.dark) .abstractTitle {
123
+ color: var(--accent-tertiary, #5CB87A);
124
+ }
125
+
126
+ .abstractText {
127
+ line-height: 1.8;
128
+ font-size: 1rem;
129
+ }
130
+
131
+ :global(body:not(.dark-mode)) .abstractText,
132
+ :global(.light-mode) .abstractText {
133
+ color: var(--light-text-secondary, #153021);
134
+ }
135
+
136
+ :global(.dark-mode) .abstractText,
137
+ :global(.dark) .abstractText {
138
+ color: var(--dark-text-secondary, #8BDAA3);
139
+ }
140
+
141
+ /* Footer */
142
+ .footer {
143
+ margin-top: var(--space-xl, 3rem);
144
+ padding-top: var(--space-lg, 2rem);
145
+ border-top: 1px solid;
146
+ display: flex;
147
+ flex-wrap: wrap;
148
+ gap: var(--space-md, 1.5rem);
149
+ align-items: center;
150
+ }
151
+
152
+ :global(body:not(.dark-mode)) .footer,
153
+ :global(.light-mode) .footer {
154
+ border-top-color: rgba(21, 48, 33, 0.1);
155
+ }
156
+
157
+ :global(.dark-mode) .footer,
158
+ :global(.dark) .footer {
159
+ border-top-color: rgba(139, 218, 163, 0.1);
160
+ }
161
+
162
+ /* Action Button - Gradient */
163
+ .actionButton {
164
+ display: inline-flex;
165
+ align-items: center;
166
+ gap: 0.5rem;
167
+ padding: 0.875rem 1.75rem;
168
+ background: linear-gradient(135deg, var(--accent-primary, #2A6847), var(--accent-secondary, #3A8F62));
169
+ color: white;
170
+ border-radius: var(--radius-md, 12px);
171
+ font-weight: 500;
172
+ text-decoration: none;
173
+ transition: all var(--transition-base);
174
+ box-shadow: 0 4px 16px rgba(42, 104, 71, 0.3);
175
+ }
176
+
177
+ .actionButton:hover {
178
+ transform: translateY(-2px);
179
+ box-shadow: 0 8px 24px rgba(42, 104, 71, 0.4);
180
+ }
181
+
182
+ /* Back Link */
183
+ .backLink {
184
+ display: inline-flex;
185
+ align-items: center;
186
+ gap: 0.5rem;
187
+ padding: 0.75rem 1.5rem;
188
+ border: 1px solid var(--accent-tertiary, #5CB87A);
189
+ border-radius: var(--radius-md, 12px);
190
+ font-weight: 500;
191
+ font-size: 0.9375rem;
192
+ text-decoration: none;
193
+ transition: all var(--transition-base);
194
+ }
195
+
196
+ :global(body:not(.dark-mode)) .backLink,
197
+ :global(.light-mode) .backLink {
198
+ background: rgba(42, 104, 71, 0.08);
199
+ color: var(--accent-primary, #2A6847);
200
+ }
201
+
202
+ :global(.dark-mode) .backLink,
203
+ :global(.dark) .backLink {
204
+ background: rgba(92, 184, 122, 0.1);
205
+ color: var(--accent-tertiary, #5CB87A);
206
+ }
207
+
208
+ .backLink:hover {
209
+ background: linear-gradient(135deg, var(--accent-primary, #2A6847), var(--accent-secondary, #3A8F62));
210
+ color: white;
211
+ transform: translateY(-2px);
212
+ border-color: transparent;
213
+ }
@@ -0,0 +1,126 @@
1
+ /* PublicationsPage.module.css - Minimal Template */
2
+
3
+ .pageWrapper {
4
+ padding-top: var(--header-height, 64px);
5
+ min-height: 100vh;
6
+ }
7
+
8
+ .pageContainer {
9
+ max-width: var(--max-width-content);
10
+ margin: 0 auto;
11
+ padding: 0 var(--spacing-lg);
12
+ }
13
+
14
+ /* Page Header */
15
+ .pageHeader {
16
+ text-align: center;
17
+ padding: var(--spacing-4xl) 0 var(--spacing-3xl);
18
+ border-bottom: 1px solid var(--color-border);
19
+ margin-bottom: var(--spacing-3xl);
20
+ }
21
+
22
+ .title {
23
+ font-size: var(--font-size-4xl);
24
+ font-weight: var(--font-weight-semibold);
25
+ color: var(--color-text-primary);
26
+ margin: 0 0 var(--spacing-sm) 0;
27
+ }
28
+
29
+ .subtitle {
30
+ font-size: var(--font-size-lg);
31
+ color: var(--color-text-secondary);
32
+ max-width: 500px;
33
+ margin: 0 auto;
34
+ }
35
+
36
+ .main {
37
+ padding-bottom: var(--spacing-4xl);
38
+ }
39
+
40
+ .publicationsList {
41
+ max-width: 800px;
42
+ margin: 0 auto;
43
+ display: flex;
44
+ flex-direction: column;
45
+ gap: var(--spacing-3xl);
46
+ }
47
+
48
+ /* Year Section */
49
+ .yearSection {
50
+ width: 100%;
51
+ }
52
+
53
+ .yearHeader {
54
+ font-size: var(--font-size-sm);
55
+ font-weight: var(--font-weight-semibold);
56
+ color: var(--accent-primary);
57
+ margin-bottom: var(--spacing-lg);
58
+ padding-bottom: var(--spacing-sm);
59
+ border-bottom: 1px solid var(--color-border);
60
+ }
61
+
62
+ .publicationsGrid {
63
+ display: flex;
64
+ flex-direction: column;
65
+ gap: var(--spacing-sm);
66
+ }
67
+
68
+ /* Publication Item */
69
+ .publicationLink {
70
+ display: flex;
71
+ align-items: flex-start;
72
+ justify-content: space-between;
73
+ gap: var(--spacing-lg);
74
+ text-decoration: none;
75
+ color: inherit;
76
+ padding: var(--spacing-lg);
77
+ background: var(--color-background-card);
78
+ border: 1px solid var(--color-border);
79
+ border-radius: var(--border-radius-md);
80
+ transition: border-color var(--transition-base);
81
+ }
82
+
83
+ .publicationLink:hover {
84
+ border-color: var(--accent-primary);
85
+ }
86
+
87
+ .publicationContent {
88
+ flex: 1;
89
+ min-width: 0;
90
+ }
91
+
92
+ .publicationTitle {
93
+ font-size: var(--font-size-base);
94
+ font-weight: var(--font-weight-semibold);
95
+ line-height: 1.4;
96
+ margin: 0 0 var(--spacing-xs) 0;
97
+ color: var(--color-text-primary);
98
+ transition: color var(--transition-base);
99
+ }
100
+
101
+ .publicationLink:hover .publicationTitle {
102
+ color: var(--accent-primary);
103
+ }
104
+
105
+ .authors {
106
+ font-size: var(--font-size-sm);
107
+ color: var(--color-text-secondary);
108
+ margin: 0 0 var(--spacing-xs) 0;
109
+ }
110
+
111
+ .journal {
112
+ font-size: var(--font-size-xs);
113
+ font-style: italic;
114
+ color: var(--color-text-muted);
115
+ margin: 0;
116
+ }
117
+
118
+ .externalIcon {
119
+ flex-shrink: 0;
120
+ color: var(--color-text-muted);
121
+ transition: color var(--transition-base);
122
+ }
123
+
124
+ .publicationLink:hover .externalIcon {
125
+ color: var(--accent-primary);
126
+ }
@@ -0,0 +1,131 @@
1
+ /* ResearchPage.module.css - Minimal Template */
2
+
3
+ .pageWrapper {
4
+ padding-top: var(--header-height, 64px);
5
+ min-height: 100vh;
6
+ }
7
+
8
+ .pageContainer {
9
+ max-width: var(--max-width-content);
10
+ margin: 0 auto;
11
+ padding: 0 var(--spacing-lg);
12
+ }
13
+
14
+ /* Page Header */
15
+ .pageHeader {
16
+ text-align: center;
17
+ padding: var(--spacing-4xl) 0 var(--spacing-3xl);
18
+ border-bottom: 1px solid var(--color-border);
19
+ margin-bottom: var(--spacing-3xl);
20
+ }
21
+
22
+ .title {
23
+ font-size: var(--font-size-4xl);
24
+ font-weight: var(--font-weight-semibold);
25
+ color: var(--color-text-primary);
26
+ margin: 0 0 var(--spacing-sm) 0;
27
+ }
28
+
29
+ .subtitle {
30
+ font-size: var(--font-size-lg);
31
+ color: var(--color-text-secondary);
32
+ max-width: 600px;
33
+ margin: 0 auto;
34
+ line-height: 1.6;
35
+ }
36
+
37
+ .main {
38
+ padding-bottom: var(--spacing-4xl);
39
+ }
40
+
41
+ .content {
42
+ max-width: 700px;
43
+ margin: 0 auto;
44
+ }
45
+
46
+ /* Content Styling - Clean & Simple */
47
+ .content :global(p) {
48
+ margin: 0 0 var(--spacing-lg) 0;
49
+ line-height: 1.8;
50
+ font-size: var(--font-size-base);
51
+ color: var(--color-text-secondary);
52
+ }
53
+
54
+ .content :global(p:first-of-type) {
55
+ font-size: var(--font-size-lg);
56
+ font-weight: var(--font-weight-medium);
57
+ color: var(--color-text-primary);
58
+ margin-bottom: var(--spacing-xl);
59
+ }
60
+
61
+ .content :global(h2) {
62
+ font-size: var(--font-size-2xl);
63
+ font-weight: var(--font-weight-semibold);
64
+ color: var(--color-text-primary);
65
+ margin: var(--spacing-3xl) 0 var(--spacing-lg) 0;
66
+ padding-bottom: var(--spacing-sm);
67
+ border-bottom: 1px solid var(--color-border);
68
+ }
69
+
70
+ .content :global(h3) {
71
+ font-size: var(--font-size-xl);
72
+ font-weight: var(--font-weight-semibold);
73
+ color: var(--color-text-primary);
74
+ margin: var(--spacing-2xl) 0 var(--spacing-md) 0;
75
+ }
76
+
77
+ .content :global(ul),
78
+ .content :global(ol) {
79
+ margin: 0 0 var(--spacing-lg) var(--spacing-xl);
80
+ padding: 0;
81
+ }
82
+
83
+ .content :global(li) {
84
+ margin-bottom: var(--spacing-sm);
85
+ line-height: 1.7;
86
+ color: var(--color-text-secondary);
87
+ }
88
+
89
+ .content :global(a) {
90
+ color: var(--accent-primary);
91
+ text-decoration: none;
92
+ font-weight: var(--font-weight-medium);
93
+ transition: color var(--transition-base);
94
+ }
95
+
96
+ .content :global(a:hover) {
97
+ color: var(--accent-hover);
98
+ }
99
+
100
+ .content :global(blockquote) {
101
+ margin: var(--spacing-xl) 0;
102
+ padding: var(--spacing-md) var(--spacing-lg);
103
+ border-left: 3px solid var(--accent-primary);
104
+ background: var(--color-background-secondary);
105
+ border-radius: var(--border-radius-sm);
106
+ font-style: italic;
107
+ color: var(--color-text-secondary);
108
+ }
109
+
110
+ .content :global(img) {
111
+ display: block;
112
+ max-width: 100%;
113
+ height: auto;
114
+ margin: var(--spacing-2xl) 0;
115
+ border-radius: var(--border-radius-md);
116
+ border: 1px solid var(--color-border);
117
+ }
118
+
119
+ .content :global(strong) {
120
+ font-weight: var(--font-weight-semibold);
121
+ color: var(--color-text-primary);
122
+ }
123
+
124
+ .content :global(code) {
125
+ font-family: 'SF Mono', 'Fira Code', monospace;
126
+ font-size: 0.9em;
127
+ padding: 0.2em 0.4em;
128
+ background: var(--color-background-secondary);
129
+ border-radius: var(--border-radius-sm);
130
+ color: var(--color-text-primary);
131
+ }
@@ -0,0 +1,114 @@
1
+ /* ThemeToggle.module.css - Intuitive sliding toggle */
2
+
3
+ .toggle {
4
+ position: relative;
5
+ display: flex;
6
+ align-items: center;
7
+ justify-content: center;
8
+ padding: 4px;
9
+ background: transparent;
10
+ border: none;
11
+ cursor: pointer;
12
+ border-radius: var(--radius-full, 9999px);
13
+ transition: transform var(--transition-base, 0.3s ease);
14
+ }
15
+
16
+ .toggle:hover {
17
+ transform: scale(1.05);
18
+ }
19
+
20
+ .toggle:focus-visible {
21
+ outline: 2px solid var(--accent-tertiary);
22
+ outline-offset: 2px;
23
+ }
24
+
25
+ .togglePlaceholder {
26
+ width: 60px;
27
+ height: 32px;
28
+ }
29
+
30
+ .track {
31
+ position: relative;
32
+ display: flex;
33
+ align-items: center;
34
+ justify-content: space-between;
35
+ width: 60px;
36
+ height: 32px;
37
+ padding: 0 6px;
38
+ border-radius: var(--radius-full, 9999px);
39
+ transition: all var(--transition-base, 0.3s ease);
40
+ }
41
+
42
+ /* Light mode track */
43
+ :global(body:not(.dark-mode)) .track,
44
+ :global(.light-mode) .track {
45
+ background: rgba(42, 104, 71, 0.12);
46
+ border: 1px solid rgba(21, 48, 33, 0.15);
47
+ }
48
+
49
+ /* Dark mode track */
50
+ :global(.dark-mode) .track,
51
+ :global(.dark) .track {
52
+ background: rgba(139, 218, 163, 0.15);
53
+ border: 1px solid rgba(139, 218, 163, 0.2);
54
+ }
55
+
56
+ .thumb {
57
+ position: absolute;
58
+ top: 3px;
59
+ left: 3px;
60
+ width: 24px;
61
+ height: 24px;
62
+ border-radius: 50%;
63
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
64
+ z-index: 2;
65
+ }
66
+
67
+ /* Light mode thumb */
68
+ :global(body:not(.dark-mode)) .thumb,
69
+ :global(.light-mode) .thumb {
70
+ background: linear-gradient(135deg, var(--accent-primary, #2A6847), var(--accent-secondary, #3A8F62));
71
+ }
72
+
73
+ /* Dark mode thumb */
74
+ :global(.dark-mode) .thumb,
75
+ :global(.dark) .thumb {
76
+ background: linear-gradient(135deg, var(--accent-secondary, #3A8F62), var(--accent-tertiary, #5CB87A));
77
+ }
78
+
79
+ .icon {
80
+ display: flex;
81
+ align-items: center;
82
+ justify-content: center;
83
+ width: 20px;
84
+ height: 20px;
85
+ z-index: 1;
86
+ transition: all var(--transition-base, 0.3s ease);
87
+ opacity: 0.4;
88
+ }
89
+
90
+ .iconActive {
91
+ opacity: 1;
92
+ }
93
+
94
+ /* Light mode icons */
95
+ :global(body:not(.dark-mode)) .sunIcon,
96
+ :global(.light-mode) .sunIcon {
97
+ color: var(--accent-primary, #2A6847);
98
+ }
99
+
100
+ :global(body:not(.dark-mode)) .moonIcon,
101
+ :global(.light-mode) .moonIcon {
102
+ color: var(--light-text-muted, #7F878B);
103
+ }
104
+
105
+ /* Dark mode icons */
106
+ :global(.dark-mode) .sunIcon,
107
+ :global(.dark) .sunIcon {
108
+ color: var(--dark-text-muted, #5C6366);
109
+ }
110
+
111
+ :global(.dark-mode) .moonIcon,
112
+ :global(.dark) .moonIcon {
113
+ color: var(--accent-tertiary, #5CB87A);
114
+ }
@@ -0,0 +1,26 @@
1
+ interface SiteSettings {
2
+ labName?: string;
3
+ labNameAccent?: string;
4
+ labNameDescription?: string;
5
+ footerText?: string;
6
+ showPrivacyPolicy?: boolean;
7
+ privacyPolicyUrl?: string;
8
+ showTerms?: boolean;
9
+ termsUrl?: string;
10
+ }
11
+ interface SiteConfig {
12
+ title: string;
13
+ description: string;
14
+ url?: string;
15
+ }
16
+ interface ThemeConfig {
17
+ primaryColor?: string;
18
+ accentColor?: string;
19
+ }
20
+ interface ProsophiaConfig {
21
+ template?: string;
22
+ site: SiteConfig;
23
+ theme?: ThemeConfig;
24
+ }
25
+
26
+ export type { ProsophiaConfig as P, SiteSettings as S, ThemeConfig as T, SiteConfig as a };
@@ -0,0 +1,26 @@
1
+ interface SiteSettings {
2
+ labName?: string;
3
+ labNameAccent?: string;
4
+ labNameDescription?: string;
5
+ footerText?: string;
6
+ showPrivacyPolicy?: boolean;
7
+ privacyPolicyUrl?: string;
8
+ showTerms?: boolean;
9
+ termsUrl?: string;
10
+ }
11
+ interface SiteConfig {
12
+ title: string;
13
+ description: string;
14
+ url?: string;
15
+ }
16
+ interface ThemeConfig {
17
+ primaryColor?: string;
18
+ accentColor?: string;
19
+ }
20
+ interface ProsophiaConfig {
21
+ template?: string;
22
+ site: SiteConfig;
23
+ theme?: ThemeConfig;
24
+ }
25
+
26
+ export type { ProsophiaConfig as P, SiteSettings as S, ThemeConfig as T, SiteConfig as a };