diff --git a/public/style/style.css b/public/style/style.css new file mode 100644 index 0000000..913ad24 --- /dev/null +++ b/public/style/style.css @@ -0,0 +1,448 @@ +@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=DM+Mono:wght@300;400;500&family=Jost:wght@400;500;600;700&display=swap'); + +/* ================================================================ + ROOT & CUSTOM PROPERTIES + ================================================================ */ +:root { + --font-body: 'Jost', sans-serif; + --font-section: 'Cormorant Garamond', serif; + --font-mono: 'DM Mono', monospace; + + --coral: #FF644C; + --foam: #F1FAEE; + --background-shallows: #d1ece6; + --shallows: #A8DADC; + --open-ocean: #457B9D; + --deep-sea: #1D3557; + + --page-gutter: 10rem; + --page-gap: 1rem; +} + +/* ================================================================ + CSS RESET + ================================================================ */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html { + scroll-behavior: smooth; +} + +body { + background-color: var(--foam); + color: var(--deep-sea); +} + +/* ================================================================ + BASE ELEMENTS + ================================================================ */ + +h1 { + font-family: var(--font-mono); + font-size: 1rem; + font-weight: 400; + text-transform: uppercase; + color: var(--coral); + margin-top: 5rem; + margin-bottom: 2.5rem; +} + +h2 { + font-family: var(--font-section); + font-size: 2.5rem; + font-weight: 400; + color: var(--deep-sea); +} + +h3 { + font-family: var(--font-section); + font-size: 2.5rem; + font-weight: 400; + color: var(--open-ocean); + font-style: italic; +} + +p { + font-family: var(--font-body); + color: var(--deep-sea); +} + +a { + font-family: var(--font-mono); + font-size: 1rem; + font-weight: 400; + text-transform: uppercase; + color: var(--deep-sea); +} + +/* ================================================================ + LAYOUT LANDMARKS + ================================================================ */ +header { + /* Page header */ + box-shadow: 0 0.35rem 0.85rem rgba(29, 53, 87, 0.18); +} + +main { + /* Main content area */ +} + +footer { + /* Page footer */ + min-height: 20rem; +} + +/* ================================================================ + HEADER COMPONENT + ================================================================ */ +.header { + /* Header wrapper */ + margin: 0 var(--page-gutter); + display: flex; + align-items: center; +} + +.header-logo { + flex: 1; + text-align: left; + justify-content: left; +} + +.header h2 { + /* Site title/logo */ + flex: 1; + font-style: italic; + justify-content: right; +} + +/* ================================================================ + NAVIGATION COMPONENT + ================================================================ */ +.nav { + /* Navigation container */ + display: flex; + flex: 1; + align-items: center; + justify-content: left; + height: 5rem; +} + +nav ul { + /* Navigation list */ + display: flex; + align-items: center; + justify-content: flex-start; + gap: 1.5rem; + margin: 0; + height: 100%; + list-style: none; + padding-left: 0; +} + +nav li { + /* Navigation items */ + display: flex; + align-items: center; + height: 100%; +} + +nav a { + /* Navigation links */ + text-decoration: none; +} + +nav a:hover, +nav a:focus { + /* Navigation link states */ +} + +/* ================================================================ + HERO SECTION + ================================================================ */ + +.hero { + /* Hero content wrapper */ + display: block; +} + +.hero-info { + /* Hero text content */ + grid-column: 1 / span 5; +} + +.hero-text { + /* Hero text block */ + align-items: center; +} + +.hero-text h2, +.hero-text h3 { + /* Hero text block headings */ + font-size: 6rem; +} + +.hero-info-links { + /* Hero call-to-action links */ +} + +.hero-image { + /* Hero image area */ + grid-column: 7 / span 4; + justify-self: end; +} + +/* ================================================================ + ABOUT SECTION + ================================================================ */ +section#about { + /* About section */ +} + +section#about.about { + /* About with class */ +} + +section#about .page-box { + align-items: start; +} + +section#about > .page-box > h1 { + grid-column: 1 / -1; +} + +.artist-statement { + /* Artist statement article */ + grid-column: 1 / -1; +} + +.education { + /* Education article */ + grid-column: 1 / span 5; +} + +.about-box { + /* About content wrapper */ +} + +.experience { + /* Experience article */ + grid-column: 7 / span 4; +} + +/* ================================================================ + WRITING/POETRY SECTION + ================================================================ */ +section#writing { + /* Writing section */ +} + +section#writing.poetry { + /* Poetry with class */ + background-color: var(--background-shallows); +} + +section#writing .page-box { + align-items: start; +} + +section#writing > .page-box > .page-info { + grid-column: 1 / -1; + display: grid; + grid-template-columns: repeat(10, minmax(0, 1fr)); + column-gap: var(--page-gap); + row-gap: 2rem; + width: 100%; +} + +section#writing > .page-box > .page-info > h1 { + grid-column: 1 / -1; +} + +.publications { + /* Publications article */ + grid-column: 1 / span 5; +} + +.selecteds { + /* Selected works article */ + grid-column: 7 / span 4; +} + +.poetry .page-box { + /* Poetry content wrapper */ +} + +.page-info { + /* Page info container */ +} + +/* ================================================================ + DESIGN SECTION + ================================================================ */ +section#design { + /* Design section */ +} + +section#design.design { + /* Design with class */ +} + +section#design .page-box { + align-items: start; +} + +section#design > .page-box > h1 { + grid-column: 1 / -1; +} + +.design .page-box { + /* Design content wrapper */ +} + +.design-grid { + /* Design grid article */ + grid-column: 1 / -1; +} + +/* ================================================================ + FOOTER COMPONENT + ================================================================ */ +footer { + /* Footer landmark */ + background-color: var(--background-shallows); +} + +#contact { + /* Contact/footer section */ +} + +.footer { + /* Footer wrapper */ + margin: 2.5rem var(--page-gutter); +} + +.footer-box { + /* Footer content container */ + width: 100%; + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + column-gap: var(--page-gap); + row-gap: 2rem; + align-items: start; +} + +.footer-info { + /* Footer text info */ + margin-top: 5rem +} + +.footer-info h2 { + /* Footer heading */ +} + +.footer-info p { + /* Footer description */ +} + +.footer-links { + /* Footer links container */ + display: contents; +} + +.footer-navigation { + /* Footer navigation article */ +} + +.footer-contact { + /* Footer contact article */ +} + +/* ================================================================ + UTILITY & LAYOUT CLASSES + ================================================================ */ +.page-box { + /* General page content wrapper */ + height: 100vh; + width: 100%; + padding: var(--page-gutter); + display: grid; + grid-template-columns: repeat(10, minmax(0, 1fr)); + column-gap: var(--page-gap); + row-gap: 2rem; +} + +/* ================================================================ + RESPONSIVE BREAKPOINTS (media queries) + ================================================================ */ +@media (max-width: 768px) { + /* Tablet and smaller */ + + .header, + .footer { + margin-left: 2rem; + margin-right: 2rem; + } + + .page-box { + height: auto; + padding: 2rem; + grid-template-columns: 1fr; + column-gap: 0; + } + + .hero-info, + .hero-image, + .artist-statement, + .education, + .experience, + section#writing > .page-box > .page-info, + .design-grid, + section#about > .page-box > h1, + section#writing > .page-box > .page-info > h1, + section#design > .page-box > h1 { + grid-column: 1 / -1; + } + + section#writing > .page-box > .page-info { + grid-template-columns: 1fr; + } + + .publications, + .selecteds { + grid-column: 1 / -1; + } + + .hero-image { + justify-self: start; + } + + .footer-box { + grid-template-columns: 1fr; + } + + .footer-info, + .footer-navigation, + .footer-contact { + grid-column: 1 / -1; + } +} + +@media (max-width: 480px) { + /* Mobile devices */ + + .header, + .footer { + margin-left: 1rem; + margin-right: 1rem; + } + + .page-box { + padding: 1rem; + } +} + + diff --git a/src/components/AboutBio.astro b/src/components/AboutBio.astro deleted file mode 100644 index b979efc..0000000 --- a/src/components/AboutBio.astro +++ /dev/null @@ -1,104 +0,0 @@ ---- ---- -
-

