MCorange/personal_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 {
width: 100%;
}
a:link {
a {
color: purple;
text-decoration: none;
transition: color 100ms ease-in-out;
}
a:hover {
color: blueviolet;
}
@ -51,6 +76,8 @@ a:link {
#sidenav {
position: relative;
width: 25%;
font-size: 12pt;
@ -60,6 +87,72 @@ a:link {
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) {
#content {
width: 90%;
@ -89,4 +182,18 @@ a:link {
}
#login-modal {
padding: 10px;
width: 80%;
}
#login-btn {
transform: none;
right: 0px;
}
}

23
static/css/index.css
View File

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

51
templates/index.html
View File

@ -12,6 +12,8 @@
<body>
<input type="checkbox" id="toggle">
<div id="content">
<div class="box titlebar">
@ -31,6 +33,8 @@
<a href="#">Home</a>
<a href="#">Home</a>
<a href="#">Home</a>
<label id="login-btn" for="toggle">Login</label>
</div>
<div class="box" id="content-pane">
@ -40,15 +44,58 @@
<div class="post">
<img class="post-img" src="/static/assets/uwu.jpg" alt="post img">
<h3 class="post-title">Title text</h3>
<h5 class="post-desc">Description text</h5>
<span>
<h2 class="post-title">Title text</h3>
<p class="post-desc">Description text</p>
</span>
</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 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>
</html>