rodude123/my-portfolio
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Made cookie popup work for most browsers
All checks were successful
🚀 Deploy website on push / 🎉 Deploy (push) Successful in 19s
Details

Browse Source 
Signed-off-by: rodude123 <rodude123@gmail.com>
This commit is contained in:
Rohit Pai 2023-12-06 23:30:25 +00:00
parent 52614e5835
commit 0cb57d0813
4 changed files with 43 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/blog/css/main.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/blog/index.html vendored
View File

@ -1 +1 @@
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Rohit Pai - Blog</title><meta name="title" content="Rohit Pai - Blog"><meta name="description" content="This is all the blog posts that Rohit Pai has posted. You'll find posts on various topics, mostly on tech but some on various other random topics."><meta name="keywords" content="Blog, all posts, rohit, pai, rohit pai, tech, web development, self-hosting, hosting"><meta name="robots" content="index, follow"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="language" content="English"><meta name="author" content="Rohit Pai"><link rel="stylesheet" href="/blog/css/main.css"><script src="https://kit.fontawesome.com/ed3c25598e.js" crossorigin="anonymous"></script><script type="text/javascript" src="https://platform-api.sharethis.com/js/sharethis.js#property=6550cdc47a115e0012964576&product=sop" async="async"></script></head><body><nav><input type="checkbox" id="nav-check"><h1><a href="/" class="link">rohit pai</a></h1><div class="nav-btn"><label for="nav-check"><span></span> <span></span> <span></span></label></div><ul><li><a href="/#about" class="textShadow link">about</a></li><li><a href="/#curriculumVitae" class="textShadow link">cv</a></li><li><a href="/#projects" class="textShadow link">projects</a></li><li><a href="/#contact" class="textShadow link">contact</a></li><li><a href="/blog" class="textShadow link active">blog</a></li></ul></nav><header><div><h1>full stack developer</h1><a href="/#sayHello" class="btn btnPrimary boxShadowIn boxShadowOut">Contact Me</a> <a href="" id="arrow"><i class="fa-solid fa-chevron-down"></i></a></div></header><div class="menuBar"><div class="menu"><ul><li><a href="/blog" class="link active">All posts</a></li><li><a href="/blog/category" class="link">categories</a></li><li><label for="searchField" aria-hidden="true" hidden>search</label> <input type="search" name="search" id="searchField" placeholder="Search..."> <button type="submit" id="searchBtn" class="btn btnPrimary"><i class="fa fa-search"></i></button></li></ul></div></div><main id="main"></main><div class="modal-container" id="cookiePopup"><div class="modal"><div class="modal-content"><h2><i class="fas fa-cookie-bite"></i> Hey I use cookies btw</h2><!-- cookie info text and 2 links disagree and agree, clicking disagree should redirect to google.co.uk --><p>Just to let you know, I use cookies to give you the best experience on my blog. By clicking agree I'll assume that you are happy with it. <a href="/blog/policy/cookie" class="link">Read more</a></p><div class="flexRow"><button class="btn btnPrimary" id="cookieAccept">agree</button> <a href="https://google.co.uk" class="btn btnPrimary">disagree</a></div></div></div></div><footer class="flexRow"><div class="nav"><ul><li><a href="/blog/policy/privacy" class="link">privacy policy</a></li><li><a href="/blog/policy/cookie" class="link">cookie policy</a></li></ul></div><p>&copy; <span id="year"></span> Rohit Pai all rights reserved</p><div class="button"><button id="goBackToTop"><i class="fa-solid fa-chevron-up"></i></button></div></footer><script src="/js/typewriter.js"></script><script src="/blog/js/index.js"></script><script id="dsq-count-scr" src="https://rohitpaiportfolio.disqus.com/count.js" async></script></body></html> <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Rohit Pai - Blog</title><meta name="title" content="Rohit Pai - Blog"><meta name="description" content="This is all the blog posts that Rohit Pai has posted. You'll find posts on various topics, mostly on tech but some on various other random topics."><meta name="keywords" content="Blog, all posts, rohit, pai, rohit pai, tech, web development, self-hosting, hosting"><meta name="robots" content="index, follow"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="language" content="English"><meta name="author" content="Rohit Pai"><link rel="stylesheet" href="/blog/css/main.css"><script src="https://kit.fontawesome.com/ed3c25598e.js" crossorigin="anonymous"></script><script type="text/javascript" src="https://platform-api.sharethis.com/js/sharethis.js#property=6550cdc47a115e0012964576&product=sop" async="async"></script></head><body><nav><input type="checkbox" id="nav-check"><h1><a href="/" class="link">rohit pai</a></h1><div class="nav-btn"><label for="nav-check"><span></span> <span></span> <span></span></label></div><ul><li><a href="/#about" class="textShadow link">about</a></li><li><a href="/#curriculumVitae" class="textShadow link">cv</a></li><li><a href="/#projects" class="textShadow link">projects</a></li><li><a href="/#contact" class="textShadow link">contact</a></li><li><a href="/blog" class="textShadow link active">blog</a></li></ul></nav><header><div><h1>full stack developer</h1><a href="/#sayHello" class="btn btnPrimary boxShadowIn boxShadowOut">Contact Me</a> <a href="" id="arrow"><i class="fa-solid fa-chevron-down"></i></a></div></header><div class="menuBar"><div class="menu"><ul><li><a href="/blog" class="link active">All posts</a></li><li><a href="/blog/category" class="link">categories</a></li><li><label for="searchField" aria-hidden="true" hidden>search</label> <input type="search" name="search" id="searchField" placeholder="Search..."> <button type="submit" id="searchBtn" class="btn btnPrimary"><i class="fa fa-search"></i></button></li></ul></div></div><main id="main"></main><div class="modal-container" id="cookiePopup"><div class="modal"><div class="modal-content"><h2><i class="fas fa-cookie-bite"></i> Hey I use cookies btw</h2><p>Just to let you know, I use cookies to give you the best experience on my blog. By clicking agree I'll assume that you are happy with it. <a href="/blog/policy/cookie" class="link">Read more</a></p><div class="flexRow"><button class="btn btnPrimary" id="cookieAccept">agree</button> <a href="https://google.co.uk" class="btn btnPrimary">disagree</a></div></div></div></div><footer class="flexRow"><div class="nav"><ul><li><a href="/blog/policy/privacy" class="link">privacy policy</a></li><li><a href="/blog/policy/cookie" class="link">cookie policy</a></li></ul></div><p>&copy; <span id="year"></span> Rohit Pai all rights reserved</p><div class="button"><button id="goBackToTop"><i class="fa-solid fa-chevron-up"></i></button></div></footer><script src="/js/typewriter.js"></script><script src="/blog/js/index.js"></script><script id="dsq-count-scr" src="https://rohitpaiportfolio.disqus.com/count.js" async></script></body></html>

