fred.boniface/fredboniface.co.uk
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

redesign (#1)

Browse Source 
Merge backwards compatible changes before beginning destructive changes.

Co-authored-by: fred.boniface <fred@fjla.uk>
Reviewed-on: #1
This commit is contained in:
Fred Boniface 2022-10-29 19:12:56 +00:00
parent 1e8ec2ae39
commit 578e4377a4
63 changed files with 476 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
downloads/f.boniface_ed25519.pub Normal file
View File

@ -0,0 +1 @@
ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIKQad6se97C/WF58JCRcLCbSPSci/5m1au8f0wkxI2eq Fred Boniface

BIN
favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.6 KiB

After

Width:  |  Height:  |  Size: 18 KiB

31
gpg.php
View File

@ -1,31 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<?php include "./page-blocks/head.php"; ?>
<title>GPG/PGP</title>
</head>
<body>
<?php include "./page-blocks/menu.php"; ?>
<h1 class="page-title">GPG/PGP</h1>
<div class="page-main-content">
<p>
PGP stand for 'Pretty Good Privacy', GPG stands for 'GNU Privacy Guard'
, for the scope of this website they are interchangable.
</p>
<p>
My public GPG keys will be published below. You can use my public key to
confirm that a signed email came from me, to verify signed files, and
to verify commits and downloads from my <a href="https://git.fjla.uk">
gitea server</a>.
</p>
</div>
<?php include "./page-blocks/footer.php"; ?>
</body>
</html>

BIN
images/favicon.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 3.4 KiB

BIN
images/headers/index/1024.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 181 KiB

BIN
images/headers/index/1024.jxl Normal file
View File

Binary file not shown.

BIN
images/headers/index/1024.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 116 KiB

BIN
images/headers/index/1920.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 496 KiB

BIN
images/headers/index/1920.jxl Normal file
View File

Binary file not shown.

BIN
images/headers/index/1920.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 263 KiB

BIN
images/headers/index/2800.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 904 KiB

BIN
images/headers/index/2800.jxl Normal file
View File

Binary file not shown.

BIN
images/headers/index/2800.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 456 KiB

BIN
images/headers/index/300.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 40 KiB

BIN
images/headers/index/300.jxl Normal file
View File

Binary file not shown.

BIN
images/headers/index/300.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 37 KiB

BIN
images/headers/index/4096.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 MiB

BIN
images/headers/index/4096.jxl Normal file
View File

Binary file not shown.

BIN
images/headers/index/4096.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 759 KiB

BIN
images/headers/index/500.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 58 KiB

BIN
images/headers/index/500.jxl Normal file
View File

Binary file not shown.

BIN
images/headers/index/500.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 48 KiB

BIN
images/headers/index/800.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 120 KiB

BIN
images/headers/index/800.jxl Normal file
View File

Binary file not shown.

BIN
images/headers/index/800.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 81 KiB

BIN
images/headers/index/face-100.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
images/headers/index/face-150.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
images/headers/index/face-600.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

BIN
images/headers/index/full.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 546 KiB

9
images/headers/readme.txt Normal file
View File

@ -0,0 +1,9 @@
Each set of header images should contain the following image widths. The minimum height should be 275px.
- 4096
- 2800
- 1920
- 1024
- 800
- 500
- 300

BIN
images/logo/favicon.xcf Normal file
View File

Binary file not shown.

BIN
images/logo/full-20.jxl Normal file
View File

Binary file not shown.

BIN
images/logo/full-20.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
images/logo/full-20.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
images/logo/full-40.jxl Normal file
View File

Binary file not shown.

BIN
images/logo/full-40.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.8 KiB

BIN
images/logo/full-40.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.0 KiB

BIN
images/logo/full-60.jxl Normal file
View File

Binary file not shown.

BIN
images/logo/full-60.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.7 KiB

BIN
images/logo/full-60.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.8 KiB

BIN
images/logo/full-95.jxl Normal file
View File

Binary file not shown.

BIN
images/logo/full-95.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
images/logo/full-95.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
images/logo/full.xcf Normal file
View File

Binary file not shown.

BIN
images/logo/short-20.jxl Normal file
View File

Binary file not shown.

BIN
images/logo/short-20.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 651 B

BIN
images/logo/short-40.jxl Normal file
View File

Binary file not shown.

BIN
images/logo/short-40.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
images/logo/short-60.jxl Normal file
View File

Binary file not shown.

BIN
images/logo/short-60.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
images/logo/short-95.jxl Normal file
View File

Binary file not shown.

BIN
images/logo/short-95.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

BIN
images/logo/short.xcf Normal file
View File

Binary file not shown.

14
js/navbar.js
View File

@ -4,4 +4,18 @@ function inflateSidebar() {
function collapseSidebar() { function collapseSidebar() {
document.getElementById("sidebar").style.width = "0px"; document.getElementById("sidebar").style.width = "0px";
}
function sidebarOpen() {
document.getElementById("sidebar").style.width = "50%";
document.getElementById("sidebar_open_short").style.display = "none";
document.getElementById("sidebar_close_short").style.display = "block";
document.getElementById("sidebar_social").style.display = "flex";
}
function sidebarClose() {
document.getElementById("sidebar").style.width = "0%"
document.getElementById("sidebar_open_short").style.display = "block";
document.getElementById("sidebar_close_short").style.display = "none";
document.getElementById("sidebar_social").style.display = "none";
} }

23
keys.php Normal file
View File

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html lang="en">
<head>
<?php include "./page-blocks/head.php"; ?>
<title>GPG/PGP</title>
</head>
<body>
<?php include "./page-blocks/menu.php"; ?>
<h1 class="page-title">Keys</h1>
<div class="page-main-content">
<p>
<a href="/downloads/f.boniface_ed25519.pub">Download SSH Public Key</a>
</p>
</div>
<?php include "./page-blocks/footer.php"; ?>
</body>
</html>

99
new_index.html Normal file
View File

@ -0,0 +1,99 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Frederick Boniface">
<link rel="icon" type="image/png" href="/images/favicon.png">
<link rel="stylesheet" href="/style/new_style.css">
<title>Home</title>
</head>
<body>
<div class="header_image" id="header_index">
<div id="page_title" class="hide_micro">
<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>
<h1>Hello</h1>
</div>
</div>
<div id="menubar">
<script src="/js/navbar.js"></script>
<div id="menubar_logo" class="hide_micro">
<a href="/">
<picture>
<source media="(min-width: 290px)" srcset="/images/logo/full-40.jxl" type="image/jxl">
<source media="(min-width: 290px)" srcset="/images/logo/full-40.webp" type="image/webp">
<source media="(min-width: 290px)" srcset="/images/logo/full-40.png" type="image/png">
<source media="(max-width: 289px)" srcset="/images/logo/short-20.jxl" type="image/jxl">
<source media="(max-width: 289px)" srcset="/images/logo/short-20.png" type="image/png">
<img src="/images/logo/full-40.png" alt="Fred Boniface logo">
</picture>
</a>
</div>
<div id="menubar_hamburger" class="hide_micro">
<button class="sidebar_control" id="sidebar_open_short" onclick="sidebarOpen()">&#9776;</button>
<button class="sidebar_control" id="sidebar_close_short" onclick="sidebarClose()">&times;</button>
</div>
</div>
<div id="sidebar">
<a href="/">Home</a>
<a href="/keys.php">Keys</a>
<a href="/projects.php">Things I Do</a>
<a href="/contact.php">Contact</a>
<a href="/about.php">About</a>
<div id="sidebar_logo">
<picture>
<source srcset="/images/logo/short-40.jxl" type="image/jxl">
<img src="/images/logo/short-40.png" alt="">
</picture>
</div>
<div id="sidebar_social">
<a href="https://500px.com/p/fredboniface" target="_blank" rel="noreferrer noopener">
<picture>
<source media="(min-width: 399px)" srcset="/images/social-icons/500px_seek_114.jxl" type="image/jxl">
<source media="(min-width: 399px)" srcset="/images/social-icons/500px_seek_114.webp" type="image/webp">
<source srcset="/images/social-icons/500px_seek_58.jxl" type="image/jxl">
<source srcset="/images/social-icons/500px_seek_58.webp" type="image/webp">
<img src="/images/social-icons/500px_seek_58.png" alt="500px Logo">
</picture>
</a>
<a href="https://fb.me/fred.boniface" target="_blank" rel="noreferrer noopener">
<picture>
<source media="(min-width: 399px)" srcset="/images/social-icons/fb_blue_144.png" type="image/png">
<source srcset="/images/social-icons/fb_blue_58.png" type="image/png">
<img src="/images/social-icons/fb_blue_58.png" alt="Facebook Logo">
</picture>
</a>
<a href="https://github.com/frdbonif" target="_blank" rel="noreferrer noopener">
<picture>
<source media="(min-width: 399px)" srcset="/images/social-icons/gh_white_120.png" type="image/png">
<source srcset="/images/social-icons/gh_white_64.png" type="image/png">
<img src="/images/social-icons/gh_white_64.png" alt="Github Logo">
</picture>
</a>
</div>
</div>
<div class="content show_micro">
<p>
This website cannot correctly render on a screen this narrow,
Please resize your window or visit on a larger device.
</p>
</div>
<div class="content hide_micro">
<h2>Lorem</h2>
<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>
<footer>
<p>
&copy; Fred Boniface 2022
</p>
</footer>
</body>
</html>

3
page-blocks/menu.php
View File

@ -1,9 +1,10 @@
<div id="sidebar" class="sidebar"> <div id="sidebar" class="sidebar">
<a href="javascript:void(0)" class="close" onclick="collapseSidebar()">&times;</a> <a href="javascript:void(0)" class="close" onclick="collapseSidebar()">&times;</a>
<a href="/">Home</a> <a href="/">Home</a>
<a href="/gpg.php">GPG/PGP</a> <a href="/keys.php">Keys</a>
<a href="/projects.php">Projects</a> <a href="/projects.php">Projects</a>
<a href="/contact.php">Contact</a> <a href="/contact.php">Contact</a>
<a href="/new_index.html">WIP Design</a>
</div> </div>
<div class="inflate" id="inflate"> <div class="inflate" id="inflate">

1
projects.php
View File

@ -13,6 +13,7 @@
<h1 class="page-title">Projects</h1> <h1 class="page-title">Projects</h1>
<div class="page-main-content"> <div class="page-main-content">
<p>Sorry, there's nothing here yet</p> <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>
</div> </div>
<?php include "./page-blocks/footer.php"; ?> <?php include "./page-blocks/footer.php"; ?>

93
style/fonts/indie-flower/OFL.txt Normal file
View File

@ -0,0 +1,93 @@
Copyright (c) 2010, Kimberly Geswein (kimberlygeswein.com)
This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
http://scripts.sil.org/OFL
-----------------------------------------------------------
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
-----------------------------------------------------------
PREAMBLE
The goals of the Open Font License (OFL) are to stimulate worldwide
development of collaborative font projects, to support the font creation
efforts of academic and linguistic communities, and to provide a free and
open framework in which fonts may be shared and improved in partnership
with others.
The OFL allows the licensed fonts to be used, studied, modified and
redistributed freely as long as they are not sold by themselves. The
fonts, including any derivative works, can be bundled, embedded,
redistributed and/or sold with any software provided that any reserved
names are not used by derivative works. The fonts and derivatives,
however, cannot be released under any other type of license. The
requirement for fonts to remain under this license does not apply
to any document created using the fonts or their derivatives.
DEFINITIONS
"Font Software" refers to the set of files released by the Copyright
Holder(s) under this license and clearly marked as such. This may
include source files, build scripts and documentation.
"Reserved Font Name" refers to any names specified as such after the
copyright statement(s).
"Original Version" refers to the collection of Font Software components as
distributed by the Copyright Holder(s).
"Modified Version" refers to any derivative made by adding to, deleting,
or substituting -- in part or in whole -- any of the components of the
Original Version, by changing formats or by porting the Font Software to a
new environment.
"Author" refers to any designer, engineer, programmer, technical
writer or other person who contributed to the Font Software.
PERMISSION & CONDITIONS
Permission is hereby granted, free of charge, to any person obtaining
a copy of the Font Software, to use, study, copy, merge, embed, modify,
redistribute, and sell modified and unmodified copies of the Font
Software, subject to the following conditions:
1) Neither the Font Software nor any of its individual components,
in Original or Modified Versions, may be sold by itself.
2) Original or Modified Versions of the Font Software may be bundled,
redistributed and/or sold with any software, provided that each copy
contains the above copyright notice and this license. These can be
included either as stand-alone text files, human-readable headers or
in the appropriate machine-readable metadata fields within text or
binary files as long as those fields can be easily viewed by the user.
3) No Modified Version of the Font Software may use the Reserved Font
Name(s) unless explicit written permission is granted by the corresponding
Copyright Holder. This restriction only applies to the primary font name as
presented to the users.
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
Software shall not be used to promote, endorse or advertise any
Modified Version, except to acknowledge the contribution(s) of the
Copyright Holder(s) and the Author(s) or with their explicit written
permission.
5) The Font Software, modified or unmodified, in part or in whole,
must be distributed entirely under this license, and must not be
distributed under any other license. The requirement for fonts to
remain under this license does not apply to any document created
using the Font Software.
TERMINATION
This license becomes null and void if any of the above conditions are
not met.
DISCLAIMER
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
OTHER DEALINGS IN THE FONT SOFTWARE.

