Skip to content

Added extended footer with partner links. Began formatting adjustment… #341

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
OFiDCrypt merged 1 commit into from
Jul 15, 2025
Merged

Added extended footer with partner links. Began formatting adjustment… #341

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 48 additions & 2 deletions 404.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -215,13 +215,59 @@ <h3>Social</h3>
<li><a href="/pages/about.html">About</a></li>
</ul>
<ul>
<ul><li>&copy; OF<span class="i">i</span>DCrypt e𝕏P Web3™ 2025</li></ul>
<li>© OF<span class="i">i</span>DCrypt e𝕏P Web3™ 2025</li>
</ul>
<ul>
<li>Design: <a href="https://html5up.net">HTML5 UP</a></li>
</ul>
</div>
</div>

<!-- Footer Extended Links Container -->
<div class="footer-extended-container">
<section class="footer-extended">
<h1 class="left-aligned">
<span class="smaller-heading">Partner Token Projects</span><br />
</h1>
<ul>
<li><a href="/kincommunity.html#one-kin">$ONE</a></li>
<li><a href="/kincommunity.html#one-kin">$KIN</a></li>
<li><a href="/kincommunity.html#token-partners">$DOBBY</a></li>
<li><a href="/kincommunity.html#token-partners">$DUNO</a></li>
<li><a href="/kincommunity.html#token-partners">$MYLO</a></li>
</ul>
</section>

<section class="footer-extended">
<h1 class="left-aligned">
<span class="smaller-heading">Affiliate Partnerships</span><br />
</h1>
<ul>
<li><a href="/pages/affiliate.html#kraken">Kraken</a></li>
<li><a href="/pages/affiliate.html#ledger">Ledger</a></li>
</ul>
</section>

<section class="footer-extended">
<h1 class="left-aligned">
<span class="smaller-heading">Tech & Site Partners</span><br />
</h1>
<ul>
<li><a href="/pages/affiliate.html#hvr">HVR Technologies</a></li>
<li><a href="https://x.com/GFDevSoft">GFDevSoft</a></li>
</ul>
</section>

<section class="footer-extended">
<h1 class="left-aligned">
<span class="smaller-heading">Collab Communities</span><br />
</h1>
<ul>
<li><a href="/kincommunity.html">ONE Kin</a></li>
<li><a href="https://x.com/_WEB3M_">WEB3M</a></li>
<li><a href="https://x.com/theweb3family">The Web3 Family</a></li>
</ul>
</section>
</div>

<!-- Page Specific Scripts -->
<script>
Expand Down
295 changes: 191 additions & 104 deletions assets/css/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4785,7 +4785,7 @@ section.livestream {
overflow-y: auto; /* Vertical scroll if content overflows */
scroll-snap-align: center; /* Center each box in viewport */
flex-direction: column; /* Stack content vertically */
margin: 0 15px 1rem 15px; /* Margin for scrollbar compensation */
margin: 15px 15px 1rem 15px; /* Margin for scrollbar compensation */
box-sizing: border-box; /* Include padding/border in width */
position: relative; /* Context for absolute arrows */
}
Expand Down Expand Up @@ -6142,121 +6142,208 @@ article.community.featured {
}
}

#copyright {
color: var(--copyright-text-color);
position: relative;
cursor: default;
font-family: "Source Sans Pro", Helvetica, sans-serif;
font-size: 0.8rem;
font-weight: 900;
letter-spacing: 0.075em;
line-height: 1.5;
text-align: center;
text-transform: uppercase;
margin: 4rem auto 8rem auto;
width: calc(100% - 4rem);
max-width: 72rem;
z-index: 2;
}

#copyright input, #copyright select, #copyright textarea {
color: var(--copyright-input-color);
}

#copyright a {
color: var(--copyright-link-color);
border-bottom-color: rgba(255, 255, 255, 0.5);
}

#copyright a:hover {
border-bottom-color: transparent;
color: var(--copyright-link-hover-color) !important;
}

#copyright strong, #copyright b {
color: var(--copyright-strong-color);
}

#copyright h1, #copyright h2, #copyright h3, #copyright h4, #copyright h5, #copyright h6 {
color: var(--copyright-heading-color);
}

#copyright blockquote {
border-left-color: var(--copyright-blockquote-border-color);
}

#copyright code {
background: rgba(255, 255, 255, 0.075); /* Assuming this should stay the same */
border-color: var(--copyright-code-border-color);
}

#copyright hr {
border-bottom-color: var(--copyright-hr-color);
}
/* Copyright */
#copyright {
color: var(--copyright-text-color); /* Black in light mode, white in dark mode */
position: relative;
cursor: default;
font-family: "Source Sans Pro", Helvetica, sans-serif;
font-size: 0.8rem;
font-weight: 900;
letter-spacing: 0.075em;
line-height: 1.5;
text-align: center;
text-transform: uppercase;
margin: 2rem auto 0rem auto; /* Your updated margin */
width: calc(100% - 4rem);
max-width: 72rem;
z-index: 2;
}

#copyright a {
color: inherit;
border-bottom-color: inherit;
}
#copyright input,
#copyright select,
#copyright textarea {
color: var(--copyright-input-color);
}

#copyright ul {
list-style: none;
margin: 0;
padding-left: 0;
}
#copyright a {
color: var(--copyright-link-color);
border-bottom-color: rgba(255, 255, 255, 0.5);
}

#copyright ul li {
border-left: solid 2px;
display: inline-block;
line-height: 1;
margin-left: 1rem;
padding-left: 1rem;
}
#copyright a:hover {
border-bottom-color: transparent;
color: var(--copyright-link-hover-color) !important;
}

#copyright ul li:first-child {
border-left: 0;
margin-left: 0;
padding-left: 0;
}
#copyright strong,
#copyright b {
color: var(--copyright-strong-color);
}