43
src/blog/css/main.css
View File

@ -32,6 +32,7 @@
height: 100%; height: 100%;
background-color: rgba(0, 0, 0, 0.4); /* Background color for the entire screen */ background-color: rgba(0, 0, 0, 0.4); /* Background color for the entire screen */
box-sizing: border-box; /* Include padding and border in the element's total width and height */ box-sizing: border-box; /* Include padding and border in the element's total width and height */
z-index: 9999999;
} }
.modal-container.hidden { .modal-container.hidden {
@ -43,9 +44,8 @@
right: 0; right: 0;
bottom: 0; bottom: 0;
width: 40%; width: 40%;
max-width: 550px;
height: auto; height: auto;
max-height: 70vh; max-height: 90dvh;
overflow: auto; overflow: auto;
margin: 1.25em; margin: 1.25em;
padding: 1.25em; padding: 1.25em;
@ -61,6 +61,15 @@
box-shadow: 0 6px 4px 0 var(--mutedBlack); box-shadow: 0 6px 4px 0 var(--mutedBlack);
} }
.modal-content .flexRow {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
gap: 1em;
flex-wrap: wrap;
}
/**** Media Queries *****/ /**** Media Queries *****/
@media screen and (max-width: 90em) { @media screen and (max-width: 90em) {
@ -90,6 +99,12 @@
width: 100%; width: 100%;
} }
/*** Cookie popup ***/
.modal-content .flexRow {
width: 50%;
flex-direction: column;
}
/*** Large Post for Home and Category ***/ /*** Large Post for Home and Category ***/
section.largePost { section.largePost {
padding: 1em; padding: 1em;
@ -188,6 +203,18 @@
@media screen and (max-width: 55em) { @media screen and (max-width: 55em) {
/*** Cookie Popup ***/
.modal {
width: 90%;
}
.modal-content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
/*** Large Post for Home and Category ***/ /*** Large Post for Home and Category ***/
.banner { .banner {
max-width: 75%; max-width: 75%;
@ -206,6 +233,18 @@
} }
@media screen and (max-height: 38em) and (orientation: landscape) {
/*** cookie popup ***/
.modal {
width: 90%;
}
.modal-content .flexRow {
flex-direction: row;
flex-wrap: nowrap;
}
}
@media screen and (max-width: 30em) { @media screen and (max-width: 30em) {
/***** Individual Blog Posts ***/ /***** Individual Blog Posts ***/

1
src/blog/index.html
View File

@ -76,7 +76,6 @@
<div class="modal"> <div class="modal">
<div class="modal-content"> <div class="modal-content">
<h2><i class="fas fa-cookie-bite"></i> Hey I use cookies btw</h2> <h2><i class="fas fa-cookie-bite"></i> Hey I use cookies btw</h2>
<!-- cookie info text and 2 links disagree and agree, clicking disagree should redirect to google.co.uk -->
<p>Just to let you know, I use cookies to give you the best experience on my blog. By clicking agree <p>Just to let you know, I use cookies to give you the best experience on my blog. By clicking agree
I'll assume that you are happy with it. <a href="/blog/policy/cookie" class="link">Read more</a> I'll assume that you are happy with it. <a href="/blog/policy/cookie" class="link">Read more</a>
</p> </p>