front init
This commit is contained in:
Daniil
@@ -1,9 +0,0 @@
|
||||
@import "normalize.css";
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
border: 0;
|
||||
}
|
||||
@@ -13,15 +13,15 @@
|
||||
|
||||
font-family: Roboto, sans-serif;
|
||||
font-size: 2vw;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.path {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.font {
|
||||
font-size: 5vw;
|
||||
.title {
|
||||
font-size: 4vw;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.hint {
|
||||
@@ -34,32 +34,3 @@
|
||||
|
||||
font-size: 1vw;
|
||||
}
|
||||
|
||||
.testHint {
|
||||
margin: 0 30px;
|
||||
}
|
||||
|
||||
.link {
|
||||
transition: 0.3s;
|
||||
animation: shine 4s linear infinite;
|
||||
|
||||
color: #000;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
#020024 10%,
|
||||
#5b0979 40%,
|
||||
#5b0979 60%,
|
||||
#020024 80%
|
||||
);
|
||||
background-clip: text;
|
||||
background-size: 200% auto;
|
||||
|
||||
font-size: 5vw;
|
||||
-webkit-text-fill-color: transparent;
|
||||
|
||||
@keyframes shine {
|
||||
to {
|
||||
background-position: 200% center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,27 +1,16 @@
|
||||
import Link from "next/link"
|
||||
import { Button } from "@shared/ui"
|
||||
|
||||
import cls from "./HomePage.module.scss"
|
||||
|
||||
const HomePage = () => {
|
||||
return (
|
||||
<div className={cls.homepage}>
|
||||
<p className={cls.font}>
|
||||
Hello from{" "}
|
||||
<Link
|
||||
href="https://github.com/yunglocokid"
|
||||
target="_blank"
|
||||
className={cls.link}
|
||||
>
|
||||
yunglocokid
|
||||
</Link>
|
||||
</p>
|
||||
<pre className={cls.hint} data-testid="hint-code">
|
||||
You can edit <span className={cls.path}>src/pages/HomePage</span> to
|
||||
start {"<3"}!<br />
|
||||
<small className={cls.testHint}>
|
||||
You can also test your application using Jest :D. Try it!
|
||||
</small>
|
||||
<p className={cls.title}>Coffee Project Starter</p>
|
||||
<pre className={cls.hint}>
|
||||
Edit <span className={cls.path}>src/pages/HomePage</span> to begin
|
||||
building your features.
|
||||
</pre>
|
||||
<Button variant="primary">Get Started</Button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,45 @@
|
||||
@use "sass:map";
|
||||
@use "sass:meta";
|
||||
|
||||
$mobile: 767;
|
||||
$tablet: 1439;
|
||||
$desktopSecond: 1919;
|
||||
|
||||
$mobileMin: "mobileMin";
|
||||
$mobileMax: "mobileMax";
|
||||
$tabletMin: "tabletMin";
|
||||
$tabletMax: "tabletMax";
|
||||
$desktopSecondMin: "desktopSecondMin";
|
||||
$desktopSecondMax: "desktopSecondMax";
|
||||
|
||||
$breakpoints: (
|
||||
"mobileMin": (
|
||||
min-width: $mobile + 1 + px
|
||||
),
|
||||
"mobileMax": (
|
||||
max-width: $mobile + px
|
||||
),
|
||||
"tabletMin": (
|
||||
min-width: $tablet + 1 + px
|
||||
),
|
||||
"tabletMax": (
|
||||
max-width: $tablet + px
|
||||
),
|
||||
"desktopSecondMin": (
|
||||
min-width: $desktopSecond + 1 + px
|
||||
),
|
||||
"desktopSecondMax": (
|
||||
max-width: $desktopSecond + px
|
||||
)
|
||||
) !default;
|
||||
|
||||
@mixin respond-to($breakpoint) {
|
||||
@if map.has-key($breakpoints, $breakpoint) {
|
||||
@media #{meta.inspect(map.get($breakpoints, $breakpoint))} {
|
||||
@content;
|
||||
}
|
||||
} @else {
|
||||
@warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
|
||||
+ "Available breakpoints are: #{map.keys($breakpoints)}.";
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
// Common mixins for the project
|
||||
|
||||
// Flexbox center
|
||||
@mixin flex-center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
// Flexbox column
|
||||
@mixin flex-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
// Truncate text with ellipsis
|
||||
@mixin text-ellipsis {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// Visually hidden (accessible)
|
||||
@mixin visually-hidden {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
// Reset button styles
|
||||
@mixin reset-button {
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
// Reset list styles
|
||||
@mixin reset-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
@mixin font-header-l {
|
||||
font-variant-numeric: lining-nums proportional-nums;
|
||||
font-weight: 500;
|
||||
font-size: 20px;
|
||||
line-height: 26px;
|
||||
letter-spacing: -0.41px;
|
||||
}
|
||||
|
||||
@mixin font-subheader-l {
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
letter-spacing: 0px;
|
||||
}
|
||||
|
||||
@mixin font-body-m {
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
letter-spacing: 0px;
|
||||
}
|
||||
|
||||
@mixin font-body-mm {
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
letter-spacing: 0px;
|
||||
}
|
||||
|
||||
@mixin font-body-mr {
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
letter-spacing: 0px;
|
||||
}
|
||||
|
||||
@mixin font-body-s {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
letter-spacing: 0px;
|
||||
}
|
||||
|
||||
@mixin font-caption-m {
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
letter-spacing: 0px;
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
$purple-50: var(--purple-50);
|
||||
$purple-100: var(--purple-100);
|
||||
$purple-200: var(--purple-200);
|
||||
$purple-300: var(--purple-300);
|
||||
$purple-400: var(--purple-400);
|
||||
$purple-500: var(--purple-500);
|
||||
$purple-600: var(--purple-600);
|
||||
$purple-700: var(--purple-700);
|
||||
$purple-800: var(--purple-800);
|
||||
$purple-900: var(--purple-900);
|
||||
|
||||
$green-50: var(--green-50);
|
||||
$green-100: var(--green-100);
|
||||
$green-200: var(--green-200);
|
||||
$green-300: var(--green-300);
|
||||
$green-400: var(--green-400);
|
||||
$green-500: var(--green-500);
|
||||
$green-600: var(--green-600);
|
||||
$green-700: var(--green-700);
|
||||
$green-800: var(--green-800);
|
||||
$green-900: var(--green-900);
|
||||
|
||||
$color-success: var(--color-success);
|
||||
$color-danger: var(--color-danger);
|
||||
$color-warning: var(--color-warning);
|
||||
|
||||
$color-primary: var(--color-primary);
|
||||
$color-secondary: var(--color-secondary);
|
||||
$color-white: var(--color-white);
|
||||
$color-black: var(--color-black);
|
||||
|
||||
$header-height: var(--header-height);
|
||||
|
||||
@@ -0,0 +1,59 @@
|
||||
@import "normalize.css";
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-family: var(--font-roboto);
|
||||
font-variant-numeric: lining-nums proportional-nums;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-variation-settings: "opsz" 10;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
:root {
|
||||
/* Dark Fuchsia Palette (HSL) */
|
||||
--purple-50: hsl(300, 52%, 93%);
|
||||
--purple-100: hsl(298, 46%, 82%);
|
||||
--purple-200: hsl(298, 51%, 69%);
|
||||
--purple-300: hsl(297, 53%, 56%);
|
||||
--purple-400: hsl(297, 70%, 44%); /* Primary */
|
||||
--purple-500: hsl(296, 100%, 35%);
|
||||
--purple-600: hsl(293, 100%, 34%);
|
||||
--purple-700: hsl(288, 100%, 33%);
|
||||
--purple-800: hsl(283, 100%, 32%);
|
||||
--purple-900: hsl(272, 100%, 30%);
|
||||
|
||||
/* Deep Lime Green Palette (HSL) */
|
||||
--green-50: hsl(84, 50%, 94%);
|
||||
--green-100: hsl(85, 48%, 83%);
|
||||
--green-200: hsl(86, 47%, 73%);
|
||||
--green-300: hsl(85, 47%, 61%);
|
||||
--green-400: hsl(85, 51%, 53%);
|
||||
--green-500: hsl(84, 67%, 43%);
|
||||
--green-600: hsl(87, 71%, 39%);
|
||||
--green-700: hsl(88, 79%, 33%);
|
||||
--green-800: hsl(90, 93%, 26%); /* Secondary */
|
||||
--green-900: hsl(104, 100%, 19%);
|
||||
|
||||
--color-success: #22c55e;
|
||||
--color-danger: #ef4444;
|
||||
--color-warning: #facc15;
|
||||
|
||||
--color-primary: var(--purple-400);
|
||||
--color-secondary: var(--green-800);
|
||||
--color-white: #ffffff;
|
||||
--color-black: #000000;
|
||||
|
||||
--header-height: 56px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,15 @@
|
||||
.app {
|
||||
width: 100%;
|
||||
// max-width: 1192px;
|
||||
margin: 0 auto;
|
||||
padding: 16px;
|
||||
padding-top: 24px;
|
||||
box-sizing: border-box;
|
||||
height: calc(100vh - var(--header-height) - 16px);
|
||||
margin-top: var(--header-height);
|
||||
|
||||
@include breakpoints.respond-to(breakpoints.$mobileMax) {
|
||||
padding-top: 12px;
|
||||
height: calc(100svh - var(--header-height));
|
||||
}
|
||||
}
|
||||
Vendored
+3
@@ -0,0 +1,3 @@
|
||||
export interface IButtonProps {
|
||||
message?: string
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
import BootstrapButton, { ButtonProps } from "react-bootstrap/Button"
|
||||
|
||||
export const Button = (props: ButtonProps) => (
|
||||
<BootstrapButton variant="primary" {...props}>
|
||||
{props.children}
|
||||
</BootstrapButton>
|
||||
)
|
||||
@@ -0,0 +1 @@
|
||||
export * from "./Button"
|
||||
@@ -0,0 +1 @@
|
||||
export * from "./Button"
|
||||
Reference in New Issue
Block a user