Refactor privacy.html inline styles to modular SCSS
- 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
parent
aace06bb11
commit
23a06a5e84
5 changed files with 153 additions and 106 deletions
|
|
@ -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>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -4,6 +4,7 @@
|
|||
@use 'components/footer';
|
||||
@use 'pages/admin';
|
||||
@use 'pages/index';
|
||||
@use 'pages/privacy';
|
||||
|
||||
// Override with additional variables from original style-backup
|
||||
$bg-hover: #f1f5f9;
|
||||
|
|
|
|||
146
src/scss/pages/_privacy.scss
Normal file
146
src/scss/pages/_privacy.scss
Normal file
|
|
@ -0,0 +1,146 @@
|
|||
// Privacy page specific styles
|
||||
.privacy-container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.privacy-header {
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
|
||||
&__title-wrapper {
|
||||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
&__title-content {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__theme-toggle {
|
||||
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);
|
||||
|
||||
.theme-icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.privacy-content {
|
||||
background: var(--card-bg);
|
||||
padding: 30px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px var(--shadow);
|
||||
line-height: 1.6;
|
||||
|
||||
h2 {
|
||||
color: var(--text-color);
|
||||
margin-top: 30px;
|
||||
margin-bottom: 15px;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
padding-bottom: 10px;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 15px 0;
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
// Fix link visibility and styling
|
||||
a:not(.back-link) {
|
||||
color: var(--link-color) !important;
|
||||
text-decoration: underline !important;
|
||||
font-weight: 500;
|
||||
|
||||
&:hover {
|
||||
color: var(--link-hover) !important;
|
||||
text-decoration: underline !important;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--primary-hover, #1976D2) !important;
|
||||
color: white !important;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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);
|
||||
|
||||
a {
|
||||
color: var(--link-color) !important;
|
||||
text-decoration: underline !important;
|
||||
font-weight: 500;
|
||||
|
||||
&:hover {
|
||||
color: var(--link-hover) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Global back-link styling (for cases where it's used outside .privacy-content)
|
||||
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;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--primary-hover, #1976D2) !important;
|
||||
color: white !important;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue