Skip to content

Commit

Permalink
Hover effect in photo
Browse files Browse the repository at this point in the history
  • Loading branch information
@nathanrdodson
nathanrdodson committed Mar 1, 2024
1 parent 447e931 commit e894138
Show file tree
Hide file tree
Showing 16 changed files with 47,144 additions and 26 deletions.
80 changes: 79 additions & 1 deletion assets/css/404.css
View file
Original file line number Diff line number Diff line change
@@ -1 +1,79 @@
:root{--announcement-bar-height:0px;--show-fade-animation:1}.l-fullscreen{align-items:center;display:flex;height:100vh;justify-content:center}.l-fullscreen__content{padding:0 20px;text-align:center}@media only screen and (min-width:48rem){.l-fullscreen__content{max-width:500px}.l-fullscreen__content.in-subscribe-page{padding:0}}@media only screen and (min-width:64rem){.l-fullscreen__content.in-subscribe-page{max-width:820px}}.m-404-title{color:var(--primary-foreground-color);font-size:9rem;font-weight:700;letter-spacing:3px;line-height:1;margin:0 0 10px}@media only screen and (min-width:48rem){.m-404-title{font-size:12rem;letter-spacing:4px;margin-bottom:5px}}.m-404-subtitle{color:var(--primary-foreground-color);font-size:1.25rem;font-weight:600;letter-spacing:.4px;line-height:1;margin-bottom:20px}@media only screen and (min-width:48rem){.m-404-subtitle{font-size:1.5rem;letter-spacing:.5px}}.m-404-text{font-size:.875em;letter-spacing:.3px;line-height:1.4;margin-bottom:25px;padding:0 20px}@media only screen and (min-width:48rem){.m-404-text{font-size:1rem;margin-bottom:30px;padding:0}}
/** Mixins */ /** Colors */
/** Config */
:root {
--announcement-bar-height: 0px;
--show-fade-animation: 1;
}

.l-fullscreen {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}

.l-fullscreen__content {
text-align: center;
padding: 0 20px;
}
@media only screen and (min-width: 48rem) {
.l-fullscreen__content {
max-width: 500px;
}
}
@media only screen and (min-width: 48rem) {
.l-fullscreen__content.in-subscribe-page {
padding: 0;
}
}
@media only screen and (min-width: 64rem) {
.l-fullscreen__content.in-subscribe-page {
max-width: 820px;
}
}

.m-404-title {
color: var(--primary-foreground-color);
letter-spacing: 3px;
line-height: 1;
font-size: 9rem;
font-weight: 700;
margin: 0 0 10px;
}
@media only screen and (min-width: 48rem) {
.m-404-title {
letter-spacing: 4px;
font-size: 12rem;
margin-bottom: 5px;
}
}

.m-404-subtitle {
color: var(--primary-foreground-color);
letter-spacing: 0.4px;
line-height: 1;
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 20px;
}
@media only screen and (min-width: 48rem) {
.m-404-subtitle {
letter-spacing: 0.5px;
font-size: 1.5rem;
}
}

.m-404-text {
letter-spacing: 0.3px;
line-height: 1.4;
font-size: 0.875em;
padding: 0 20px;
margin-bottom: 25px;
}
@media only screen and (min-width: 48rem) {
.m-404-text {
font-size: 1rem;
padding: 0;
margin-bottom: 30px;
}
}
3,700 changes: 3,699 additions & 1 deletion assets/css/app.css
View file

Large diffs are not rendered by default.

