Compare commits
2 Commits
8dc5b0ebe5
...
a2b1dc0e93
Author | SHA1 | Date |
---|---|---|
Fred Boniface | a2b1dc0e93 | |
Fred Boniface | 4de0e362ce |
|
@ -13,35 +13,35 @@
|
|||
<body>
|
||||
<div class="header-image-home">
|
||||
<div class="page-title">
|
||||
<h1>Fred Boniface</h1>
|
||||
<h1>Page Title</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menubar">
|
||||
<div id="menubar">
|
||||
<script src="/js/navbar.js"></script>
|
||||
<div class="menubar_logo">
|
||||
<div id="menubar_logo">
|
||||
<picture>
|
||||
<source srcset="/images/logo/full-60.webp" type="image/webp">
|
||||
<img src="/images/logo/full-60.png" alt="Fred Boniface logo">
|
||||
</picture>
|
||||
</div>
|
||||
<div class="menubar_hamburger">
|
||||
<button id="sidebar_open_short" class="sidebar_open_short" onclick="sidebarOpen()">☰</button>
|
||||
<button class="sidebar_open_long" onclick="sidebarOpen()">Menu ☰</button>
|
||||
<button id="sidebar_close_short" class="sidebar_close_short" onclick="sidebarClose()">×</button>
|
||||
<button class="sidebar_close_long" onclick="sidebarClose()">Close ×</button>
|
||||
<div id="menubar_hamburger">
|
||||
<button id="sidebar_open_short" onclick="sidebarOpen()">☰</button>
|
||||
<button id="sidebar_close_short" onclick="sidebarClose()">×</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="sidebar" class="sidebar">
|
||||
<div id="sidebar">
|
||||
<a href="/">Home</a>
|
||||
<a href="/gpg.php">GPG/PGP</a>
|
||||
<a href="/projects.php">Things I Do</a>
|
||||
<a href="/contact.php">Contact</a>
|
||||
<a href="/about.php">About</a>
|
||||
<picture>
|
||||
<source srcset="/images/logo/short-40.jxl" type="image/jxl">
|
||||
<img src="/images/logo/short-40.png" alt="FB Initials">
|
||||
</picture>
|
||||
<div class="sidebar_social">
|
||||
<div id="sidebar_logo">
|
||||
<picture>
|
||||
<source srcset="/images/logo/short-40.jxl" type="image/jxl">
|
||||
<img src="/images/logo/short-40.png" alt="FB Initials">
|
||||
</picture>
|
||||
</div>
|
||||
<div id="sidebar_social">
|
||||
SOCIAL_LINKS
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
.menubar {
|
||||
#menubar {
|
||||
background-color: darkslategrey;
|
||||
color: azure;
|
||||
position: fixed;
|
||||
|
@ -8,40 +8,37 @@
|
|||
height: 40px;
|
||||
}
|
||||
|
||||
.menubar_logo img {
|
||||
max-width: 13%;
|
||||
padding: 5px;
|
||||
#menubar_logo img {
|
||||
max-width: 20px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.menubar_hamburger {
|
||||
#menubar_hamburger {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 0;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.sidebar_open_long {display: none;}
|
||||
.sidebar_close_long {display: none;}
|
||||
|
||||
.sidebar_open_short {
|
||||
#sidebar_open_short {
|
||||
display: block;
|
||||
font-size: larger;
|
||||
background-color: slategrey;
|
||||
background-color: transparent;
|
||||
color: azure;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.sidebar_close_short {
|
||||
#sidebar_close_short {
|
||||
display: none;
|
||||
font-size: larger;
|
||||
background-color: slategrey;
|
||||
background-color: transparent;
|
||||
color: azure;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
#sidebar {
|
||||
position: fixed;
|
||||
top: 40px;
|
||||
right: 0;
|
||||
|
@ -54,7 +51,7 @@
|
|||
transition: 0.7s;
|
||||
}
|
||||
|
||||
.sidebar a {
|
||||
#sidebar a {
|
||||
padding: 8px 8px 8px 8px;
|
||||
margin-left: 20px;
|
||||
margin-top: 10px;
|
||||
|
@ -67,14 +64,18 @@
|
|||
display: block;
|
||||
}
|
||||
|
||||
.sidebar_social {
|
||||
#sidebar_logo {
|
||||
|
||||
}
|
||||
|
||||
#sidebar_social {
|
||||
position: absolute;
|
||||
bottom: 50px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 800px) {
|
||||
.menubar {
|
||||
#menubar {
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
top: 0px;
|
||||
|
|
|
@ -8,9 +8,10 @@ body {
|
|||
|
||||
.header-image-home {
|
||||
background-image: url(https://via.placeholder.com/375x335webp);
|
||||
min-height: 50%;
|
||||
min-height: 40%;
|
||||
max-height: 45%;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
position: fixed; /* Try setting this to relative and .page-title to absolute */
|
||||
top: 40px;
|
||||
left: 0;
|
||||
}
|
||||
|
@ -23,3 +24,7 @@ body {
|
|||
box-shadow: 3px;
|
||||
color: azure;
|
||||
}
|
||||
|
||||
.content {
|
||||
margin-top: 95%;
|
||||
}
|
Loading…
Reference in New Issue