Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[debt] Migrate CSS to Tailwind #203

Merged
merged 50 commits into from
Jan 2, 2025
Merged
Changes from 1 commit
Commits
Show all changes
50 commits
Select commit Hold shift + click to select a range
dcdfa44
Initial setup of Tailwind and migration of the HorizontalNav component
joseph-flinn Dec 19, 2024
8fb59c9
Replace the component styles with tailwind
joseph-flinn Dec 20, 2024
1e4a267
Fix logo padding
joseph-flinn Dec 20, 2024
939cf2d
Fix the static copyright year in RSS reader
joseph-flinn Dec 20, 2024
b5cbd59
Footer to tailwind
joseph-flinn Dec 20, 2024
90f00ce
Card component to Tailwind
joseph-flinn Dec 20, 2024
a1e6b99
PageTitle and ParagraphRenderer to Tailwind. Update card and Horizont…
joseph-flinn Dec 20, 2024
590eeec
Add bio to home page. Move skills to the new about page
joseph-flinn Dec 20, 2024
36402ae
Update Home and About with different data
joseph-flinn Dec 20, 2024
5924282
Initial commit for converting Socials component to Tailwind
joseph-flinn Dec 21, 2024
b34bee3
Drip page to Tailwind
joseph-flinn Dec 23, 2024
1990de1
Updating approach to Socials
joseph-flinn Dec 23, 2024
62af2bd
Update the CV download icon and fix Socials component on /about page
joseph-flinn Dec 23, 2024
f80be70
Rework custom color palette to be a single gradient
joseph-flinn Dec 30, 2024
5e9312e
Migrate [post] and Code*Renderers to Tailwind
joseph-flinn Dec 31, 2024
9002f83
Migrated QuoteRenderer to Tailwind
joseph-flinn Dec 31, 2024
0dea354
removing node_modules from the monorepo root
joseph-flinn Dec 31, 2024
ccf42bb
Migrate markdown table renderers to Tailwind
joseph-flinn Dec 31, 2024
bd6154e
Migrating the markdown quote renderer to Tailwind
joseph-flinn Dec 31, 2024
7511527
Abstracting the heavily modified SvelteMarkdown component to its own …
joseph-flinn Dec 31, 2024
3e06db9
Update the global CSS for the elements that Tailwind stripped by default
joseph-flinn Dec 31, 2024
af35612
Fix /drip page after color change
joseph-flinn Dec 31, 2024
5e4bf0b
Removing unneeded global.css
joseph-flinn Dec 31, 2024
5f561fe
Cleaning up global CSS
joseph-flinn Dec 31, 2024
5481bdc
Cleaning up custom renderers that are not needed
joseph-flinn Dec 31, 2024
833803f
Misc updates while comparing to current design
joseph-flinn Dec 31, 2024
4775464
Switching back to the original Ubuntu font
joseph-flinn Dec 31, 2024
5437354
Migrated /posts to Tailwind
joseph-flinn Dec 31, 2024
460c8f4
Small adjustments for the articles
joseph-flinn Dec 31, 2024
21b9489
Migrate column layout to Tailwind
joseph-flinn Dec 31, 2024
6cfddc7
Migrating to Tailwind
joseph-flinn Dec 31, 2024
ce622f4
Adding influential book data
joseph-flinn Dec 31, 2024
5d97366
Adding a few more books
joseph-flinn Dec 31, 2024
2132987
Migrating CMS DripTable to Tailwind
joseph-flinn Dec 31, 2024
acd714c
Migrate VerticalNav to Tailwind
joseph-flinn Dec 31, 2024
2af17ec
Migrate Button to Tailwind
joseph-flinn Dec 31, 2024
a0a2b31
Migrate CMS login page to Tailwind
joseph-flinn Dec 31, 2024
8c0da72
Migrate main CMS page to Tailwind
joseph-flinn Dec 31, 2024
4939d41
Migrate VerticalNavButton to Tailwind
joseph-flinn Dec 31, 2024
5ccaccc
Remove unused TabbedCard
joseph-flinn Dec 31, 2024
c163069
Migrate main CMS drip page to Tailwind
joseph-flinn Dec 31, 2024
7c4bbac
Migrate Drop edit page to Tailwind
joseph-flinn Dec 31, 2024
5ef787f
Migrated SVG CSS to custom Tailwind utility classes
joseph-flinn Jan 1, 2025
cd1215e
Migrating some of the Modal to Tailwind
joseph-flinn Jan 1, 2025
00c162d
Rename all of the PageTitles with capital letters
joseph-flinn Jan 1, 2025
c07fe98
Adding a larger break between PageTitle sections
joseph-flinn Jan 1, 2025
6539167
First pass at the Intro section
joseph-flinn Jan 1, 2025
1bb8da6
Write the About blurb
joseph-flinn Jan 2, 2025
4f2cd6c
Update the About, Influential Books, and Favorite Posts
joseph-flinn Jan 2, 2025
df5aceb
Merge branch 'main' into debt/tailwind-migration
joseph-flinn Jan 2, 2025
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
Initial setup of Tailwind and migration of the HorizontalNav component
  • Loading branch information
joseph-flinn committed Dec 19, 2024
commit dcdfa444321f1da4f1593c053b2c1ff16ca07105
646 changes: 634 additions & 12 deletions frontend/package-lock.json

Large diffs are not rendered by default.

3 changes: 3 additions & 0 deletions frontend/package.json
Original file line number Diff line number Diff line change
@@ -13,9 +13,12 @@
"@sveltejs/adapter-auto": "^3.2.2",
"@sveltejs/adapter-static": "^3.0.2",
"@sveltejs/kit": "^2.5.18",
"autoprefixer": "^10.4.20",
"npm-check-updates": "^16.14.20",
"postcss": "^8.4.49",
"svelte": "^4.2.18",
"svelte-check": "^3.8.4",
"tailwindcss": "^3.4.17",
"typescript": "^5.5.3",
"vite": "^5.3.3"
},
6 changes: 6 additions & 0 deletions frontend/postcss.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
34 changes: 34 additions & 0 deletions frontend/src/app.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
@font-face {
font-family: 'Ubuntu-Regular';
font-style: monospace;
font-weight: 400;
src: url('/fonts/Ubuntu/Ubuntu-Regular.ttf') format('truetype'),
}
/*
@font-face {
font-family: 'Ubuntu-Italic';
font-style: monospace;
font-weight: 400;
src: url('/fonts/Ubuntu/Ubuntu-Italic.ttf') format('truetype'),
}

@font-face {
font-family: 'Ubuntu-BoldItalic';
font-style: monospace;
font-weight: 700;
src: url('/fonts/Ubuntu/Ubuntu-BoldItalic.ttf') format('truetype'),
}

@font-face {
font-family: 'Ubuntu-Bold';
font-style: monospace;
font-weight: 700;
src: url('/fonts/Ubuntu/Ubuntu-Bold.ttf') format('truetype'),
}
*/
}
7 changes: 5 additions & 2 deletions frontend/src/app.html
Original file line number Diff line number Diff line change
@@ -2,7 +2,11 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!--
<link rel="stylesheet" href="%sveltekit.assets%/global.css" />
-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css" integrity="sha384-MlJdn/WNKDGXveldHDdyRP1R4CTHr3FeuDNfhsLPYrq2t0UBkUdK2jyTnXPEK1NQ" crossorigin="anonymous">
<!-- The loading of KaTeX is deferred to speed up page rendering -->
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js" integrity="sha384-7zkQWkzuo3B5mTepMUcHkMB5jZaolc2xDwL6VFqjFALcbeS9Ggm/Yr2r3Dy4lfFg" crossorigin="anonymous"></script>
@@ -25,10 +29,9 @@
src="https://counterscale-9mg.pages.dev/tracker.js"
defer
></script>
<meta name="viewport" content="width=device-width" />
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<body class="font-ubuntu bg-ivory text-tin-500" data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>
6 changes: 3 additions & 3 deletions frontend/src/lib/components/HorizontalNav.svelte
Original file line number Diff line number Diff line change
@@ -6,13 +6,13 @@
</script>


<div style="display: flex; padding: 0.5em 0em 0.5em 0em;">
<div class="flex py-2">
<a href="{base}/">
<img src={logo} alt="JF Brand Icon" class="svg"/>
</a>
<div style="padding: 0.5em;">
<div class="p-2">
{#each pages as page}
<a href="{base}{page.path}"><b>{page.name}</b></a>
<a class="hover:underline" href="{base}{page.path}"><b>{page.name}</b></a>
{/each}
</div>
</div>
5 changes: 5 additions & 0 deletions frontend/src/routes/+layout.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<script>
import "../app.css";
</script>

<slot />
31 changes: 0 additions & 31 deletions frontend/static/global.css
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
body {
font-family: "Ubuntu", monospace;
background-color: #fffefb;
color: #5c5955;
margin: 0em;
@@ -14,33 +13,3 @@ a {
a:hover {
text-decoration: underline;
}

/* fonts.css */

@font-face {
font-family: 'Ubuntu-Italic';
font-style: monospace;
font-weight: 400;
src: url('/fonts/Ubuntu-Italic.ttf') format('truetype'),
}

@font-face {
font-family: 'Ubuntu-Regular';
font-style: monospace;
font-weight: 400;
src: url('/fonts/Ubuntu-Regular.ttf') format('truetype'),
}

@font-face {
font-family: 'Ubuntu-BoldItalic';
font-style: monospace;
font-weight: 700;
src: url('/fonts/Ubuntu-BoldItalic.ttf') format('truetype'),
}

@font-face {
font-family: 'Ubuntu-Bold';
font-style: monospace;
font-weight: 700;
src: url('/fonts/Ubuntu-Bold.ttf') format('truetype'),
}
4 changes: 3 additions & 1 deletion frontend/svelte.config.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import adapter from '@sveltejs/adapter-static';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

const dev = process.argv.includes('dev');

@@ -16,7 +17,8 @@ const config = {
paths: {
base: dev ? '' : base,
}
}
},
preprocess: vitePreprocess()
};

export default config;
36 changes: 36 additions & 0 deletions frontend/tailwind.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
const defaultTheme = require('tailwindcss/defaultTheme')
const colors = require('tailwindcss/colors')


/** @type {import('tailwindcss').Config} */
export default {
content: ['./src/**/*.{html,js,svelte,ts}'],
theme: {
fontSize: {
xs: ['14px', { lineHeight: '24px', letterSpacing: '-0.03em' }],
sm: ['16px', { lineHeight: '28px', letterSpacing: '-0.03em' }],
lg: ['18px', { lineHeight: '28px', letterSpacing: '-0.03em' }],
xl: ['24px', { lineHeight: '36px', letterSpacing: '-0.03em' }],
'2xl': ['36px', { lineHeight: '48px', letterSpacing: '-0.032em' }],
'2xl': ['48px', { lineHeight: '56px', letterSpacing: '-0.032em' }],
'2xl': ['56px', { lineHeight: '64px', letterSpacing: '-0.032em' }],
'2xl': ['80px', { lineHeight: '80px', letterSpacing: '-0.032em' }],
},
fontFamily: {
ubuntu: "Ubuntu-Regular, mono",
},
colors: {
transparent: 'transparent',
current: 'currentColor',
ivory: '#fffefb',
tin: {
100: '#8a8885',
500: '#5c5955',
}
},
extend: {
},
},
plugins: [],
}