BIN
style/fonts/indie-flower/indie-flower.ttf Normal file
View File

Binary file not shown.

BIN
style/fonts/indie-flower/indie-flower.woff Normal file
View File

Binary file not shown.

BIN
style/fonts/indie-flower/indie-flower.woff2 Normal file
View File

Binary file not shown.

234
style/new_style.css Normal file
View File

@ -0,0 +1,234 @@
/* COLOR VARS */
:root {
--main-bg-color: lightslategrey;
--accent-color: darkslategrey;
--overlay-color: #2f4f4fb8;
--main-text-color: azure;
--link-color: cyan;
}
/* FONTS */
@font-face {
font-family: 'indie-flower';
src: url('/style/fonts/indie-flower/indie-flower.woff2') format('woff2'),
url('/style/fonts/indie-flower/indie-flower.woff') format('woff'),
url('/style/fonts/indie-flower/indie-flower.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;
}
/* HTML & BODY */
html {height: 100%;}
body {
width: 100%;
margin: auto;
background-color: var(--main-bg-color);
}
/* PAGE HEADER */
.header_image {
background-repeat: no-repeat;
background-position: top;
background-size: cover;
height: 273px;
min-width: 100%;
max-width: 100%;
margin: auto;
margin-top: 40px;
position: sticky;
top: -145px;
}
#header_index{background-color: #a04911} /* Try using image-set() here to offer different formats */
@media(min-width: 50px){#header_index{background-image:url("/images/headers/index/300.webp")}}
@media(min-width: 301px){#header_index{background-image:url("/images/headers/index/500.webp")}}
@media(min-width: 501px){#header_index{background-image:url("/images/headers/index/800.webp")}}
@media(min-width: 801px){#header_index{background-image:url("/images/headers/index/1024.webp")}}
@media(min-width:1025px){#header_index{background-image:url("/images/headers/index/1920.webp")}}
@media(min-width:1921px){#header_index{background-image:url("/images/headers/index/2800.webp")}}
@media(min-width:2801px){#header_index{background-image:url("/images/headers/index/4096.webp")}}
#header_face {
display: flex;
position: absolute;
top: -184px;
width: 100%;
height: 185px;
text-align: center;
}
#header_face img {
margin: auto;
border-radius: 40px;
border-style: solid;
border-color: var(--accent-color);
border-width: 3px;
max-height: 150px;
height: 30vw;
}
@media(min-width:400px){#header_face img{border-radius:50px;}}
@media(min-width:540px){#header_face img{border-radius:55px;}}
#page_title { /* This may be best floating above content div rather than inside header div */
background-color: var(--overlay-color);
font-family: indie-flower, cursive;
font-size: large;
width: 100%;
height: 90px;
text-align: center;
position: absolute;
bottom: 0;
color: var(--main-text-color);
}
#menubar {
background-color: var(--accent-color);
color: var(--main-text-color);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 40px;
}
#menubar_logo img { /* Logo file is controlled by media="" in <picture> */
max-height: 20px;
padding: 10px;
}
#menubar_hamburger {
position: absolute;
top: 2px;
right: 0;
padding: 5px;
}
.sidebar_control {
background-color: transparent;
color: var(--main-text-color);
border: none;
font-family: sans-serif;
font-size: larger;
}
#sidebar_open_short {display: block;}
#sidebar_close_short {
display: none;
font-size: x-large;
}
#sidebar {
position: fixed;
top: 40px;
right: 0;
margin: auto;
height: 100%;
display: block;
max-width: 250px;
width: 0;
background-color: var(--overlay-color);
transition: 0.4s;
}
#sidebar a {
padding: 8px 8px 8px 8px;
margin-top: 10px;
font-family: indie-flower, sans-serif;
font-weight: 300;
text-decoration: none;
text-align: center;
font-size: 25px;
color: var(--link-color);
display: block;
white-space: nowrap;
transition: 0.5s;
}
@media screen and (max-height: 455px){#sidebar a{margin-top:0px;padding-top:0px}}
#sidebar a:hover {color: var(--main-text-color)}
#sidebar a:active {color: var(--main-text-color)}
#sidebar_logo {
margin-top: 30%;
text-align: center;
}
@media screen and (max-height: 640px){#sidebar_logo{display:none}
}
#sidebar_social {
position: absolute;
display: none;
bottom: 50px;
width: 100%;
margin: auto;
justify-content: center;
}
#sidebar_social img {
width: 12vw;
max-width: 50px;
transition: 0.5s;
}
@media screen and (min-height: 600px){#sidebar_social img{margin-bottom:20px}}
@media screen and (max-height: 360px){#sidebar_social img{display:none}}
/* CONTENT */
.content { /* Try z-index: 1; so it scrolls over header image */
padding-top: 10px;
padding-bottom: 10px;
width: 100%;
}
.content h2 {
color: var(--main-text-color);
text-align: center;
font-family: oxygen, sans-serif;
font-weight: 700;
}
.content p {
width: 90%;
margin: auto;
margin-top: 20px;
margin-bottom: 40px;
color: var(--main-text-color);
font-family: oxygen, sans-serif;
font-weight: normal;
}
/* FOOTER */
footer {
position: relative;
width: 100%;
background-color: var(--accent-color);
height: 30px;
bottom: 0;
}
footer p {
padding: 0;
padding-top: 5px;
margin: auto;
margin-top: 9px;
text-align: center;
color: var(--main-text-color);
font-family: monospace;
}
@media screen and (min-height: 600px) {
footer {
position: fixed;
bottom: 0;
}
footer p {
padding-top: 0px;
margin-top: 6px;
}
}
/* Handle ultra small screens somewhat gracefully */
/* Hide .hide_micro on screens smaller than 250px and show .show_micro while not showing it on full screens */
.show_micro {display:none}
@media only screen and (max-width: 249px) {
.hide_micro {display: none}
.show_micro {display: block}
}