From e3a4fe1c5be039adb8d8510ee397c51e08c242a1 Mon Sep 17 00:00:00 2001 From: Thomas <48221879+TheThomaas@users.noreply.github.com> Date: Wed, 31 May 2023 21:04:16 +0200 Subject: [PATCH] Initialize repository --- index.html | 124 +++++++++ main.scss | 748 +++++++++++++++++++++++++++++++++++++++++++++++++++ palette.html | 48 ++++ 3 files changed, 920 insertions(+) create mode 100644 index.html create mode 100644 main.scss create mode 100644 palette.html diff --git a/index.html b/index.html new file mode 100644 index 0000000..584e112 --- /dev/null +++ b/index.html @@ -0,0 +1,124 @@ + + + + + + + Hi! I'm Thomas + + + + +
+ +
+
+
+

Hi! I'm Thomas

+

Welcome to my website

+
+ +
+

My projects

+ +
+ +
+
+
+ Placeholder image +
+
+

About me

+

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Velit culpa dignissimos laborum, dolor voluptatem perspiciatis earum placeat modi minus officia perferendis rerum alias maiores deleniti et quia provident quo doloribus.

+ +
+
+
+ +
+

My experiences

+
    +
  1. +

    School 1

    +

    Lorem ipsum

    +
    -
    +
    2. +
  2. +

    School 2

    +

    Lorem ipsum

    +
    -
    +
    3. +
