fredboniface.co.uk/style/styles.css

168 lines
2.9 KiB
CSS
Raw Normal View History

2022-10-07 21:38:01 +01:00
html {
height: 100%;
}
2022-09-10 20:55:33 +01:00
body {
2022-10-07 21:38:01 +01:00
min-height: 100%;
2022-10-07 21:03:57 +01:00
background-color: #444444;
2022-09-10 20:55:33 +01:00
}
.page-title {
text-align: center;
2022-10-17 11:01:52 +01:00
font-family: oxygen, sans-serif;
font-weight: 700;
2022-10-07 21:03:57 +01:00
color: #eeeeee;
2022-10-07 21:38:01 +01:00
padding-top: 65px;
padding-bottom: 10px;
2022-10-07 20:56:41 +01:00
width: 95%;
2022-10-07 21:38:01 +01:00
overflow: hidden;
2022-10-07 21:11:40 +01:00
margin: auto;
2022-10-14 10:53:47 +01:00
margin-bottom: 20px;
2022-09-10 20:55:33 +01:00
}
2022-10-17 10:04:39 +01:00
.error-title {
font-family: silkscreenregular, 'Courier New', Courier, monospace;
}
2022-10-07 22:37:57 +01:00
.title-image img {
max-width: 30%;
padding-top: 30px;
padding-bottom: 30px;
margin-left: 35%;
margin-right: 35%;
}
2022-09-10 20:55:33 +01:00
.page-main-content {
2022-10-07 20:56:41 +01:00
text-align: center;
2022-10-17 10:55:41 +01:00
font-family: oxygen, sans-serif;
2022-10-17 11:04:03 +01:00
font-weight: 300;
2022-10-07 21:03:57 +01:00
color: #f0f0f0f0;
2022-10-07 20:56:41 +01:00
width: 95%;
2022-10-07 21:38:01 +01:00
overflow: hidden;
2022-10-07 21:11:40 +01:00
margin: auto;
2022-10-07 20:56:41 +01:00
}
2022-10-07 22:45:01 +01:00
.page-main-content h2 {
padding-top: 45px;
}
2022-10-13 21:42:21 +01:00
.social-links img {
2022-10-13 21:56:53 +01:00
max-width: 58px;
2022-10-13 21:51:36 +01:00
padding: 10px;
2022-10-13 21:42:21 +01:00
}
2022-10-14 10:43:52 +01:00
a.download-link {
text-decoration: none;
2022-10-14 10:53:47 +01:00
color: #242121;
background-color: #d1caca;
padding: 10px;
border-radius: 10px;
2022-10-10 21:45:18 +01:00
text-align: center;
2022-10-14 10:53:47 +01:00
margin: 7px;
2022-10-10 21:45:18 +01:00
}
2022-10-14 10:53:47 +01:00
2022-10-07 20:56:41 +01:00
footer {
2022-10-07 21:11:40 +01:00
background-color: rgb(61, 61, 61);
2022-10-07 21:03:57 +01:00
color: #eeeeee;
2022-10-07 21:38:01 +01:00
font-family: monospace;
2022-10-07 20:56:41 +01:00
text-align: center;
width: 100%;
position: fixed;
bottom: 0;
left: 0;
}
2022-10-10 20:51:35 +01:00
/* The sidebar menu */
.sidebar {
height: 100%;
width: 0; /* Hidden by default */
position: fixed;
2022-10-17 11:26:14 +01:00
padding-top: 90px;
2022-10-10 20:51:35 +01:00
z-index: 1;
2022-10-07 20:45:40 +01:00
top: 0;
2022-10-10 20:56:03 +01:00
right: 0;
2022-10-10 20:51:35 +01:00
background-color: #111;
2022-10-17 11:12:58 +01:00
overflow-x: hidden;
overflow-y: hidden;
2022-10-17 11:26:14 +01:00
transition: 0.7s; /* 0.5 second transition effect to slide in the sidebar */
2022-10-07 20:14:11 +01:00
}
2022-10-10 20:51:35 +01:00
/* The sidebar links */
.sidebar a {
2022-10-17 11:12:58 +01:00
padding: 8px 8px 8px 8px;
margin-left: 20px;
2022-10-17 11:26:14 +01:00
margin-top: 10px;
2022-10-17 11:14:00 +01:00
font-family: oxygen, sans-serif;
2022-10-17 11:12:58 +01:00
font-weight: 300;
2022-10-07 19:47:14 +01:00
text-decoration: none;
2022-10-10 21:00:58 +01:00
text-align: right;
2022-10-10 20:51:35 +01:00
font-size: 25px;
2022-10-17 11:17:05 +01:00
color: #bcbcbc;
2022-10-10 20:51:35 +01:00
display: block;
2022-10-17 11:26:14 +01:00
transition: 0.7s;
2022-10-07 20:14:11 +01:00
}
2022-10-10 20:51:35 +01:00
/* When you mouse over the navigation links, change their color */
.sidebar a:hover {
color: #f1f1f1;
2022-10-07 20:14:11 +01:00
}
2022-10-10 20:51:35 +01:00
/* Position and style the close button (top right corner) */
.sidebar .close {
2022-10-07 20:14:11 +01:00
position: absolute;
2022-10-17 11:26:14 +01:00
top: -10px;
right: 20px;
2022-10-10 20:51:35 +01:00
font-size: 36px;
margin-left: 50px;
2022-10-07 20:14:11 +01:00
}
2022-10-10 20:58:11 +01:00
/* Position the div containing the open button */
.inflate {
position: absolute;
2022-10-10 20:59:45 +01:00
top: 10px;
2022-10-10 21:08:59 +01:00
right: 10px;
2022-10-10 20:58:11 +01:00
}
2022-10-10 20:51:35 +01:00
/* The button used to open the sidebar */
.open {
font-size: 20px;
cursor: pointer;
2022-10-10 21:08:59 +01:00
background-color: rgba(0, 0, 0, 0);
2022-10-07 20:14:11 +01:00
color: white;
2022-10-10 20:51:35 +01:00
padding: 10px 15px;
border: none;
2022-10-07 20:14:11 +01:00
}
2022-10-10 20:51:35 +01:00
.open:hover {
background-color: #444;
2022-10-10 21:18:46 +01:00
}
2022-10-10 21:41:56 +01:00
/* Screens Wider than 600px */
2022-10-10 21:18:46 +01:00
@media screen and (min-width: 600px) {
2022-10-10 21:29:01 +01:00
/*Hide sidebar open/close buttons*/
2022-10-10 21:18:46 +01:00
.inflate {display: none;}
2022-10-10 21:29:01 +01:00
.sidebar .close {display: none;}
2022-10-10 21:18:46 +01:00
/*Change Menu Dimensions*/
.sidebar {
width: 100%;
2022-10-17 11:17:05 +01:00
height: 14px;
2022-10-10 21:41:56 +01:00
padding-top: 5px;
padding-bottom: 40px;
2022-10-10 21:29:01 +01:00
padding-left: 50px;
}
/* Float links */
.sidebar a {
float: left;
2022-10-17 11:12:58 +01:00
margin-top: 2px;
2022-10-10 21:29:01 +01:00
}
2022-10-10 21:41:56 +01:00
/*Provice space for top menu*/
2022-10-17 11:12:58 +01:00
.page-title {padding-top: 90px}
2022-10-10 21:41:56 +01:00
2022-10-13 21:48:53 +01:00
/*Increase social link image size*/
.social-links img {max-width: 75px;}
2022-10-07 20:14:11 +01:00
}