Skip to content

Commit 526636f

Browse files
AresPhoenix345AresPhoenix345
committed
fix: dark mode behavior of import section
Signed-off-by: AresPhoenix345 <[email protected]>
1 parent dccc516 commit 526636f

File tree

1 file changed

+93
-51
lines changed

1 file changed

+93
-51
lines changed

‎_layouts/single-page-model.html‎

Lines changed: 93 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@
66
---
77
<div class="blog-post text-container">
88

9-
<div class="post-content">
10-
11-
<style>
9+
<div class="post-content">
10+
11+
<style>
1212
.modal-image {
1313
display: flex;
1414
flex-direction: column;
@@ -62,14 +62,47 @@
6262
}
6363
.padded-box {
6464
padding: 1.5rem;
65-
/* background: #f8f8f8; */
6665
border-radius: 8px;
6766
margin-top: 1rem;
68-
6967
background-color: var(--color-components-background);
7068
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
7169
transition: box-shadow 0.3s ease;
7270
}
71+
72+
/* Import instructions section */
73+
.import-instructions {
74+
background-color: var(--color-components-background);
75+
border-left: 4px solid var(--color-brand, #00b39f);
76+
padding: 1rem 1.25rem;
77+
margin: 1.5rem 0;
78+
border-radius: 4px;
79+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
80+
transition: background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
81+
}
82+
83+
.import-instructions h3 {
84+
margin: 0 0 0.5rem 0;
85+
font-size: 1.1rem;
86+
color: var(--color-text-primary);
87+
}
88+
89+
.import-instructions p {
90+
margin: 0 0 0.75rem 0;
91+
color: var(--color-secondary-dark);
92+
line-height: 1.5;
93+
}
94+
95+
.import-instructions a {
96+
color: var(--color-brand, #00b39f);
97+
font-weight: 600;
98+
text-decoration: none;
99+
transition: color 0.2s ease;
100+
}
101+
102+
.import-instructions a:hover {
103+
text-decoration: underline;
104+
opacity: 0.85;
105+
}
73106
</style>
74107

75108
<!-- Model Image -->
@@ -111,6 +144,14 @@
111144
<div class="metadata-value">{{ page.subcategory }}</div>
112145
</div>
113146
</div>
147+
148+
<!-- Import Instructions Section -->
149+
<div class="import-instructions">
150+
<h3>How to Import This Model</h3>
151+
<p>Want to use this model in your Meshery instance? Learn how to import it using either the Meshery CLI or UI.</p>
152+
<a href="https://docs.meshery.io/guides/configuration-management/importing-models" target="_blank" rel="noopener noreferrer">View Import Instructions →</a>
153+
</div>
154+
114155
<!-- Documentation and Contribution Buttons -->
115156
<div id="copy-url">
116157
<div class="btn-class">
@@ -122,9 +163,9 @@
122163
</a>
123164
{% endif %}
124165
{% assign modelName = page.path | split: '/' | last | replace: '.md', '' %}
125-
<a href="/assets/modelsFiles/{{ modelName }}.tar" download>
126-
<button class="import" style="width: 10rem;">Download Model</button>
127-
</a>
166+
<a href="/assets/modelsFiles/{{ modelName }}.tar" download>
167+
<button class="import" style="width: 10rem;">Download Model</button>
168+
</a>
128169

129170
<div class="btn-tooltip-grp">
130171
<a href="https://docs.meshery.io/project/contributing/contributing-models-quick-start">
@@ -140,51 +181,52 @@
140181
</div> <!-- End modal-content -->
141182

142183
<!-- Scripts -->
143-
<script src="{{ site.baseurl }}/assets/js/catalog-modal.js"></script>
144-
145-
<script src="{{ site.baseurl }}/assets/js/thumbnail-clickable.js"></script>
184+
<script src="{{ site.baseurl }}/assets/js/catalog-modal.js"></script>
185+
<script src="{{ site.baseurl }}/assets/js/thumbnail-clickable.js"></script>
146186

147187
</div> <!-- End post-content -->
148-
<div class="model-details-container">
149-
<!-- Features List -->
150-
{% if page.featureList and page.featureList.size > 0 %}
151-
<div class="model-details">
152-
<h3>Key Features</h3>
153-
<ul>
154-
{% for feature in page.featureList %}
155-
<li>{{ feature }}</li>
156-
{% endfor %}
157-
</ul>
158-
</div>
159-
{% endif %}
188+
189+
<div class="model-details-container">
190+
<!-- Features List -->
191+
{% if page.featureList and page.featureList.size > 0 %}
192+
<div class="model-details">
193+
<h3>Key Features</h3>
194+
<ul>
195+
{% for feature in page.featureList %}
196+
<li>{{ feature }}</li>
197+
{% endfor %}
198+
</ul>
199+
</div>
200+
{% endif %}
160201

161-
<!-- Components List -->
162-
{% if page.components %}
163-
<div class="model-details padded-box">
164-
<h3>Components</h3>
165-
<div style="display: flex; flex-wrap: wrap; gap: 1rem;justify-content: center;">
166-
{% for component in page.components %}
167-
<div style="text-align: center; width: 150px;">
168-
<img src="{{site.baseurl}}/{{ component.colorIcon }}"
169-
onerror="this.src='/assets/images/meshery-color.svg'"
170-
style="width: 100px; height: 100px; object-fit: contain;"
171-
loading="lazy" />
172-
<p><strong>{{ component.name }}</strong></p>
173-
</div>
174-
{% endfor %}
202+
<!-- Components List -->
203+
{% if page.components %}
204+
<div class="model-details padded-box">
205+
<h3>Components</h3>
206+
<div style="display: flex; flex-wrap: wrap; gap: 1rem;justify-content: center;">
207+
{% for component in page.components %}
208+
<div style="text-align: center; width: 150px;">
209+
<img src="{{site.baseurl}}/{{ component.colorIcon }}"
210+
onerror="this.src='/assets/images/meshery-color.svg'"
211+
style="width: 100px; height: 100px; object-fit: contain;"
212+
loading="lazy" />
213+
<p><strong>{{ component.name }}</strong></p>
175214
</div>
176-
</div>
177-
{% endif %}
178-
<!-- Blog Navigation -->
179-
<div class="blog-navigation" style="margin-bottom: 2rem;">
180-
<div style="justify-content:space-between; display: flex; width:100%;">
181-
{% if page.previous.url %}
182-
<a href="{% include relative-src.html src=page.previous.url %}">&laquo; {{ page.previous.name }}</a>
183-
{% endif %}
184-
{% if page.next.url %}
185-
<a href="{% include relative-src.html src=page.next.url %}">{{ page.next.name }} &raquo;</a>
186-
{% endif %}
187-
</div>
188-
</div>
189-
</div>
215+
{% endfor %}
216+
</div>
217+
</div>
218+
{% endif %}
219+
220+
<!-- Blog Navigation -->
221+
<div class="blog-navigation" style="margin-bottom: 2rem;">
222+
<div style="justify-content:space-between; display: flex; width:100%;">
223+
{% if page.previous.url %}
224+
<a href="{% include relative-src.html src=page.previous.url %}">&laquo; {{ page.previous.name }}</a>
225+
{% endif %}
226+
{% if page.next.url %}
227+
<a href="{% include relative-src.html src=page.next.url %}">{{ page.next.name }} &raquo;</a>
228+
{% endif %}
229+
</div>
230+
</div>
231+
</div>
190232
</div>

0 commit comments

Comments
 (0)