started implementing cookies popup; made a "common-style" css file to keep everything tidy and not have duplicate code
This commit is contained in:
parent
d1f41cab38
commit
7421f6d06e
57
index.html
57
index.html
@ -3,31 +3,48 @@
|
||||
<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"/>
|
||||
<title>Mind Overflow : Home</title>
|
||||
|
||||
<!-- Matomo -->
|
||||
<script type="text/javascript">
|
||||
var _paq = window._paq || [];
|
||||
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
|
||||
_paq.push(['trackPageView']);
|
||||
_paq.push(['enableLinkTracking']);
|
||||
(function() {
|
||||
var u="//admin.mind-overflow.net/matomo/";
|
||||
_paq.push(['setTrackerUrl', u+'matomo.php']);
|
||||
_paq.push(['setSiteId', '1']);
|
||||
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
|
||||
g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
|
||||
})();
|
||||
</script>
|
||||
<!-- End Matomo Code -->
|
||||
|
||||
<!-- 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 -->
|
||||
<script type="text/javascript">
|
||||
var _paq = window._paq || [];
|
||||
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
|
||||
_paq.push(['trackPageView']);
|
||||
_paq.push(['enableLinkTracking']);
|
||||
(function() {
|
||||
var u="//admin.mind-overflow.net/matomo/";
|
||||
_paq.push(['setTrackerUrl', u+'matomo.php']);
|
||||
_paq.push(['setSiteId', '1']);
|
||||
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
|
||||
g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
|
||||
})();
|
||||
</script>
|
||||
<!-- End Matomo Code -->
|
||||
<script src="/scripts/policy-popup.js"></script>
|
||||
<!-- Scripts End -->
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="main" id="vantajs">
|
||||
<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>
|
||||
|
||||
<div class="bottomnav">
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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
28
scripts/policy-popup.js
Normal 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
135
styles/common-style.css
Normal 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 */
|
||||
@ -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;
|
||||
@ -156,20 +146,4 @@ h1 {
|
||||
.bottomnav a {
|
||||
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');
|
||||
}
|
||||
@ -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;
|
||||
@ -340,27 +305,4 @@ li {
|
||||
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');
|
||||
}
|
||||
Reference in New Issue
Block a user