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

redesign #1

Merged
fred.boniface merged 115 commits from redesign into main 2022-10-29 20:12:58 +01:00
Conversation 0 Commits 115 Files Changed 63 +116 -92
3 changed files with 116 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit d6ca5151a6 - Show all commits

2
new_index.html
View File

@ -5,9 +5,7 @@
<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/fonts.css">
<link rel="stylesheet" href="/style/new_style.css">
<link rel="stylesheet" href="/style/new_menu.css">
<title>Home</title>
</head>
<body>

84
style/new_menu.css
View File

@ -1,84 +0,0 @@
#menubar {
background-color: darkslategrey;
color: azure;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 40px;
}
#menubar_logo img {
max-height: 20px;
padding: 10px;
}
#menubar_hamburger {
position: absolute;
top: 2px;
right: 0;
padding: 5px;
}
.sidebar_control {
background-color: transparent;
color: azure;
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: 60%;
width: 0;
background-color: darkslategrey;
transition: 0.7s;
}
#sidebar a {
padding: 8px 8px 8px 8px;
margin-top: 10px;
font-family: sans-serif;
font-weight: 300;
text-decoration: none;
text-align: center;
font-size: 25px;
color: cyan;
display: block;
white-space: nowrap;
}
#sidebar_logo {
margin-top: 40%;
text-align: center;
}
#sidebar_social {
position: absolute;
bottom: 50px;
width: 100%;
}
@media screen and (min-width: 800px) and (min-height: 700px) {
#menubar {
position: -webkit-sticky;
position: sticky;
top: 0px;
}
}

122
style/new_style.css
View File

@ -1,3 +1,9 @@
/* BEGIN FONT DECLARATION */
/* END FONT DECLARATION */
/* BEGIN HTML & BODY */
html {
height: 100%;
}
@ -7,6 +13,10 @@ body {
margin: auto;
}
/* END HTML & BODY */
/* BEGIN DEFAULT PAGE HEADER BLOCK */
#header_image_home {
background-color: rgb(29,49,49);
background-image: url("/images/headers/index/index_w750.jpg");
@ -22,7 +32,7 @@ body {
top: -170px;
}
#page_title { /* This needs to be bottom center of header-image-home/header-image */
#page_title {
font-family: sans-serif;
font-size: large;
width: 100%;
@ -32,6 +42,110 @@ body {
color: azure;
}
#menubar {
background-color: darkslategrey;
color: azure;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 40px;
}
#menubar_logo img {
max-height: 20px;
padding: 10px;
}
#menubar_hamburger {
position: absolute;
top: 2px;
right: 0;
padding: 5px;
}
.sidebar_control {
background-color: transparent;
color: azure;
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: 60%;
width: 0;
background-color: darkslategrey;
transition: 0.7s;
}
#sidebar a {
padding: 8px 8px 8px 8px;
margin-top: 10px;
font-family: sans-serif;
font-weight: 300;
text-decoration: none;
text-align: center;
font-size: 25px;
color: cyan;
display: block;
white-space: nowrap;
}
#sidebar_logo {
margin-top: 40%;
text-align: center;
}
@media screen and (max-height: 500px) {
#sidebar_logo {display: none;}
}
#sidebar_social {
position: absolute;
bottom: 50px;
width: 100%;
}
/* END DEFAULT PAGE HEADER BLOCK */
/* BEGIN FULL PAGE HEADER BLOCK */
/* Reposition menu */
@media screen and (min-width: 800px) and (min-height: 700px) {
#header_image_home {
margin-top: auto;
}
#menubar {
position: -webkit-sticky;
position: sticky;
top: 0px;
}
}
/* END FULL PAGE HEADER BLOCK */
/* BEGIN CONTENT BLOCK */
#content {
margin: auto;
margin-top: 10px;
@ -39,8 +153,4 @@ body {
width: 90%;
}
@media screen and (min-width: 800px) and (min-height: 700px) {
#header_image_home {
margin-top: auto;
}
}
/* END CONTENT BLOCK */