feat: style guilde fonts enabled
This commit is contained in:
efim
parent
8b95d963fe
commit
cfe3994bc9
|
|
@ -62,6 +62,13 @@ Then crop/optimize/edit your image however you like, add it to your project, and
|
||||||
|
|
||||||
### What I learned
|
### What I learned
|
||||||
|
|
||||||
|
#### restarting server of file watch
|
||||||
|
|
||||||
|
wgo -verbose -file .go -file .gohtml -file tailwind.config.js echo reloading :: bash -c 'tailwindcss -i ./input.css -o public/out.css' :: go run main.go
|
||||||
|
|
||||||
|
and doing tailwind first, because server embeds the output css file, so it's needed for the build step
|
||||||
|
|
||||||
|
#### sample
|
||||||
Use this section to recap over some of your major learnings while working through this project. Writing these out and providing code samples of areas you want to highlight is a great way to reinforce your own knowledge.
|
Use this section to recap over some of your major learnings while working through this project. Writing these out and providing code samples of areas you want to highlight is a great way to reinforce your own knowledge.
|
||||||
|
|
||||||
To see how you can add code snippets, see below:
|
To see how you can add code snippets, see below:
|
||||||
|
|
|
||||||
|
|
@ -1,16 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<title>HTML5 Boilerplate</title>
|
|
||||||
<link rel="stylesheet" href="/static/public/out.css">
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<h1>Page Title</h1>
|
|
||||||
<script src="scripts.js"></script>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,3 +1,28 @@
|
||||||
@tailwind base;
|
@tailwind base;
|
||||||
@tailwind components;
|
@tailwind components;
|
||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'HankenGrotesk';
|
||||||
|
src: url('public/fonts/static/HankenGrotesk-Medium.ttf') format('truetype');
|
||||||
|
font-weight: 400; /* Regular */
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'HankenGrotesk';
|
||||||
|
src: url('public/fonts/static/HankenGrotesk-Bold.ttf') format('truetype');
|
||||||
|
font-weight: 700; /* Bold */
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'HankenGrotesk';
|
||||||
|
src: url('public/fonts/static/HankenGrotesk-ExtraBold.ttf') format('truetype');
|
||||||
|
font-weight: 800; /* ExtraBold */
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -522,12 +522,55 @@ video {
|
||||||
--tw-backdrop-sepia: ;
|
--tw-backdrop-sepia: ;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bg-blue-300 {
|
.fixed {
|
||||||
--tw-bg-opacity: 1;
|
position: fixed;
|
||||||
background-color: rgb(147 197 253 / var(--tw-bg-opacity));
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-xl {
|
.inset-x-0 {
|
||||||
font-size: 1.25rem;
|
left: 0px;
|
||||||
line-height: 1.75rem;
|
right: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-1 {
|
||||||
|
bottom: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'HankenGrotesk';
|
||||||
|
|
||||||
|
src: url('public/fonts/static/HankenGrotesk-Medium.ttf') format('truetype');
|
||||||
|
|
||||||
|
font-weight: 400;
|
||||||
|
|
||||||
|
/* Regular */
|
||||||
|
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'HankenGrotesk';
|
||||||
|
|
||||||
|
src: url('public/fonts/static/HankenGrotesk-Bold.ttf') format('truetype');
|
||||||
|
|
||||||
|
font-weight: 700;
|
||||||
|
|
||||||
|
/* Bold */
|
||||||
|
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'HankenGrotesk';
|
||||||
|
|
||||||
|
src: url('public/fonts/static/HankenGrotesk-ExtraBold.ttf') format('truetype');
|
||||||
|
|
||||||
|
font-weight: 800;
|
||||||
|
|
||||||
|
/* ExtraBold */
|
||||||
|
|
||||||
|
font-style: normal;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,24 @@
|
||||||
module.exports = {
|
module.exports = {
|
||||||
content: ["./**/*.gohtml"],
|
content: ["./**/*.gohtml"],
|
||||||
theme: {
|
theme: {
|
||||||
extend: {},
|
extend: {
|
||||||
|
colors: {
|
||||||
|
'light-red': 'hsl(0, 100%, 67%)',
|
||||||
|
'orangey-yellow': 'hsl(39, 100%, 56%)',
|
||||||
|
'green-teal': 'hsl(166, 100%, 37%)',
|
||||||
|
'cobalt-blue': 'hsl(234, 85%, 45%)',
|
||||||
|
'light-slate-blue': 'hsl(252, 100%, 67%)',
|
||||||
|
'light-royal-blue': 'hsl(241, 81%, 54%)',
|
||||||
|
'violet-blue': 'hsla(256, 72%, 46%, 1)',
|
||||||
|
'persian-blue': 'hsla(241, 72%, 46%, 0)',
|
||||||
|
'pale-blue': 'hsl(221, 100%, 96%)',
|
||||||
|
'light-lavender': 'hsl(241, 100%, 89%)',
|
||||||
|
'dark-gray-blue': 'hsl(224, 30%, 27%)',
|
||||||
|
},
|
||||||
|
'font-family': {
|
||||||
|
'sans': ['HankenGrotesk', 'sans-serif'],
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
plugins: [],
|
plugins: [],
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -31,16 +31,24 @@
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body class="bg-blue-300 text-xl">
|
<body class="">
|
||||||
Your Result 76 of 100 Great! You scored higher than 65% of the people who
|
<main>
|
||||||
have taken these tests. Summary Reaction 80 / 100 Memory 92 / 100 Verbal 61
|
<section>
|
||||||
/ 100 Visual 72 / 100 Continue
|
Your Result 76 of 100 Great! You scored higher than 65% of the people who
|
||||||
|
have taken these tests.
|
||||||
|
</section>
|
||||||
|
|
||||||
<div class="attribution">
|
<section>
|
||||||
Challenge by
|
Summary Reaction 80 / 100 Memory 92 / 100 Verbal 61
|
||||||
<a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
|
/ 100 Visual 72 / 100 Continue
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
<footer class="attribution fixed inset-x-0 bottom-1">
|
||||||
|
Challenge by
|
||||||
|
<a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
|
||||||
>Frontend Mentor</a
|
>Frontend Mentor</a
|
||||||
>. Coded by <a href="#">Your Name Here</a>.
|
>. Coded by <a href="#">Your Name Here</a>.
|
||||||
</div>
|
</footer>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue