WebDev/Mind-Overflow-Website
Archived
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

started implementing cookies popup; made a "common-style" css file to keep everything tidy and not have duplicate code

Browse Source
This commit is contained in:
Bea 2020-07-09 03:23:47 +02:00
parent d1f41cab38
commit 7421f6d06e
9 changed files with 208 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
index.html
View File

@ -3,8 +3,15 @@
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=0">
<meta name="description" content="Welcome to Lorenzo Dellacà's official website: software development, web design, music, photography.">
<link href="/styles/common-style.css" rel="stylesheet" type="text/css">
<link href="/styles/home-style.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" type="image/png" href="/images/logos/brain-128.png"/>
<!-- Scripts Begin -->
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
crossorigin="anonymous"></script>
<title>Mind Overflow : Home</title>
<!-- Matomo -->
@ -22,10 +29,20 @@
})();
</script>
<!-- End Matomo Code -->
<script src="/scripts/policy-popup.js"></script>
<!-- Scripts End -->
</head>
<body>
<body onload="openPolicyPopup()">
<div class="policy-popup" id="policy-popup">
<h4>This website uses cookies.</h4>
<p>We use cookies to ensure you the best experience.
<br>
By using our website, you agree with our <a href="/pages/policy.html" target="_blank">Privacy Policy</a>.
</p>
<button onclick="agreePolicyPopup()">Ok, understood</button>
</div>
<div class="main" id="vantajs">
<h1>Lorenzo Dellacà</h1>

1
pages/about.html
View File

@ -2,6 +2,7 @@
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=0">
<link href="/styles/common-style.css" rel="stylesheet" type="text/css">
<link href="/styles/pages-style.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" type="image/png" href="/images/logos/brain-128.png"/>
<title>Mind Overflow : About</title>

1
pages/contact.html
View File

@ -2,6 +2,7 @@
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=0">
<link href="/styles/common-style.css" rel="stylesheet" type="text/css">
<link href="/styles/pages-style.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" type="image/png" href="/images/logos/brain-128.png"/>
<title>Mind Overflow : Contact</title>

1
pages/policy.html
View File

@ -2,6 +2,7 @@
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=0">
<link href="/styles/common-style.css" rel="stylesheet" type="text/css">
<link href="/styles/pages-style.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" type="image/png" href="/images/logos/brain-128.png"/>
<title>Mind Overflow : Policies</title>

4
scripts/arrow-fade.js
View File

@ -2,9 +2,9 @@
$(document).ready(function(){
$(window).scroll(function(){
if($(this).scrollTop() > $(window).height()*0.3){
$(".arrow-down").css({"opacity" : "0"})
$(".arrow-down").css({"opacity" : "0"});
} else {
$(".arrow-down").css({"opacity" : "0.4"})
$(".arrow-down").css({"opacity" : "0.4"});
}
})
})

28
scripts/policy-popup.js Normal file
View File

@ -0,0 +1,28 @@
function openPolicyPopup() {
if(getCookie("consent") === "true") return;
$("#policy-popup").fadeIn(1000); // Enable the div
}
function agreePolicyPopup() {
const _paq = window._paq || [];
_paq.push(['rememberConsentGiven']); // todo: check if this works
$("#policy-popup").fadeOut(1000); // Disable the div
document.cookie = "consent=true"; // todo: check if already present? also, firefox was throwing a warning...
}
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = 0; i <ca.length; i++) {
var c = ca[i];
while (c.charAt(0) === ' ') {
c = c.substring(1);
}
if (c.indexOf(name) === 0) {
return c.substring(name.length, c.length);
}
}
return "";
}

135
styles/common-style.css Normal file
View File

