Initial commit / current site
This commit is contained in:
2
.gitignore
vendored
Normal file
2
.gitignore
vendored
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
# MacOS files
|
||||||
|
.DS_Store
|
||||||
146
css/site.css
Normal file
146
css/site.css
Normal file
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
img/blue-pic.jpg
Normal file
BIN
img/blue-pic.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
BIN
img/red-pic.jpg
Normal file
BIN
img/red-pic.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 151 KiB |
55
index.html
Normal file
55
index.html
Normal file
@ -0,0 +1,55 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta content="🚧 Under Constrction 🚧" property="og:title" />
|
||||||
|
<meta content="This site is still under construction!" property="og:description">
|
||||||
|
<meta content="#f6fa34" data-react-helmet="true" name="theme-color" />
|
||||||
|
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
|
||||||
|
|
||||||
|
<link href="/css/site.css" rel="stylesheet">
|
||||||
|
|
||||||
|
<title>🚧 Under Construction 🚧</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<main>
|
||||||
|
<section class="title centered">
|
||||||
|
<div class="text-center">
|
||||||
|
<h3 class="text-lg mb color-purple">Ciao!</h3>
|
||||||
|
<h1 class="text-display mb">Cyper's Chamber</h1>
|
||||||
|
<p class="color-secondary">This site contains my collection of creations – check them out cautiously! They're often unfinished, so combustion is always a concern!</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="dual-column bg-red">
|
||||||
|
<div class="section-image centered">
|
||||||
|
<img src="/img/red-pic.jpg" alt="Red stock photo">
|
||||||
|
</div>
|
||||||
|
<div class="section-text centered">Bloggy section</div>
|
||||||
|
</section>
|
||||||
|
<section class="dual-column bg-blue">
|
||||||
|
<div class="section-text centered">Git section</div>
|
||||||
|
<div class="section-image centered">
|
||||||
|
<img src="/img/blue-pic.jpg" alt="Blue stock photo">
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="centered">
|
||||||
|
<div class="text-center">
|
||||||
|
<h3 class="text-lg mb color-purple">(TODO)</h3>
|
||||||
|
<h1 class="text-display mb">Personal Stuff</h1>
|
||||||
|
<p class="color-secondary">Something about personal stuff?</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="dual-column bg-red">
|
||||||
|
<div class="section-image centered">
|
||||||
|
<img src="/img/red-pic.jpg" alt="Red stock photo">
|
||||||
|
</div>
|
||||||
|
<div class="section-text centered">Art & Photography</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user