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

57
index.html
View File

@ -3,31 +3,48 @@
<head> <head>
<meta charset="utf-8" name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=0"> <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."> <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 href="/styles/home-style.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" type="image/png" href="/images/logos/brain-128.png"/> <link rel="shortcut icon" type="image/png" href="/images/logos/brain-128.png"/>
<title>Mind Overflow : Home</title>
<!-- Scripts Begin -->
<!-- Matomo --> <!-- jQuery -->
<script type="text/javascript"> <script src="https://code.jquery.com/jquery-3.5.1.js"
var _paq = window._paq || []; integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */ crossorigin="anonymous"></script>
_paq.push(['trackPageView']); <title>Mind Overflow : Home</title>
_paq.push(['enableLinkTracking']);
(function() { <!-- Matomo -->
var u="//admin.mind-overflow.net/matomo/"; <script type="text/javascript">
_paq.push(['setTrackerUrl', u+'matomo.php']); var _paq = window._paq || [];
_paq.push(['setSiteId', '1']); /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; _paq.push(['trackPageView']);
g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); _paq.push(['enableLinkTracking']);
})(); (function() {
</script> var u="//admin.mind-overflow.net/matomo/";
<!-- End Matomo Code --> _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> </head>
<body> <body onload="openPolicyPopup()">
<div class="policy-popup" id="policy-popup">
<div class="main" id="vantajs"> <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> <h1>Lorenzo Dellacà</h1>
<div class="bottomnav"> <div class="bottomnav">

1
pages/about.html
View File

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

1
pages/contact.html
View File

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

1
pages/policy.html
View File

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

4
scripts/arrow-fade.js
View File

@ -2,9 +2,9 @@
$(document).ready(function(){ $(document).ready(function(){
$(window).scroll(function(){ $(window).scroll(function(){
if($(this).scrollTop() > $(window).height()*0.3){ if($(this).scrollTop() > $(window).height()*0.3){
$(".arrow-down").css({"opacity" : "0"}) $(".arrow-down").css({"opacity" : "0"});
} else { } 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"; @charset "utf-8";
/* CSS Document */
html, body { html, body {
font-family: 'Montserrat', sans-serif;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background-color: black;
-moz-user-select: none; -moz-user-select: none;
-webkis-user-select: none; -webkis-user-select: none;
-ms-user-select: none; -ms-user-select: none;
@ -14,7 +9,7 @@ html, body {
-o-user-select: none; -o-user-select: none;
} }
.main{ .main {
height: 100%; height: 100%;
width: 100%; width: 100%;
margin: 0%; margin: 0%;
@ -30,10 +25,6 @@ html, body {
h1 { h1 {
font-size: 90px; font-size: 90px;
font-weight: 800;
width: 100%;
color: white;
position: absolute;
margin-top: 20px; margin-top: 20px;
} }
@ -60,7 +51,6 @@ h1 {
background: linear-gradient(to right, #33ffc5 20%, #fc33ff, #ff3370, #ff3333, #3dff33, #33ffc5); background: linear-gradient(to right, #33ffc5 20%, #fc33ff, #ff3370, #ff3333, #3dff33, #33ffc5);
background-size: 800px, 800px; background-size: 800px, 800px;
color: aquamarine; color: aquamarine;
background-clip: text;
text-fill-color: transparent; text-fill-color: transparent;
animation: gradient 2s linear infinite; animation: gradient 2s linear infinite;
-webkit-background-clip: text; -webkit-background-clip: text;
@ -156,20 +146,4 @@ h1 {
.bottomnav a { .bottomnav a {
font-size: 40px; 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 */ /* CSS Document */
html, body { html, body {
font-family: 'Montserrat', sans-serif;
font-weight: 800;
margin: 0;
padding: 0;
background-color: black; background-color: black;
height: 100%;
width: 100%;
} }
.topnav { .topnav {
@ -48,12 +43,10 @@ html, body {
h1 { h1 {
font-size: 120px; font-size: 120px;
width: 100%;
margin: 0; margin: 0;
box-sizing: border-box; box-sizing: border-box;
padding-left: 5%; padding-left: 5%;
padding-right: 5%; padding-right: 5%;
position: absolute;
bottom: 10%; bottom: 10%;
} }
@ -77,25 +70,6 @@ h1 {
100% { top: 94%; } 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 { .top-bar, footer {
background: linear-gradient(45deg, #067062, #063d70, #2d0670, #4e0670, #700667); background: linear-gradient(45deg, #067062, #063d70, #2d0670, #4e0670, #700667);
@ -105,10 +79,8 @@ h4 {
color: white; color: white;
-moz-user-select: none; -moz-user-select: none;
-webkis-user-select: none;
-ms-user-select: none; -ms-user-select: none;
user-select: none; user-select: none;
-o-user-select: none;
} }
.top-bar { .top-bar {
height: 100%; height: 100%;
@ -129,13 +101,6 @@ h4 {
padding-bottom: 20px; padding-bottom: 20px;
} }
.content a {
text-decoration: none;
color: paleturquoise;
position: relative;
}
ul { ul {
list-style-type: none; list-style-type: none;
padding: 0; padding: 0;
@ -340,27 +305,4 @@ li {
li { li {
padding: 20px; 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');
} }