fixing elegant - fancy themes
This commit is contained in:
jv
parent
c551b8e8ee
commit
f25b14abfe
|
|
@ -1,5 +1,22 @@
|
|||
const cvThemeButtons = [...document.querySelectorAll('[data-cv-theme]')];
|
||||
const cvPortrait = document.getElementById('cv-portrait-orbit');
|
||||
const cvThemeStorageKey = 'cv-theme';
|
||||
|
||||
function getStoredCvTheme() {
|
||||
try {
|
||||
return localStorage.getItem(cvThemeStorageKey);
|
||||
} catch (_error) {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
function storeCvTheme(theme) {
|
||||
try {
|
||||
localStorage.setItem(cvThemeStorageKey, theme);
|
||||
} catch (_error) {
|
||||
// Theme switching should still work when storage is blocked.
|
||||
}
|
||||
}
|
||||
|
||||
function setCvTheme(theme) {
|
||||
const nextTheme = theme === 'fancy' ? 'fancy' : 'elegant';
|
||||
|
|
@ -12,7 +29,7 @@ function setCvTheme(theme) {
|
|||
button.setAttribute('aria-pressed', active ? 'true' : 'false');
|
||||
});
|
||||
|
||||
localStorage.setItem('cv-theme', nextTheme);
|
||||
storeCvTheme(nextTheme);
|
||||
}
|
||||
|
||||
cvThemeButtons.forEach((button) => {
|
||||
|
|
@ -31,4 +48,5 @@ document.addEventListener('pointermove', (event) => {
|
|||
cvPortrait.style.setProperty('--portrait-rotation', `${degrees + 8}deg`);
|
||||
});
|
||||
|
||||
setCvTheme(localStorage.getItem('cv-theme') || 'elegant');
|
||||
setCvTheme(getStoredCvTheme() || 'elegant');
|
||||
|
||||
|
|
|
|||
|
|
@ -169,10 +169,11 @@
|
|||
</div>
|
||||
|
||||
<script>
|
||||
const OTHER_PAGES = ['/index.php', '/blog.php'];
|
||||
const OTHER_PAGES = ['index.php', 'blog.php'];
|
||||
</script>
|
||||
<script src="/cv-theme.js"></script>
|
||||
<script src="cv-theme.js"></script>
|
||||
<?php require_once __DIR__ . '/partials/translation_ui.php'; ?>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<title><?php echo $text['name']; ?></title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<body class="home-page cv-elegant">
|
||||
|
||||
<nav class="top-nav">
|
||||
<div class="nav-left">Juvenal Diaz</div>
|
||||
|
|
@ -38,6 +38,23 @@
|
|||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="cv-theme-toolbar" aria-label="<?php echo htmlspecialchars($en['cv_theme_label']); ?>">
|
||||
<span data-translate data-key="cv_theme_label"
|
||||
data-en="<?php echo htmlspecialchars($en['cv_theme_label']); ?>">
|
||||
<?php echo $text['cv_theme_label']; ?>
|
||||
</span>
|
||||
<button type="button" class="cv-theme-option is-active" data-cv-theme="elegant"
|
||||
data-translate data-key="cv_theme_elegant"
|
||||
data-en="<?php echo htmlspecialchars($en['cv_theme_elegant']); ?>">
|
||||
<?php echo $text['cv_theme_elegant']; ?>
|
||||
</button>
|
||||
<button type="button" class="cv-theme-option" data-cv-theme="fancy"
|
||||
data-translate data-key="cv_theme_fancy"
|
||||
data-en="<?php echo htmlspecialchars($en['cv_theme_fancy']); ?>">
|
||||
<?php echo $text['cv_theme_fancy']; ?>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<section class="hero">
|
||||
<div class="hero-text">
|
||||
<h1><?php echo $text['name']; ?></h1>
|
||||
|
|
@ -78,9 +95,11 @@
|
|||
// Tell translation.js to also translate these pages in the background
|
||||
?>
|
||||
<script>
|
||||
const OTHER_PAGES = ['/cv.php', '/blog.php'];
|
||||
const OTHER_PAGES = ['cv.php', 'blog.php'];
|
||||
</script>
|
||||
<script src="cv-theme.js"></script>
|
||||
<?php require_once __DIR__ . '/partials/translation_ui.php'; ?>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
|
|||
|
|
@ -149,6 +149,18 @@ body {
|
|||
body {
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.home-page .hero {
|
||||
grid-template-columns: 1fr;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.home-page .hero-image img {
|
||||
display: block;
|
||||
width: min(100%, 320px);
|
||||
height: auto;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.hero-section {
|
||||
flex-direction: column;
|
||||
|
|
@ -204,6 +216,61 @@ body {
|
|||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.home-page .hero {
|
||||
max-width: 1080px;
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
|
||||
gap: 40px;
|
||||
align-items: center;
|
||||
padding: 32px;
|
||||
}
|
||||
|
||||
.home-page .top-nav,
|
||||
.home-page .cv-theme-toolbar {
|
||||
max-width: 1080px;
|
||||
}
|
||||
|
||||
.cv-page .top-nav,
|
||||
.cv-page .cv-theme-toolbar {
|
||||
max-width: 900px;
|
||||
}
|
||||
|
||||
.home-page .top-nav,
|
||||
.cv-page .top-nav {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.home-page .hero-text h1 {
|
||||
margin: 0 0 16px;
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.home-page .hero-image {
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
.home-page .hero-image img {
|
||||
display: block;
|
||||
width: min(100%, 360px);
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
aspect-ratio: 1 / 1;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.home-page .bio-intro,
|
||||
.home-page .bio-story,
|
||||
.home-page .cta {
|
||||
line-height: 1.6;
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
|
||||
.home-page .cta a {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.top-nav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
|
@ -353,6 +420,7 @@ body {
|
|||
padding: 8px 12px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
|
|
@ -385,7 +453,8 @@ body {
|
|||
display: block;
|
||||
}
|
||||
|
||||
body.cv-elegant {
|
||||
body.cv-page.cv-elegant,
|
||||
body.home-page.cv-elegant {
|
||||
background: #030603;
|
||||
color: #a8ffb0;
|
||||
font-family: "Courier New", "Lucida Console", Monaco, monospace;
|
||||
|
|
@ -432,6 +501,30 @@ body.cv-elegant {
|
|||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.cv-elegant.home-page .hero {
|
||||
background: #061106;
|
||||
border: 1px solid #2b7a38;
|
||||
box-shadow: 0 0 18px rgba(168, 255, 176, 0.12);
|
||||
}
|
||||
|
||||
.cv-elegant.home-page .hero-text h1,
|
||||
.cv-elegant.home-page .cta a {
|
||||
color: #c7ffd0;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.cv-elegant.home-page .bio-intro,
|
||||
.cv-elegant.home-page .bio-story,
|
||||
.cv-elegant.home-page .cta {
|
||||
color: #a8ffb0;
|
||||
}
|
||||
|
||||
.cv-elegant.home-page .hero-image img {
|
||||
border-radius: 0;
|
||||
border: 2px solid #a8ffb0;
|
||||
filter: saturate(0.8) contrast(1.08);
|
||||
}
|
||||
|
||||
.cv-elegant .cv-header-text {
|
||||
min-height: 160px;
|
||||
padding-right: 190px;
|
||||
|
|
@ -449,7 +542,8 @@ body.cv-elegant {
|
|||
filter: saturate(0.8) contrast(1.08);
|
||||
}
|
||||
|
||||
body.cv-fancy {
|
||||
body.cv-page.cv-fancy,
|
||||
body.home-page.cv-fancy {
|
||||
background: #f7f0e8;
|
||||
color: #37251f;
|
||||
font-family: Georgia, "Times New Roman", serif;
|
||||
|
|
@ -482,6 +576,35 @@ body.cv-fancy {
|
|||
box-shadow: 0 18px 40px rgba(95, 63, 53, 0.16);
|
||||
}
|
||||
|
||||
.cv-fancy.home-page .hero {
|
||||
background: #fffaf7;
|
||||
border: 1px solid #ead5c6;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 18px 40px rgba(95, 63, 53, 0.16);
|
||||
}
|
||||
|
||||
.cv-fancy.home-page .hero-text h1 {
|
||||
color: #6f3d53;
|
||||
font-family: "Brush Script MT", "Segoe Script", cursive;
|
||||
font-size: 3.4rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.cv-fancy.home-page .bio-intro,
|
||||
.cv-fancy.home-page .bio-story,
|
||||
.cv-fancy.home-page .cta {
|
||||
color: #5f3f35;
|
||||
}
|
||||
|
||||
.cv-fancy.home-page .cta a {
|
||||
color: #6f3d53;
|
||||
}
|
||||
|
||||
.cv-fancy.home-page .hero-image img {
|
||||
border: 8px solid #fff;
|
||||
box-shadow: 0 12px 24px rgba(95, 63, 53, 0.2);
|
||||
}
|
||||
|
||||
.cv-fancy .cv-header-text {
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -778,6 +901,10 @@ body.cv-fancy {
|
|||
flex-direction: column;
|
||||
}
|
||||
|
||||
.home-page .hero-image img {
|
||||
width: min(100%, 320px);
|
||||
}
|
||||
|
||||
.cv-elegant .cv-header-text {
|
||||
padding-right: 0;
|
||||
padding-top: 178px;
|
||||
|
|
@ -792,3 +919,4 @@ body.cv-fancy {
|
|||
font-size: 2.35rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue