Shellnut_Public/personal-website-sveltekit
1
0
Fork 0
mirror of https://github.com/BradNut/personal-website-sveltekit synced 2025-09-08 23:20:18 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Removing some postcss and refactoring to use nested postcss.

Browse source
This commit is contained in:
Bradley Shellnut 2023-06-05 16:27:51 -07:00
parent b1dda85d7f
commit a4261350d2
11 changed files with 37 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -41,7 +41,6 @@
"postcss": "^8.4.24", "postcss": "^8.4.24",
"postcss-import": "^15.1.0", "postcss-import": "^15.1.0",
"postcss-load-config": "^4.0.1", "postcss-load-config": "^4.0.1",
"postcss-nested": "^6.0.1",
"postcss-preset-env": "^8.4.2", "postcss-preset-env": "^8.4.2",
"prettier": "^2.8.8", "prettier": "^2.8.8",
"prettier-plugin-svelte": "^2.10.1", "prettier-plugin-svelte": "^2.10.1",

15
postcss.config.cjs
View file

@ -1,9 +1,18 @@
const autoprefixer = require('autoprefixer'); const postcssPresetEnv = require('postcss-preset-env');
const atImport = require('postcss-import'); const atImport = require('postcss-import');
const postcssNested = require('postcss-nested');
const config = { const config = {
plugins: [autoprefixer(), atImport(), postcssNested] plugins: [
atImport(),
postcssPresetEnv({
stage: 3,
features: {
'nesting-rules': true,
'custom-media-queries': true,
'media-query-ranges': true
}
})
]
}; };
module.exports = config; module.exports = config;

15
src/lib/components/articles/index.svelte
View file

@ -58,11 +58,11 @@
gap: 0.5rem; gap: 0.5rem;
margin: 1.5rem 0; margin: 1.5rem 0;
a { & a {
overflow-wrap: anywhere; overflow-wrap: anywhere;
} }
p { & p {
margin: 0.4rem 0.25rem; margin: 0.4rem 0.25rem;
} }
} }
@ -74,7 +74,7 @@
justify-content: left; justify-content: left;
align-items: center; align-items: center;
p + p { & p + p {
background-color: var(--linkHover); background-color: var(--linkHover);
color: var(--buttonTextColor); color: var(--buttonTextColor);
padding: 0.25rem 0.5rem; padding: 0.25rem 0.5rem;
@ -92,11 +92,12 @@
align-items: center; align-items: center;
gap: 1rem; gap: 1rem;
a { & a {
font-size: 2rem; font-size: 2rem;
svg { }
text-decoration: none;
} & a + svg {
text-decoration: none;
} }
@media (max-width: 1000px) { @media (max-width: 1000px) {

2
src/lib/components/bandcamp/index.svelte
View file

@ -103,7 +103,7 @@
justify-content: center; justify-content: center;
text-align: center; text-align: center;
figure { & figure {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }

8
src/lib/components/logo/index.svelte
View file

@ -31,7 +31,7 @@
font-size: 2rem; font-size: 2rem;
--scale: 0; --scale: 0;
p::after { & p::after {
content: ''; content: '';
position: absolute; position: absolute;
width: 100%; width: 100%;
@ -43,7 +43,7 @@
transform: scale(var(--scale)); transform: scale(var(--scale));
} }
a { & a {
display: grid; display: grid;
justify-items: center; justify-items: center;
text-decoration: none; text-decoration: none;
@ -57,7 +57,7 @@
--scale: 1; --scale: 1;
} }
p { & p {
position: relative; position: relative;
font-size: 0.5em; font-size: 0.5em;
/* padding-top: 0.3rem; */ /* padding-top: 0.3rem; */
@ -70,7 +70,7 @@
} }
} }
img { & img {
width: 3rem; width: 3rem;
} }
} }

2
src/lib/components/nav/index.svelte
View file

@ -40,7 +40,7 @@
margin: 0.5rem; margin: 0.5rem;
padding: 2rem; padding: 2rem;
a + a { & a + a {
margin-left: 25px; margin-left: 25px;
} }
} }

2
src/routes/+layout.svelte
View file

@ -51,7 +51,7 @@
place-items: center; place-items: center;
gap: 1rem; gap: 1rem;
h3 { & h3 {
color: white; color: white;
} }
} }

8
src/routes/about/+page.svelte
View file

@ -300,7 +300,7 @@
display: grid; display: grid;
grid-gap: 2.5rem; grid-gap: 2.5rem;
p { & p {
margin: 1rem; margin: 1rem;
/* padding: 0.2rem; */ /* padding: 0.2rem; */
} }
@ -315,7 +315,7 @@
margin-top: 1rem; margin-top: 1rem;
font-size: 2rem; font-size: 2rem;
a { & a {
display: grid; display: grid;
justify-items: center; justify-items: center;
@ -327,7 +327,7 @@
margin-left: 1rem; margin-left: 1rem;
color: var(--lightGrey); color: var(--lightGrey);
p { & p {
font-size: 1.5rem; font-size: 1.5rem;
padding-top: 0.3rem; padding-top: 0.3rem;
margin: 0; margin: 0;
@ -335,7 +335,7 @@
&:hover { &:hover {
color: var(--shellYellow); color: var(--shellYellow);
p { & p {
color: var(--shellYellow); color: var(--shellYellow);
} }
} }

4
src/routes/articles/[page]/+page.svelte
View file

@ -96,7 +96,7 @@
display: grid; display: grid;
grid-template-rows: 1fr auto; grid-template-rows: 1fr auto;
align-items: start; align-items: start;
a { & a {
cursor: pointer; cursor: pointer;
} }
@ -112,7 +112,7 @@
justify-content: left; justify-content: left;
align-items: center; align-items: center;
p + p { & p + p {
background-color: var(--linkHover); background-color: var(--linkHover);
color: var(--buttonTextColor); color: var(--buttonTextColor);
padding: 0.25rem 0.5rem; padding: 0.25rem 0.5rem;

4
src/routes/portfolio/+page.svelte
View file

@ -104,13 +104,13 @@
} }
:global(.tab-unselected) { :global(.tab-unselected) {
h2 { & h2 {
border-bottom: 2px solid var(--white); border-bottom: 2px solid var(--white);
} }
} }
:global(.tab-selected) { :global(.tab-selected) {
h2 { & h2 {
border-bottom: 2px solid var(--shellYellow); border-bottom: 2px solid var(--shellYellow);
} }
} }

4
src/styles/global.pcss
View file

@ -197,7 +197,7 @@ hr {
} }
nav { nav {
a::after { & a::after {
content: ''; content: '';
position: absolute; position: absolute;
width: 100%; width: 100%;
@ -209,7 +209,7 @@ nav {
transform: scale(0); transform: scale(0);
} }
a { & a {
position: relative; position: relative;
font-size: 2rem; font-size: 2rem;
text-decoration: none; text-decoration: none;