Mirror/awesome-nostr
1
0
Fork 0
mirror of https://github.com/aljazceru/awesome-nostr.git synced 2025-02-22 06:39:00 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #522 from Yeghro/mobile

Browse Source 
More mobile improvments
This commit is contained in:
Aljaz Ceru 2025-01-25 21:38:52 -06:00 committed by GitHub
commit c4833d9a02
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 133 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
index.html
View File

@ -3,6 +3,11 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Add favicon links -->
<link rel="icon" type="image/png" href="Logo.png">
<link rel="apple-touch-icon" href="Logo.png">
<meta name="description" content="A comprehensive collection of Nostr resources, tools, clients, and protocols for developers and users.">
<meta name="keywords" content="nostr, cryptocurrency, decentralized social, protocols, tools, clients, resources">
<meta name="author" content="Your Name">

48
script.js
View File

@ -623,37 +623,37 @@ function createResourceCard(resource) {
let faviconUrl = '';
try {
const url = new URL(resource.link);
// Using Google's favicon service as a fallback if the direct favicon isn't available
faviconUrl = `https://www.google.com/s2/favicons?domain=${url.hostname}&sz=32`;
faviconUrl = `https://www.google.com/s2/favicons?domain=${url.hostname}&sz=64`;
} catch (e) {
console.warn('Invalid URL:', resource.link);
}
card.innerHTML = `
<div class="resource-header">
<h3 class="resource-title">
<a href="${resource.link}"
target="_blank"
rel="noopener"
itemprop="name">
${faviconUrl ? `<img src="${faviconUrl}" alt="" class="resource-favicon" />` : ''}
${resource.name}
<i class="fas fa-external-link-alt" aria-hidden="true"></i>
</a>
</h3>
${resource.stars ? `
<div class="resource-stars" itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">
<i class="fas fa-star" aria-hidden="true"></i>
<span itemprop="ratingValue">${resource.stars}</span>
<meta itemprop="ratingCount" content="${resource.stars}">
</div>
` : ''}
</div>
${resource.description ? `
<div class="resource-description" itemprop="description">
${resource.description}
${faviconUrl ? `<img src="${faviconUrl}" alt="" class="resource-favicon" />` : ''}
<div class="resource-content">
<h3 class="resource-title">
<a href="${resource.link}"
target="_blank"
rel="noopener"
itemprop="name">
${resource.name}
</a>
${resource.stars ? `
<div class="resource-stars" itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">
<i class="fas fa-star" aria-hidden="true"></i>
<span itemprop="ratingValue">${resource.stars}</span>
<meta itemprop="ratingCount" content="${resource.stars}">
</div>
` : ''}
</h3>
${resource.description ? `
<div class="resource-description" itemprop="description">
${resource.description}
</div>
` : ''}
</div>
` : ''}
</div>
`;
return card;

219
styles.css
View File

@ -63,7 +63,7 @@ body {
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
margin-top: 3rem; /* Increased from 1rem to 2.5rem for more spacing */
margin-top: 2rem; /* Increased from 1rem to 2.5rem for more spacing */
}
.sidebar-header h4 {
@ -181,7 +181,7 @@ body {
/* Resource Cards */
.resource-card {
background: var(--card-background);
border-radius: 8px;
border-radius: 12px;
padding: 16px;
margin-bottom: 16px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
@ -190,29 +190,52 @@ body {
overflow: visible;
}
.resource-header {
display: grid;
grid-template-columns: 64px 1fr;
gap: 16px;
align-items: start;
}
.resource-favicon {
width: 64px;
height: 64px;
margin: 0;
grid-row: span 2;
border-radius: 12px;
object-fit: cover;
}
.resource-title {
margin: 0;
font-size: 1.2em;
margin-bottom: 8px;
color: var(--text-color);
display: flex;
justify-content: space-between;
align-items: center;
}
.resource-title a {
color: var(--primary-color);
color: var(--text-color);
text-decoration: none;
font-weight: 600;
transition: color 0.2s ease;
}
.resource-title a:hover {
color: var(--hover-color);
.resource-description {
margin: 4px 0 0 0;
color: var(--text-color);
opacity: 0.7;
font-size: 0.95em;
line-height: 1.4;
}
/* Dark theme adjustment */
[data-theme="dark"] .resource-title a {
color: #a48ec7; /* A lighter shade of purple for dark mode */
}
[data-theme="dark"] .resource-title a:hover {
color: #b9a8d7; /* Even lighter shade for hover in dark mode */
.resource-stars {
color: var(--star-color);
font-size: 0.9em;
display: flex;
align-items: center;
gap: 4px;
}
.resource-link {
@ -232,33 +255,10 @@ body {
text-decoration: underline;
}
.resource-description {
color: var(--text-color);
margin: 12px 0;
line-height: 1.5;
font-size: 0.95em;
padding: 8px 12px;
background: rgba(156, 82, 139, 0.05);
border-radius: 4px;
border-left: 3px solid var(--primary-color);
}
.resource-stars {
color: var(--star-color);
font-size: 0.9em;
display: flex;
align-items: center;
gap: 4px;
}
.fa-star {
color: var(--star-color);
}
.fa-external-link-alt {
font-size: 0.9em;
}
/* Responsive Design */
@media (max-width: 768px) {
.sidebar {
@ -275,6 +275,10 @@ body {
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}
.sidebar-header {
margin-top: 5em;
}
.main-content {
margin-left: 0;
padding-top: 100px; /* Increase padding-top for mobile to account for wrapped nav elements */
@ -289,9 +293,14 @@ body {
}
.nav-content {
flex-wrap: wrap;
display: grid;
grid-template-columns: auto 1fr auto;
grid-template-areas:
"logo . controls"
"search search search";
gap: 0.5rem;
padding: 0.5rem 3.5rem;
padding: 0.5rem 1rem;
margin-left: 2.5rem; /* Space for menu toggle */
}
.nav-content h1 {
@ -301,11 +310,9 @@ body {
}
.search-box {
order: 3;
grid-area: search;
width: 100%;
max-width: none;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
margin: 0.5rem 0 0 0;
}
.nav-links a {
@ -415,12 +422,39 @@ body {
}
#resources-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1rem;
width: 100%;
height: auto;
min-height: 200px;
overflow: visible;
}
/* Ensure section headers span full width */
#resources-container > h2 {
grid-column: 1 / -1;
}
/* Update resource card styles for grid layout */
.resource-card {
background: var(--card-background);
border-radius: 12px;
padding: 16px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
height: 100%; /* This ensures all cards in a row are the same height */
display: flex;
flex-direction: column;
}
/* Special handling for contributors card and other full-width elements */
.resource-card.contributors-card,
.no-results,
.error-message,
.markdown-content {
grid-column: 1 / -1;
}
/* Category label styles */
.category-label {
font-size: 0.8em;
@ -462,15 +496,6 @@ body {
color: #f1c40f;
}
/* Update resource container header styles */
#resources-container h2 {
color: var(--primary-color);
margin-top: 1rem; /* Add top margin to push content down */
padding-top: 1rem; /* Add padding to create more space */
position: relative; /* Ensure it's positioned relative to its container */
z-index: 1; /* Keep it above other content but below the nav */
}
/* Main content scrollbar styles */
.main-content::-webkit-scrollbar {
width: 8px;
@ -602,22 +627,6 @@ button:focus {
display: none;
}
.resource-favicon {
width: 32px;
height: 32px;
margin-right: 8px;
vertical-align: middle;
display: inline-block;
}
.resource-title a {
display: flex;
align-items: center;
color: var(--primary-color);
text-decoration: none;
transition: color 0.2s ease;
}
.logo-container {
height: 40px;
width: 160px;
@ -634,79 +643,52 @@ button:focus {
/* Update responsive styles */
@media (max-width: 768px) {
.nav-content {
padding: 0 3.5rem; /* Make space for menu toggle */
display: grid;
grid-template-columns: auto 1fr auto;
grid-template-areas:
"logo . controls"
"search search search";
gap: 0.5rem;
padding: 0.5rem 1rem;
margin-left: 2.5rem; /* Space for menu toggle */
}
.menu-toggle {
top: 12px; /* Adjust position to align with nav */
left: 12px;
}
/* Adjust logo size for mobile */
.logo-container {
grid-area: logo;
height: 32px;
width: 120px;
width: auto;
max-width: 140px;
}
/* Make search more compact on mobile */
.search-box {
max-width: 160px;
}
.search-box input {
padding: 0.4rem 1.8rem 0.4rem 0.8rem;
font-size: 0.9rem;
}
/* Adjust theme controls for mobile */
.theme-controls {
grid-area: controls;
justify-self: end; /* Align to right */
display: flex;
gap: 0.5rem;
}
.theme-select {
max-width: 100px;
font-size: 0.8rem;
padding: 0.3rem;
}
.theme-toggle {
padding: 0.3rem;
font-size: 1rem;
.search-box {
grid-area: search;
width: 100%;
margin: 0.5rem 0 0 0;
}
}
/* Extra small screens */
@media (max-width: 480px) {
.nav-content {
flex-wrap: wrap;
gap: 0.5rem;
padding: 0 3rem;
gap: 0.3rem;
padding: 0.3rem 1rem;
}
.logo-container {
order: 1;
height: 28px;
width: 100px;
}
.search-box {
order: 3;
width: 100%;
max-width: none;
margin-top: 0.3rem;
}
.theme-controls {
order: 2;
max-width: 120px;
}
.theme-select {
max-width: 90px;
}
.main-content {
padding-top: 120px; /* Further increase padding-top for very small screens */
font-size: 0.75rem;
}
}
@ -808,4 +790,11 @@ button:focus {
.main-content {
padding-top: 140px; /* Even more padding for smallest screens */
}
}
/* Responsive adjustments */
@media (max-width: 640px) {
#resources-container {
grid-template-columns: 1fr; /* Single column on small screens */
}
}