diff --git a/17-results-summary-component-go/README-template.md b/17-results-summary-component-go/README-template.md index 2a0b478..2d6c23d 100644 --- a/17-results-summary-component-go/README-template.md +++ b/17-results-summary-component-go/README-template.md @@ -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: diff --git a/17-results-summary-component-go/embedded/templates/summary-component.gohtml b/17-results-summary-component-go/embedded/templates/summary-component.gohtml deleted file mode 100644 index 88bf0f2..0000000 --- a/17-results-summary-component-go/embedded/templates/summary-component.gohtml +++ /dev/null @@ -1,16 +0,0 @@ - - - - - - - HTML5 Boilerplate - - - - -

Page Title

- - - - diff --git a/17-results-summary-component-go/input.css b/17-results-summary-component-go/input.css index b5c61c9..bc3b291 100644 --- a/17-results-summary-component-go/input.css +++ b/17-results-summary-component-go/input.css @@ -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; +} diff --git a/17-results-summary-component-go/public/out.css b/17-results-summary-component-go/public/out.css index e795536..4572632 100644 --- a/17-results-summary-component-go/public/out.css +++ b/17-results-summary-component-go/public/out.css @@ -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; } diff --git a/17-results-summary-component-go/tailwind.config.js b/17-results-summary-component-go/tailwind.config.js index ff95ada..a18986b 100644 --- a/17-results-summary-component-go/tailwind.config.js +++ b/17-results-summary-component-go/tailwind.config.js @@ -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: [], } diff --git a/17-results-summary-component-go/templates/summary-component.gohtml b/17-results-summary-component-go/templates/summary-component.gohtml index 8287619..1ccb4e4 100644 --- a/17-results-summary-component-go/templates/summary-component.gohtml +++ b/17-results-summary-component-go/templates/summary-component.gohtml @@ -31,16 +31,24 @@ } - - 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 + +
+
+ Your Result 76 of 100 Great! You scored higher than 65% of the people who + have taken these tests. +
-
- Challenge by - + Summary Reaction 80 / 100 Memory 92 / 100 Verbal 61 + / 100 Visual 72 / 100 Continue + + +
+