about styling complete
This commit is contained in:
ManjaroOne666
parent
9c4db9d0f9
commit
cc9677da77
|
|
@ -10,12 +10,27 @@ html {
|
|||
body {
|
||||
font-family: 'Raleway', sans-serif;
|
||||
font-size: 100%;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
a {
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
.content {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
margin: 0 0 3rem;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
color: $color__neutral-400;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
background-color: initial;
|
||||
@include font-cursive();
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -87,3 +87,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.background-tint {
|
||||
background-color: rgba($color__primary-100, .7);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@ $z-index-top: 10;
|
|||
padding: 0 0 0 $site-menu__header-width;
|
||||
}
|
||||
|
||||
background-color: rgba(black, .1); // TEMP
|
||||
background-color: $color__neutral-100;
|
||||
}
|
||||
|
||||
.content-container {
|
||||
|
|
@ -75,13 +75,13 @@ $z-index-top: 10;
|
|||
top: 0;
|
||||
right: 0;
|
||||
|
||||
padding: .5rem;
|
||||
padding: .5rem 1rem 2rem;
|
||||
|
||||
@media (min-width: $bp__layout) {
|
||||
width: 50%;
|
||||
padding: 1rem;
|
||||
|
||||
background-color: rgba(0, 0, 0, .3);
|
||||
background-color: rgba(0, 0, 0, .5);
|
||||
}
|
||||
|
||||
color: #fff; // TEMP
|
||||
|
|
@ -90,18 +90,24 @@ $z-index-top: 10;
|
|||
.page-heading {
|
||||
z-index: $z-index-top;
|
||||
position: relative;
|
||||
margin: 2rem 1rem 1rem 2rem;
|
||||
margin: 1rem;
|
||||
|
||||
@media (min-width: $bp__layout) {
|
||||
width: 14em;
|
||||
max-width: calc(50% - #{$site-menu__header-width} - 3rem);
|
||||
margin: 2rem 1rem 1rem 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
@include font-title();
|
||||
color: $color__neutral-900;
|
||||
text-align: center;
|
||||
|
||||
@media (min-width: $bp__layout) {
|
||||
font-size: 3.7vw;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@media (min-width: 90em) {
|
||||
font-size: 3.5rem;
|
||||
|
|
@ -115,5 +121,11 @@ $z-index-top: 10;
|
|||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
opacity: .5;
|
||||
|
||||
@media (min-width: $bp__layout) {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
122
pages/about.vue
122
pages/about.vue
|
|
@ -1,34 +1,47 @@
|
|||
<template>
|
||||
<ContentPage heading="The About Page Heading">
|
||||
<h2>I Imagine Myself</h2>
|
||||
<blockquote><p>"As a photographic artist, my creative pursuit is to escape the attempts to categorize, characterize, compartmentalize, explain, or limit my photographic expression. It is always pleasing to see how observers respond with delight to the ultimate visualizations of my quest. My fondest wish is to pursue my life as a photographer, unbridled and always with a resolve to improve and be the best I can, with a constant yearning to be better."</p></blockquote>
|
||||
<ContentPage heading="About Me" class="about">
|
||||
<div class="about-content">
|
||||
<h2 class="heading heading-top">I Imagine Myself</h2>
|
||||
<blockquote class="quote">
|
||||
<p class="quote-text">"As a photographic artist, my creative pursuit is to escape the attempts to categorize, characterize, compartmentalize, explain, or limit my photographic expression. It is always pleasing to see how observers respond with delight to the ultimate visualizations of my quest. My fondest wish is to pursue my life as a photographer, unbridled and always with a resolve to improve and be the best I can, with a constant yearning to be better."</p>
|
||||
</blockquote>
|
||||
<ul class="about-list">
|
||||
<li>I imagine myself peering from behind a photographer's blind, always observing, but rarely participating.</li>
|
||||
<li>I have an ephemeral sensation of being a camouflaged moth on a tree.</li>
|
||||
<li>I imagine seeing my life from that perspective, that tree, as a solitary instant in eternity.</li>
|
||||
<li>Preserving life's moments and sharing them, makes the most, I think, of my photographic proclivity.</li>
|
||||
<li>I get great satisfaction from the responses viewers have to these images of my perceived realities.</li>
|
||||
<li>As an artist and photographer, this is my mantra.</li>
|
||||
<li>I am convinced that my creative potential escapes the propensity to categorize, characterize, compartmentalize, explain, or limit my photographic expression.</li>
|
||||
<li>I will succeed in a career as a photographer, and I always resolve to improve, and be the best I can; however, I want to be much better than that.</li>
|
||||
<li class="about-list__item">I imagine myself peering from behind a photographer's blind, always observing, but rarely participating.</li>
|
||||
<li class="about-list__item">I have an ephemeral sensation of being a camouflaged moth on a tree.</li>
|
||||
<li class="about-list__item">I imagine seeing my life from that perspective, that tree, as a solitary instant in eternity.</li>
|
||||
<li class="about-list__item">Preserving life's moments and sharing them, makes the most, I think, of my photographic proclivity.</li>
|
||||
<li class="about-list__item">I get great satisfaction from the responses viewers have to these images of my perceived realities.</li>
|
||||
<li class="about-list__item">As an artist and photographer, this is my mantra.</li>
|
||||
<li class="about-list__item">I am convinced that my creative potential escapes the propensity to categorize, characterize, compartmentalize, explain, or limit my photographic expression.</li>
|
||||
<li class="about-list__item">I will succeed in a career as a photographer, and I always resolve to improve, and be the best I can; however, I want to be much better than that.</li>
|
||||
</ul>
|
||||
<h2>The Essence of the Image</h2>
|
||||
<h2 class="heading">The Essence of the Image</h2>
|
||||
<p>The photographer Marc Leopold was born in Chicago, Illinois in 1964. He credits his artistry in photography to the benevolence of renowned mentors, and to his own constant search for the resources, intricacies and techniques that capture the essence of the image.</p>
|
||||
<p>While Marc's work tends toward nature and representational photography, he also uses his talents in both formal and commercial situations. He works, there, to achieve the same essence that he strives for when shooting nature.</p>
|
||||
<p>Marc's images are in many private collections and corporate and educational institutions. They have also appeared in a number of publications. His photographs appear in several books, including 'Two Weeks the Raven Sings', by David Reston, and in 'Once we Talk', by Jayne deVeres. Marc has also published in a wide variety of magazines and newspapers, including The International Review of Irish American Art, Erik Tweeds' Two Worlds Magazine, EVE Magazine, Parfolio, Essence, The Chicago Tribune, Chicago Derry News, Business News Today, and One Day Journal.</p>
|
||||
<p>Marc's images are in many private collections and corporate and educational institutions. They have also appeared in a number of publications. His photographs appear in several books, including 'Two Weeks the Raven Sings', by David Reston, and in 'Once we Talk', by Jayne deVeres.</p>
|
||||
<p>Marc has also published in a wide variety of magazines and newspapers, including The International Review of Irish American Art, Erik Tweeds' Two Worlds Magazine, EVE Magazine, Parfolio, Essence, The Chicago Tribune, Chicago Derry News, Business News Today, and One Day Journal.</p>
|
||||
<p>In addition to this media exposure, Marc has exhibited at The Chicago College of Art, The Irish American Museum in Detroit, The Sur Dez Gallery in San Antonio, Phoenix City Gallery in Arizona, Wellner Department stores nationwide, Torren Gallery in California, and The Tide Gallery in Boston, and elsewhere.</p>
|
||||
<p>Marc's artistic philosophy is based on his ability to capture a fleeting moment, a solitary instant in eternity, where he feels almost transparent, like a camouflaged moth in the midst of a lush green forest, defining for posterity through his photography an elusive moment in life, captured to share with others.</p>
|
||||
</div>
|
||||
<BackgroundImageLoader slot="background"
|
||||
class="background"
|
||||
image-url="https://via.placeholder.com/1920x1080"
|
||||
>
|
||||
<div slot="overlay" class="background-tint background-overlay"></div>
|
||||
</BackgroundImageLoader>
|
||||
</ContentPage>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ContentPage from '@/components/ContentPage'
|
||||
import BackgroundImageLoader from '@/components/BackgroundImageLoader'
|
||||
|
||||
export default {
|
||||
name: 'HomePage',
|
||||
|
||||
components: {
|
||||
ContentPage
|
||||
ContentPage,
|
||||
BackgroundImageLoader,
|
||||
},
|
||||
|
||||
data() {
|
||||
|
|
@ -39,5 +52,86 @@ export default {
|
|||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.about {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.about-content {
|
||||
color: $color__neutral-800;
|
||||
text-shadow: 0 0 3px #000;
|
||||
|
||||
@media (min-width: 60em) {
|
||||
padding: 1rem 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.about-content .quote {
|
||||
font-size: 1.4em;
|
||||
margin-bottom: 1.5rem;
|
||||
padding: 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.quote-text {
|
||||
color: $color__neutral-700;
|
||||
text-shadow: 0 0 3px #000;
|
||||
}
|
||||
|
||||
.heading {
|
||||
color: $color__neutral-900;
|
||||
font-weight: 300;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.heading-top {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.content .about-list {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
text-align: center;
|
||||
font-size: 1.2em;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 4.5rem;
|
||||
}
|
||||
|
||||
.about-list__item {
|
||||
position: relative;
|
||||
padding: 1.25rem 0 1.25rem;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 2rem;
|
||||
height: 1px;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
transform: translateX(-50%);
|
||||
|
||||
background-color: rgba($color__neutral-500, .6);
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-bottom: 0;
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.background-overlay {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
:image-urls="backgroundImageUrls"
|
||||
:active-index="activeIndex"
|
||||
>
|
||||
<div slot="overlay" class="background preloader-overlay"></div>
|
||||
<div slot="overlay" class="background-tint background preloader-overlay"></div>
|
||||
</BackgroundImagePreloader>
|
||||
|
||||
<ul class="services-list">
|
||||
|
|
@ -245,7 +245,6 @@ export default {
|
|||
|
||||
.preloader-overlay {
|
||||
z-index: 10;
|
||||
background-color: rgba($color__primary-100, .7);
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue