diff --git a/assets/css/forum-styles.css b/assets/css/forum-styles.css index 8e7ced5..94ad1a2 100644 --- a/assets/css/forum-styles.css +++ b/assets/css/forum-styles.css @@ -541,17 +541,20 @@ body { padding: 1.2vh; } } -@media (max-width: 768px) { - .minter-card { - flex: 1 1 calc(50% - 20px); /* Two cards per row on medium screens */ - } -} +/* Two cards per row on medium screens */ -@media (max-width: 480px) { +/* @media (max-width: 768px) { .minter-card { - flex: 1 1 100%; /* Full-width cards on small screens */ + flex: 1 1 calc(50% - 20px); } -} +} */ +/* Full-width cards on small screens */ + +/* @media (max-width: 480px) { + .minter-card { + flex: 1 1 100%; + } +} */ .minter-card { background-color: #1e1e2e; /* Dark background */ @@ -581,19 +584,22 @@ body { .minter-card-header h3 { margin: 0; - font-size: 1.5em; + font-size: 1.6em; color: #ffae42; /* Highlight for the header */ } .minter-card h5 { margin: 0; - font-size: 1.0em; + font-size: 1.4em; color: lightgreen; text-align: center; } +.minter-card p { + font-size: 1.12em; +} .minter-card-header p { - font-size: 0.9em; + font-size: 1.15em; color: #cccccc; /* Subdued color for additional header info */ } @@ -609,7 +615,7 @@ body { .minter-card-results h5 { margin-bottom: 1vh; - font-size: 1.1vh; + font-size: 1.3em; color: lightgreen; text-align: center; } @@ -622,7 +628,7 @@ body { .minter-card-results span { padding: 5px 10px; border-radius: 8px; - font-size: 0.9em; + font-size: 1.1em; } .minter-card-results .admin-yes { @@ -665,7 +671,7 @@ body { border: 1px solid #d3d3d3; /* Light grey border */ padding: 1rem; /* Add padding inside the section */ margin: 1rem 0; /* Add margin outside the section for spacing */ - font-size: 0.75em; /* Set the font size */ + font-size: 1.1em; /* Set the font size */ line-height: 1.5; /* Optional: Adjust line spacing for better readability */ height: calc(1.5 * 750 / 66 * 0.8em); /* Dynamically calculate height to fit 1000 characters */ overflow-y: auto; /* Enable vertical scrolling if content overflows */ @@ -769,6 +775,10 @@ body { box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5); } +.comments { + font-size: 1.15em; +} + .comments-container { margin-bottom: 10px; max-height: 150px; @@ -801,10 +811,7 @@ textarea::placeholder { background-color: #0055cc; } -.minter-card p { - font-size: 12px; - color: gray; -} + diff --git a/assets/js/MinterBoard.js b/assets/js/MinterBoard.js index e775b02..8463405 100644 --- a/assets/js/MinterBoard.js +++ b/assets/js/MinterBoard.js @@ -33,7 +33,7 @@ async function loadMinterBoardPage() { mainContent.innerHTML = ` <div class="minter-board-main" style="padding: 20px; text-align: center;"> <h1 style="color: lightblue;">Minter Board</h1> - <p> The Minter Board is a place to publish information about yourself in order to obtain support from existing Minters and Minter Admins on the Qortal network. You may publish a header, content, and links to other QDN-published content in order to support you in your mission. Minter Admins and Existing Minters will then support you (or not) by way of a vote on your card. Card details you publish, along with existing poll results, and comments from others, will be displayed here. Good Luck on your Qortal journey to becoming a minter!</p> + <p style="font-size: 1.25em;"> The Minter Board is a place to publish information about yourself in order to obtain support from existing Minters and Minter Admins on the Qortal network. You may publish a header, content, and links to other QDN-published content in order to support you in your mission. Minter Admins and Existing Minters will then support you (or not) by way of a vote on your card. Card details you publish, along with existing poll results, and comments from others, will be displayed here. Good Luck on your Qortal journey to becoming a minter!</p> <button id="publish-card-button" class="publish-card-button" style="margin: 20px; padding: 10px;">Publish Minter Card</button> <div id="cards-container" class="cards-container" style="margin-top: 20px;"></div> <div id="publish-card-view" class="publish-card-view" style="display: none; text-align: left; padding: 20px;"> @@ -389,9 +389,6 @@ const displayComments = async (cardIdentifier) => { try { const comments = await fetchCommentsForCard(cardIdentifier); const commentsContainer = document.getElementById(`comments-container-${cardIdentifier}`); - - // Clear previous comments - commentsContainer.innerHTML = ''; // Fetch and display each comment for (const comment of comments) { @@ -457,7 +454,6 @@ async function createCardHTML(cardData, pollResults, cardIdentifier) { const { adminYes = 0, adminNo = 0, minterYes = 0, minterNo = 0, totalYes = 0, totalNo = 0 } = calculatePollResults(pollResults, minterGroupMembers) || {}; - return ` <div class="minter-card"> <div class="minter-card-header"> diff --git a/index.html b/index.html index 084f5e9..85933e3 100644 --- a/index.html +++ b/index.html @@ -229,7 +229,7 @@ </div> <a class="link-wrap" href="#"> - <p class="mbr-link mbr-fonts-style display-4">Q-Mintership v0.22beta</p> + <p class="mbr-link mbr-fonts-style display-4">Q-Mintership v0.24beta</p> </a> </div> <div class="col-12 col-lg-6">