Henry-Hiles/website-old
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Styling changes

Browse source
This commit is contained in:
Henry Hiles 2023-05-31 16:01:46 -04:00
parent 807ef4f806
commit 6716a135eb
7 changed files with 32 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/layouts/Layout.astro
View file

@ -14,7 +14,7 @@ const { page } = Astro.props
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link rel="icon" href="/images/NewLogo.svg" />
<link rel="icon" href="/images/logo.svg" />
<link
rel="apple-touch-icon"
sizes="180x180"

8
src/projects.json
View file

@ -11,7 +11,7 @@
},
"technologies": "This project was built using Node.js and Discord.js.",
"mainImage": "quadraticBotComputer.png",
"thumbImage": "quadraticBot.png"
"thumbImage": "mentalMathThumb.svg"
},
{
"name": "PokeAPI Searcher",
@ -21,7 +21,7 @@
"description": "A simple website where you can search for Pokemon by type or Pokedex. Uses the PokeAPI for data. Made purely of HTML, CSS, and Vanilla Javascript. Uses the Fetch API for querying the PokeAPI.",
"technologies": "This project was built using handcrafted HTML, CSS, and JavaScript. This project uses no bloated frontend technologies, making for quick loading times and fewer requests.",
"mainImage": "pokeAPIComputer.png",
"thumbImage": "pokeAPIThumb.png"
"thumbImage": "mentalMathThumb.svg"
},
{
"name": "Messaging",
@ -42,7 +42,7 @@
"description": "A simple Web-RTC powered video chat, great for chatting with friends or family.",
"technologies": "This project was built using EJS, PeerJS, Express, and Socket.IO.",
"mainImage": "videoChatComputer.png",
"thumbImage": "videoChatThumb.png",
"thumbImage": "mentalMathThumb.svg",
"demoLink": "https://video.henryhiles.com"
},
{
@ -63,7 +63,7 @@
"description": "An open-source website to find movies, written in React. Includes a client-side only rating system. Uses the TMDB API for data.",
"technologies": "This project was built using React and CSS Modules.",
"mainImage": "movieComputer.png",
"thumbImage": "movieThumb.svg",
"thumbImage": "mentalMathThumb.svg",
"demoLink": "https://movies.henryhiles.com"
},
{

2
src/styles/ButtonLink.module.css
View file

@ -1,7 +1,6 @@
.button {
display: flex;
background: var(--secondary);
border: 2px solid var(--text-primary);
border-radius: 20px;
padding: 20px;
text-decoration: none;
@ -13,5 +12,4 @@
.button:hover {
background: var(--secondary-hover);
color: white;
}

2
src/styles/Home.css
View file

@ -1,5 +1,5 @@
section > :is(h1, h2) {
font-size: 2.5em;
font-size: 2.5rem;
margin: 0;
text-align: center;
text-transform: uppercase;

12
src/styles/Layout.css
View file

@ -4,7 +4,7 @@
--primary: hsl(211 26% 39%);
--secondary: hsl(209 28% 29%);
--secondary-hover: hsl(209 28% 19%);
--secondary-hover: hsl(209 28% 25%);
--text-primary: hsl(0 0% 100%);
--secondary-text: hsl(211 26% 39%);
}
@ -15,7 +15,6 @@ body {
margin: 0;
background-attachment: fixed;
background-image: url("/images/background.jpg");
backdrop-filter: blur(10px);
color: var(--text-primary);
}
@ -27,7 +26,6 @@ body {
svg {
vertical-align: middle;
font-size: 0.75rem;
}
img {
@ -36,20 +34,22 @@ img {
main {
display: flex;
gap: 2rem;
gap: 5rem;
flex-direction: column;
align-items: center;
padding-bottom: 2em;
padding-bottom: 10em;
}
main > section {
scroll-margin-top: 8rem;
scroll-margin-top: 9rem;
display: flex;
flex-direction: column;
border-radius: 1rem;
background: rgba(0 0 0 / 0.3);
padding: 2rem;
margin: 1rem;
width: 90%;
min-height: 80vh;
transition: scale 0.2s;
}

2
src/styles/Nav.module.css
View file

@ -1,7 +1,7 @@
.nav {
padding: 0.5rem;
display: flex;
font-size: 1.3em;
font-size: 1.3rem;
overflow-y: auto;
font-weight: bold;
background: hsl(0 0% 0% / 0.4);

9
src/styles/Portfolio.module.css
View file

@ -8,6 +8,11 @@
.portfolioItems a {
color: var(--text-primary);
transition: scale 0.2s;
}
.portfolioItems a:not(:hover) {
filter: brightness(90%);
}
.portfolioItems a:not(:hover) {
@ -37,6 +42,10 @@
width: 100%;
}
.portfolioItems a:hover {
scale: 1.1;
}
.projectName {
display: flex;
justify-content: center;