about me

-
-
-
-

Hello, I'm Dylan Etienne Headley!

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

-

Consectetur adipiscing elit quisque faucibus ex sapien vitae.

-
- -
- Dylan Headley -
-
- -
-
- -
-
- download cv -
-
- -
- - - \ No newline at end of file diff --git a/src/components/Footer.astro b/src/components/Footer.astro index c7cac8e..b32aea7 100644 --- a/src/components/Footer.astro +++ b/src/components/Footer.astro @@ -1,9 +1,22 @@ - --- --- - \ No newline at end of file + \ No newline at end of file diff --git a/src/components/Header.astro b/src/components/Header.astro index edaffad..bf2475b 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -1,48 +1,12 @@ - --- -import Navigation from '../components/Nav.astro'; +import Navigation from "./Navigation.astro"; --- -
- -
-
-
- Dylan Headley headshot photo -
-
- Dylan Headley -
-
-
- -
- - - \ No newline at end of file +
+ +
+ +
+
\ No newline at end of file diff --git a/src/components/LinkButton.astro b/src/components/LinkButton.astro new file mode 100644 index 0000000..e69de29 diff --git a/src/components/Nav.astro b/src/components/Nav.astro deleted file mode 100644 index eb990c3..0000000 --- a/src/components/Nav.astro +++ /dev/null @@ -1,38 +0,0 @@ ---- ---- - - - - - \ No newline at end of file diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro new file mode 100644 index 0000000..d57e798 --- /dev/null +++ b/src/components/Navigation.astro @@ -0,0 +1,22 @@ +--- +--- + + diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro index 1834537..6e70328 100644 --- a/src/layouts/BaseLayout.astro +++ b/src/layouts/BaseLayout.astro @@ -2,7 +2,6 @@ --- const { pageTitle } = Astro.props; -import '../style/style.css'; import Header from '../components/Header.astro'; import Footer from '../components/Footer.astro'; --- @@ -12,12 +11,19 @@ import Footer from '../components/Footer.astro'; + {pageTitle} +
+
+
- +
+