249 changes: 248 additions & 1 deletion assets/css/home.css
View file
Original file line number Diff line number Diff line change
@@ -1 +1,248 @@
:root{--announcement-bar-height:0px;--show-fade-animation:1}.m-featured-slider.swiper{height:350px;margin:-40px -20px 40px;overflow:hidden!important;position:relative;transition:all .25s cubic-bezier(.02,.01,.47,1)}@media only screen and (min-width:48rem){.m-featured-slider.swiper:hover{box-shadow:var(--article-shadow-hover),0 0 0 transparent;transform:translateY(-5px)}.m-featured-slider.swiper{border-radius:10px;height:420px;margin:-40px 10px 20px;width:100%}}@media only screen and (min-width:64rem){.m-featured-slider.swiper{margin:0 20px 40px;overflow:unset;width:calc(66.66667% - 40px)}}.m-featured-slider:not(:root:root){overflow:hidden!important}.m-featured-slider__list{height:100%;list-style-type:none;margin:0;padding:0}@media only screen and (min-width:48rem){.m-featured-slider__list{border-radius:10px}}.m-featured-slider__list__item{height:100%;overflow:hidden}@media only screen and (min-width:48rem){.m-featured-slider__list__item{border-radius:10px}}.m-featured-article{background-color:var(--primary-subtle-color);height:100%;overflow:hidden;position:relative;z-index:1}.m-featured-article:hover .m-featured-article__author{box-shadow:0 4px 8px rgba(0,0,0,.3),0 0 0 transparent}.m-featured-article.no-picture .m-featured-article__picture{background-color:var(--primary-subtle-color)}.m-featured-article__picture{background-color:#000;height:100%;left:0;position:absolute;top:0;width:100%;z-index:1}.m-featured-article__picture div{background-position:50%;background-repeat:no-repeat;background-size:cover;height:100%;opacity:.7;width:100%}.m-featured-article__meta{left:20px;position:absolute;top:20px;z-index:4}@media only screen and (min-width:48rem){.m-featured-article__meta{left:40px;top:40px}}.rtl .m-featured-article__meta{left:auto;right:20px}@media only screen and (min-width:48rem){.rtl .m-featured-article__meta{left:auto;right:40px}}.m-featured-article__author{background-color:#fff;border:2px solid #fff;border-radius:50%;display:block;height:35px;margin-bottom:20px;transition:all .25s cubic-bezier(.02,.01,.47,1);width:35px}.m-featured-article__author div{background-position:50%;background-repeat:no-repeat;background-size:cover;border-radius:50%;height:100%;width:100%}.m-featured-article__tag{color:#fff;font-size:1rem;font-weight:700;letter-spacing:.3px}.m-featured-article__ribbon{align-items:center;background-color:#fff;border-radius:50%;color:#000;display:flex;height:24px;justify-content:center;position:absolute;right:20px;top:26px;width:24px;z-index:2}@media only screen and (min-width:48rem){.m-featured-article__ribbon{border-radius:15px;font-size:.875rem;font-weight:600;height:22px;justify-content:flex-start;padding:0 7px;right:40px;top:47px;width:auto}}.m-featured-article__ribbon span{display:inline-block}@media only screen and (min-width:48rem){.m-featured-article__ribbon span:first-of-type{font-size:.75rem;margin-right:4px}}.m-featured-article__ribbon span:last-of-type{display:none}@media only screen and (min-width:48rem){.m-featured-article__ribbon span:last-of-type{display:block}}.rtl .m-featured-article__ribbon{left:20px;right:auto}@media only screen and (min-width:48rem){.rtl .m-featured-article__ribbon{left:40px;right:auto}.rtl .m-featured-article__ribbon span:first-of-type{margin-left:4px;margin-right:0}}.m-featured-article__content{display:flex;flex-direction:column;height:100%;justify-content:space-between;padding:120px 20px 20px;position:relative;width:100%;z-index:3}@media only screen and (min-width:48rem){.m-featured-article__content{padding:125px 40px 40px}}.m-featured-article__title{color:#fff;font-size:1.625rem;font-weight:600;letter-spacing:.4px;line-height:1.3;margin:0}@media only screen and (min-width:48rem){.m-featured-article__title{font-size:2.25em;letter-spacing:.5px;max-width:80%}}.m-featured-article__timestamp{align-items:center;color:#fff;display:flex;font-size:.875rem;letter-spacing:.2px}.m-featured-article__timestamp span:nth-child(2){padding:0 10px}
/** Mixins */ /** Colors */
/** Config */
:root {
--announcement-bar-height: 0px;
--show-fade-animation: 1;
}

.m-featured-slider.swiper {
position: relative;
overflow: hidden !important;
height: 350px;
margin: -40px -20px 40px;
transition: all 0.25s cubic-bezier(0.02, 0.01, 0.47, 1);
}
@media only screen and (min-width: 48rem) {
.m-featured-slider.swiper:hover {
transform: translateY(-5px);
box-shadow: var(--article-shadow-hover), 0 0 0 transparent;
}
}
@media only screen and (min-width: 48rem) {
.m-featured-slider.swiper {
width: 100%;
height: 420px;
margin: -40px 10px 20px 10px;
border-radius: 10px;
}
}
@media only screen and (min-width: 64rem) {
.m-featured-slider.swiper {
width: calc(66.6666666667% - 40px);
margin: 0 20px 40px 20px;
overflow: unset;
}
}

.m-featured-slider:not(:root:root) {
overflow: hidden !important;
}

.m-featured-slider__list {
list-style-type: none;
padding: 0;
margin: 0;
height: 100%;
}
@media only screen and (min-width: 48rem) {
.m-featured-slider__list {
border-radius: 10px;
}
}

.m-featured-slider__list__item {
height: 100%;
overflow: hidden;
}
@media only screen and (min-width: 48rem) {
.m-featured-slider__list__item {
border-radius: 10px;
}
}

.m-featured-article {
position: relative;
height: 100%;
overflow: hidden;
background-color: var(--primary-subtle-color);
z-index: 1;
}
.m-featured-article:hover .m-featured-article__author {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3), 0 0 0 transparent;
}
.m-featured-article.no-picture .m-featured-article__picture {
background-color: var(--primary-subtle-color);
}

