signal-works/ice
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

Refactor privacy.html inline styles to modular SCSS

Browse source 
- Created src/scss/pages/_privacy.scss with all privacy page styles
- Moved all inline styles from privacy.html to proper CSS classes
- Replaced inline style attributes with semantic CSS classes:
  - privacy-header__title-wrapper for header positioning
  - privacy-header__title-content for centered title content
  - privacy-header__theme-toggle for theme toggle button
- Maintained all existing functionality and styling
- Improved maintainability and consistency with SCSS architecture
- All styles now use CSS variables for theme compatibility
This commit is contained in:
Deco Vander 2025-07-04 14:41:28 -04:00
parent aace06bb11
commit 23a06a5e84
5 changed files with 153 additions and 106 deletions
Download patch file Download diff file Expand all files Collapse all files

108
public/privacy.html
View file

@ -7,117 +7,17 @@
<link rel="icon" type="image/svg+xml" href="https://iceymi.b-cdn.net/favicon.svg">
<link rel="icon" type="image/x-icon" href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiIgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIj4KICA8ZGVmcz4KICAgIDxzdHlsZT4KICAgICAgLnNub3dmbGFrZSB7IGZpbGw6ICMyMTk2RjM7IH0KICAgICAgLmNlbnRlciB7IGZpbGw6ICMxOTc2RDI7IH0KICAgIDwvc3R5bGU+CiAgPC9kZWZzPgogIAogIDxnIGNsYXNzPSJzbm93Zmxha2UiPgogICAgPHJlY3QgeD0iMTUiIHk9IjIiIHdpZHRoPSIyIiBoZWlnaHQ9IjI4IiAvPgogICAgPHJlY3QgeD0iMiIgeT0iMTUiIHdpZHRoPSIyOCIgaGVpZ2h0PSIyIiAvPgogICAgPHJlY3QgeD0iMTUiIHk9IjIiIHdpZHRoPSIyIiBoZWlnaHQ9IjI4IiB0cmFuc2Zvcm09InJvdGF0ZSg0NSAxNiAxNikiIC8+CiAgICA8cmVjdCB4PSIxNSIgeT0iMiIgd2lkdGg9IjIiIGhlaWdodD0iMjgiIHRyYW5zZm9ybT0icm90YXRlKC00NSAxNiAxNikiIC8+CiAgICA8cG9seWdvbiBwb2ludHM9IjE2LDIgMTQsNiAxOCw2IiAvPgogICAgPHBvbHlnb24gcG9pbnRzPSIxNiwzMCAxNCwyNiAxOCwyNiIgLz4KICAgIDxwb2x5Z29uIHBvaW50cz0iMiwxNiA2LDE0IDYsMTgiIC8+CiAgICA8cG9seWdvbiBwb2ludHM9IjMwLDE2IDI2LDE0IDI2LDE4IiAvPgogICAgPHBvbHlnb24gcG9pbnRzPSI2LjMsNi4zIDguNiw0IDkuOSw3LjciIHRyYW5zZm9ybT0icm90YXRlKDQ1IDE2IDE2KSIgLz4KICAgIDxwb2x5Z29uIHBvaW50cz0iMjUuNywyNS43IDIzLjQsMjggMjIuMSwyNC4zIiB0cmFuc2Zvcm09InJvdGF0ZSg0NSAxNiAxNikiIC8+CiAgICA8cG9seWdvbiBwb2ludHM9IjYuMywyNS43IDguNiwyOCA5LjksMjQuMyIgdHJhbnNmb3JtPSJyb3RhdGUoLTQ1IDE2IDE2KSIgLz4KICAgIDxwb2x5Z29uIHBvaW50cz0iMjUuNyw2LjMgMjMuNCw0IDIyLjEsNy43IiB0cmFuc2Zvcm09InJvdGF0ZSgtNDUgMTYgMTYpIiAvPgogIDwvZz4KICA8Y2lyY2xlIGN4PSIxNiIgY3k9IjE2IiByPSIzIiBjbGFzcz0iY2VudGVyIiAvPgo8L3N2Zz4K">
<link rel="stylesheet" href="style.css">
<style>
.privacy-container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
.privacy-header {
text-align: center;
margin-bottom: 40px;
}
.privacy-content {
background: var(--card-bg);
padding: 30px;
border-radius: 8px;
box-shadow: 0 2px 4px var(--shadow);
line-height: 1.6;
}
.privacy-content h2 {
color: var(--text-color);
margin-top: 30px;
margin-bottom: 15px;
border-bottom: 1px solid var(--border-color);
padding-bottom: 10px;
}
.privacy-content h2:first-child {
margin-top: 0;
}
.privacy-content ul {
margin: 15px 0;
padding-left: 30px;
}
.privacy-content li {
margin-bottom: 8px;
}
.effective-date {
color: #666;
font-size: 0.9em;
text-align: center;
margin-bottom: 30px;
}
.contact-info {
background: var(--toggle-bg);
padding: 20px;
border-radius: 6px;
margin-top: 20px;
border: 1px solid var(--border-color);
}
/* Fix link visibility and styling */
.privacy-content a:not(.back-link) {
color: var(--link-color) !important;
text-decoration: underline !important;
font-weight: 500;
}
.privacy-content a:not(.back-link):hover {
color: var(--link-hover) !important;
text-decoration: underline !important;
}
.contact-info a {
color: var(--link-color) !important;
text-decoration: underline !important;
font-weight: 500;
}
.contact-info a:hover {
color: var(--link-hover) !important;
}
.privacy-content .back-link,
a.back-link {
display: inline-block !important;
margin-top: 30px !important;
padding: 10px 20px !important;
color: white !important;
background-color: var(--primary-color, #2196F3) !important;
border: none !important;
border-radius: 4px !important;
text-decoration: none !important;
transition: background-color 0.2s ease !important;
font-weight: 500 !important;
}
.privacy-content .back-link:hover,
a.back-link:hover {
background-color: var(--primary-hover, #1976D2) !important;
color: white !important;
text-decoration: none !important;
}
</style>
</head>
<body>
<div class="privacy-container">
<div class="privacy-header">
<div style="position: relative; margin-bottom: 20px;">
<div style="text-align: center;">
<div class="privacy-header__title-wrapper">
<div class="privacy-header__title-content">
<h1>❄️ Privacy Policy</h1>
<p>Great Lakes Ice Report</p>
</div>
<button id="theme-toggle" class="theme-toggle" title="Toggle theme mode" style="position: absolute; top: 0; right: 0; background: var(--card-bg); border: 2px solid var(--border-color); border-radius: 50%; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 2px 4px var(--shadow);">
<span class="theme-icon" style="font-size: 20px;">🌙</span>
<button id="theme-toggle" class="privacy-header__theme-toggle" title="Toggle theme mode">
<span class="theme-icon">🌙</span>
</button>
</div>
<div class="effective-date">Effective Date: January 2025</div>