category menu
This commit is contained in:
Joseph Hutchinson
@@ -19,8 +19,12 @@ strong {
|
||||
font-weight: normal
|
||||
}
|
||||
.nav-bar {
|
||||
max-width: 48rem;
|
||||
width: 100%;
|
||||
padding: 0.7em 0;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.nav-header {
|
||||
margin: 0;
|
||||
@@ -28,6 +32,70 @@ strong {
|
||||
.nav-text {
|
||||
text-decoration: none;
|
||||
}
|
||||
.hamburger-menu {
|
||||
display: block;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.hamburger-menu input {
|
||||
display: block;
|
||||
width: 33px;
|
||||
height: 33px;
|
||||
position: absolute;
|
||||
top: -9px;
|
||||
cursor: pointer;
|
||||
opacity: 0; /* hide this */
|
||||
z-index: 2; /* and place it over the hamburger */
|
||||
-webkit-touch-callout: none;
|
||||
}
|
||||
.hamburger-menu span {
|
||||
display: block;
|
||||
width: 33px;
|
||||
height: 4px;
|
||||
position: relative;
|
||||
background: #3A3B3C;
|
||||
border-radius: 3px;
|
||||
z-index: 1;
|
||||
transform-origin: center;
|
||||
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
|
||||
background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
|
||||
opacity 0.55s ease;
|
||||
}
|
||||
.hamburger-menu span:first-of-type {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.hamburger-menu input:checked ~ span {
|
||||
opacity: 1;
|
||||
transform: rotate(45deg) translate(3.2px , 3.2px);
|
||||
}
|
||||
.hamburger-menu input:checked ~ span:nth-last-child(2) {
|
||||
transform: rotate(-45deg) translate(3.2px , -3.2px);
|
||||
}
|
||||
.hamburger-menu input ~ ul {
|
||||
display: none;
|
||||
text-align: center;
|
||||
padding: 3em 0 0 0;
|
||||
transition: all 1s cubic-bezier(0.77,0.2,0.05,1.0);
|
||||
}
|
||||
.hamburger-menu > ul > li > a {
|
||||
text-decoration: none;
|
||||
font-size: 2em;
|
||||
line-height: 1.7;
|
||||
color: white;
|
||||
}
|
||||
.hamburger-menu input:checked ~ ul {
|
||||
display: block;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
.post {
|
||||
margin: 0 0 1em 0;
|
||||
line-height: 1.5;
|
||||
@@ -62,13 +130,13 @@ strong {
|
||||
padding: 2em 0;
|
||||
margin-bottom: 2em;
|
||||
width: 100%;
|
||||
max-width: 46rem;
|
||||
max-width: 48rem;
|
||||
border-radius: 0.3rem;
|
||||
transition: transform 0.3s cubic-bezier(.25,.8,.25,1), box-shadow 0.3s cubic-bezier(.25,.8,.25,1);
|
||||
box-shadow: 0 0.15em 0.3em 0 rgba(0, 0, 0, 0.16), 0 0.15em 0.3em -0.04em rgba(0, 0, 0, 0.23);
|
||||
transition: transform 0.3s cubic-bezier(0.25,0.8,0.25,1), box-shadow 0.3s cubic-bezier(0.25,0.8,0.25,1);
|
||||
box-shadow: 0 0.7rem 1.4rem 0 rgba(0,0,0,0.25), 0 0.5rem 0.5rem 0 rgba(0,0,0,0.22);
|
||||
}
|
||||
.list-header {
|
||||
margin: 8em 0 6em 0;
|
||||
margin: 6em 0;
|
||||
text-align: center;
|
||||
}
|
||||
.list-header-title {
|
||||
@@ -95,7 +163,7 @@ strong {
|
||||
border-radius: 0.3rem;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
transition: transform 0.3s cubic-bezier(0.25,0.8,0.25,1), box-shadow 0.3s cubic-bezier(0.25,0.8,0.25,1);
|
||||
box-shadow: 0 0.4rem 0.8rem 0 rgba(0,0,0,0.16), 0 0.3rem 0.3rem -0.1rem rgba(0,0,0,0.23);
|
||||
box-shadow: 0 0.5rem 1rem 0 rgba(0,0,0,0.19), 0 0.3rem 0.3rem -0.1rem rgba(0,0,0,0.23);
|
||||
}
|
||||
.home-card {
|
||||
padding: 0.8em;
|
||||
@@ -103,7 +171,7 @@ strong {
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
color: white;
|
||||
background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url(../img/city.jpg) center center no-repeat;
|
||||
background: url(../img/grey-cloud.jpg) center center;
|
||||
object-fit: cover;
|
||||
}
|
||||
.blog-card {
|
||||
@@ -151,12 +219,21 @@ strong {
|
||||
justify-content: flex-start;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
.card-subtext > p {
|
||||
margin: 0;
|
||||
}
|
||||
.card-subtext > p + p {
|
||||
margin-left: 1em;
|
||||
padding-left: 1em;
|
||||
word-spacing: 0.5em;
|
||||
border-left: thin solid #7A7B7C;
|
||||
}
|
||||
.end-nav {
|
||||
width: 100%;
|
||||
max-width: 46rem;
|
||||
max-width: 47rem;
|
||||
}
|
||||
.pagination-nav {
|
||||
margin: 3em 0 2em 0;
|
||||
margin: 2em 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
@@ -166,10 +243,13 @@ strong {
|
||||
.button {
|
||||
padding: 0.5em 0.6em;
|
||||
background-color: #FFF;
|
||||
text-decoration: none;
|
||||
border-radius: 0.3rem;
|
||||
box-shadow: 0 0.04rem 0.12rem rgba(0,0,0,0.12), 0 0.04rem 0.08rem rgba(0,0,0,0.24);
|
||||
transition: transform 0.1s cubic-bezier(0.25,0.8,0.25,1), box-shadow 0.1s cubic-bezier(0.25,0.8,0.25,1);
|
||||
box-shadow: 0 0.15rem 0.3rem rgba(0,0,0,0.16), 0 0.15rem 0.3rem rgba(0,0,0,0.23);
|
||||
}
|
||||
.button:hover {
|
||||
box-shadow: 0 0.05rem 0.15rem rgba(0,0,0,0.12), 0 0.05rem 0.1rem rgba(0,0,0,0.24);
|
||||
transform: scale(0.97);
|
||||
}
|
||||
.button:active {
|
||||
@@ -270,9 +350,6 @@ footer {
|
||||
body {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
.list-header {
|
||||
margin: 8em 0 6em 0;
|
||||
}
|
||||
.list-header-title {
|
||||
font-weight: normal;
|
||||
font-size: 4.2em;
|
||||
@@ -316,9 +393,6 @@ footer {
|
||||
.post-title {
|
||||
font-size: 2.5em;
|
||||
}
|
||||
.pagination-nav {
|
||||
margin: 4em 0 2em 0;
|
||||
}
|
||||
.button {
|
||||
border-radius: 0.2rem;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user