Skip to content

Commit 1ec8b69

Browse files
peterbenoitpeterbenoit
committed
style adjustments
1 parent b279743 commit 1ec8b69

File tree

2 files changed

+36
-48
lines changed

2 files changed

+36
-48
lines changed

‎src/index.html‎

Lines changed: 7 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -64,27 +64,6 @@
6464
margin-bottom: 20px;
6565
}
6666

67-
#repo-container {
68-
padding: 1.5rem;
69-
display: grid;
70-
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
71-
gap: 1.5rem;
72-
width: 100%;
73-
}
74-
75-
#repo-container > div {
76-
background-color: #ffffff;
77-
border-radius: 8px;
78-
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
79-
overflow: hidden;
80-
transition: transform 0.3s;
81-
padding: 1rem;
82-
}
83-
84-
#repo-container > div:hover {
85-
transform: scale(1.05);
86-
}
87-
8867
.sidebar {
8968
position: fixed;
9069
top: 0;
@@ -622,13 +601,18 @@ <h2 class="text-3xl font-bold text-slate-900 mb-6">Responsive Design</h2>
622601
<div x-show="currentSection === 'config'" class="flex">
623602
<div class="demo-area m-8">
624603
<h2 class="text-3xl font-bold text-slate-900 mb-6">Demo</h2>
625-
<p class="text-slate-600 ml-8">
604+
<p class="text-slate-600">
626605
The GitHub Repository Widget is highly configurable. You can edit its
627606
appearance and behavior using various options by using the settings
628607
button on the right.
629608
</p>
630609

631-
<div id="repo-container" role="region" aria-live="polite"></div>
610+
<div
611+
id="repo-container"
612+
role="region"
613+
aria-live="polite"
614+
class="mt-4"
615+
></div>
632616

633617
<div class="sidebar" id="color-controls" aria-expanded="false">
634618
<div class="flex justify-between items-center mb-4">

‎src/lib/repoWidget.js‎

Lines changed: 29 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -141,36 +141,40 @@
141141
card.innerHTML = `
142142
<a href="${
143143
repo.html_url
144-
}" target="_blank" style="text-decoration: none; color: inherit; display: block; padding: 16px;">
145-
<h3 style="font-size: 1.25rem; font-weight: bold; color: ${textStyles.titleColor || '#333333'};">${
144+
}" target="_blank" style="text-decoration: none; color: inherit; display: flex; flex-direction: column; height: 100%; padding: 16px;">
145+
<div style="flex: 1;">
146+
<h3 style="font-size: 1.25rem; font-weight: bold; color: ${textStyles.titleColor || '#333333'};">${
146147
repo.name
147148
}</h3>
148-
<p style="color: ${textStyles.descriptionColor || '#666666'}; margin: 8px 0;">${
149+
<p style="color: ${textStyles.descriptionColor || '#666666'}; margin: 8px 0;">${
149150
repo.description || 'No description provided'
150151
}</p>
151-
<div style="display: flex; align-items: center; color: ${
152-
textStyles.iconColor || '#888888'
153-
}; font-size: 0.875rem;">
154-
<span style="display: flex; align-items: center; margin-right: 16px;">
155-
<span style="width: 10px; height: 10px; background-color: ${languageColor}; border-radius: 50%; margin-right: 4px;"></span>
156-
${repo.language || 'N/A'}
157-
</span>
158-
<span style="display: flex; align-items: center; margin-right: 16px;">
159-
<svg width="16" height="16" fill="${
160-
textStyles.iconColor || '#888888'
161-
}" style="margin-right: 4px;"><path d="M5 5.372v.878c0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75v-.878a2.25 2.25 0 1 1 1.5 0v.878a2.25 2.25 0 0 1-2.25 2.25h-1.5v2.128a2.251 2.251 0 1 1-1.5 0V8.5h-1.5A2.25 2.25 0 0 1 3.5 6.25v-.878a2.25 2.25 0 1 1 1.5 0ZM5 3.25a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Zm6.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm-3 8.75a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Z"></path></svg>
162-
${repo.forks_count}
163-
</span>
164-
<span style="display: flex; align-items: center;">
165-
<svg width="16" height="16" fill="${
166-
textStyles.iconColor || '#888888'
167-
}" style="margin-right: 4px;"><path d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Z"></path></svg>
168-
${repo.stargazers_count}
169-
</span>
170152
</div>
171-
<div style="color: ${
172-
textStyles.sizeColor || '#aaaaaa'
173-
}; font-size: 0.75rem; margin-top: 8px;">Size: ${repo.size} KB</div>
153+
<div style="margin-top: auto;">
154+
<div style="display: flex; align-items: center; color: ${
155+
textStyles.iconColor || '#888888'
156+
}; font-size: 0.875rem;">
157+
<span style="display: flex; align-items: center; margin-right: 16px;">
158+
<span style="width: 10px; height: 10px; background-color: ${languageColor}; border-radius: 50%; margin-right: 4px;"></span>
159+
${repo.language || 'N/A'}
160+
</span>
161+
<span style="display: flex; align-items: center; margin-right: 16px;">
162+
<svg width="16" height="16" fill="${
163+
textStyles.iconColor || '#888888'
164+
}" style="margin-right: 4px;"><path d="M5 5.372v.878c0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75v-.878a2.25 2.25 0 1 1 1.5 0v.878a2.25 2.25 0 0 1-2.25 2.25h-1.5v2.128a2.251 2.251 0 1 1-1.5 0V8.5h-1.5A2.25 2.25 0 0 1 3.5 6.25v-.878a2.25 2.25 0 1 1 1.5 0ZM5 3.25a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Zm6.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm-3 8.75a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Z"></path></svg>
165+
${repo.forks_count}
166+
</span>
167+
<span style="display: flex; align-items: center;">
168+
<svg width="16" height="16" fill="${
169+
textStyles.iconColor || '#888888'
170+
}" style="margin-right: 4px;"><path d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Z"></path></svg>
171+
${repo.stargazers_count}
172+
</span>
173+
</div>
174+
<div style="color: ${
175+
textStyles.sizeColor || '#aaaaaa'
176+
}; font-size: 0.75rem; margin-top: 8px;">Size: ${repo.size} KB</div>
177+
</div>
174178
</a>
175179
`;
176180

0 commit comments

Comments
 (0)