@ -0,0 +1,135 @@
@charset "utf-8";
/* CSS Document */
html, body {
font-family: 'Montserrat', sans-serif;
font-weight: 800;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
h1 {
font-family: 'Montserrat', sans-serif;
font-weight: 800;
width: 100%;
color: white;
position: absolute;
}
h2 {
font-family: 'Montserrat', sans-serif;
font-weight: 800;
color: white;
margin: 0;
padding: 38px 20px 20px;
font-size: 40px;
}
h3 {
font-family: 'Montserrat', sans-serif;
font-weight: 800;
color: white;
margin: 0;
padding: 30px 0 0;
font-size: 33px;
}
h4 {
font-family: 'Montserrat', sans-serif;
font-weight: 800;
color: white;
margin: 0;
padding: 20px;
font-size: 25px;
}
a {
text-decoration: none;
color: paleturquoise;
position: relative;
}
/* Begin policy popup */
/* todo: this makes the page a little bit higher & larger, adding bars. fix it */
.policy-popup {
display: none; /*Hidden, we want to show it via JavaScript */
/* Theming */
background: #535353;
color: white;
border-radius: 3px;
padding: 10px;
font-size: 25px;
box-sizing: border-box;
/* Size */
width: 600px;
/* Positioning */
position: absolute;
left: 50px;
bottom: 50px;
z-index: 1;
}
.policy-popup p {
font-family: 'Montserrat', sans-serif;
font-weight: 200;
color: white;
font-size: 15px;
padding: 0 20px;
}
.policy-popup button {
font-family: 'Montserrat', sans-serif;
font-weight: 800;
font-size: 15px;
transition-duration: 0.4s;
border-radius: 3px;
background-color: #917d6b;
border: none;
cursor: pointer;
color: white;
padding: 15px 30px;
text-align: center;
margin: 20px;
float: right;
}
.policy-popup button:hover {
background-color: #44277a;
}
/* End policy popup */
/* Begin fonts */
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 100;
src: url(https://fonts.gstatic.com/s/oswald/v24/TK3_WkUHHAIjg75cFRf3bXL8LICs169vsUZiZQ.woff2) format('woff2');
}
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 800;
src: url(https://fonts.gstatic.com/s/montserrat/v14/JTURjIg1_i6t8kCHKm45_c5H3gnD_g.woff2) format('woff2');
}
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 200;
src: url(https://fonts.gstatic.com/s/montserrat/v14/JTURjIg1_i6t8kCHKm45_aZA3gnD_g.woff2) format('woff2');
}
/* End fonts */

30
styles/home-style.css
View File

@ -1,12 +1,7 @@
@charset "utf-8";
/* CSS Document */
html, body {
font-family: 'Montserrat', sans-serif;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background-color: black;
-moz-user-select: none;
-webkis-user-select: none;
-ms-user-select: none;
@ -14,7 +9,7 @@ html, body {
-o-user-select: none;
}
.main{
.main {
height: 100%;
width: 100%;
margin: 0%;
@ -30,10 +25,6 @@ html, body {
h1 {
font-size: 90px;
font-weight: 800;
width: 100%;
color: white;
position: absolute;
margin-top: 20px;
}
@ -60,7 +51,6 @@ h1 {
background: linear-gradient(to right, #33ffc5 20%, #fc33ff, #ff3370, #ff3333, #3dff33, #33ffc5);
background-size: 800px, 800px;
color: aquamarine;
background-clip: text;
text-fill-color: transparent;
animation: gradient 2s linear infinite;
-webkit-background-clip: text;
@ -157,19 +147,3 @@ h1 {
font-size: 40px;
}
}
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 300;
src: url(https://fonts.gstatic.com/s/oswald/v24/TK3_WkUHHAIjg75cFRf3bXL8LICs169vsUZiZQ.woff2) format('woff2');
}
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 800;
src: url(https://fonts.gstatic.com/s/montserrat/v14/JTURjIg1_i6t8kCHKm45_c5H3gnD_g.woff2) format('woff2');
}

60
styles/pages-style.css
View File

@ -1,13 +1,8 @@
@charset "utf-8";
/* CSS Document */
html, body {
font-family: 'Montserrat', sans-serif;
font-weight: 800;
margin: 0;
padding: 0;
background-color: black;
height: 100%;
width: 100%;
}
.topnav {
@ -48,12 +43,10 @@ html, body {
h1 {
font-size: 120px;
width: 100%;
margin: 0;
box-sizing: border-box;
padding-left: 5%;
padding-right: 5%;
position: absolute;
bottom: 10%;
}
@ -77,25 +70,6 @@ h1 {
100% { top: 94%; }
}
h2 {
margin: 0;
padding: 20px;
padding-top: 38px;
font-size: 40px;
}
h3 {
margin: 0;
padding: 0;
padding-top: 38px;
font-size: 33px;
}
h4 {
margin: 0;
padding: 20px;
font-size: 25px;
}
.top-bar, footer {
background: linear-gradient(45deg, #067062, #063d70, #2d0670, #4e0670, #700667);
@ -105,10 +79,8 @@ h4 {
color: white;
-moz-user-select: none;
-webkis-user-select: none;
-ms-user-select: none;
user-select: none;
-o-user-select: none;
}
.top-bar {
height: 100%;
@ -129,13 +101,6 @@ h4 {
padding-bottom: 20px;
}
.content a {
text-decoration: none;
color: paleturquoise;
position: relative;
}
ul {
list-style-type: none;
padding: 0;
@ -341,26 +306,3 @@ li {
padding: 20px;
}
}
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 100;
src: url(https://fonts.gstatic.com/s/oswald/v24/TK3_WkUHHAIjg75cFRf3bXL8LICs169vsUZiZQ.woff2) format('woff2');
}
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 800;
src: url(https://fonts.gstatic.com/s/montserrat/v14/JTURjIg1_i6t8kCHKm45_c5H3gnD_g.woff2) format('woff2');
}
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 200;
src: url(https://fonts.gstatic.com/s/montserrat/v14/JTURjIg1_i6t8kCHKm45_aZA3gnD_g.woff2) format('woff2');
}