diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..cc5fe0b --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +# MacOS files +.DS_Store \ No newline at end of file diff --git a/css/site.css b/css/site.css new file mode 100644 index 0000000..9cd5d27 --- /dev/null +++ b/css/site.css @@ -0,0 +1,146 @@ +:root { + --header-text-transparency: 0.21; + --primary-text-transparency: 0.76; + --secondary-text-transparency: 0.58; + + --header-text-color: rgba(255, 255, 255, var(--header-text-transparency)); + --primary-text-color: rgba(255, 255, 255, var(--primary-text-transparency)); + --secondary-text-color: rgba(255, 255, 255, var(--secondary-text-transparency)); +} + +html, body, h1, h2, h3, h4, h5, h6, p { + margin: 0; + padding: 0; + font-family: "Open Sans", sans-serif; + font-optical-sizing: auto; + font-style: normal; + font-variation-settings: "wdth" 100; + color: var(--primary-text-color); +} + +body { + background-color: #2B2738; +} + +body::before { + background-attachment: scroll; + content: ''; + display: block; + pointer-events: none; + position: fixed; + top: 0; + left: 0; + transform: scale(1); + width: 100vw; + z-index: 0; + background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20width%3D%22512%22%20height%3D%22512%22%20preserveAspectRatio%3D%22none%22%3E%20%3Cstyle%20type%3D%22text%2Fcss%22%3E%20path%20%7B%20fill%3A%20none%3B%20stroke%3A%20rgba(255,255,255,0.071)%3B%20stroke-width%3A%201.01px%3B%20stroke-linecap%3A%20round%3B%20stroke-linejoin%3A%20round%3B%20%7D%20%3C%2Fstyle%3E%20%3Cpath%20vector-effect%3D%22non-scaling-stroke%22%20d%3D%22M424%2C331.8c0%2C12.5-6.7%2C24.1-17.5%2C30.3l-132%2C76.2c-10.8%2C6.3-24.2%2C6.3-35%2C0l-132-76.2%20C96.7%2C355.8%2C90%2C344.3%2C90%2C331.8V179.2c0-12.5%2C6.7-24.1%2C17.5-30.3l132-76.2c10.8-6.3%2C24.2-6.3%2C35%2C0l132%2C76.2%20c10.8%2C6.3%2C17.5%2C17.8%2C17.5%2C30.3V331.8z%20M238.5%2C73l-256%2C147.6%20M273.5%2C439l252.1-145.4%20M256%2C634.7V378.3c0-12.5%2C6.7-24.1%2C17.5-30.3%20l252.1-145.4%20M256-122.7v256.4c0%2C12.5-6.7%2C24.1-17.5%2C30.3l-256%2C147.6%22%2F%3E%3C%2Fsvg%3E'); + background-size: 794px; + background-position: center; + background-repeat: repeat; + height: 100vh; +} + +main { + overflow-y: auto; + position: relative; + z-index: 2; +} + +section { + height: 100vh; +} + +.section-text { + background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20width%3D%22512%22%20height%3D%22512%22%20preserveAspectRatio%3D%22none%22%3E%20%3Cstyle%20type%3D%22text%2Fcss%22%3E%20path%20%7B%20fill%3A%20none%3B%20stroke%3A%20rgba(255,255,255,0.122)%3B%20stroke-width%3A%201.01px%3B%20stroke-linecap%3A%20round%3B%20stroke-linejoin%3A%20round%3B%20%7D%20%3C%2Fstyle%3E%20%3Cpath%20vector-effect%3D%22non-scaling-stroke%22%20d%3D%22M424%2C331.8c0%2C12.5-6.7%2C24.1-17.5%2C30.3l-132%2C76.2c-10.8%2C6.3-24.2%2C6.3-35%2C0l-132-76.2%20C96.7%2C355.8%2C90%2C344.3%2C90%2C331.8V179.2c0-12.5%2C6.7-24.1%2C17.5-30.3l132-76.2c10.8-6.3%2C24.2-6.3%2C35%2C0l132%2C76.2%20c10.8%2C6.3%2C17.5%2C17.8%2C17.5%2C30.3V331.8z%20M238.5%2C73l-256%2C147.6%20M273.5%2C439l252.1-145.4%20M256%2C634.7V378.3c0-12.5%2C6.7-24.1%2C17.5-30.3%20l252.1-145.4%20M256-122.7v256.4c0%2C12.5-6.7%2C24.1-17.5%2C30.3l-256%2C147.6%22%2F%3E%3C%2Fsvg%3E'); + background-size: 384px; + background-position: center; + background-repeat: repeat; +} +.section-image > img { + width: 100%; + height: 100%; + object-fit: cover; + object-position: center; +} + +.centered { + display: grid; + place-items: center; +} + +.text-center { + text-align: center; + padding: 0 1rem; +} + +.dual-column { + display: flex; + flex-direction: column; + height: 85vh; +} +.dual-column > * { + flex: 1; +} + +.bg-red { + background-color: Tomato; +} +.bg-blue { + background-color: midnightblue; +} + +.mb { + margin-bottom: 4rem; +} + +.text-lg { + font-size: 2rem; +} + +.text-display { + font-size: 3.5rem; +} + +.color-purple { + color:rgb(128, 92, 212); +} + +.color-secondary { + color: var(--secondary-text-color); +} + +@media (width >= 768px) { + .dual-column { + flex-direction: row; + } +} + +/* Text resizing */ + +/* sm */ +@media (width >= 576px) { + .text-lg { + font-size: 2rem; + } + .text-display { + font-size: 4rem; + } +} +/* md */ +@media (width >= 768px) { + .text-lg { + font-size: 3rem; + } + .text-display { + font-size: 5rem; + } +} +/* lg */ +@media (width >= 992px) { + .text-lg { + font-size: 3rem; + } + .text-display { + font-size: 7rem; + } +} \ No newline at end of file diff --git a/img/blue-pic.jpg b/img/blue-pic.jpg new file mode 100644 index 0000000..b8451fb Binary files /dev/null and b/img/blue-pic.jpg differ diff --git a/img/red-pic.jpg b/img/red-pic.jpg new file mode 100644 index 0000000..76faeac Binary files /dev/null and b/img/red-pic.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..e31ee6a --- /dev/null +++ b/index.html @@ -0,0 +1,55 @@ + + + + + + + + + + + + + + + + + 🚧 Under Construction 🚧 + + +
+
+
+

Ciao!

+

Cyper's Chamber

+

This site contains my collection of creations – check them out cautiously! They're often unfinished, so combustion is always a concern!

+
+
+
+
+ Red stock photo +
+
Bloggy section
+
+
+
Git section
+
+ Blue stock photo +
+
+
+
+

(TODO)

+

Personal Stuff

+

Something about personal stuff?

+
+
+
+
+ Red stock photo +
+
Art & Photography
+
+
+ + \ No newline at end of file