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

Reduce CSS Size

Browse Source
This commit is contained in:
Fred Boniface 2022-10-20 13:37:00 +01:00
parent e67a6f7c9f
commit 851d45d340
1 changed files with 8 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
style/new_style.css
View File

@ -1,23 +1,12 @@
/* BEGIN FONT DECLARATION */ /* FONTS */
/* HTML & BODY */
/* END FONT DECLARATION */ html {height: 100%;}
/* BEGIN HTML & BODY */
html {
height: 100%;
}
body { body {
width: 100%; width: 100%;
margin: auto; margin: auto;
background-color: lightslategrey; background-color: lightslategrey;
} }
/* PAGE HEADER */
/* END HTML & BODY */
/* BEGIN DEFAULT PAGE HEADER BLOCK */
#header_image_home { /* Try z-index: -1; to have content scrolling over - margins will need adjusting */ #header_image_home { /* Try z-index: -1; to have content scrolling over - margins will need adjusting */
background-color: rgb(29,49,49); background-color: rgb(29,49,49);
background-image: url("/images/headers/index/index_w750.jpg"); background-image: url("/images/headers/index/index_w750.jpg");
@ -32,7 +21,6 @@ body {
position: sticky; position: sticky;
top: -170px; top: -170px;
} }
#page_title { /* This may be best floating above content div rather than inside header div */ #page_title { /* This may be best floating above content div rather than inside header div */
font-family: sans-serif; font-family: sans-serif;
font-size: large; font-size: large;
@ -42,7 +30,6 @@ body {
bottom: -14px; bottom: -14px;
color: azure; color: azure;
} }
#menubar { #menubar {
background-color: darkslategrey; background-color: darkslategrey;
color: azure; color: azure;
@ -52,19 +39,16 @@ body {
width: 100%; width: 100%;
height: 40px; height: 40px;
} }
#menubar_logo img { /* Logo file is controlled by media="" in <picture> */ #menubar_logo img { /* Logo file is controlled by media="" in <picture> */
max-height: 20px; max-height: 20px;
padding: 10px; padding: 10px;
} }
#menubar_hamburger { #menubar_hamburger {
position: absolute; position: absolute;
top: 2px; top: 2px;
right: 0; right: 0;
padding: 5px; padding: 5px;
} }
.sidebar_control { .sidebar_control {
background-color: transparent; background-color: transparent;
color: azure; color: azure;
@ -72,16 +56,11 @@ body {
font-family: sans-serif; font-family: sans-serif;
font-size: larger; font-size: larger;
} }
#sidebar_open_short {display: block;}
#sidebar_open_short {
display: block;
}
#sidebar_close_short { #sidebar_close_short {
display: none; display: none;
font-size: x-large; font-size: x-large;
} }
#sidebar { #sidebar {
position: fixed; position: fixed;
top: 40px; top: 40px;
@ -94,7 +73,6 @@ body {
background-color: darkslategrey; background-color: darkslategrey;
transition: 0.7s; transition: 0.7s;
} }
#sidebar a { #sidebar a {
padding: 8px 8px 8px 8px; padding: 8px 8px 8px 8px;
margin-top: 10px; margin-top: 10px;
@ -107,68 +85,39 @@ body {
display: block; display: block;
white-space: nowrap; white-space: nowrap;
} }
#sidebar_logo { #sidebar_logo {
margin-top: 40%; margin-top: 40%;
text-align: center; text-align: center;
} }
@media screen and (max-height: 500px) { @media screen and (max-height: 500px) {
#sidebar_logo {display: none;} #sidebar_logo {display: none;}
} }
#sidebar_social { #sidebar_social {
position: absolute; position: absolute;
bottom: 50px; bottom: 50px;
width: 100%; width: 100%;
} }
/* CONTENT */
/* END DEFAULT PAGE HEADER BLOCK */
/* BEGIN FULL PAGE HEADER BLOCK */
/* Reposition menu */
@media screen and (min-width: 800px) and (min-height: 700px) {
}
/* END FULL PAGE HEADER BLOCK */
/* BEGIN CONTENT BLOCK */
#content { /* Try z-index: 1; so it scrolls over header image */ #content { /* Try z-index: 1; so it scrolls over header image */
padding-top: 10px; padding-top: 10px;
padding-bottom: 10px; padding-bottom: 10px;
width: 100%; width: 100%;
} }
#content p { #content p {
width: 90%; width: 90%;
margin: auto; margin: auto;
margin-top: 20px; margin-top: 20px;
color: azure; color: azure;
} }
/* FOOTER */
/* END CONTENT BLOCK */
/* BEGIN FOOTER */
footer { footer {
width: 100%; width: 100%;
background-color: darkslategrey; background-color: darkslategrey;
text-align: center; text-align: center;
} }
@media screen and (min-width: 800px) and (min-height: 700px) { @media screen and (min-width: 800px) and (min-height: 700px) {
footer { footer {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
} }
}
}
/* END FOOTER */