Move all pages over to new template
This commit is contained in:
parent
109ec874ef
commit
5e60eab632
50
contact.php
50
contact.php
|
|
@ -1,48 +1,20 @@
|
|||
<?php include "./php/age.php"; ?>
|
||||
<?php $page_title = "contact"; ?>
|
||||
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="en">
|
||||
<head>
|
||||
<?php include "./page-blocks/head.php"; ?>
|
||||
<title>Contact</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<?php include "./page-blocks/head-img.php"; ?>
|
||||
<?php include "./page-blocks/menu.php"; ?>
|
||||
|
||||
<h1 class="page-title">Contact</h1>
|
||||
<div class="page-main-content">
|
||||
<a href="/downloads/vcard.vcf" class="download-link">Add me to your contacts</a>
|
||||
<h2>Find me elsewhere</h2>
|
||||
<div class="social-links">
|
||||
<a href="https://fb.me/fred.boniface" target="_blank" rel="noreferrer noopener">
|
||||
<picture>
|
||||
<source media="(max-width: 600px)" srcset="/images/social-icons/fb_blue_58.png" type="image/png">
|
||||
<source srcset="/images/social-icons/fb_blue_144.png" type="image/png">
|
||||
<img src="/images/social-icons/fb_blue_144.png" alt="Facebook Logo">
|
||||
</picture>
|
||||
</a>
|
||||
<a href="https://github.com/frdbonif" target="_blank" rel="noreferrer noopener">
|
||||
<picture>
|
||||
<source media="(max-width: 400px)" srcset="/images/social-icons/gh_white_64.png" type="image/png">
|
||||
<img src="/images/social-icons/gh_white_120.png" alt="GitHub Logo">
|
||||
</picture>
|
||||
</a>
|
||||
<a href="https://500px.com/p/fredboniface" target="_blank" rel="noreferrer noopener">
|
||||
<picture>
|
||||
<source media="(max-width: 600px)" srcset="/images/social-icons/500px_seek_58.jxl" type="image/jxl">
|
||||
<source media="(max-width: 600px)" srcset="/images/social-icons/500px_seek_58.webp" type="image/webp">
|
||||
<source media="(max-width: 600px)" srcset="/images/social-icons/500px_seek_58.png" type="image/png">
|
||||
<source srcset="/images/social-icons/500px_seek_114.jxl" type="image/jxl">
|
||||
<source srcset="/images/social-icons/500px_seek_114.webp" type="image/webp">
|
||||
<img src="/images/social-icons/500px_seek_114.png" alt="500px Logo">
|
||||
</picture>
|
||||
</a>
|
||||
<?php include "./page-blocks/micro-content.php"; ?>
|
||||
<div class="content hide_micro">
|
||||
<p>
|
||||
I will build a contact form here. For the moment:
|
||||
<br>
|
||||
<a href="/downloads/vcard.vcf">Add me to your contacts</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<?php include "./page-blocks/footer.php"; ?>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,17 +1,14 @@
|
|||
<?php include "./php/age.php"; ?>
|
||||
<?php $page_title = "email-safety"; ?>
|
||||
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="en">
|
||||
<head>
|
||||
<?php include "./page-blocks/head.php"; ?>
|
||||
<title>Email Safety</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<?php include "./page-blocks/head-img.php"; ?>
|
||||
<?php include "./page-blocks/menu.php"; ?>
|
||||
|
||||
<h1 class="page-title">Email Safety</h1>
|
||||
<div class="page-main-content">
|
||||
<?php include "./page-blocks/micro-content.php"; ?>
|
||||
<div class="content hide_micro">
|
||||
<p>
|
||||
You are probably here beacuse you clicked a link in an email that I sent you. I was going to link to a quick guide to email safety but all I could find were specific guides aimed at children or the elderly. In the end I decided to throw a rough guide together.
|
||||
</p>
|
||||
|
|
@ -52,14 +49,12 @@
|
|||
S/MIME is more widely supported but does mean that you have to buy a certificate, cheaper certificates do not provide proof of the person sending the email, however your email client can use the certificate to check whether the email has been tampered with. More expensive certificates are available that you can use to prove your identity - these are the type of certificated used to digitally sign documents such as PDF files.
|
||||
</p>
|
||||
<p>
|
||||
PGP is not as widely supported and is more complicated for the end user, however there is no cost as you generate certificates yourself. It is then up to the sender to validate your identity, you can <a href="./pgp.php">read more about PGP</a> on my PGP page.
|
||||
PGP is not as widely supported and is more complicated for the end user, however there is no cost as you generate certificates yourself. It is then up to the sender to validate your identity, you can <a href="/keys.php">get my public keys here</a>.
|
||||
</p>
|
||||
<p>
|
||||
Both S/MIME and PGP also support encryption which involves sharing your certificates public key with others, an email can only be encrypted with that public key. It is also possible to encrypt an email with a password. I won't go on further as email encryption is a bit out of scope here.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<?php include "./page-blocks/footer.php"; ?>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
42
index.php
42
index.php
|
|
@ -1,41 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<?php include "./php/age.php"; ?>
|
||||
<?php $page_title = "home"; ?>
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<?php include "./page-blocks/head.php"; ?>
|
||||
<title>Fred Boniface</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<?php include "./page-blocks/head-img.php"; ?>
|
||||
<?php include "./page-blocks/menu.php"; ?>
|
||||
|
||||
<h1 class="page-title">Hello</h1>
|
||||
<div class="page-main-content">
|
||||
<p>
|
||||
I'm Fred Boniface - a <?php echo getAge(1993,11); ?> year old Rail
|
||||
Professional with many interests outside of work and while I do have
|
||||
many opinions about the state of the rail industry at present, this
|
||||
website aims to be about my personal life and interests, rather than my
|
||||
work.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
I am married to Jade and we have two children, Lucy & Ava-Rose - both
|
||||
in school. I will get around to adding some images to this page - I
|
||||
promise.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
To keep this homepage simple and easy to digest, I won't waffle on
|
||||
about too much here, but there is more to read about each topic on
|
||||
the relevant page.
|
||||
</p>
|
||||
<?php include "./page-blocks/micro-content.php"; ?>
|
||||
<div class="content hide_micro">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut eros leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras tempus, leo sit amet placerat sollicitudin, magna massa vehicula nisi, sed malesuada odio velit iaculis est. Cras egestas nec lectus ac ultrices. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse cursus odio et massa finibus consequat non sed dolor. Suspendisse eu leo ut nunc tincidunt lacinia. Sed faucibus eu enim sit amet commodo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque commodo laoreet odio, ac sollicitudin odio.</p>
|
||||
<p>Sed volutpat, dolor quis dignissim varius, risus urna tincidunt nulla, non bibendum urna ante eget enim. Pellentesque sit amet neque lobortis, auctor nulla sagittis, bibendum nisl. Proin fermentum tristique dolor, in vehicula mi efficitur et. Fusce ac justo nulla. In eget odio felis. Suspendisse et tellus tincidunt, consequat mi eu, gravida neque. In elementum lacus ut convallis ornare. Mauris elementum lorem felis, et tincidunt massa consectetur in. Suspendisse ut augue blandit, efficitur augue nec, pellentesque odio. Nulla aliquet arcu vitae vehicula ultricies.</p>
|
||||
<h2>Ispum</h2>
|
||||
<p>Sed eleifend massa sed sagittis malesuada. Phasellus velit urna, congue sit amet felis dictum, congue ornare tortor. Donec consequat lectus sit amet iaculis ornare. Pellentesque luctus, orci a sagittis efficitur, dolor justo convallis dolor, vitae aliquam dolor eros a nunc. Sed suscipit volutpat est ac ultrices. Cras tempus tellus est, eu tristique est gravida eget. Nulla turpis odio, aliquam id vehicula non, dignissim egestas orci. Suspendisse pulvinar enim eu tortor tincidunt, vel luctus purus pellentesque. Curabitur efficitur mollis est, at imperdiet dui auctor a. Ut malesuada lacus ac nulla tempor sollicitudin. Pellentesque enim elit, eleifend eget ligula sit amet, sagittis efficitur elit. Donec blandit tellus ut vestibulum iaculis. Fusce vel ipsum non felis bibendum porttitor a ut dui. Donec ornare augue augue, a elementum justo ornare quis. Praesent ante tellus, blandit in ultricies id, bibendum sit amet mi. Suspendisse tristique ornare erat.</p>
|
||||
<p>Praesent malesuada sit amet libero eu volutpat. Duis lacinia turpis sit amet malesuada bibendum. Pellentesque ut velit at turpis placerat consequat id sed augue. Cras eleifend augue sem, sed hendrerit nibh feugiat eu. Nam cursus lectus fermentum quam feugiat porttitor. Sed bibendum a enim ut commodo. Maecenas lacinia dolor ante, vel bibendum nulla venenatis aliquam. Aenean ultricies felis eros, quis cursus arcu dictum vitae.</p>
|
||||
<p>Ut magna urna, pretium tincidunt congue id, sodales sed lacus. Suspendisse potenti. Aenean nec quam ultrices, dignissim velit sit amet, cursus nisl. Duis nec risus a nisl porta fringilla. Phasellus vel fermentum justo, a malesuada ex. Nullam eu metus quis arcu sodales vestibulum. Maecenas efficitur gravida risus vitae pretium. Donec non nulla sodales, consectetur est ut, tristique nisl. Phasellus sed dui sed erat efficitur cursus. Vestibulum eget est purus. Aliquam mi ante, hendrerit ac ornare ac, imperdiet et diam. Nunc fermentum nunc faucibus massa finibus mattis.</p>
|
||||
</div>
|
||||
|
||||
<?php include "./page-blocks/footer.php"; ?>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,11 +1,3 @@
|
|||
function inflateSidebar() {
|
||||
document.getElementById("sidebar").style.width = "150px";
|
||||
}
|
||||
|
||||
function collapseSidebar() {
|
||||
document.getElementById("sidebar").style.width = "0px";
|
||||
}
|
||||
|
||||
function sidebarOpen() {
|
||||
document.getElementById("sidebar").style.width = "50%";
|
||||
document.getElementById("sidebar_open_short").style.display = "none";
|
||||
|
|
|
|||
34
keys.php
34
keys.php
|
|
@ -1,23 +1,33 @@
|
|||
<?php include "./php/age.php"; ?>
|
||||
<?php $page_title = "keys"; ?>
|
||||
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="en">
|
||||
<head>
|
||||
<?php include "./page-blocks/head.php"; ?>
|
||||
<title>GPG/PGP</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<?php include "./page-blocks/head-img.php"; ?>
|
||||
<?php include "./page-blocks/menu.php"; ?>
|
||||
|
||||
<h1 class="page-title">Keys</h1>
|
||||
<div class="page-main-content">
|
||||
<?php include "./page-blocks/micro-content.php"; ?>
|
||||
<div class="content hide_micro">
|
||||
<p>
|
||||
<a href="/downloads/f.boniface_ed25519.pub">Download SSH Public Key</a>
|
||||
I'll publish my public keys here, primarily so I have easy access to them
|
||||
myself. You can use them to check my identity when I send signed emails, etc.
|
||||
</p>
|
||||
<h2>SSH</h2>
|
||||
<p>
|
||||
My current public SSH key has no expiry date.
|
||||
<br>
|
||||
<a href="/downloads/f.boniface_ed25519.pub">Download Public SSH key</a>
|
||||
</p>
|
||||
<h2>GPG</h2>
|
||||
<p>
|
||||
My GPG Key is currently unavailable
|
||||
</p>
|
||||
<h2>S/MIME</h2>
|
||||
<p>
|
||||
I do not currently hold a valid S/MIME Certificate
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<?php include "./page-blocks/footer.php"; ?>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
<?php include "./php/age.php"; ?>
|
||||
<?php $page_title = "home"; ?>
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<?php include "./page-blocks/head.php"; ?>
|
||||
<body>
|
||||
<?php include "./page-blocks/head-img.php"; ?>
|
||||
<?php include "./page-blocks/menu.php"; ?>
|
||||
<?php include "./page-blocks/micro-content.php"; ?>
|
||||
<div class="content hide_micro">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut eros leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras tempus, leo sit amet placerat sollicitudin, magna massa vehicula nisi, sed malesuada odio velit iaculis est. Cras egestas nec lectus ac ultrices. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse cursus odio et massa finibus consequat non sed dolor. Suspendisse eu leo ut nunc tincidunt lacinia. Sed faucibus eu enim sit amet commodo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque commodo laoreet odio, ac sollicitudin odio.</p>
|
||||
<p>Sed volutpat, dolor quis dignissim varius, risus urna tincidunt nulla, non bibendum urna ante eget enim. Pellentesque sit amet neque lobortis, auctor nulla sagittis, bibendum nisl. Proin fermentum tristique dolor, in vehicula mi efficitur et. Fusce ac justo nulla. In eget odio felis. Suspendisse et tellus tincidunt, consequat mi eu, gravida neque. In elementum lacus ut convallis ornare. Mauris elementum lorem felis, et tincidunt massa consectetur in. Suspendisse ut augue blandit, efficitur augue nec, pellentesque odio. Nulla aliquet arcu vitae vehicula ultricies.</p>
|
||||
<h2>Ispum</h2>
|
||||
<p>Sed eleifend massa sed sagittis malesuada. Phasellus velit urna, congue sit amet felis dictum, congue ornare tortor. Donec consequat lectus sit amet iaculis ornare. Pellentesque luctus, orci a sagittis efficitur, dolor justo convallis dolor, vitae aliquam dolor eros a nunc. Sed suscipit volutpat est ac ultrices. Cras tempus tellus est, eu tristique est gravida eget. Nulla turpis odio, aliquam id vehicula non, dignissim egestas orci. Suspendisse pulvinar enim eu tortor tincidunt, vel luctus purus pellentesque. Curabitur efficitur mollis est, at imperdiet dui auctor a. Ut malesuada lacus ac nulla tempor sollicitudin. Pellentesque enim elit, eleifend eget ligula sit amet, sagittis efficitur elit. Donec blandit tellus ut vestibulum iaculis. Fusce vel ipsum non felis bibendum porttitor a ut dui. Donec ornare augue augue, a elementum justo ornare quis. Praesent ante tellus, blandit in ultricies id, bibendum sit amet mi. Suspendisse tristique ornare erat.</p>
|
||||
<p>Praesent malesuada sit amet libero eu volutpat. Duis lacinia turpis sit amet malesuada bibendum. Pellentesque ut velit at turpis placerat consequat id sed augue. Cras eleifend augue sem, sed hendrerit nibh feugiat eu. Nam cursus lectus fermentum quam feugiat porttitor. Sed bibendum a enim ut commodo. Maecenas lacinia dolor ante, vel bibendum nulla venenatis aliquam. Aenean ultricies felis eros, quis cursus arcu dictum vitae.</p>
|
||||
<p>Ut magna urna, pretium tincidunt congue id, sodales sed lacus. Suspendisse potenti. Aenean nec quam ultrices, dignissim velit sit amet, cursus nisl. Duis nec risus a nisl porta fringilla. Phasellus vel fermentum justo, a malesuada ex. Nullam eu metus quis arcu sodales vestibulum. Maecenas efficitur gravida risus vitae pretium. Donec non nulla sodales, consectetur est ut, tristique nisl. Phasellus sed dui sed erat efficitur cursus. Vestibulum eget est purus. Aliquam mi ante, hendrerit ac ornare ac, imperdiet et diam. Nunc fermentum nunc faucibus massa finibus mattis.</p>
|
||||
</div>
|
||||
<?php include "./page-blocks/footer.php"; ?>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
THIS FILE IS NOT CURRENTLY USED AND SHOULD BE DELETED AFTER TESTING
|
||||
|
||||
<picture id="header_face">
|
||||
<source srcset="/images/headers/index/face-150.webp" type="image/webp">
|
||||
<img src="/images/headers/index/face-100.webp" alt="Face image">
|
||||
</picture>
|
||||
24
projects.php
24
projects.php
|
|
@ -1,22 +1,20 @@
|
|||
<?php include "./php/age.php"; ?>
|
||||
<?php $page_title = "projects"; ?>
|
||||
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="en">
|
||||
<head>
|
||||
<?php include "./page-blocks/head.php"; ?>
|
||||
<title>Projects</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<?php include "./page-blocks/head-img.php"; ?>
|
||||
<?php include "./page-blocks/menu.php"; ?>
|
||||
|
||||
<h1 class="page-title">Projects</h1>
|
||||
<div class="page-main-content">
|
||||
<p>Sorry, there's nothing here yet</p>
|
||||
<p>In the meantime check out my <a href="https://git.fjla.uk">Gitea</a> or <a href="/contact.php">Social Links</a></p>
|
||||
<?php include "./page-blocks/micro-content.php"; ?>
|
||||
<div class="content hide_micro">
|
||||
<p>
|
||||
I haven't written any content here yet.
|
||||
<br>
|
||||
In the meantime, <a href="https://git.fjla.uk">visit my Gitea Server</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<?php include "./page-blocks/footer.php"; ?>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,53 +0,0 @@
|
|||
@font-face {
|
||||
font-family: 'silkscreenregular';
|
||||
src: url('/style/fonts/silkscreen/silkscreen-regular.woff2') format('woff2'),
|
||||
url('/style/fonts/silkscreen/silkscreen-regular.woff') format('woff'),
|
||||
url('/style/fonts/silkscreen/silkscreen-regular.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'concertone';
|
||||
src: url('/style/fonts/concertone/concertone-regular.woff2') format('woff2'),
|
||||
url('/style/fonts/concertone/concertone-regular.woff') format('woff'),
|
||||
url('/style/fonts/concertone/concertone-regular.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'indieflower';
|
||||
src: url('/style/fonts/indieflower/indieflower.woff2') format('woff2'),
|
||||
url('/style/fonts/indieflower/indieflower.woff') format('woff'),
|
||||
url('/style/fonts/indieflower/indieflower.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'oxygen';
|
||||
src: url('/style/fonts/oxygen/oxygen-regular.woff2') format('woff2'),
|
||||
url('/style/fonts/oxygen/oxygen-regular.woff') format('woff'),
|
||||
url('/style/fonts/oxygen/oxygen-regular.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'oxygen';
|
||||
src: url('/style/fonts/oxygen/oxygen-bold.woff2') format('woff2'),
|
||||
url('/style/fonts/oxygen/oxygen-bold.woff') format('woff'),
|
||||
url('/style/fonts/oxygen/oxygen-bold.ttf') format('truetype');
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'oxygen';
|
||||
src: url('/style/fonts/oxygen/oxygen-light.woff2') format('woff2'),
|
||||
url('/style/fonts/oxygen/oxygen-light.woff') format('woff'),
|
||||
url('/style/fonts/oxygen/oxygen-light.ttf') format('truetype');
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
}
|
||||
168
style/styles.css
168
style/styles.css
|
|
@ -1,168 +0,0 @@
|
|||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100%;
|
||||
background-color: #444444;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
text-align: center;
|
||||
font-family: oxygen, sans-serif;
|
||||
font-weight: 700;
|
||||
color: #eeeeee;
|
||||
padding-top: 65px;
|
||||
padding-bottom: 10px;
|
||||
width: 95%;
|
||||
overflow: hidden;
|
||||
margin: auto;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.error-title {
|
||||
font-family: silkscreenregular, 'Courier New', Courier, monospace;
|
||||
}
|
||||
|
||||
.title-image img {
|
||||
max-width: 30%;
|
||||
padding-top: 30px;
|
||||
padding-bottom: 30px;
|
||||
margin-left: 35%;
|
||||
margin-right: 35%;
|
||||
}
|
||||
|
||||
.page-main-content {
|
||||
text-align: center;
|
||||
font-family: oxygen, sans-serif;
|
||||
font-weight: 300;
|
||||
color: #f0f0f0f0;
|
||||
width: 95%;
|
||||
overflow: hidden;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.page-main-content h2 {
|
||||
padding-top: 45px;
|
||||
}
|
||||
|
||||
.social-links img {
|
||||
max-width: 58px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
a.download-link {
|
||||
text-decoration: none;
|
||||
color: #242121;
|
||||
background-color: #d1caca;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
margin: 7px;
|
||||
}
|
||||
|
||||
|
||||
footer {
|
||||
background-color: rgb(61, 61, 61);
|
||||
color: #eeeeee;
|
||||
font-family: monospace;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
/* The sidebar menu */
|
||||
.sidebar {
|
||||
height: 100%;
|
||||
width: 0; /* Hidden by default */
|
||||
position: fixed;
|
||||
padding-top: 90px;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
right: 0;
|
||||
background-color: #111;
|
||||
overflow-x: hidden;
|
||||
overflow-y: hidden;
|
||||
transition: 0.7s; /* 0.5 second transition effect to slide in the sidebar */
|
||||
}
|
||||
|
||||
/* The sidebar links */
|
||||
.sidebar a {
|
||||
padding: 8px 8px 8px 8px;
|
||||
margin-left: 20px;
|
||||
margin-top: 10px;
|
||||
font-family: oxygen, sans-serif;
|
||||
font-weight: 300;
|
||||
text-decoration: none;
|
||||
text-align: right;
|
||||
font-size: 25px;
|
||||
color: #bcbcbc;
|
||||
display: block;
|
||||
transition: 0.7s;
|
||||
}
|
||||
|
||||
/* When you mouse over the navigation links, change their color */
|
||||
.sidebar a:hover {
|
||||
color: #f1f1f1;
|
||||
}
|
||||
|
||||
/* Position and style the close button (top right corner) */
|
||||
.sidebar .close {
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
right: 20px;
|
||||
font-size: 36px;
|
||||
margin-left: 50px;
|
||||
}
|
||||
|
||||
/* Position the div containing the open button */
|
||||
.inflate {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
/* The button used to open the sidebar */
|
||||
.open {
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
color: white;
|
||||
padding: 10px 15px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.open:hover {
|
||||
background-color: #444;
|
||||
}
|
||||
|
||||
/* Screens Wider than 600px */
|
||||
@media screen and (min-width: 600px) {
|
||||
/*Hide sidebar open/close buttons*/
|
||||
.inflate {display: none;}
|
||||
.sidebar .close {display: none;}
|
||||
|
||||
/*Change Menu Dimensions*/
|
||||
.sidebar {
|
||||
width: 100%;
|
||||
height: 14px;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 40px;
|
||||
padding-left: 50px;
|
||||
}
|
||||
|
||||
/* Float links */
|
||||
.sidebar a {
|
||||
float: left;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
/*Provice space for top menu*/
|
||||
.page-title {padding-top: 90px}
|
||||
|
||||
/*Increase social link image size*/
|
||||
.social-links img {max-width: 75px;}
|
||||
|
||||
}
|
||||
Loading…
Reference in New Issue