Skip to content

Commit

Permalink
Merge pull request #6 from DrewMcArthur/tweaks-3
Browse files Browse the repository at this point in the history
v0.0.3 tweaks
  • Loading branch information
DrewMcArthur authored Mar 7, 2023
2 parents ff55f80 + ccec177 commit 23a8b73
Show file tree
Hide file tree
Showing 15 changed files with 141 additions and 75 deletions.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "drewmca-contact-page",
"type": "module",
"version": "0.0.1",
"version": "0.0.3",
"engines": {
"npm": ">=6.0.0",
"node": ">=16.12.0"
Expand Down
6 changes: 6 additions & 0 deletions public/about.txt
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
This favicon was generated using the following font:

- Font Title: Arvo
- Font Author: Copyright 2010 Anton Koovit, Yassin Baggar.
- Font Source: http://fonts.gstatic.com/s/arvo/v20/tDbD2oWUg0MKmSAa7Lzr7vs.ttf
- Font License: SIL Open Font License, 1.1 (http://scripts.sil.org/OFL))
Binary file added public/android-chrome-192x192.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/android-chrome-512x512.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/apple-touch-icon.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/favicon-16x16.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/favicon-32x32.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified public/favicon.ico
Binary file not shown.
1 change: 1 addition & 0 deletions public/site.webmanifest
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
2 changes: 0 additions & 2 deletions src/components/App.astro
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
---
import Headline from "./Headline.astro";
import SocialLinks from "./SocialLinks.astro";
---
<div id='app' class='main'>
<Headline />
<SocialLinks />
</div>
2 changes: 1 addition & 1 deletion src/components/SocialLink.astro
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import SimpleIcon from "./SimpleIcon.astro";
const {data} = Astro.props;
---
<a
class='social-link'
class={`social-link ${data.type}`}
href={data.url}
target="_blank"
rel='noopener noreferrer'
Expand Down
4 changes: 4 additions & 0 deletions src/data/links.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
{
"linkData": [
{
"type": "planet",
"text": "hi, i'm drew!"
},
{
"type": "gmail",
"text": "[email protected]",
Expand Down
6 changes: 5 additions & 1 deletion src/pages/index.astro
Original file line number Diff line number Diff line change
@@ -1,12 +1,16 @@
---
import App from '../components/App.astro';
import '../styles/App.css';
import '../styles/main.css';
---
<html>
<head>
<title>drewmca.dev</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
</head>
<body>
<App />
Expand Down
70 changes: 0 additions & 70 deletions src/styles/App.css

This file was deleted.

123 changes: 123 additions & 0 deletions src/styles/main.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,123 @@
:root {
--background-color: antiquewhite;

--main-color: #394f4f;
--light-color: #6b7d7d;

--main-color--hover: #1b3333;

/* to calculate, put the above hex into https://codepen.io/sosuke/pen/Pjoqqp */
--background-color-filter: invert(100%) sepia(86%) saturate(795%) hue-rotate(299deg) brightness(107%) contrast(96%);

--main-color-filter: invert(27%) sepia(15%) saturate(626%) hue-rotate(131deg) brightness(96%) contrast(91%);

--main-color-filter--hover: invert(15%) sepia(8%) saturate(2382%) hue-rotate(131deg) brightness(93%) contrast(89%);

/** animation timing **/
--flyin-timing: cubic-bezier(0,1,0,1);
}

body {
display: flex;
align-content: center;

background-color: var(--background-color);
color: var(--main-color);
}

.main {
font-family:'Lato','Ubuntu',system-ui,sans-serif;
font-weight:300;
font-size: 34px;
line-height: 1.6em;
display: flex;
flex-direction: column;
margin: 1em auto;
align-items: flex-start;
}

/* headline */
.planet.social-link {
cursor: auto;
border: none;
/* animation: flyintop 1s var(--flyin-timing); */
}

.planet.social-link .social-text {
font-size: 1.67em;
color: var(--main-color--hover);
}

.planet.social-link .social-icon,
.planet.social-link:hover .social-icon {
opacity: 0;
}

.social-links {
display: flex;
flex-direction: column;
}

.social-link {
color: var(--light-color);
cursor: pointer;
text-decoration: none;
border-top: 1px solid var(--main-color);
padding: 1px 0;
display: flex;
align-items: center;
justify-content: flex-start;
font-size: .6em;
transition: color .25s;
}

.social-icon {
margin: 5px;
filter: var(--main-color-filter);
}

.social-text {
margin: 5px;
}

.social-link:not(.planet):hover {
color: var(--main-color--hover);
border-color: var(--main-color--hover);
}

.social-link:hover .social-icon {
filter: var(--main-color-filter--hover);
}

.social-link:not(.planet) .social-icon {
animation: flyinleft 0.25s var(--flyin-timing);
}

.social-link .social-text {
animation: flyinright 0.25s var(--flyin-timing);
}

/* idea for fade in taken from https://malone.io */
/* used for .main on load */
@keyframes flyinright {
from {
opacity: 0;
transform: translateX(25em);
}

to {
opacity: 1;
transform: translateX(0);
}
}

@keyframes flyinleft {
from {
opacity: 0;
transform: translateX(-25em);
}
to {
opacity: 1;
transform: translateX(0);
}
}

0 comments on commit 23a8b73

Please sign in to comment.