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
|
||||
|
||||
#### 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.
|
||||
|
||||
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 components;
|
||||
@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: ;
|
||||
}
|
||||
|
||||
.bg-blue-300 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(147 197 253 / var(--tw-bg-opacity));
|
||||
.fixed {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.text-xl {
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.75rem;
|
||||
.inset-x-0 {
|
||||
left: 0px;
|
||||
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 = {
|
||||
content: ["./**/*.gohtml"],
|
||||
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: [],
|
||||
}
|
||||
|
|
|
|||
|
|
@ -31,16 +31,24 @@
|
|||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-blue-300 text-xl">
|
||||
<body class="">
|
||||
<main>
|
||||
<section>
|
||||
Your Result 76 of 100 Great! You scored higher than 65% of the people who
|
||||
have taken these tests. Summary Reaction 80 / 100 Memory 92 / 100 Verbal 61
|
||||
/ 100 Visual 72 / 100 Continue
|
||||
have taken these tests.
|
||||
</section>
|
||||
|
||||
<div class="attribution">
|
||||
<section>
|
||||
Summary Reaction 80 / 100 Memory 92 / 100 Verbal 61
|
||||
/ 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
|
||||
>. Coded by <a href="#">Your Name Here</a>.
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in New Issue