feat: redesign frontend with editorial typography layout
R-A-M-O-N navigation sections inspired by font specimen design. Dark theme, Inter font, split layout with letter tabs. Each section maps to a bookmark category by first letter. - R: Recursos (tools & references) - A: Aprendizaje (learning & growth) - M: Mundo (exploration & ideas) - O: Oficio (craft & work) - N: Naturaleza (geek & personal) — default view Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
8caa7cea9e
commit
2a64013ef7
6 changed files with 378 additions and 201 deletions
|
|
@ -3,7 +3,10 @@
|
|||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Favs</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;300;400;700;900&display=swap" rel="stylesheet" />
|
||||
<title>ramon</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
|
|
|||
|
|
@ -1,28 +1,30 @@
|
|||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { ref, computed, watch } from 'vue'
|
||||
import { useAuth } from './composables/useAuth.js'
|
||||
import { getBookmarks, triggerCategorize } from './api.js'
|
||||
import { sections } from './sections.js'
|
||||
import BookmarkForm from './components/BookmarkForm.vue'
|
||||
import BookmarkList from './components/BookmarkList.vue'
|
||||
|
||||
const { user, loading, loginWithGoogle, logout } = useAuth()
|
||||
|
||||
const bookmarks = ref([])
|
||||
const activeCategory = ref(null)
|
||||
const activeIndex = ref(4) // N = default (primer plano)
|
||||
const categorizing = ref(false)
|
||||
const status = ref('')
|
||||
|
||||
const categories = computed(() => {
|
||||
const cats = new Set()
|
||||
bookmarks.value.forEach(b => { if (b.category) cats.add(b.category) })
|
||||
return [...cats].sort()
|
||||
})
|
||||
const currentSection = computed(() => sections[activeIndex.value])
|
||||
|
||||
const filtered = computed(() => {
|
||||
if (!activeCategory.value) return bookmarks.value
|
||||
return bookmarks.value.filter(b => b.category === activeCategory.value)
|
||||
const letter = currentSection.value.letter.toLowerCase()
|
||||
return bookmarks.value.filter(b => {
|
||||
if (!b.category) return letter === 'n'
|
||||
return b.category.charAt(0).toLowerCase() === letter
|
||||
})
|
||||
})
|
||||
|
||||
const year = new Date().getFullYear()
|
||||
|
||||
async function load() {
|
||||
if (!user.value) return
|
||||
bookmarks.value = await getBookmarks()
|
||||
|
|
@ -36,16 +38,12 @@ function onDeleted(id) {
|
|||
bookmarks.value = bookmarks.value.filter(b => b.id !== id)
|
||||
}
|
||||
|
||||
function setCategory(cat) {
|
||||
activeCategory.value = activeCategory.value === cat ? null : cat
|
||||
}
|
||||
|
||||
async function categorize() {
|
||||
categorizing.value = true
|
||||
status.value = ''
|
||||
try {
|
||||
const res = await triggerCategorize()
|
||||
status.value = `${res.categorized} bookmarks categorized`
|
||||
status.value = `${res.categorized} categorized`
|
||||
await load()
|
||||
} catch (e) {
|
||||
status.value = `Error: ${e.message}`
|
||||
|
|
@ -54,63 +52,62 @@ async function categorize() {
|
|||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
const stop = setInterval(() => {
|
||||
if (!loading.value) {
|
||||
clearInterval(stop)
|
||||
if (user.value) load()
|
||||
}
|
||||
}, 50)
|
||||
})
|
||||
watch(user, (u) => { if (u) load() })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="container">
|
||||
<!-- Loading -->
|
||||
<div v-if="loading" class="empty">Loading...</div>
|
||||
<!-- Loading -->
|
||||
<div v-if="loading" class="loading-screen">loading...</div>
|
||||
|
||||
<!-- Login -->
|
||||
<div v-else-if="!user" class="login-screen">
|
||||
<h1>favs</h1>
|
||||
<p class="login-subtitle">Your personal bookmarks</p>
|
||||
<button class="btn-google" @click="loginWithGoogle">Sign in with Google</button>
|
||||
</div>
|
||||
<!-- Login -->
|
||||
<div v-else-if="!user" class="login-screen">
|
||||
<div class="login-title">ramon</div>
|
||||
<div class="login-subtitle">personal bookmarks</div>
|
||||
<button class="btn-google" @click="loginWithGoogle">Sign in with Google</button>
|
||||
</div>
|
||||
|
||||
<!-- App -->
|
||||
<div v-else>
|
||||
<div class="header">
|
||||
<h1>favs</h1>
|
||||
<div class="user-info">
|
||||
<span class="user-email">{{ user.email }}</span>
|
||||
<button class="btn-logout" @click="logout">Logout</button>
|
||||
</div>
|
||||
<!-- App -->
|
||||
<div v-else class="layout">
|
||||
<div class="panel-left">
|
||||
<div class="header-bar">
|
||||
<span class="user-email">{{ user.email }}</span>
|
||||
<button class="btn-logout" @click="logout">logout</button>
|
||||
</div>
|
||||
|
||||
<div class="section-subtitle">{{ currentSection.subtitle }}</div>
|
||||
<div class="section-title">{{ currentSection.title }}</div>
|
||||
|
||||
<div class="section-divider"></div>
|
||||
|
||||
<div class="section-meta">
|
||||
<span class="section-year">{{ year }}</span>
|
||||
<span class="section-count">{{ filtered.length }} links</span>
|
||||
</div>
|
||||
|
||||
<div class="section-description">{{ currentSection.description }}</div>
|
||||
|
||||
<BookmarkForm @created="onCreated" />
|
||||
|
||||
<div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem;">
|
||||
<button class="btn-categorize" @click="categorize" :disabled="categorizing">
|
||||
{{ categorizing ? 'Categorizing...' : 'Categorize' }}
|
||||
<div class="actions-bar">
|
||||
<button class="btn-action" @click="categorize" :disabled="categorizing">
|
||||
{{ categorizing ? 'categorizing...' : 'categorize' }}
|
||||
</button>
|
||||
<span v-if="status" class="status">{{ status }}</span>
|
||||
</div>
|
||||
|
||||
<div v-if="categories.length" class="category-bar">
|
||||
<button
|
||||
class="category-pill"
|
||||
:class="{ active: !activeCategory }"
|
||||
@click="activeCategory = null"
|
||||
>all</button>
|
||||
<button
|
||||
v-for="cat in categories"
|
||||
:key="cat"
|
||||
class="category-pill"
|
||||
:class="{ active: activeCategory === cat }"
|
||||
@click="setCategory(cat)"
|
||||
>{{ cat }}</button>
|
||||
<div class="content-area">
|
||||
<BookmarkList :bookmarks="filtered" @deleted="onDeleted" />
|
||||
</div>
|
||||
|
||||
<BookmarkList :bookmarks="filtered" @deleted="onDeleted" />
|
||||
</div>
|
||||
|
||||
<nav class="panel-right">
|
||||
<button
|
||||
v-for="(section, i) in sections"
|
||||
:key="section.letter"
|
||||
class="nav-tab"
|
||||
:class="{ active: activeIndex === i }"
|
||||
@click="activeIndex = i"
|
||||
>{{ section.letter }}</button>
|
||||
</nav>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -20,8 +20,8 @@ async function submit() {
|
|||
|
||||
<template>
|
||||
<form class="bookmark-form" @submit.prevent="submit">
|
||||
<input v-model="title" placeholder="Title" required />
|
||||
<input v-model="title" placeholder="title" required />
|
||||
<input v-model="link" placeholder="https://..." required />
|
||||
<button type="submit" class="btn-add">Add</button>
|
||||
<button type="submit" class="btn-add">+</button>
|
||||
</form>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ async function remove(id) {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="!bookmarks.length" class="empty">No bookmarks yet</div>
|
||||
<div v-if="!bookmarks.length" class="empty">no links yet</div>
|
||||
<div v-for="b in bookmarks" :key="b.id" class="bookmark-item">
|
||||
<div class="bookmark-info">
|
||||
<a :href="b.link" target="_blank" rel="noopener" class="bookmark-title">{{ b.title }}</a>
|
||||
|
|
@ -20,6 +20,6 @@ async function remove(id) {
|
|||
{{ new Date(b.created_at).toLocaleDateString() }}
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn-delete" @click="remove(b.id)">delete</button>
|
||||
<button class="btn-delete" @click="remove(b.id)">del</button>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
32
frontend/src/sections.js
Normal file
32
frontend/src/sections.js
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
export const sections = [
|
||||
{
|
||||
letter: 'R',
|
||||
title: 'Recursos',
|
||||
subtitle: 'Tools & References',
|
||||
description: 'Arsenal de herramientas, librerías y referencias que uso en el día a día. Lo que hace que el código fluya.',
|
||||
},
|
||||
{
|
||||
letter: 'A',
|
||||
title: 'Aprendizaje',
|
||||
subtitle: 'Learning & Growth',
|
||||
description: 'Artículos, cursos y lecturas que expanden la mente. El camino del aprendizaje continuo.',
|
||||
},
|
||||
{
|
||||
letter: 'M',
|
||||
title: 'Mundo',
|
||||
subtitle: 'Exploration & Ideas',
|
||||
description: 'Mapas mentales, inspiración y descubrimientos. Todo lo que alimenta la curiosidad.',
|
||||
},
|
||||
{
|
||||
letter: 'O',
|
||||
title: 'Oficio',
|
||||
subtitle: 'Craft & Work',
|
||||
description: 'Obras, proyectos y referencias profesionales. El oficio de construir software.',
|
||||
},
|
||||
{
|
||||
letter: 'N',
|
||||
title: 'Naturaleza',
|
||||
subtitle: 'Geek & Personal',
|
||||
description: 'Lo que define quién soy. Nacionalidad digital, naturaleza geek, el lado humano detrás del código.',
|
||||
},
|
||||
]
|
||||
|
|
@ -7,128 +7,198 @@
|
|||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
background: #0f0f0f;
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
background: #0a0a0a;
|
||||
color: #e0e0e0;
|
||||
line-height: 1.5;
|
||||
overflow: hidden;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 700px;
|
||||
margin: 2rem auto;
|
||||
padding: 0 1rem;
|
||||
#app {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
/* Layout */
|
||||
.layout {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
height: 100vh;
|
||||
border: 1px solid #222;
|
||||
margin: 12px;
|
||||
height: calc(100vh - 24px);
|
||||
}
|
||||
|
||||
/* Left panel */
|
||||
.panel-left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 2.5rem 3rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.section-subtitle {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 300;
|
||||
color: #666;
|
||||
letter-spacing: 0.05em;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: clamp(4rem, 10vw, 8rem);
|
||||
font-weight: 900;
|
||||
color: #fff;
|
||||
line-height: 0.95;
|
||||
letter-spacing: -0.03em;
|
||||
margin-bottom: 2rem;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
/* Form */
|
||||
.section-divider {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: #222;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.section-meta {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.section-year {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 300;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.section-count {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 300;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.section-description {
|
||||
font-size: 0.85rem;
|
||||
color: #777;
|
||||
line-height: 1.6;
|
||||
max-width: 480px;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
/* Content area */
|
||||
.content-area {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding-right: 1rem;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #222 transparent;
|
||||
}
|
||||
|
||||
.content-area::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.content-area::-webkit-scrollbar-thumb {
|
||||
background: #222;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
/* Navigation tabs (right panel) */
|
||||
.panel-right {
|
||||
display: flex;
|
||||
border-left: 1px solid #222;
|
||||
}
|
||||
|
||||
.nav-tab {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
padding: 2.5rem 1.25rem 2rem;
|
||||
background: none;
|
||||
border: none;
|
||||
border-left: 1px solid #222;
|
||||
color: #555;
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 400;
|
||||
cursor: pointer;
|
||||
transition: color 0.2s, background 0.2s;
|
||||
min-width: 70px;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.nav-tab:first-child {
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.nav-tab:hover {
|
||||
color: #aaa;
|
||||
background: #111;
|
||||
}
|
||||
|
||||
.nav-tab.active {
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
background: #0f0f0f;
|
||||
}
|
||||
|
||||
/* Bookmark form */
|
||||
.bookmark-form {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.bookmark-form input {
|
||||
flex: 1;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border: 1px solid #333;
|
||||
border-radius: 6px;
|
||||
background: #1a1a1a;
|
||||
padding: 0.5rem 0;
|
||||
border: none;
|
||||
border-bottom: 1px solid #222;
|
||||
background: transparent;
|
||||
color: #e0e0e0;
|
||||
font-size: 0.875rem;
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 0.8rem;
|
||||
outline: none;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.bookmark-form input:focus {
|
||||
outline: none;
|
||||
border-color: #555;
|
||||
}
|
||||
|
||||
.bookmark-form input::placeholder {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
button {
|
||||
padding: 0.5rem 1rem;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 0.875rem;
|
||||
transition: background 0.15s;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.btn-add {
|
||||
background: #2563eb;
|
||||
color: #fff;
|
||||
padding: 0.5rem 1rem;
|
||||
background: #fff;
|
||||
color: #0a0a0a;
|
||||
border: none;
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.btn-add:hover {
|
||||
background: #1d4ed8;
|
||||
}
|
||||
|
||||
.btn-categorize {
|
||||
background: #1a1a1a;
|
||||
color: #a0a0a0;
|
||||
border: 1px solid #333;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.btn-categorize:hover {
|
||||
background: #252525;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-delete {
|
||||
background: none;
|
||||
color: #555;
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.btn-delete:hover {
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
/* Category bar */
|
||||
.category-bar {
|
||||
display: flex;
|
||||
gap: 0.375rem;
|
||||
margin-bottom: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.category-pill {
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 999px;
|
||||
background: #1a1a1a;
|
||||
color: #888;
|
||||
border: 1px solid #282828;
|
||||
font-size: 0.75rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.category-pill:hover {
|
||||
color: #ccc;
|
||||
border-color: #444;
|
||||
}
|
||||
|
||||
.category-pill.active {
|
||||
background: #2563eb;
|
||||
color: #fff;
|
||||
border-color: #2563eb;
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
/* Bookmark list */
|
||||
.bookmark-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
padding: 0.625rem 0;
|
||||
border-bottom: 1px solid #1a1a1a;
|
||||
padding: 0.5rem 0;
|
||||
border-bottom: 1px solid #151515;
|
||||
}
|
||||
|
||||
.bookmark-info {
|
||||
|
|
@ -137,103 +207,178 @@ button {
|
|||
}
|
||||
|
||||
.bookmark-title {
|
||||
color: #60a5fa;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
font-size: 0.875rem;
|
||||
font-size: 0.825rem;
|
||||
font-weight: 400;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
transition: color 0.15s;
|
||||
}
|
||||
|
||||
.bookmark-title:hover {
|
||||
text-decoration: underline;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.bookmark-meta {
|
||||
font-size: 0.7rem;
|
||||
color: #555;
|
||||
margin-top: 0.125rem;
|
||||
font-size: 0.65rem;
|
||||
color: #444;
|
||||
margin-top: 0.15rem;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.bookmark-category {
|
||||
color: #888;
|
||||
background: #1a1a1a;
|
||||
padding: 0.1rem 0.4rem;
|
||||
border-radius: 4px;
|
||||
font-size: 0.65rem;
|
||||
color: #555;
|
||||
margin-right: 0.5rem;
|
||||
text-transform: lowercase;
|
||||
}
|
||||
|
||||
.empty {
|
||||
.btn-delete {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #333;
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: 0.65rem;
|
||||
cursor: pointer;
|
||||
font-family: 'Inter', sans-serif;
|
||||
letter-spacing: 0.05em;
|
||||
transition: color 0.15s;
|
||||
}
|
||||
|
||||
.btn-delete:hover {
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
/* Actions bar */
|
||||
.actions-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.btn-action {
|
||||
padding: 0.35rem 0.75rem;
|
||||
background: transparent;
|
||||
color: #555;
|
||||
font-size: 0.875rem;
|
||||
padding: 2rem 0;
|
||||
text-align: center;
|
||||
border: 1px solid #222;
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 400;
|
||||
cursor: pointer;
|
||||
letter-spacing: 0.03em;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn-action:hover {
|
||||
color: #fff;
|
||||
border-color: #444;
|
||||
}
|
||||
|
||||
.btn-action:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.status {
|
||||
font-size: 0.75rem;
|
||||
color: #888;
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 0.7rem;
|
||||
color: #555;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.empty {
|
||||
color: #333;
|
||||
font-size: 0.8rem;
|
||||
padding: 3rem 0;
|
||||
text-align: center;
|
||||
font-weight: 300;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
/* Login */
|
||||
.login-screen {
|
||||
text-align: center;
|
||||
padding-top: 20vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.login-title {
|
||||
font-size: clamp(5rem, 15vw, 12rem);
|
||||
font-weight: 900;
|
||||
color: #fff;
|
||||
letter-spacing: -0.04em;
|
||||
line-height: 0.9;
|
||||
}
|
||||
|
||||
.login-subtitle {
|
||||
color: #666;
|
||||
margin-bottom: 2rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.btn-google {
|
||||
background: #fff;
|
||||
color: #333;
|
||||
padding: 0.625rem 1.5rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.btn-google:hover {
|
||||
background: #f0f0f0;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: #444;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 300;
|
||||
letter-spacing: 0.1em;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
margin-bottom: 0;
|
||||
.btn-google {
|
||||
padding: 0.625rem 2rem;
|
||||
background: #fff;
|
||||
color: #0a0a0a;
|
||||
border: none;
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
letter-spacing: 0.03em;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
.btn-google:hover {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.header-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.user-email {
|
||||
font-size: 0.75rem;
|
||||
color: #666;
|
||||
font-size: 0.65rem;
|
||||
color: #444;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.btn-logout {
|
||||
background: none;
|
||||
color: #666;
|
||||
font-size: 0.75rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border: 1px solid #333;
|
||||
border: none;
|
||||
color: #444;
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 0.65rem;
|
||||
cursor: pointer;
|
||||
letter-spacing: 0.05em;
|
||||
transition: color 0.15s;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.btn-logout:hover {
|
||||
color: #fff;
|
||||
border-color: #555;
|
||||
}
|
||||
|
||||
/* Loading */
|
||||
.loading-screen {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
color: #333;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 300;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue