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

Improve almost everything

Browse source
This commit is contained in:
Henry Hiles 2023-05-30 14:10:25 -04:00
parent 51a59fce69
commit 4a0f708c4f
21 changed files with 463 additions and 308 deletions
Download patch file Download diff file Expand all files Collapse all files

20
src/styles/About.module.css
View file

@ -1,36 +1,30 @@
.row {
display: flex;
align-items: center;
padding: 20px;
gap: 5rem;
justify-content: center;
gap: 2em;
width: 100%;
flex-wrap: wrap;
}
.about {
text-align: center;
font-size: 1.5em;
display: flex;
gap: 1em;
flex-direction: column;
align-items: center;
padding: 40px;
}
.textArticle p {
margin: 14px 0 40px;
max-width: 40rem;
margin: auto;
max-width: 80%;
}
.images a {
a {
text-decoration: none;
}
.images img {
.certifications img {
width: 200px;
}
@media (max-width: 1500px) {
.row {
flex-direction: column;
}
}

28
src/styles/Home.css Normal file
View file

@ -0,0 +1,28 @@
section > :is(h1, h2) {
font-size: 2.5em;
margin: 0;
text-align: center;
text-transform: uppercase;
}
main {
display: flex;
gap: 3rem;
flex-direction: column;
align-items: center;
padding-bottom: 2em;
}
main > section {
display: flex;
flex-direction: column;
border-radius: 1rem;
background: rgba(0 0 0 / 0.3);
padding: 2rem;
width: 90%;
transition: scale 0.2s;
}
main > section:hover {
scale: 1.03;
}

3
src/styles/Home.module.css
View file

@ -1,3 +0,0 @@
#container {
width: 100%;
}

21
src/styles/Jumbo.module.css
View file

@ -1,27 +1,22 @@
#jumbo {
color: var(--text-primary);
font-size: 2em;
padding: 3rem 0 0;
text-align: center;
}
/* #jumbo > div {
padding: 0;
padding: 3rem 0 0;
height: 100vh;
} */
}
#jumbo i {
margin: 20px 0 30px;
}
#jumbo #logoLong {
width: 60rem;
max-width: 90%;
}
#jumbo #shortAbout {
display: block;
padding: 20px 10px;
}
#logo {
width: 25rem;
}
#logo {
color: aqua;
}

35
src/styles/Layout.css Normal file
View file

@ -0,0 +1,35 @@
:root {
color-scheme: dark light;
scroll-behavior: smooth;
--primary: hsl(211 26% 39%);
--secondary: hsl(209 28% 29%);
--secondary-hover: hsl(209 28% 19%);
--text-primary: hsl(0 0% 100%);
--secondary-text: hsl(211 26% 39%);
}
body {
font-family: "Lato", -apple-system, Roboto, "Helvetica Neue", Arial,
"Noto Sans", sans-serif;
margin: 0;
background-attachment: fixed;
background-image: url("/images/background.jpg");
backdrop-filter: blur(10px);
color: var(--text-primary);
}
*,
*::before,
*::after {
box-sizing: border-box;
}
svg {
vertical-align: middle;
font-size: 0.75rem;
}
img {
max-width: 100%;
}

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

@ -1,39 +1,11 @@
.nav {
background: var(--secondary);
color: var(--primary-text);
padding-top: 1.5rem;
overflow: auto;
padding: 0.5rem;
display: flex;
font-size: 1.3em;
overflow-y: auto;
font-weight: bold;
transition: padding 0.5s, font-size 0.5s;
width: 100%;
z-index: 1;
top: 0;
gap: 20px;
}
.nav [aria-hidden="true"] {
display: none;
}
@media (min-width: 600px) {
.nav[aria-expanded="false"] {
padding: 1rem;
width: unset;
top: 10px;
border-radius: 100px;
border: 3px solid var(--primary);
padding: 0;
}
.nav[aria-expanded="true"] {
font-size: 1.5em;
}
.nav {
position: sticky;
}
background: hsl(0 0% 0% / 0.4);
font-size: 1.5em;
}
.links svg {
@ -41,7 +13,7 @@
}
.nav button {
background-color: transparent;
background: transparent;
border: none;
cursor: pointer;
color: inherit;

25
src/styles/Project.module.css
View file

@ -1,5 +1,10 @@
#container {
main {
padding: 2em;
gap: 2em;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.overview {
@ -25,7 +30,7 @@
}
.image img {
max-height: 500px;
max-height: 450px;
}
.longDescription h2 {
@ -34,18 +39,32 @@
}
.title {
font-size: 2.6em;
margin: 0.2em;
text-align: center;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-evenly;
flex-direction: row;
gap: 4rem;
}
#details {
main > section {
flex-direction: column;
display: flex;
border-radius: 1rem;
background: rgba(0 0 0 / 0.3);
padding: 2rem;
width: 90%;
transition: scale 0.2s;
}
main > section:hover {
scale: 1.03;
}
@media (max-width: 1300px) {

73
src/styles/index.css
View file

@ -1,73 +0,0 @@
:root {
color-scheme: dark light;
scroll-behavior: smooth;
--primary: hsl(211, 26%, 39%);
--secondary: hsl(209, 28%, 29%);
--secondary-hover: hsl(209, 28%, 19%);
--text-primary: hsl(0, 0%, 100%);
--secondary-text: hsl(211, 26%, 39%);
}
body {
font-family: "Lato", -apple-system, Roboto, "Helvetica Neue", Arial,
"Noto Sans", sans-serif;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
min-height: 100vh;
background: var(--secondary);
color: var(--text-primary);
}
body.light {
--primary: hsl(220, 27%, 98%);
--secondary: hsl(0, 0%, 100%);
--secondary-hover: hsl(0, 0%, 80%);
--text-primary: hsl(220, 17%, 32%);
--secondary-text: hsl(211, 26%, 39%);
}
*,
*::before,
*::after {
box-sizing: border-box;
}
svg {
vertical-align: middle;
font-size: 0.75em;
}
section:not(section section) {
background: var(--secondary);
padding: 3rem 0;
}
section:nth-child(2n):not(section section) {
background: var(--primary);
}
section > svg {
color: var(--primary);
}
section:nth-child(2n) > svg {
color: var(--secondary);
}
section > :is(h1, h2) {
font-size: 2.5em;
margin: 0;
text-align: center;
text-transform: uppercase;
}
h1 {
margin: 0;
}
img {
max-width: 100%;
}