MCorange/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

obamna

Browse Source
This commit is contained in:
xomf 2024-03-28 13:05:00 -04:00
parent a417aa4b33
commit b7cf19f229
3 changed files with 169 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

109
static/css/global.css
View File

@ -22,14 +22,39 @@ body {
} }
.form-group {
display: flex;
flex-direction: row;
}
.form-group label {
display: block;
width: 100%;
}
.form-group input {
width: 400%;
}
.titlebar { .titlebar {
width: 100%; width: 100%;
} }
a:link { a {
color: purple; color: purple;
text-decoration: none; text-decoration: none;
transition: color 100ms ease-in-out;
}
a:hover {
color: blueviolet;
} }
@ -51,6 +76,8 @@ a:link {
#sidenav { #sidenav {
position: relative;
width: 25%; width: 25%;
font-size: 12pt; font-size: 12pt;
@ -60,6 +87,72 @@ a:link {
flex-direction: column; flex-direction: column;
} }
#login-modal {
display: block;
background: #222222;
border: solid 4px purple;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#login-modal .container {
display: flex;
flex-direction: column;
}
#login-modal label {
cursor: pointer;
}
#login-modal-container {
display: block;
pointer-events: none;
opacity: 0;
transition: opacity 400ms ease-in-out;
position: absolute;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.774);
backdrop-filter: blur(2px);
}
#login-btn {
position: absolute;
cursor: pointer;
left: 50%;
color: purple;
transform: translateX(-50%);
bottom: 10px;
}
#toggle {
display: none;
}
#toggle:checked ~ #login-modal-container {
pointer-events: auto;
opacity: 1;
}
@media only screen and (max-width: 1080px) { @media only screen and (max-width: 1080px) {
#content { #content {
width: 90%; width: 90%;
@ -89,4 +182,18 @@ a:link {
} }
#login-modal {
padding: 10px;
width: 80%;
}
#login-btn {
transform: none;
right: 0px;
}
} }

21
static/css/index.css
View File

@ -1,16 +1,17 @@
.post { .post {
border: 2px solid purple; border: 2px solid purple;
height: 10%; height: 10%;
/* position: relative; display: flex;
object-fit: contain; */ justify-items: center;
margin-bottom: 10px;
} }
.post-img { .post img {
/* width: fit-content; display: block;
height: fit-content; height: 100%;
position: relative; }
width: fit-content; */
.post span {
margin-left: 10px;
margin-top: 1%;
} }

51
templates/index.html
View File

@ -12,6 +12,8 @@
<body> <body>
<input type="checkbox" id="toggle">
<div id="content"> <div id="content">
<div class="box titlebar"> <div class="box titlebar">
@ -31,6 +33,8 @@
<a href="#">Home</a> <a href="#">Home</a>
<a href="#">Home</a> <a href="#">Home</a>
<a href="#">Home</a> <a href="#">Home</a>
<label id="login-btn" for="toggle">Login</label>
</div> </div>
<div class="box" id="content-pane"> <div class="box" id="content-pane">
@ -40,15 +44,58 @@
<div class="post"> <div class="post">
<img class="post-img" src="/static/assets/uwu.jpg" alt="post img"> <img class="post-img" src="/static/assets/uwu.jpg" alt="post img">
<h3 class="post-title">Title text</h3> <span>
<h5 class="post-desc">Description text</h5> <h2 class="post-title">Title text</h3>
<p class="post-desc">Description text</p>
</span>
</div> </div>
<div class="post">
<img class="post-img" src="/static/assets/uwu.jpg" alt="post img">
<span>
<h2 class="post-title">Title text</h3>
<p class="post-desc">Description text</p>
</span>
</div>
</div> </div>
</div> </div>
</div> </div>
<div id="login-modal-container">
<div id="login-modal">
<h1>login <labeL for="toggle">(x)</labeL></h1>
<p>secrets beyond human comprehension lie beneath this unassuming login screen</p>
<div class="container">
<div class="form-group">
<label for="uname"><b>Email:</b></label>
<input type="text" name="uname" required>
</div>
<div class="form-group">
<label for="psw"><b>Password:</b></label>
<input type="password" name="psw" required>
</div>
<br>
<button type="submit">Login</button>
<br>
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
</div>
</div>
</div>
</body> </body>
</html> </html>