93 lines
1.9 KiB
CSS
93 lines
1.9 KiB
CSS
@import url(https://fonts.bunny.net/css?family=azeret-mono);
|
|
*{
|
|
font-family: 'Azeret Mono', monospace;
|
|
}
|
|
body{
|
|
padding:6vh 4vw;
|
|
}
|
|
/* The side navigation menu */
|
|
.sidebar {
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 200px;
|
|
background-color: #5e344a
|
|
position: fixed;
|
|
height: 100%;
|
|
overflow: auto;
|
|
}
|
|
/* Sidebar links */
|
|
.sidebar a {
|
|
display: block;
|
|
color: black;
|
|
padding: 16px;
|
|
text-decoration: none;
|
|
}
|
|
/* Active/current link */
|
|
.sidebar a.active {
|
|
background-color: #04AA6D;
|
|
color: #5e344a;
|
|
}
|
|
/* Links on mouse-over */
|
|
.sidebar a:hover:not(.active) {
|
|
background-color: #555;
|
|
color: #5e344a;
|
|
}
|
|
/* Page content. The value of the margin-left property should match the value of the sidebar's width property */
|
|
div.content {
|
|
margin-left: 200px;
|
|
padding: 16px 16px;
|
|
}
|
|
/* On screens that are less than 700px wide, make the sidebar into a topbar */
|
|
@media screen and (max-width: 700px) {
|
|
.sidebar {
|
|
width: 100%;
|
|
height: auto;
|
|
position: relative;
|
|
}
|
|
.sidebar a {float: left;}
|
|
div.content {margin-left: 0;}
|
|
}
|
|
/* On screens that are less than 400px, display the bar vertically, instead of horizontally */
|
|
@media screen and (max-width: 400px) {
|
|
.sidebar a {
|
|
text-align: center;
|
|
float: none;
|
|
}
|
|
}
|
|
#home {
|
|
font-weight:bold;
|
|
}
|
|
#gallery {
|
|
}
|
|
#gallery h1 {
|
|
border-bottom:4px solid rgb(255, 44, 90);
|
|
width:6%;
|
|
}
|
|
#photos {
|
|
width:50%;
|
|
column-gap:4%;
|
|
transition:0.4s ease-in-out;
|
|
}
|
|
#photos img {
|
|
width:20%;
|
|
height:auto;
|
|
margin:4.5% 0px;
|
|
transition:0.4s ease-in-out;
|
|
}
|
|
#photos img:hover {
|
|
transform: scale(2);
|
|
cursor: pointer;
|
|
}
|
|
#contact {
|
|
width:auto;
|
|
}
|
|
#contact h1 {
|
|
border-bottom:4px solid rgb(255, 44, 90);
|
|
width:10%;
|
|
}
|
|
#footer {
|
|
width:100%;
|
|
padding:10vh 0px;
|
|
text-align:center;
|
|
font-weight:bold;
|
|
}
|