lotte/website
1
Code Activity

build10

Browse source
This commit is contained in:
Charlotte Croce 2025-04-03 18:57:53 -04:00
parent a07ba80e7f
commit ac4a300a62
2 changed files with 510 additions and 519 deletions
Download patch file Download diff file Expand all files Collapse all files

5
index.html
View file

@ -92,7 +92,7 @@
<div class="project-card"> <div class="project-card">
<div class="card-content"> <div class="card-content">
<h3>Champlain Tech Journals</h3> <h3>Champlain Tech Journals</h3>
<p>Notes, code, and lab write-ups from my Champlain College courses. Probably a useful resource if you also go here.</p> <p>Notes, code, and lab write-ups from my Champlain College courses</p>
<a href="https://codeberg.org/charlottecroce/ChamplainTechJournals" target="_blank" rel="noopener noreferrer" class="source-link"> <a href="https://codeberg.org/charlottecroce/ChamplainTechJournals" target="_blank" rel="noopener noreferrer" class="source-link">
<span>Source Code</span> <span>Source Code</span>
<i data-lucide="external-link" class="icon-small"></i> <i data-lucide="external-link" class="icon-small"></i>
@ -102,7 +102,7 @@
<div class="project-card"> <div class="project-card">
<div class="card-content"> <div class="card-content">
<h3>Nøkken Health</h3> <h3>Nøkken Health</h3>
<p>A mobile app to track and analyze health data. Track medications, bloodwork, symptoms, and more. Made with Flutter</p> <p>A Flutter app to track and analyze health data</p>
<a href="https://codeberg.org/charlottecroce/nokken" target="_blank" rel="noopener noreferrer" class="source-link"> <a href="https://codeberg.org/charlottecroce/nokken" target="_blank" rel="noopener noreferrer" class="source-link">
<span>Source Code</span> <span>Source Code</span>
<i data-lucide="external-link" class="icon-small"></i> <i data-lucide="external-link" class="icon-small"></i>
@ -125,6 +125,7 @@
<span class="footer-separator">•</span> <span class="footer-separator">•</span>
<a href="https://hachyderm.io/@charlotte200" target="_blank" rel="noopener noreferrer" class="footer-link">Mastodon</a> <a href="https://hachyderm.io/@charlotte200" target="_blank" rel="noopener noreferrer" class="footer-link">Mastodon</a>
</div> </div>
<p>#55CDFC#F7A8B8#FFFFFF#F7A8B8#55CDFC</p>
<p>©<span id="current-year"></span> Charlotte Croce</p> <p>©<span id="current-year"></span> Charlotte Croce</p>
</footer> </footer>
</div> </div>

72
style.css
View file

@ -9,12 +9,10 @@ TABLE OF CONTENTS
5. Navigation & Header 5. Navigation & Header
6. Mobile Menu 6. Mobile Menu
7. Button & Controls 7. Button & Controls
8. Form Elements 8. Cards & Panels
9. Cards & Panels 9. Animations
10. Animations 10. Dark Mode
11. Dark Mode 11. Media Queries
12. Utility Classes
13. Media Queries
============================================== ==============================================
*/ */
@ -108,6 +106,14 @@ TABLE OF CONTENTS
margin-bottom: 2rem; margin-bottom: 2rem;
} }
.text-sage {
color: var(--color-sage-400);
}
.ml-1 {
margin-left: 0.25rem;
}
/* /*
============================================== ==============================================
4. Layout & Container 4. Layout & Container
@ -133,6 +139,10 @@ TABLE OF CONTENTS
text-align: center; text-align: center;
} }
.site-footer p {
word-wrap: break-word;
}
.social-footer-links { .social-footer-links {
margin-bottom: 16px; margin-bottom: 16px;
} }
@ -184,10 +194,6 @@ TABLE OF CONTENTS
margin-left: auto; margin-left: auto;
} }
.ml-1 {
margin-left: 0.25rem;
}
/* /*
============================================== ==============================================
6. Mobile Menu 6. Mobile Menu
@ -259,7 +265,7 @@ TABLE OF CONTENTS
.icon-button { .icon-button {
border-radius: 9999px; border-radius: 9999px;
background-color: var(--color-pink-100); background-color: var(--color-pink-300);
padding: 8px; padding: 8px;
border: none; border: none;
display: flex; display: flex;
@ -310,14 +316,7 @@ TABLE OF CONTENTS
/* /*
============================================== ==============================================
8. Form Elements 8. Cards & Panels
==============================================
*/
/* No styles defined yet */
/*
==============================================
9. Cards & Panels
============================================== ==============================================
*/ */
.intro-section { .intro-section {
@ -353,7 +352,7 @@ TABLE OF CONTENTS
flex-grow: 1; flex-grow: 1;
height: 1px; height: 1px;
margin-left: 1rem; margin-left: 1rem;
background: linear-gradient(to right, var(--color-pink-200), transparent); background: var(--color-sage-200);
} }
.projects-grid { .projects-grid {
@ -367,7 +366,6 @@ TABLE OF CONTENTS
background-color: white; background-color: white;
transition: all 0.2s ease; transition: all 0.2s ease;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
border: 1px solid rgba(0, 0, 0, 0.05);
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
@ -396,18 +394,18 @@ TABLE OF CONTENTS
transform: scale(1.05); transform: scale(1.05);
} }
.text-sage {
color: var(--color-sage-400);
}
/* /*
============================================== ==============================================
10. Animations 9. Animations
============================================== ==============================================
*/ */
@keyframes float { @keyframes float {
0%, 100% { transform: translateY(0px); } 0%, 100% {
50% { transform: translateY(-10px); } transform: translateY(0px);
}
50% {
transform: translateY(-10px);
}
} }
.animate-float { .animate-float {
@ -416,7 +414,7 @@ TABLE OF CONTENTS
/* /*
============================================== ==============================================
11. Dark Mode 10. Dark Mode
============================================== ==============================================
*/ */
.dark-mode { .dark-mode {
@ -476,7 +474,6 @@ TABLE OF CONTENTS
.dark-mode .intro-section, .dark-mode .intro-section,
.dark-mode .project-card { .dark-mode .project-card {
background-color: #2d3748; background-color: #2d3748;
border-color: var(--color-sage-400);
} }
.dark-mode button { .dark-mode button {
@ -495,27 +492,20 @@ TABLE OF CONTENTS
.dark-mode .navbar-button:hover, .dark-mode .navbar-button:hover,
.dark-mode .mobile-button:hover { .dark-mode .mobile-button:hover {
background-color: var(--color-pink-300); background-color: var(--color-pink-200);
} }
.dark-mode .icon-button { .dark-mode .icon-button {
background-color: #2d3748; background-color: var(--color-sage-300);
} }
.dark-mode .icon-button:hover { .dark-mode .icon-button:hover {
background-color: var(--color-pink-300); background-color: var(--color-pink-200);
} }
/* /*
============================================== ==============================================
12. Utility Classes 11. Media Queries
==============================================
*/
/* Additional utility classes included above with relevant components */
/*
==============================================
13. Media Queries
============================================== ==============================================
*/ */
@media (max-width: 767px) { @media (max-width: 767px) {