272 lines
7.7 KiB
HTML
272 lines
7.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="robots" content="noindex">
|
|
<title>Cephi's Studio</title>
|
|
<!-- <link rel="stylesheet" href="cephi.studio.css"> -->
|
|
<!--
|
|
<style>
|
|
html {
|
|
color-scheme: light dark;
|
|
}
|
|
body {
|
|
width: 35em;
|
|
margin: 0 auto;
|
|
font-family: Tahoma, Verdana, Arial, sans-serif;
|
|
}
|
|
</style>
|
|
-->
|
|
|
|
<style>
|
|
:root {
|
|
--bg: #F7F5EB;
|
|
--accent: #A0C3D2;
|
|
--accent-bg: #EAE0DA;
|
|
--border: #4d4d4d;
|
|
/*--border: #EAC7C7;*/
|
|
--text: #212427;
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
|
|
body {
|
|
color: var(--text);
|
|
display: grid;
|
|
grid-template-columns: 1fr min(70rem, 95%) 1fr;
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: -apple-system, "Segoe UI", Verdana, Arial, sans-serif;
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
body > * {
|
|
grid-column: 2;
|
|
}
|
|
|
|
input, textarea, button {
|
|
color: var(--text);
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
}
|
|
|
|
p, h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; }
|
|
|
|
header {
|
|
background-color: var(--accent-bg);
|
|
border-bottom: 1px solid var(--accent);
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 5rem;
|
|
margin: 1rem 0px;
|
|
}
|
|
|
|
p {
|
|
font-size: 1.5rem;
|
|
margin: 1rem 0px;
|
|
}
|
|
|
|
a { text-decoration: none; }
|
|
|
|
@media only screen and (max-width: 720px) {
|
|
h1 {
|
|
font-size: 3.5rem;
|
|
line-height: 3.5rem;
|
|
}
|
|
}
|
|
|
|
.grid-container {
|
|
display: grid;
|
|
grid-template-areas:
|
|
'top'
|
|
'about-arrow'
|
|
'body';
|
|
grid-template-rows: max(45rem, 85vh) 15vh 1fr;
|
|
height: 100%;
|
|
}
|
|
|
|
.top {
|
|
grid-area: top;
|
|
|
|
height: 100%;
|
|
/*height: 100%;*/
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.menu {
|
|
width: 100%;
|
|
height: 80%;
|
|
|
|
background-color: var(--bg);
|
|
|
|
border: 5px solid var(--border);
|
|
border-radius: 10px;
|
|
|
|
padding: 4%;
|
|
|
|
display: grid;
|
|
grid-template-areas:
|
|
'info buttons'
|
|
'contact buttons';
|
|
grid-template-columns: 3fr 1fr;
|
|
grid-column-gap: 2rem;
|
|
}
|
|
|
|
.info {
|
|
grid-area: info;
|
|
}
|
|
|
|
div.buttons {
|
|
grid-area: buttons;
|
|
|
|
min-width: 8rem;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
padding: 3% 0px;
|
|
}
|
|
|
|
.buttons a {
|
|
height: min(5rem, 30%);
|
|
width: 100%;
|
|
|
|
margin-bottom: 2%;
|
|
|
|
text-decoration: none;
|
|
}
|
|
|
|
.buttons button {
|
|
height: 100%;
|
|
width: 100%;
|
|
|
|
background-color: var(--accent);
|
|
|
|
border: 2px solid var(--border);
|
|
border-radius: 10px;
|
|
|
|
cursor: pointer;
|
|
transition-duration: 0.4s;
|
|
}
|
|
|
|
.buttons button:hover {
|
|
filter: brightness(110%);
|
|
}
|
|
|
|
div.contact {
|
|
grid-area: contact;
|
|
|
|
margin: 20px 0 0 0;
|
|
padding: 0px 8%;
|
|
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.contact a, button {
|
|
width: 5rem;
|
|
height: 5rem;
|
|
}
|
|
|
|
.contact a {
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.contact button {
|
|
position: relative;
|
|
|
|
margin: 0;
|
|
padding: 0;
|
|
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
border: 1px solid black;
|
|
|
|
border-radius: 50%;
|
|
|
|
cursor: pointer;
|
|
}
|
|
|
|
.contact img {
|
|
position: absolute;
|
|
transform: translate(-50%, -50%);
|
|
|
|
width: 3rem;
|
|
height: 3rem;
|
|
|
|
margin: 0;
|
|
border: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.body { grid-area: body; }
|
|
|
|
@media only screen and (max-width: 1080px) {
|
|
.grid-container {
|
|
grid-template-rows: auto 15vh 1fr;
|
|
}
|
|
.menu {
|
|
height: fit-content;
|
|
|
|
margin: 0.5rem 0 0 0;
|
|
padding: 1.2rem;
|
|
grid-template-areas:
|
|
'info'
|
|
'buttons'
|
|
'contact';
|
|
grid-template-columns: 1fr;
|
|
grid-template-rows: 1fr 30.3rem 0.6fr;
|
|
}
|
|
/* .info, .buttons { flex: 100%; } */
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main class="grid-container">
|
|
<section class="top">
|
|
<div class="menu">
|
|
<div class="info">
|
|
<h1 style="text-align: center;">Cephi's Studio</h1>
|
|
<p>Welcome to my studio! Home of my experiments!</p>
|
|
<p>On the right, you can find the services I host.</p>
|
|
<p>Some of them require registration, which you can do by contacting me.</p>
|
|
</div>
|
|
<div class="contact">
|
|
<h3 style="text-align: center; font-size: 2rem; margin-bottom: 1rem; width: 100%">Contact</h3>
|
|
<a href="https://github.com/Cephi-sui" target="_blank" rel="noopener noreferrer"><button><img src="images/github_logo.png"/></button></a>
|
|
<a href="/"><button><img src="images/email_logo.png"/></button></a>
|
|
<a href="/"><button><img src="images/pleroma_logo.png"/></button></a>
|
|
<a href="https://matrix.to/#/@cephi:bunbi.net"><button><img src="images/matrix_logo.png"/></button></a>
|
|
<a href="https://discord.com/users/830154514208129055"><button><img src="images/discord_logo.png"/></button></a>
|
|
</div>
|
|
|
|
<div class="buttons">
|
|
<a href="https://stream.cephi.studio/"><button>Stream</button></a>
|
|
<a href="https://cloud.cephi.studio/"><button>Cloud</button></a>
|
|
<a href="https://cloud.cephi.studio/"><button>IN<br/>PROGRESS</button></a>
|
|
<a href="https://cloud.cephi.studio/"><button>IN<br/>PROGRESS</button></a>
|
|
<a href="https://cloud.cephi.studio/"><button>IN<br/>PRGORESS</button></a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<div class="about-arrow">
|
|
<p style="margin: -0.2em; text-align: center; font-size: 5rem;">⬇</p>
|
|
</div>
|
|
<div class="body">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
<p>This is the soon-to-be homebase for my projects and information.</p>
|
|
<p>Unfortunately, this is still under some serious progress!</p>
|
|
</div>
|
|
</main>
|
|
</body>
|
|
</html>
|