diff --git a/README.md b/README.md index 04384c3..e7225ea 100644 --- a/README.md +++ b/README.md @@ -5,3 +5,10 @@ Personal website for Andie. ## Editing in VSCode This project has an [`.editorconfig` file](.editorconfig). To utilize this in VSCode, install the ["Editorconfig" extension](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig). + +## todo + +1. page title: f+r `{{title}}` with relevant title +1. page description: f+r `{{description}}` with relevant description +1. favicon +1. og image diff --git a/assets/styles/main.css b/assets/styles/main.css new file mode 100644 index 0000000..3267cab --- /dev/null +++ b/assets/styles/main.css @@ -0,0 +1,48 @@ +:root { + color-scheme: light dark; + + --color-dark: #130024; + --color-light: #ffdff3; + --color-purple-dark: #570d93; + --color-purple-light: #b675ec; + --color-pink-dark: #8f0d66; + --color-pink-light: #e771c2; + --color-orange-dark: #ba4f1d; + --color-orange-light: #e88a5c; + + --color-bg: light-dark(var(--color-light), var(--color-dark)); + --color-text: light-dark(var(--color-dark), var(--color-light)); + --color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light)); + --color-pink: light-dark(var(--color-pink-dark), var(--color-pink-light)); + --color-orange: light-dark(var(--color-orange-dark), var(--color-orange-light)); +} + +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + color: var(--color-text); + background-color: var(--color-bg); + font-family: Courier, monospace; + width: 65%; + margin: 0 auto; +} + +@media (max-width: 650px) { + body { + width: 92%; + } +} + +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: Verdana, sans-serif; + line-height: 2.5; +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..ba0446e --- /dev/null +++ b/index.html @@ -0,0 +1,78 @@ + + + + {{title}} + + + + + + + + + + + + + + + + + +
+ +
+
+

header level 1

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Fusce libero neque, sollicitudin id scelerisque in, congue ut leo. + Morbi vehicula sem quis mauris lobortis tempor quis ac eros. + Nam in elit eu quam pulvinar cursus id ut magna. + Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; + Pellentesque convallis nec erat blandit eleifend. + Nam tincidunt, quam a mollis tincidunt, urna urna malesuada massa, id faucibus arcu lectus sit amet nulla. + In convallis enim vel luctus lobortis. + Praesent et tincidunt dolor. +

+ +

header level 2

+

Vestibulum dignissim tortor et tellus rutrum, quis dignissim orci rhoncus. + Vestibulum eget justo in ante feugiat varius. + Donec efficitur nulla non mollis facilisis. + Duis vitae feugiat tortor. + Morbi ac tempor leo. + Nunc pharetra est et dui malesuada, nec auctor nisi pulvinar. + In hac habitasse platea dictumst. + Donec magna velit, consequat non dignissim at, commodo a enim. + Duis accumsan nunc at tellus vulputate consequat. + Nam nec lectus eget nisi venenatis condimentum sed ac massa. + Interdum et malesuada fames ac ante ipsum primis in faucibus. + Integer sem tortor, blandit non tellus ut, elementum cursus libero. + Duis fringilla aliquet justo eu interdum. + Aenean fermentum leo dignissim leo pulvinar, eu ornare mauris porttitor. + Vestibulum vitae euismod metus, non varius quam. +

+ +

header level 3

+

Vestibulum quis rhoncus risus, sit amet volutpat velit. + Cras finibus, leo vitae feugiat faucibus, sem nulla hendrerit est, elementum aliquam ligula tellus eu risus. + Cras tincidunt mauris ut purus vulputate aliquam ac sit amet lectus. + Donec maximus pretium ligula, in ultricies enim rutrum sed. + Integer aliquam sem molestie quam molestie mattis. + Aliquam rhoncus quam quis consequat vestibulum. + Quisque pretium leo et mi volutpat facilisis. + Aenean dignissim est tincidunt urna euismod cursus. + Donec tincidunt felis nisi, nec volutpat urna imperdiet non. + Duis sodales viverra leo, vestibulum porta lectus facilisis at. + Nulla volutpat pulvinar lectus sed luctus. + Sed ac pharetra risus. + Fusce laoreet auctor lacus eget aliquet. + Maecenas ultricies elit nibh, vitae consequat dui placerat sit amet. + Proin vitae erat a nisi lobortis gravida ac vel est. +

+
+ +