Skip to content

Commit

Permalink
chore: index page rework (#204)
Browse files Browse the repository at this point in the history
  • Loading branch information
hmbanan666 authored Aug 20, 2024
1 parent 5a7ec2b commit 6a6f64c
Show file tree
Hide file tree
Showing 118 changed files with 2,743 additions and 880 deletions.
6 changes: 6 additions & 0 deletions apps/website/eslint.config.mjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
// @ts-check
import withNuxt from './.nuxt/eslint.config.mjs'

export default withNuxt(
// Your custom configs here
)
6 changes: 6 additions & 0 deletions apps/website/nuxt.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -29,5 +29,11 @@ export default defineNuxtConfig({
plugins: [nxViteTsPaths()],
},

modules: [
'@nuxt/eslint',
'@vueuse/nuxt',
'@pinia/nuxt',
],

compatibilityDate: '2024-08-18',
});
38 changes: 1 addition & 37 deletions apps/website/src/app.vue
Original file line number Diff line number Diff line change
@@ -1,44 +1,8 @@
<script setup lang="ts"></script>

<template>
<MainHeader />
<main>
<header>
<nav>
<NuxtLink to="/">Главная</NuxtLink>
<NuxtLink to="/about"> About </NuxtLink>
</nav>
</header>
<nuxt-page />
</main>
</template>

<style scoped lang="css">
header {
line-height: 1.5;
max-width: 100vw;
}
nav > a {
padding-left: 1rem;
padding-right: 1rem;
}
@media (min-width: 768px) {
header {
display: flex;
place-items: center;
padding-right: calc(var(--section-gap) / 2);
margin-left: auto;
margin-right: auto;
max-width: 768px;
}
nav {
text-align: left;
font-size: 1rem;
padding: 1rem 0;
margin-top: 1rem;
}
}
</style>
177 changes: 174 additions & 3 deletions apps/website/src/assets/css/styles.css
Original file line number Diff line number Diff line change
@@ -1,22 +1,66 @@
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swap');

@import '@radix-ui/colors/blue.css';
@import '@radix-ui/colors/bronze.css';
@import '@radix-ui/colors/brown.css';
@import '@radix-ui/colors/crimson.css';
@import '@radix-ui/colors/gold.css';
@import '@radix-ui/colors/gray.css';
@import '@radix-ui/colors/green.css';
@import '@radix-ui/colors/orange.css';
@import '@radix-ui/colors/pink.css';
@import '@radix-ui/colors/purple.css';
@import '@radix-ui/colors/ruby.css';
@import '@radix-ui/colors/slate.css';
@import '@radix-ui/colors/teal.css';
@import '@radix-ui/colors/violet.css';

:root {
--color-twitch: #8E4EC6;
--color-background: #FFF7ED;
--color-background-2: #F6EEE7;
--color-border: var(--brown-7);
--color-border-2: #E1DCCF;
--color-bg-accent-1: var(--violet-9);
--color-bg-accent-2: #6F5F58;
--color-common: var(--gray-9);
--color-uncommon: #33B074;
--color-rare: #0090FF;
--color-epic: #7D66D9;
--color-legendary: #F76B15;
--color-bg-loader: #7D66D9;
}

html {
-webkit-text-size-adjust: 100%;
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
font-size: 16px;
line-height: 1.5;
tab-size: 4;
scroll-behavior: smooth;
}
body {
min-height: 100dvh;
font-family: inherit;
line-height: inherit;
margin: 0;
}
html, body {
font-family: "Noto Serif", "Times New Roman", "Georgia", serif;
font-optical-sizing: auto;
font-weight: 500;
font-style: normal;
font-variation-settings: "wdth" 100;
}

h1,
h2,
p,
pre {
margin: 0;
font-weight: 400;
}
h3 {
font-weight: 600;
}
*,
::before,
Expand All @@ -39,3 +83,130 @@ pre {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
'Liberation Mono', 'Courier New', monospace;
}

p {
font-size: 1rem;
line-height: 1.5;
}

a {
color: var(--green-9);
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

h1 {
font-size: 2rem;
text-align: center;
}

h2 {
font-size: 1.2rem;
}

pre {
font-size: 16px;
background-color: rgba(255, 255, 255, 0.45);
border-radius: 3px;
box-shadow: 2px 2px 6px rgb(255 255 255 / 25%);
padding: 0.5em;
overflow-x: auto;
}

input,
button {
font-size: inherit;
font-family: inherit;
}

button,
input[type="submit"],
input[type="reset"] {
background: none;
color: inherit;
border: none;
padding: 0;
font: inherit;
cursor: pointer;
outline: inherit;
}

button:focus:not(:focus-visible) {
outline: none;
}

@media (min-width: 720px) {
html {
font-size: 18px;
}

h1 {
font-size: 2.4rem;
}

h2 {
font-size: 1.5rem;
}
}

.bg-paper {
background-image: url($lib/assets/website/background-paper-2.webp);
background-repeat: no-repeat;
background-position: bottom;
background-size: cover;
}

.dropdown-menu {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.25em;
width: max-content;
max-width: 320px;
position: absolute;
bottom: -0.25em;
transform: translateY(100%);
padding: 0.5em;
background-color: var(--bronze-4);
z-index: 5;
}

.dropdown-menu a {
color: inherit;
text-decoration: none;
}

.dropdown-menu button {
text-align: left;
}

.dropdown-menu button:hover,
.dropdown-menu a:hover {
color: var(--green-9);
}

html, body {
background-color: var(--orange-2);
color: var(--bronze-12);
}

section {
text-align: center;
padding: 2em 1em;
margin: 0 auto;
max-width: 42em;
}

.hero {
max-width: 64em;
text-align: center;
margin: 0 auto;
padding: 4em 0;

h1 {
margin-bottom: 0.25em;
}
}
77 changes: 77 additions & 0 deletions apps/website/src/components/MainHeader.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
<script setup lang="ts">
const { width } = useWindowSize()
</script>

<template>
<header>
<div class='left'>
<MainLogo />

<!-- <Locale /> -->
</div>

<MenuSmartphone v-if="width <= 1050" />
<MenuDesktop v-else />
</header>
</template>

<style scoped>
header {
padding: 0.5em 1em;
display: flex;
justify-content: space-between;
justify-items: center;
align-items: center;
@media (max-width: 768px) {
& {
padding: 0.5em 0.5em;
}
}
}
.left {
flex-grow: 1;
flex-basis: 0;
display: flex;
align-items: center;
a {
font-size: 0;
}
}
@keyframes skewRandom {
0% {
transform: skewX(0);
}
50% {
transform: skewX(-3deg);
}
75% {
transform: skewX(3deg);
}
100% {
transform: skewX(0);
}
}
.logo {
width: 64px;
height: 64px;
margin-top: -14px;
transition: all 0.2s;
background-size: contain;
scale: 1.2;
&:hover.shake {
animation-name: skewRandom;
animation-duration: 0.5s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-direction: alternate-reverse;
transform-origin: 50% 50%;
scale: 1.1;
}
}
</style>
Loading

0 comments on commit 6a6f64c

Please sign in to comment.