style + color overhaul
All checks were successful
Personal Website - Run Python HTTP Server / deploy (push) Successful in 1s
All checks were successful
Personal Website - Run Python HTTP Server / deploy (push) Successful in 1s
This commit is contained in:
david
parent
8c8f6f93db
commit
2cfa55a444
177
css/style.scss
177
css/style.scss
@ -1,11 +1,24 @@
|
||||
$background-color: #c7c7c7;
|
||||
$primary-color: #333;
|
||||
$secondary-color: #d11414;
|
||||
$text-color: #123455;
|
||||
$bg-dark: #121510;
|
||||
$bg-card: rgba(20, 26, 18, 0.85);
|
||||
$border-color: rgba(60, 72, 62, 0.7);
|
||||
$accent: #d48a9a;
|
||||
$accent-hover: #e4aab8;
|
||||
$text-primary: #e5e0da;
|
||||
$text-secondary: #8a9285;
|
||||
$font-mono: 'Cascadia Code', 'Fira Code', 'Consolas', 'SF Mono', 'Monaco', 'Menlo', monospace;
|
||||
$font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
||||
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
background-color: $background-color;
|
||||
font-family: $font-sans;
|
||||
background-color: $bg-dark;
|
||||
color: $text-primary;
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
line-height: 1.6;
|
||||
|
||||
header {
|
||||
nav {
|
||||
@ -13,12 +26,16 @@ body {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
gap: 1em;
|
||||
|
||||
li {}
|
||||
}
|
||||
|
||||
a {
|
||||
&:hover {}
|
||||
color: $accent;
|
||||
text-decoration: none;
|
||||
transition: color 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
color: $accent-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -37,34 +54,92 @@ body {
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 2em 1em;
|
||||
|
||||
img.icon {
|
||||
width: 1.5em;
|
||||
filter: brightness(0) saturate(100%) invert(65%) sepia(15%) saturate(500%) hue-rotate(176deg) brightness(95%) contrast(90%);
|
||||
transition: filter 0.2s ease;
|
||||
}
|
||||
|
||||
h1 {}
|
||||
h1 {
|
||||
font-family: $font-mono;
|
||||
font-weight: 700;
|
||||
font-size: 2.4em;
|
||||
letter-spacing: -0.02em;
|
||||
margin-bottom: 0.3em;
|
||||
background: linear-gradient(135deg, #d48a9a, #7ec9a0);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
h2 {}
|
||||
h2 {
|
||||
font-family: $font-mono;
|
||||
font-weight: 500;
|
||||
font-size: 1.5em;
|
||||
color: $text-primary;
|
||||
margin-top: 2em;
|
||||
margin-bottom: 0.8em;
|
||||
letter-spacing: -0.01em;
|
||||
|
||||
h3 {}
|
||||
&::before {
|
||||
content: '> ';
|
||||
color: $accent;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-family: $font-mono;
|
||||
font-weight: 500;
|
||||
font-size: 1.05em;
|
||||
color: $text-primary;
|
||||
margin: 0.3em 0;
|
||||
}
|
||||
|
||||
p {
|
||||
display: flex;
|
||||
margin-block-start: unset;
|
||||
margin-block-end: unset;
|
||||
color: $text-secondary;
|
||||
font-size: 0.95em;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $accent;
|
||||
text-decoration: none;
|
||||
transition: color 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
color: $accent-hover;
|
||||
}
|
||||
}
|
||||
|
||||
div.feature {
|
||||
flex-direction: row;
|
||||
background-color: white;
|
||||
background-color: $bg-card;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: 1em;
|
||||
gap: 1em;
|
||||
gap: 1.5em;
|
||||
margin: auto;
|
||||
padding: 1.5em;
|
||||
padding: 2em;
|
||||
backdrop-filter: blur(12px);
|
||||
transition: border-color 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
border-color: rgba($accent, 0.3);
|
||||
}
|
||||
|
||||
img.portriat {
|
||||
width: 15em;
|
||||
width: 14em;
|
||||
border-radius: 50%;
|
||||
border: 3px solid $border-color;
|
||||
transition: border-color 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
border-color: $accent;
|
||||
}
|
||||
}
|
||||
|
||||
div.summary {
|
||||
@ -73,19 +148,24 @@ body {
|
||||
|
||||
div.row {
|
||||
flex-direction: row;
|
||||
gap: 0.5em;
|
||||
gap: 0.6em;
|
||||
align-items: center;
|
||||
transition: transform 0.15s ease;
|
||||
|
||||
&:hover {
|
||||
transform: translateX(3px);
|
||||
|
||||
img.icon {
|
||||
filter: brightness(0) saturate(100%) invert(60%) sepia(50%) saturate(600%) hue-rotate(180deg) brightness(105%) contrast(95%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
div.content-container {
|
||||
max-width: 50em;
|
||||
|
||||
// margin: auto;
|
||||
max-width: 52em;
|
||||
width: 100%;
|
||||
|
||||
div.content-section {
|
||||
|
||||
@ -95,32 +175,69 @@ body {
|
||||
align-items: stretch;
|
||||
|
||||
div.project {
|
||||
background-color: white;
|
||||
border-radius: 1em;
|
||||
background-color: $bg-card;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: 0.75em;
|
||||
flex-wrap: wrap;
|
||||
flex: 1 0 30%;
|
||||
padding: 0.5em;
|
||||
padding: 1em;
|
||||
align-content: flex-start;
|
||||
justify-content: space-between;
|
||||
transition: border-color 0.3s ease, transform 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
border-color: rgba($accent, 0.4);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
div.icons {
|
||||
padding-top: 0.5em;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 0.75em;
|
||||
}
|
||||
|
||||
a:hover img.icon {
|
||||
filter: brightness(0) saturate(100%) invert(60%) sepia(50%) saturate(600%) hue-rotate(180deg) brightness(105%) contrast(95%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
border-radius: 0.5em;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
footer {
|
||||
text-align: center;
|
||||
// background: #eee;
|
||||
padding: 1em;
|
||||
padding: 2em 1em;
|
||||
color: $text-secondary;
|
||||
font-size: 0.85em;
|
||||
border-top: 1px solid $border-color;
|
||||
margin-top: 3em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
body main {
|
||||
div.feature {
|
||||
flex-direction: column;
|
||||
padding: 1.5em;
|
||||
|
||||
img.portriat {
|
||||
width: 10em;
|
||||
}
|
||||
|
||||
div.summary {
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
div.content-container div.content-section div.content-inner div.project {
|
||||
flex: 1 0 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
BIN
favicon.ico
BIN
favicon.ico
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.1 KiB |
@ -122,7 +122,7 @@
|
||||
</div>
|
||||
</main>
|
||||
<footer>
|
||||
<p>2025 David Westgate</p>
|
||||
<p>2026 David Westgate</p>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
|
||||
16
start.sh
16
start.sh
@ -1,13 +1,13 @@
|
||||
#!/bin/bash
|
||||
sassc css/style.scss css/style.css
|
||||
python3 -m http.server 8080 &
|
||||
python3 -m http.server 8080
|
||||
|
||||
# Keypress loop
|
||||
while true; do
|
||||
read -n 1 -s key
|
||||
if [[ $key == "r" ]]; then
|
||||
echo -e "\nRecompiling SCSS..."
|
||||
sassc css/style.scss css/style.css && echo "Done."
|
||||
fi
|
||||
done
|
||||
# while true; do
|
||||
# read -n 1 -s key
|
||||
# if [[ $key == "r" ]]; then
|
||||
# echo -e "\nRecompiling SCSS..."
|
||||
# sassc css/style.scss css/style.css && echo "Done."
|
||||
# fi
|
||||
# done
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user