diff --git a/main_dc/yalarba/easySite/easySite/app/assets/css/fonts.css b/main_dc/yalarba/easySite/easySite/app/assets/css/fonts.css index 0978549..a71c293 100644 --- a/main_dc/yalarba/easySite/easySite/app/assets/css/fonts.css +++ b/main_dc/yalarba/easySite/easySite/app/assets/css/fonts.css @@ -4,40 +4,40 @@ /* Inter - основной текст */ @font-face { - font-family: 'Inter'; - src: url('/fonts/Inter-Regular.woff2') format('woff2'); + font-family: "Inter"; + src: url("/fonts/Inter-Regular.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { - font-family: 'Inter'; - src: url('/fonts/Inter-Regular.woff2') format('woff2'); + font-family: "Inter"; + src: url("/fonts/Inter-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { - font-family: 'Inter'; - src: url('/fonts/Inter-Regular.woff2') format('woff2'); + font-family: "Inter"; + src: url("/fonts/Inter-Regular.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { - font-family: 'Inter'; - src: url('/fonts/Inter-Regular.woff2') format('woff2'); + font-family: "Inter"; + src: url("/fonts/Inter-Regular.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { - font-family: 'Inter'; - src: url('/fonts/Inter-Regular.woff2') format('woff2'); + font-family: "Inter"; + src: url("/fonts/Inter-Regular.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; @@ -45,32 +45,32 @@ /* Playfair Display - заголовки */ @font-face { - font-family: 'Playfair Display'; - src: url('/fonts/PlayfairDisplay-Regular.woff2') format('woff2'); + font-family: "Playfair Display"; + src: url("/fonts/PlayfairDisplay-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { - font-family: 'Playfair Display'; - src: url('/fonts/PlayfairDisplay-Regular.woff2') format('woff2'); + font-family: "Playfair Display"; + src: url("/fonts/PlayfairDisplay-Regular.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { - font-family: 'Playfair Display'; - src: url('/fonts/PlayfairDisplay-Regular.woff2') format('woff2'); + font-family: "Playfair Display"; + src: url("/fonts/PlayfairDisplay-Regular.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { - font-family: 'Playfair Display'; - src: url('/fonts/PlayfairDisplay-Regular.woff2') format('woff2'); + font-family: "Playfair Display"; + src: url("/fonts/PlayfairDisplay-Regular.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; @@ -78,8 +78,8 @@ /* JetBrains Mono - моноширинный (для кода, деталей) */ @font-face { - font-family: 'JetBrains Mono'; - src: url('/fonts/JetBrainsMono-Regular.woff2') format('woff2'); + font-family: "JetBrains Mono"; + src: url("/fonts/JetBrainsMono-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; @@ -87,34 +87,35 @@ :root { /* Шрифтовые семейства - Набор 1 */ - --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; - --font-heading: 'Playfair Display', 'Times New Roman', serif; - --font-accent: 'JetBrains Mono', 'Courier New', monospace; - + --font-primary: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + sans-serif; + --font-heading: "Playfair Display", "Times New Roman", serif; + --font-accent: "JetBrains Mono", "Courier New", monospace; + /* Размеры шрифтов */ - --text-xs: 0.75rem; /* 12px */ - --text-sm: 0.875rem; /* 14px */ - --text-base: 1rem; /* 16px */ - --text-lg: 1.125rem; /* 18px */ - --text-xl: 1.25rem; /* 20px */ - --text-2xl: 1.5rem; /* 24px */ - --text-3xl: 1.875rem; /* 30px */ - --text-4xl: 2.25rem; /* 36px */ - --text-5xl: 3rem; /* 48px */ - --text-6xl: 3.75rem; /* 60px */ - + --text-xs: 0.75rem; /* 12px */ + --text-sm: 0.875rem; /* 14px */ + --text-base: 1rem; /* 16px */ + --text-lg: 1.125rem; /* 18px */ + --text-xl: 1.25rem; /* 20px */ + --text-2xl: 1.5rem; /* 24px */ + --text-3xl: 1.875rem; /* 30px */ + --text-4xl: 2.25rem; /* 36px */ + --text-5xl: 3rem; /* 48px */ + --text-6xl: 3.75rem; /* 60px */ + /* Высота строк */ --leading-tight: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.75; --leading-loose: 2; - + /* Межбуквенные интервалы */ --tracking-tight: -0.025em; --tracking-normal: 0; --tracking-wide: 0.025em; --tracking-wider: 0.05em; - + /* Насыщенность шрифтов */ --font-light: 300; --font-normal: 400; @@ -122,4 +123,114 @@ --font-semibold: 600; --font-bold: 700; --font-extrabold: 800; -} \ No newline at end of file +} + +/* ===== НАБОР 2: ЭЛЕГАНТНЫЙ И МИНИМАЛИСТИЧНЫЙ ===== */ + +/* Manrope - основной текст */ +@font-face { + font-family: "Manrope"; + src: url("/fonts/Manrope-ExtraLight.woff2") format("woff2"); + font-weight: 300; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: "Manrope"; + src: url("/fonts/Manrope-ExtraLight.woff2") format("woff2"); + font-weight: 400; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: "Manrope"; + src: url("/fonts/Manrope-ExtraLight.woff2") format("woff2"); + font-weight: 500; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: "Manrope"; + src: url("/fonts/Manrope-ExtraLight.woff2") format("woff2"); + font-weight: 600; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: "Manrope"; + src: url("/fonts/Manrope-ExtraLight.woff2") format("woff2"); + font-weight: 700; + font-style: normal; + font-display: swap; +} + +/* Lora - заголовки */ +@font-face { + font-family: "Lora"; + src: url("/fonts/Lora-Regular.woff2") format("woff2"); + font-weight: 400; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: "Lora"; + src: url("/fonts/Lora-Regular.woff2") format("woff2"); + font-weight: 500; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: "Lora"; + src: url("/fonts/Lora-Regular.woff2") format("woff2"); + font-weight: 600; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: "Lora"; + src: url("/fonts/Lora-Regular.woff2") format("woff2"); + font-weight: 700; + font-style: normal; + font-display: swap; +} + +/* Source Sans Pro - акцентный */ +@font-face { + font-family: "Source Sans Pro"; + src: url("/fonts/SourceSansPro-Regular.woff2") format("woff2"); + font-weight: 300; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: "Source Sans Pro"; + src: url("/fonts/SourceSansPro-Regular.woff2") format("woff2"); + font-weight: 400; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: "Source Sans Pro"; + src: url("/fonts/SourceSansPro-Regular.woff2") format("woff2"); + font-weight: 600; + font-style: normal; + font-display: swap; +} + +/* Альтернативные переменные для Набора 2 */ +:root[data-font-set="elegant"] { + /* Шрифтовые семейства - Набор 2 */ + --font-primary: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, sans-serif; + --font-heading: "Lora", "Times New Roman", serif; + --font-accent: "Source Sans Pro", "Arial", sans-serif; +} diff --git a/main_dc/yalarba/easySite/easySite/app/components/layout/HamburgerMenu.vue b/main_dc/yalarba/easySite/easySite/app/components/layout/HamburgerMenu.vue new file mode 100644 index 0000000..0529890 --- /dev/null +++ b/main_dc/yalarba/easySite/easySite/app/components/layout/HamburgerMenu.vue @@ -0,0 +1,502 @@ + + + + + \ No newline at end of file diff --git a/main_dc/yalarba/easySite/easySite/app/components/layout/Header.vue b/main_dc/yalarba/easySite/easySite/app/components/layout/Header.vue index 972f802..a393a5d 100644 --- a/main_dc/yalarba/easySite/easySite/app/components/layout/Header.vue +++ b/main_dc/yalarba/easySite/easySite/app/components/layout/Header.vue @@ -10,39 +10,22 @@ EasySite - - + +
+ +
\ No newline at end of file diff --git a/main_dc/yalarba/easySite/easySite/app/composables/useTheme.ts b/main_dc/yalarba/easySite/easySite/app/composables/useTheme.ts index 1912ae1..9ca8a1c 100644 --- a/main_dc/yalarba/easySite/easySite/app/composables/useTheme.ts +++ b/main_dc/yalarba/easySite/easySite/app/composables/useTheme.ts @@ -1,30 +1,55 @@ // composables/useTheme.ts export const useTheme = () => { - const theme = ref<'light' | 'dark'>('light') - - const setTheme = (newTheme: 'light' | 'dark') => { - theme.value = newTheme - document.documentElement.setAttribute('data-theme', newTheme) - localStorage.setItem('theme', newTheme) + const theme = ref<'light' | 'dark'>('light') + const fontSet = ref<'modern' | 'elegant'>('modern') + + const setTheme = (newTheme: 'light' | 'dark') => { + theme.value = newTheme + if (process.client) { + document.documentElement.setAttribute('data-theme', newTheme) + localStorage.setItem('theme', newTheme) } - - const toggleTheme = () => { - const newTheme = theme.value === 'light' ? 'dark' : 'light' - setTheme(newTheme) + } + + const toggleTheme = () => { + const newTheme = theme.value === 'light' ? 'dark' : 'light' + setTheme(newTheme) + } + + const setFontSet = (newFontSet: 'modern' | 'elegant') => { + fontSet.value = newFontSet + if (process.client) { + document.documentElement.setAttribute('data-font-set', newFontSet) + localStorage.setItem('font-set', newFontSet) } - - // Инициализация темы при загрузке - onMounted(() => { - const savedTheme = localStorage.getItem('theme') as 'light' | 'dark' - const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches - - const initialTheme = savedTheme || (systemPrefersDark ? 'dark' : 'light') - setTheme(initialTheme) - }) - - return { - theme: readonly(theme), - toggleTheme, - setTheme + } + + const toggleFontSet = () => { + const newFontSet = fontSet.value === 'modern' ? 'elegant' : 'modern' + setFontSet(newFontSet) + } + + // Инициализация при загрузке + onMounted(() => { + if (process.client) { + const savedTheme = localStorage.getItem('theme') as 'light' | 'dark' + const savedFontSet = localStorage.getItem('font-set') as 'modern' | 'elegant' + const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches + + const initialTheme = savedTheme || (systemPrefersDark ? 'dark' : 'light') + const initialFontSet = savedFontSet || 'modern' + + setTheme(initialTheme) + setFontSet(initialFontSet) } + }) + + return { + theme: readonly(theme), + fontSet: readonly(fontSet), + toggleTheme, + setTheme, + toggleFontSet, + setFontSet + } } \ No newline at end of file diff --git a/main_dc/yalarba/easySite/easySite/public/fonts/Lora-Regular.woff2 b/main_dc/yalarba/easySite/easySite/public/fonts/Lora-Regular.woff2 new file mode 100644 index 0000000..f75fcd4 Binary files /dev/null and b/main_dc/yalarba/easySite/easySite/public/fonts/Lora-Regular.woff2 differ diff --git a/main_dc/yalarba/easySite/easySite/public/fonts/Manrope-ExtraLight.woff2 b/main_dc/yalarba/easySite/easySite/public/fonts/Manrope-ExtraLight.woff2 new file mode 100644 index 0000000..5aa8ddc Binary files /dev/null and b/main_dc/yalarba/easySite/easySite/public/fonts/Manrope-ExtraLight.woff2 differ diff --git a/main_dc/yalarba/easySite/easySite/public/fonts/SourceSansPro-Regular.woff2 b/main_dc/yalarba/easySite/easySite/public/fonts/SourceSansPro-Regular.woff2 new file mode 100644 index 0000000..bd6d45a Binary files /dev/null and b/main_dc/yalarba/easySite/easySite/public/fonts/SourceSansPro-Regular.woff2 differ