+
+ +
+ Download as PDF +
+
+ + + \ No newline at end of file diff --git a/main.scss b/main.scss new file mode 100644 index 0000000..c64001b --- /dev/null +++ b/main.scss @@ -0,0 +1,748 @@ +:root { + --light-1: #efefef; + --dark-1: #1e1e1e; + --dark-2: #0f0f0f; + --primary: #C2B280; + --primary-light: #D3C7A2; + --primary-dark: #BAB298; + --secondary: #B3CF99; + --secondary-light: #C2D9AD; + --secondary-dark: #9FAF8F; + + --background: var(--primary-light); + --text: var(--dark-1); + --text-2: var(--dark-2); + + --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", sans-serif; + --font-italic: "Georgia", serif; + --font-code: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace; + --font-size: 1.2rem; + --font-weight-semibold: 700; + --font-weight-bold: 900; + --leading: 1.45; + --gutter: clamp(1ch, 2.5vmax, 3ch); + --stack: clamp(1.25ex, 1ex + 2.5vmax, 1.75ex); + --line-length-small: 30ch; + --line-length: 75ch; + --line-length-large: 115ch; + --page-padding-inline: calc((100vw - min(var(--line-length), 80vw)) / 2); + --border-width: 1px; + --border-radius: 4px; +} + + + + + + +/* + Josh's Custom CSS Reset + https://www.joshwcomeau.com/css/custom-css-reset/ +*/ +*, *::before, *::after { + box-sizing: border-box; +} +* { + margin: 0; +} +:where(html) { + overflow-x: hidden; +} +:where(html, body) { + block-size: 100%; +} +:where(body) { + text-rendering: optimizeSpeed; + line-height: 1.5; +} +:where(img, picture, video, canvas) { + display: block; + max-inline-size: 100%; +} +:where(input, button, textarea, select, a) { + font: inherit; +} +:where(p, h1, h2, h3, h4, h5, h6) { + overflow-wrap: break-word; +} +:where(ul, ol):where([role='list'], [class]) { + list-style: none; +} +:where(html:focus-within) { + scroll-behavior: smooth; +} +:where(img, picture) { + block-size: auto; +} + +@media (prefers-reduced-motion: reduce) { + * { + animation-play-state: paused !important; + transition: none !important; + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + scroll-behavior: auto !important; + } +} + + + + + + + + +.wrapper { + $wrapper-gap: var(--gutter); + display: grid; + grid-template-columns: + 1fr + min(var(--wrapper-max-length, var(--line-length)), calc(100% - var(--wrapper-gap, $wrapper-gap) * 2)) + 1fr; + grid-column-gap: var(--wrapper-gap, $wrapper-gap); + + > * { + grid-column: 2; + } +} + +.wrapper-full { + @extend .wrapper; + $wrapper-gap: var(--gutter); + grid-template-columns: + 1fr + min(var(--wrapper-max-length, var(--line-length-large)), calc(100% - var(--wrapper-gap, $wrapper-gap) * 2)) + 1fr; +} + +.full-bleed { + inline-size: 100%; + grid-column: 1 / -1; + padding: var(--padding-block, 1rem) var(--padding-inline, 2rem); + background-color: var(--background-color, none); +} + + + + + + +.sr-only { + position: absolute !important; + block-size: 1px !important; + inline-size: 1px !important; + padding: 0 !important; + margin: -1px !important; + overflow: hidden !important; + clip: rect(0, 0, 0, 0) !important; + white-space: nowrap !important; + border: 0 !important; +} + +.invisible { + visibility: hidden !important; +} + + + + + + + + + + + + + +/* ------------------------------------ *\ + https://codepen.io/mikemai2awesome/full/KKvMZVz +\* ------------------------------------ */ + +:root { + color: var(--text); + background-color: var(--background); + accent-color: var(--text); +} + +:where(a) { + color: var(--text); +} + +:where(input, textarea, select) { + color: var(--text); + background-color: var(--background); +} + +:where(button, .btn) { + color: var(--primary-light); + background-color: var(--text); +} + +:where(code) { + color: var(--text); + background-color: var(--primary-dark); +} + +/* ------------------------------------ *\ + Typography +\* ------------------------------------ */ + +:root { + font-size: clamp( + var(--font-size), + var(--font-size) * 0.9 + 0.25vw, + var(--font-size) * 2 + ); // % ensures browser zoom is supported. + font-family: var(--font); // Use system UI font. + font-weight: var(--font-weight-regular); + line-height: var(--leading); // Standard leading for good legibility. + letter-spacing: var(--tracking); +} + +:where(a) { + text-decoration: underline; + text-decoration-thickness: var(--border-width); + text-underline-offset: calc(var(--border-width) * 2); +} + +:where(a):hover { + text-decoration-thickness: calc(var(--border-width) * 2); +} + +:where(pre, code, kbd, dl, figcaption, abbr, table) { + font-family: var( + --font-code + ); // Differentiate preformatted, code, description, and table text from body text. + + font-size: 0.8em; // Make monospace and small text smaller than body text. +} + +:where(big) { + font-size: 1.2em; // is technically deprecated, but I love using it. This creates a fallback if a browser doesn't support it. + letter-spacing: 0.006em; +} + +:where(pre code) { + display: block; // Define block code. + font-size: 1em; // Prevent cascading. +} + +:where(blockquote, em, i, cite) { + font-family: var( + --font-italic + ); // Differentiate blockquote, citation, idiomatic, and emphasisized text from body text. Also, sans-serif italic is ugly. + font-weight: var( + --font-weight-regular + ); // Prevent italics to be bold. Bold italic is also ugly and unnecessary. +} + +:where(blockquote) { + font-size: clamp(1.5rem, 1.25rem + 1vw, 3rem); + letter-spacing: 0; +} + +:where(blockquote p) { + max-inline-size: 35ch; +} + +:where(blockquote q):before { + position: absolute; + transform: translateX(-100%); +} + +:where(strong, b, th, button, .btn) { + font-weight: var( + --font-weight-semibold + ); // Make non-heading emphasized text less bold than heading text. +} + +:where(h1, h2, h3, h4, h5, h6, summary strong, legend) { + font-weight: var(--font-weight-semibold); +} + +:where(h1, h2, h3, h4, h5, h6, summary strong, legend, big) { + font-stretch: var(--font-stretch, expanded); +} + +:where(button, .btn, input[type="file"]) { + font-stretch: var(--font-stretch, condensed); +} + +:where(abbr) { + text-decoration: underline; + text-decoration-style: dotted; // Differentiate abbreviaions from links. + text-underline-offset: calc(var(--border-width) * 2); +} + +:where(button, label, select, summary) { + cursor: pointer; +} + +:where(summary:hover > *) { + text-decoration: underline; + text-underline-offset: calc(var(--border-width) * 2); +} + +:where(figcaption) { + text-align: center; +} + +:where(th) { + text-align: start; +} + +:where(th, td) { + vertical-align: baseline; +} + +:where(fieldset > ol) { + list-style: none; +} + +/* ------------------------------------ *\ + Spacing +\* ------------------------------------ */ + +:where(h1, h2, h3, h4, h5, h6, p, figure, form, pre, blockquote, ul, ol, dl, li, details) { + margin-block-end: 0; +} + +:where(h1, h2, h3, h4, h5, h6) { + margin-block-start: calc(var(--stack) * 1.75); +} + +:where(p, figure, form, fieldset, pre, blockquote, ul, ol, dl, details) { + margin-inline: 0; + margin-block-start: var(--stack); +} + +:where(h1, h2, h3, h4, h5, h6, p, figure, form, fieldset, pre, blockquote, ul, ol, dl, details):first-child, +:where(legend + *) { + margin-block-start: 0; +} + +:where(h1, h2, h3, h4, h5, h6) + * { + margin-block-start: calc(var(--stack) / 5); +} + +// :where(ul, ol) { +// padding: 0; +// } + +:where(li > ul, li > ol) { + margin-block-start: calc(var(--stack) / 5); +} + +:where(details ul, details ol) { + margin-inline-start: 4ch; // Unify indent for all lists inside details. +} + +:where(li > ul, li > ol, fieldset ul, fieldset ol) { + margin-inline-start: 2.25ch; // Unify indent for all nested lists. +} + +:where(li + li) { + margin-block-start: calc(var(--stack) / 5); +} + +:where(fieldset > ol li + li) { + margin-block-start: calc(var(--stack) / 2); +} + +:where(fieldset > ol) { + margin-inline: 0; +} + +:where(hr) { + margin-block-start: calc(var(--stack) * 3); + margin-block-end: calc(var(--stack) * 3); +} + +:where(hr + *) { + margin-block-start: 0; +} + +:where(figure > img, table) { + margin-inline: auto; +} + +:where(blockquote > *) { + margin-block-start: calc(var(--stack) / 4); +} + +:where(blockquote:not(:last-child)) { + padding-block-end: calc(var(--stack) / 2); +} + +:where(button, .btn, dd, th, td) { + // Unify inset spacing on bordered elements. + padding-block: calc(var(--stack) / 6); + padding-inline: calc(var(--gutter) / 3); +} + +:where(input, textarea) { + padding-inline: 2px; +} + +:where(caption, figcaption) { + padding-block: calc(var(--stack) / 2); +} + +:where(code, kbd) { + padding-block: 0.25ex; + padding-inline: 0.5ch; +} + +:where(figure, pre) { + padding-block-start: calc( + var(--stack) / 2.5 + ); // Line up top of images/codeblocks with text in an adjacent column layout. +} + +:where(pre) { + padding-block-end: calc(var(--stack) / 2.5); +} + +:where(pre code) { + padding-block: var(--stack); + padding-inline: var(--gutter); +} + +details[open] summary + * { + margin-block-start: calc(var(--stack) / 4); +} + +/* ------------------------------------ *\ + General +\* ------------------------------------ */ + +*, +*:before, +*:after { + font-feature-settings: "kern"; + font-kerning: normal; + -moz-osx-font-smoothing: grayscale !important; + -webkit-font-smoothing: antialiased !important; + box-sizing: border-box; +} + +:where(input, textarea, select, fieldset, button, kbd, dd, table, th, td) { + // Unify border styles. + border: var(--border-width) solid var(--text); +} + +:where(input, textarea, select, fieldset, button, .btn, kbd) { + // Unify interactive elements border radius. + border-radius: var(--border-radius); +} + +:where(pre) { + white-space: -moz-pre-wrap; + white-space: -o-pre-wrap; + white-space: pre-wrap; + word-spacing: normal; + word-break: normal; + word-wrap: break-word; +} + +:where(dl) { + display: grid; + grid-template-columns: auto minmax(75%, 1fr); + gap: calc(var(--gutter) / 2); + align-items: baseline; +} + +:where(dt) { + border-block-end: var(--border-width) dotted; +} + +:where(dd) { + block-size: 100%; + margin-inline-start: 0; +} + +:where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { + display: block; + inline-size: 100%; +} + +:where(input[type="radio"], input[type="checkbox"]) { + size: 1.5ex; + vertical-align: baseline; +} + +:where(input[type="file"]) { + padding-inline: 0; + border: 0; +} + +::-webkit-file-upload-button { + appearance: button; + cursor: pointer; + font: inherit; +} + +:where(input, textarea, select) ~ * { + margin-block-start: 0; + font-size: 0.8em; +} + +:where(input:required + mark) { + display: none; + color: var(--text); + background-color: transparent; +} + +:where(input:required:invalid + mark) { + display: block; +} + +:where(hr) { + block-size: 0; + border: 0; + border-block-start: var(--border-width) dashed var(--text); +} + +:where(figure, figure table) { + inline-size: 100%; +} + +:where(figure) { + overflow-x: auto; +} + +:where(figure > img) { + display: block; +} + +:where(table) { + caption-side: bottom; + border-collapse: collapse; + border-spacing: 0; +} + +:where(tr > *:first-child) { + white-space: nowrap; +} + +:where(summary > *) { + display: inline; + vertical-align: middle; +} + +/* ------------------------------------ *\ + Add-ons + - Requires data attributes. + - Remove to do your own layouts. +\* ------------------------------------ */ + +:where(body main) { + padding-block-start: clamp(var(--stack) * 1, 10vmax, var(--stack) * 2); +} + + + + + + + +.list-inline { + $item-gap : 1ch; + display: flex; + flex-wrap: wrap; + padding-left: 0; + list-style: none; + margin-left: calc(var(--item-gap, $item-gap) * 3 * -1); + clip-path: inset(0 0 0 calc(var(--item-gap, $item-gap) * 3)); + align-items: center; + color: var(--item-color, var(--text)); + + li { + padding-left: var(--item-gap, $item-gap); + &::before { + content: var(--item-separator, '•'); + display: inline-block; + margin-right: var(--item-gap, $item-gap); + width: var(--item-gap, $item-gap); + text-align: center; + } + } + + a { + color: var(--item-color, var(--text)); + text-decoration: none; + + &:hover { + text-decoration: underline; + } + } +} + + + + + + + + + + + + + + + + +header, footer { + background-color: var(--primary); + padding: 1rem 2rem; +} +header { + position: fixed; + inset-block-start: 0; + inset-inline: 0; + nav { + ul { + justify-content: end; + } + li { + padding: 6px 20px; + --item-separator: none; + + @media screen and (min-width: 768px) { + display: inline-block; + } + } + + a[aria-current="page"] { + color: var(--text-2); + text-decoration: underline; + font-weight: var(--font-weight-semibold) + } + } +} +main { + margin: 0; + padding: 0; + h2 { + margin-block: 2rem 1rem; + font-size: calc(var(--font-size) * 1.6); + } + .list-inline { + --item-gap: 0; + margin: 0; + padding: 0; + } + ul:not(.list-inline) { + margin: 0; + padding: 0; + list-style-type: none; + } + li { + --item-separator: none; + margin: 0; + padding: 0; + } +} +footer { + justify-items: center; + .list-inline { + a { + text-decoration: underline; + --item-color: var(--text-2); + } + } +} + +.hero-section { + background-color: var(--primary); + height: 65vh; + text-align: center; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} +.projects-section { + margin-block: 1rem; + ul { + display: flex; + flex-wrap: nowrap; + gap: var(--gutter); + overflow-y: scroll; + } + article { + width: clamp(9rem, 20vw, 13rem); + // width: 14rem; + // min-width: 200px; + // max-width: 250px; + display: flex; + flex-direction: column; + background-color: var(--primary); + border-radius: var(--border-radius); + + img { + border-radius: var(--border-radius) var(--border-radius) 0 0; + } + + div { + padding: .5rem 1rem .8rem 1rem; + } + + a { + float: inline-end; + border-radius: var(--border-radius); + border: var(--border-width) solid var(--text); + margin-block-start: 1rem; + padding: .1rem .5rem; + transition: background-color .2s ease-in-out, color .2s ease-in-out; + + &:hover { + background-color: var(--text); + color: var(--background); + } + } + } +} +.about-section { + display: flex; + gap: 2rem; + align-items: center; + & > div:first-child { + inline-size: 30%; + } + & > div:last-child { + inline-size: 60%; + } + img { + margin: 1rem auto; + inline-size: 100%; + min-inline-size: 150px; + max-inline-size: 300px; + aspect-ratio: 1; + border-radius: 100%; + border: 4px solid var(--primary-dark) + } + ul { + margin-block-start: 1rem; + gap: .2rem; + } +} + + +.download-section { + text-align: center; + margin-block: 2rem 1rem; +} +.btn { + padding: .4rem .8rem; + text-decoration: none; + transition: background-color .2s ease-in-out, text-decoration .2s ease-in-out; + + &:hover { + background-color: var(--dark-2); + text-decoration: underline; + } +} \ No newline at end of file diff --git a/palette.html b/palette.html new file mode 100644 index 0000000..7c7d11f --- /dev/null +++ b/palette.html @@ -0,0 +1,48 @@ + + + + + + + Palette + + + + + + + \ No newline at end of file