agreugreu/agreugreu.css
2024-05-10 17:51:59 +02:00

174 lines
2.7 KiB
CSS

main {
margin-left: 20px;
}
:root{
--white: #f9f9f9;
--black: #36383F;
--gray: #85888C;
} /* variables*/
/* Reset */
*{
box-sizing: border-box;
}
a{
text-decoration: none;
}
nav ul{
list-style: none;
}
/* Header */
.header{
background-color: var(--black);
box-shadow: 1px 1px 5px 0px var(--gray);
position: fixed;
width: 100%;
top: 0px;
}
/* Logo */
.logo{
display: inline-block;
color: #8ae717;
font-size: 60px;
margin-left: 10px;
padding-bottom: 10px;
}
/* Nav menu */
.nav{
width: 100%;
height: 100%;
background-color: var(--black);
overflow: hidden;
font-family: verdana;
position: sticky;
position:-webkit-sticky;
}
.menu a{
display: block;
padding: 15px;
margin-right: 30px;
text-align: center;
color: powderblue;
}
.menu a:hover{
background-color: var(--gray);
}
.nav{
max-height: 0;
transition: max-height .5s ease-out;
}
/* Menu Icon */
.hamb{
cursor: pointer;
float: right;
padding: 40px 20px;
}/* Style label tag */
.hamb-line {
background: var(--white);
display: block;
height: 2px;
position: relative;
width: 24px;
} /* Style span tag */
.hamb-line::before, .hamb-line::after{
background: var(--white);
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.hamb-line::before{
top: 5px;
}
.hamb-line::after{
top: -5px;
}
.side-menu {
display: none;
} /* Hide checkbox */
/* Toggle menu icon */
.side-menu:checked ~ nav{
max-height: 100%;
background-color: var(--black);
}
.side-menu:checked ~ .hamb .hamb-line {
background: transparent;
}
.side-menu:checked ~ .hamb .hamb-line::before {
transform: rotate(-45deg);
top:0;
}
.side-menu:checked ~ .hamb .hamb-line::after {
transform: rotate(45deg);
top:0;
}
/* Responsiveness */
@media (min-width: 1190px) {
.nav{
max-height: none;
top: 0;
position: relative;
float: right;
width: fit-content;
background-color: transparent;
transition: 0.6s;
}
.menu li{
float: left;
}
.menu a:hover{
background-color: transparent;
color: var(--gray);
}
.hamb{
display: none;
}
}
body {
background-color: #1c1e20;
color: #cdcdcd;
font-family: arial;
}
h2,h3 {
margin: 30px;
color: #ffc38a;
}
.code {
background-color: #4D4D4D
}
p {
font-size: 18px;
}
a.external {
color: #8ae717
}
footer {
display: flex;
justify-content: center;
align-items: center;
margin-top: 70px;
height: 40px;
color: skyblue;
font-size: 16px;
background-color: #52575e;
}