diff --git a/downloads/f.boniface_ed25519.pub b/downloads/f.boniface_ed25519.pub new file mode 100644 index 0000000..eac1b2c --- /dev/null +++ b/downloads/f.boniface_ed25519.pub @@ -0,0 +1 @@ +ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIKQad6se97C/WF58JCRcLCbSPSci/5m1au8f0wkxI2eq Fred Boniface diff --git a/favicon.ico b/favicon.ico index 8e9f970..731116e 100644 Binary files a/favicon.ico and b/favicon.ico differ diff --git a/gpg.php b/gpg.php deleted file mode 100644 index 34ce0f9..0000000 --- a/gpg.php +++ /dev/null @@ -1,31 +0,0 @@ - - - - - - GPG/PGP - - - - - - -

GPG/PGP

-
-

- PGP stand for 'Pretty Good Privacy', GPG stands for 'GNU Privacy Guard' - , for the scope of this website they are interchangable. -

- -

- 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 - gitea server. -

-
- - - - - \ No newline at end of file diff --git a/images/favicon.png b/images/favicon.png index 2799ef6..fd37e27 100644 Binary files a/images/favicon.png and b/images/favicon.png differ diff --git a/images/headers/index/1024.jpg b/images/headers/index/1024.jpg new file mode 100644 index 0000000..1d5fa87 Binary files /dev/null and b/images/headers/index/1024.jpg differ diff --git a/images/headers/index/1024.jxl b/images/headers/index/1024.jxl new file mode 100644 index 0000000..2495479 Binary files /dev/null and b/images/headers/index/1024.jxl differ diff --git a/images/headers/index/1024.webp b/images/headers/index/1024.webp new file mode 100644 index 0000000..34833d9 Binary files /dev/null and b/images/headers/index/1024.webp differ diff --git a/images/headers/index/1920.jpg b/images/headers/index/1920.jpg new file mode 100644 index 0000000..5dae712 Binary files /dev/null and b/images/headers/index/1920.jpg differ diff --git a/images/headers/index/1920.jxl b/images/headers/index/1920.jxl new file mode 100644 index 0000000..f17e1ac Binary files /dev/null and b/images/headers/index/1920.jxl differ diff --git a/images/headers/index/1920.webp b/images/headers/index/1920.webp new file mode 100644 index 0000000..0387bad Binary files /dev/null and b/images/headers/index/1920.webp differ diff --git a/images/headers/index/2800.jpg b/images/headers/index/2800.jpg new file mode 100644 index 0000000..963eae1 Binary files /dev/null and b/images/headers/index/2800.jpg differ diff --git a/images/headers/index/2800.jxl b/images/headers/index/2800.jxl new file mode 100644 index 0000000..14eb486 Binary files /dev/null and b/images/headers/index/2800.jxl differ diff --git a/images/headers/index/2800.webp b/images/headers/index/2800.webp new file mode 100644 index 0000000..a0eee30 Binary files /dev/null and b/images/headers/index/2800.webp differ diff --git a/images/headers/index/300.jpg b/images/headers/index/300.jpg new file mode 100644 index 0000000..9bd167a Binary files /dev/null and b/images/headers/index/300.jpg differ diff --git a/images/headers/index/300.jxl b/images/headers/index/300.jxl new file mode 100644 index 0000000..bb568a8 Binary files /dev/null and b/images/headers/index/300.jxl differ diff --git a/images/headers/index/300.webp b/images/headers/index/300.webp new file mode 100644 index 0000000..aca8bfa Binary files /dev/null and b/images/headers/index/300.webp differ diff --git a/images/headers/index/4096.jpg b/images/headers/index/4096.jpg new file mode 100644 index 0000000..9d8307f Binary files /dev/null and b/images/headers/index/4096.jpg differ diff --git a/images/headers/index/4096.jxl b/images/headers/index/4096.jxl new file mode 100644 index 0000000..a1c3969 Binary files /dev/null and b/images/headers/index/4096.jxl differ diff --git a/images/headers/index/4096.webp b/images/headers/index/4096.webp new file mode 100644 index 0000000..96ff307 Binary files /dev/null and b/images/headers/index/4096.webp differ diff --git a/images/headers/index/500.jpg b/images/headers/index/500.jpg new file mode 100644 index 0000000..94dc8ca Binary files /dev/null and b/images/headers/index/500.jpg differ diff --git a/images/headers/index/500.jxl b/images/headers/index/500.jxl new file mode 100644 index 0000000..7b18219 Binary files /dev/null and b/images/headers/index/500.jxl differ diff --git a/images/headers/index/500.webp b/images/headers/index/500.webp new file mode 100644 index 0000000..69af17b Binary files /dev/null and b/images/headers/index/500.webp differ diff --git a/images/headers/index/800.jpg b/images/headers/index/800.jpg new file mode 100644 index 0000000..f40918a Binary files /dev/null and b/images/headers/index/800.jpg differ diff --git a/images/headers/index/800.jxl b/images/headers/index/800.jxl new file mode 100644 index 0000000..89e92ee Binary files /dev/null and b/images/headers/index/800.jxl differ diff --git a/images/headers/index/800.webp b/images/headers/index/800.webp new file mode 100644 index 0000000..d5f9f56 Binary files /dev/null and b/images/headers/index/800.webp differ diff --git a/images/headers/index/face-100.webp b/images/headers/index/face-100.webp new file mode 100644 index 0000000..49fa9fd Binary files /dev/null and b/images/headers/index/face-100.webp differ diff --git a/images/headers/index/face-150.webp b/images/headers/index/face-150.webp new file mode 100644 index 0000000..5b02690 Binary files /dev/null and b/images/headers/index/face-150.webp differ diff --git a/images/headers/index/face-600.webp b/images/headers/index/face-600.webp new file mode 100644 index 0000000..b9614ff Binary files /dev/null and b/images/headers/index/face-600.webp differ diff --git a/images/headers/index/full.jpg b/images/headers/index/full.jpg new file mode 100644 index 0000000..737de09 Binary files /dev/null and b/images/headers/index/full.jpg differ diff --git a/images/headers/readme.txt b/images/headers/readme.txt new file mode 100644 index 0000000..ef0867d --- /dev/null +++ b/images/headers/readme.txt @@ -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 diff --git a/images/logo/favicon.xcf b/images/logo/favicon.xcf new file mode 100644 index 0000000..331cdce Binary files /dev/null and b/images/logo/favicon.xcf differ diff --git a/images/logo/full-20.jxl b/images/logo/full-20.jxl new file mode 100644 index 0000000..fa781ba Binary files /dev/null and b/images/logo/full-20.jxl differ diff --git a/images/logo/full-20.png b/images/logo/full-20.png new file mode 100644 index 0000000..0e7e492 Binary files /dev/null and b/images/logo/full-20.png differ diff --git a/images/logo/full-20.webp b/images/logo/full-20.webp new file mode 100644 index 0000000..cdf3d29 Binary files /dev/null and b/images/logo/full-20.webp differ diff --git a/images/logo/full-40.jxl b/images/logo/full-40.jxl new file mode 100644 index 0000000..451072d Binary files /dev/null and b/images/logo/full-40.jxl differ diff --git a/images/logo/full-40.png b/images/logo/full-40.png new file mode 100644 index 0000000..b704a27 Binary files /dev/null and b/images/logo/full-40.png differ diff --git a/images/logo/full-40.webp b/images/logo/full-40.webp new file mode 100644 index 0000000..3a2914c Binary files /dev/null and b/images/logo/full-40.webp differ diff --git a/images/logo/full-60.jxl b/images/logo/full-60.jxl new file mode 100644 index 0000000..bc33f0a Binary files /dev/null and b/images/logo/full-60.jxl differ diff --git a/images/logo/full-60.png b/images/logo/full-60.png new file mode 100644 index 0000000..f5b1209 Binary files /dev/null and b/images/logo/full-60.png differ diff --git a/images/logo/full-60.webp b/images/logo/full-60.webp new file mode 100644 index 0000000..38174ef Binary files /dev/null and b/images/logo/full-60.webp differ diff --git a/images/logo/full-95.jxl b/images/logo/full-95.jxl new file mode 100644 index 0000000..4e6b1a2 Binary files /dev/null and b/images/logo/full-95.jxl differ diff --git a/images/logo/full-95.png b/images/logo/full-95.png new file mode 100644 index 0000000..686be3d Binary files /dev/null and b/images/logo/full-95.png differ diff --git a/images/logo/full-95.webp b/images/logo/full-95.webp new file mode 100644 index 0000000..13c37e5 Binary files /dev/null and b/images/logo/full-95.webp differ diff --git a/images/logo/full.xcf b/images/logo/full.xcf new file mode 100644 index 0000000..9619225 Binary files /dev/null and b/images/logo/full.xcf differ diff --git a/images/logo/short-20.jxl b/images/logo/short-20.jxl new file mode 100644 index 0000000..2e0b859 Binary files /dev/null and b/images/logo/short-20.jxl differ diff --git a/images/logo/short-20.png b/images/logo/short-20.png new file mode 100644 index 0000000..505caf7 Binary files /dev/null and b/images/logo/short-20.png differ diff --git a/images/logo/short-40.jxl b/images/logo/short-40.jxl new file mode 100644 index 0000000..b708ffe Binary files /dev/null and b/images/logo/short-40.jxl differ diff --git a/images/logo/short-40.png b/images/logo/short-40.png new file mode 100644 index 0000000..1fee670 Binary files /dev/null and b/images/logo/short-40.png differ diff --git a/images/logo/short-60.jxl b/images/logo/short-60.jxl new file mode 100644 index 0000000..628a5de Binary files /dev/null and b/images/logo/short-60.jxl differ diff --git a/images/logo/short-60.png b/images/logo/short-60.png new file mode 100644 index 0000000..7da86d5 Binary files /dev/null and b/images/logo/short-60.png differ diff --git a/images/logo/short-95.jxl b/images/logo/short-95.jxl new file mode 100644 index 0000000..005290d Binary files /dev/null and b/images/logo/short-95.jxl differ diff --git a/images/logo/short-95.png b/images/logo/short-95.png new file mode 100644 index 0000000..93df18e Binary files /dev/null and b/images/logo/short-95.png differ diff --git a/images/logo/short.xcf b/images/logo/short.xcf new file mode 100644 index 0000000..0f67d54 Binary files /dev/null and b/images/logo/short.xcf differ diff --git a/js/navbar.js b/js/navbar.js index 7788096..fc4a01e 100644 --- a/js/navbar.js +++ b/js/navbar.js @@ -4,4 +4,18 @@ function inflateSidebar() { function collapseSidebar() { 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"; } \ No newline at end of file diff --git a/keys.php b/keys.php new file mode 100644 index 0000000..118e564 --- /dev/null +++ b/keys.php @@ -0,0 +1,23 @@ + + + + + + GPG/PGP + + + + + + +

Keys

+
+

+ Download SSH Public Key +

+
+ + + + + \ No newline at end of file diff --git a/new_index.html b/new_index.html new file mode 100644 index 0000000..969f0b8 --- /dev/null +++ b/new_index.html @@ -0,0 +1,99 @@ + + + + + + + + + Home + + +
+
+ + + Face image + +

Hello

+
+
+ + +
+

+ This website cannot correctly render on a screen this narrow, + Please resize your window or visit on a larger device. +

+
+
+

Lorem

+

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.

+

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.

+

Ispum

+

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.

+

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.

+

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.

+
+ + + \ No newline at end of file diff --git a/page-blocks/menu.php b/page-blocks/menu.php index 6ca81fc..d0d03e7 100644 --- a/page-blocks/menu.php +++ b/page-blocks/menu.php @@ -1,9 +1,10 @@
diff --git a/projects.php b/projects.php index ec46ad2..4784f69 100644 --- a/projects.php +++ b/projects.php @@ -13,6 +13,7 @@

Projects

Sorry, there's nothing here yet

+

In the meantime check out my Gitea or Social Links

diff --git a/style/fonts/indie-flower/OFL.txt b/style/fonts/indie-flower/OFL.txt new file mode 100644 index 0000000..f19b48e --- /dev/null +++ b/style/fonts/indie-flower/OFL.txt @@ -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. diff --git a/style/fonts/indie-flower/indie-flower.ttf b/style/fonts/indie-flower/indie-flower.ttf new file mode 100644 index 0000000..3774ef5 Binary files /dev/null and b/style/fonts/indie-flower/indie-flower.ttf differ diff --git a/style/fonts/indie-flower/indie-flower.woff b/style/fonts/indie-flower/indie-flower.woff new file mode 100644 index 0000000..8367770 Binary files /dev/null and b/style/fonts/indie-flower/indie-flower.woff differ diff --git a/style/fonts/indie-flower/indie-flower.woff2 b/style/fonts/indie-flower/indie-flower.woff2 new file mode 100644 index 0000000..b4ea531 Binary files /dev/null and b/style/fonts/indie-flower/indie-flower.woff2 differ diff --git a/style/new_style.css b/style/new_style.css new file mode 100644 index 0000000..ef852de --- /dev/null +++ b/style/new_style.css @@ -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 */ + 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} +} \ No newline at end of file