/* @media screen and (max-width: 1280px) {
#copyright h1,
#copyright h2,
#copyright h3,
#copyright h4,
#copyright h5,
#copyright h6 {
color: var(--copyright-heading-color);
}

#copyright {
margin: 4rem auto;
}
#copyright blockquote {
border-left-color: var(--copyright-blockquote-border-color);
}

}
#copyright code {
background: rgba(255, 255, 255, 0.075);
border-color: var(--copyright-code-border-color);
}

@media screen and (max-width: 480px) {
#copyright hr {
border-bottom-color: var(--copyright-hr-color);
}

#copyright ul li {
border-left: 0;
margin: 1rem 0 0 0;
padding-left: 0;
display: block;
}
#copyright a {
color: inherit; /* Inherit from parent, typically var(--copyright-text-color) */
border-bottom-color: inherit;
}

#copyright ul li:first-child {
margin-top: 0;
}
#copyright ul {
list-style: none;
margin: 0;
padding-left: 0;
}

} */
#copyright ul li {
border-left: solid 2px;
display: inline-block;
line-height: 1;
margin-left: 1rem;
padding-left: 1rem;
}

@media screen and (max-width: 480px) {

#copyright {
display: inline-block; /* Ensure it shrinks to fit content */
width: 100%; /* Full width */
padding-top: 1.8rem;
padding-bottom: 1.8rem;
white-space: nowrap; /* Prevent line breaks */
overflow: hidden; /* Hide overflow */
text-overflow: ellipsis; /* Add ellipsis for overflow text */
text-align: center; /* Center align text */
margin: 0 auto; /* Center it within the parent */
display: block;
}
}
#copyright ul li:first-child {
border-left: 0;
margin-left: 0;
padding-left: 0;
}

/* Footer Extended Links Container */
.footer-extended-container {
display: flex;
justify-content: center; /* Center the columns horizontally */
gap: 2em; /* Space between columns */
padding: 0rem 2rem; /* Your updated padding */
max-width: 72rem; /* Match #copyright max-width for consistency */
margin: 0 auto 2rem auto; /* Center the container */
font-family: "Source Sans Pro", Helvetica, sans-serif; /* Match #copyright font */
font-size: 0.75rem; /* Reduced for tidier appearance on desktop */
color: var(--copyright-text-color); /* Match #copyright text color (black in light, white in dark) */
}

.footer-extended {
flex: 1; /* Each section takes equal space */
min-width: 200px; /* Minimum width for each column */
text-align: left; /* Align text to the left within each column */
}

/* Separator between sections (vertical line) */
.footer-extended:not(:last-child)::after {
content: "";
display: block;
width: 1px;
height: 100%;
background: var(--copyright-blockquote-border-color); /* Match blockquote border color */
position: absolute;
right: -1em; /* Adjust based on gap */
top: 0;
}

/* Styles for lists within footer-extended sections */
.footer-extended ul {
list-style: none;
padding: 0;
margin: 0;
}

.footer-extended ul li {
margin-bottom: 0em; /* Your updated margin */
font-size: 0.8em; /* Reduced to match .smaller-heading (~0.6rem) on desktop */
}

.footer-extended ul li a {
color: inherit; /* Match #copyright a color inheritance */
text-decoration: none;
border-bottom: none; /* Remove default underline */
}

.footer-extended ul li a:hover {
color: var(--copyright-link-hover-color); /* Match #copyright hover color */
}

.footer-extended h1.left-aligned {
font-size: 0.95em; /* Reduced to match smaller desktop font */
font-weight: 900;
letter-spacing: 0.075em;
text-transform: uppercase;
margin-bottom: 1em;
text-align: left; /* Align headings to the left on desktop */
}

.footer-extended h1.left-aligned .smaller-heading {
font-size: 0.8em; /* Reduced to maintain hierarchy (~0.6rem) on desktop */
/* Color controlled by external stylesheet (e.g., blue) */
}

/* Responsive adjustments */
@media screen and (max-width: 900px) {
#copyright {
display: inline-block; /* Ensure it shrinks to fit content */
width: 100%; /* Full width */
padding-top: 1.8rem;
padding-bottom: 0rem; /* Your updated padding */
white-space: nowrap; /* Prevent line breaks */
overflow: hidden; /* Hide overflow */
text-overflow: ellipsis; /* Add ellipsis for overflow text */
text-align: center; /* Center align text */
margin: 0 auto; /* Center it within the parent */
display: block;
}

.footer-extended-container {
flex-direction: column; /* Stack columns vertically on small screens */
align-items: center; /* Center align sections horizontally */
gap: 0; /* No spacing between sections on mobile */
display: flex; /* Ensure flexbox for vertical centering */
justify-content: center; /* Vertically center content */
font-size: 0.9rem; /* Restore original mobile font size */
/* Removed min-height to allow shrinking to content */
}

.footer-extended {
width: calc(100% - 2rem); /* Constrain width to allow margins */
margin: 0 1rem; /* Add left and right margin for spacing */
text-align: center; /* Center text for mobile */
}

.footer-extended:not(:last-child)::after {
display: none; /* Remove separator on mobile */
}

.footer-extended h1.left-aligned {
font-size: 1.1em; /* Restore original mobile heading size */
text-align: center; /* Center headings on mobile */
}

.footer-extended h1.left-aligned .smaller-heading {
font-size: 0.9em; /* Restore original mobile subheading size */
/* Color controlled by external stylesheet (e.g., blue) */
}

.footer-extended ul li {
font-size: 1em; /* Restore original mobile list item size (inherits 0.9rem) */
}
}

/* Nav Panel Toggle*/
#navPanelToggle {
Expand Down
Loading