.m-featured-article__picture {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
z-index: 1;
}
.m-featured-article__picture div {
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
opacity: 0.7;
}

.m-featured-article__meta {
position: absolute;
top: 20px;
left: 20px;
z-index: 4;
}
@media only screen and (min-width: 48rem) {
.m-featured-article__meta {
top: 40px;
left: 40px;
}
}

.rtl .m-featured-article__meta {
left: auto;
right: 20px;
}
@media only screen and (min-width: 48rem) {
.rtl .m-featured-article__meta {
left: auto;
right: 40px;
}
}

.m-featured-article__author {
display: block;
width: 35px;
height: 35px;
background-color: #fff;
border: 2px solid #fff;
border-radius: 50%;
margin-bottom: 20px;
transition: all 0.25s cubic-bezier(0.02, 0.01, 0.47, 1);
}
.m-featured-article__author div {
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border-radius: 50%;
}

.m-featured-article__tag {
color: #fff;
letter-spacing: 0.3px;
font-weight: 700;
font-size: 1rem;
}

.m-featured-article__ribbon {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 26px;
right: 20px;
width: 24px;
height: 24px;
color: #000;
background-color: #fff;
border-radius: 50%;
z-index: 2;
}
@media only screen and (min-width: 48rem) {
.m-featured-article__ribbon {
justify-content: flex-start;
top: 47px;
right: 40px;
width: auto;
height: 22px;
padding: 0 7px;
font-size: 0.875rem;
font-weight: 600;
border-radius: 15px;
}
}
.m-featured-article__ribbon span {
display: inline-block;
}
@media only screen and (min-width: 48rem) {
.m-featured-article__ribbon span:first-of-type {
font-size: 0.75rem;
margin-right: 4px;
}
}
.m-featured-article__ribbon span:last-of-type {
display: none;
}
@media only screen and (min-width: 48rem) {
.m-featured-article__ribbon span:last-of-type {
display: block;
}
}

.rtl .m-featured-article__ribbon {
right: auto;
left: 20px;
}
@media only screen and (min-width: 48rem) {
.rtl .m-featured-article__ribbon {
right: auto;
left: 40px;
}
}
@media only screen and (min-width: 48rem) {
.rtl .m-featured-article__ribbon span:first-of-type {
margin-right: 0;
margin-left: 4px;
}
}

.m-featured-article__content {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100%;
height: 100%;
padding: 120px 20px 20px 20px;
position: relative;
z-index: 3;
}
@media only screen and (min-width: 48rem) {
.m-featured-article__content {
padding: 125px 40px 40px 40px;
}
}

.m-featured-article__title {
color: #fff;
letter-spacing: 0.4px;
line-height: 1.3;
font-size: 1.625rem;
font-weight: 600;
margin: 0;
}
@media only screen and (min-width: 48rem) {
.m-featured-article__title {
letter-spacing: 0.5px;
font-size: 2.25em;
max-width: 80%;
}
}

.m-featured-article__timestamp {
display: flex;
align-items: center;
color: #fff;
letter-spacing: 0.2px;
font-size: 0.875rem;
}
.m-featured-article__timestamp span:nth-child(2) {
padding: 0 10px;
}
43 changes: 42 additions & 1 deletion assets/css/listing.css
View file
Original file line number Diff line number Diff line change
@@ -1 +1,42 @@
.l-grid{padding-bottom:20px}@media only screen and (min-width:48rem){.l-grid{display:flex;flex-wrap:wrap;margin:0 -10px}}@media only screen and (min-width:80rem){.l-grid{margin:0 -20px}}@media only screen and (min-width:48rem){.l-grid.centered{justify-content:center}}.m-pagination{align-items:center;display:flex;justify-content:center;margin:0 auto 40px}.m-pagination__text{color:var(--titles-color);display:inline-block;font-size:.875rem;letter-spacing:.2px;text-align:center}@media only screen and (min-width:48rem){.m-pagination__text{font-size:1rem;letter-spacing:.3px}}
/** Mixins */
.l-grid {
padding-bottom: 20px;
}
@media only screen and (min-width: 48rem) {
.l-grid {
display: flex;
flex-wrap: wrap;
margin: 0 -10px;
}
}
@media only screen and (min-width: 80rem) {
.l-grid {
margin: 0 -20px;
}
}
@media only screen and (min-width: 48rem) {
.l-grid.centered {
justify-content: center;
}
}

.m-pagination {
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 40px;
}

.m-pagination__text {
display: inline-block;
color: var(--titles-color);
letter-spacing: 0.2px;
text-align: center;
font-size: 0.875rem;
}
@media only screen and (min-width: 48rem) {
.m-pagination__text {
letter-spacing: 0.3px;
font-size: 1rem;
}
}
Loading

0 comments on commit e894138

Please sign in to comment.