Skip to content

Align media right and add alt tags #50

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 12 commits into
base: gh-pages
Choose a base branch
from
Open

Align media right and add alt tags #50

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
636c288
Merge pull request #27 from peakshift/11-strech-media-component
micey969 Apr 27, 2018
7a6d40c
merge: pull request #28 from peakshift/chore/12-remove-styles
johnsBeharry Apr 27, 2018
ddc954a
style(media): align media--right to alongside projectDetails
micey969 Apr 30, 2018
bb2c436
style(media): stretch media on mobile and align right on desktop
micey969 Apr 30, 2018
cc60b56
chore(media): update codebase
micey969 May 2, 2018
58a2540
merge: resolve merge conflicts with gh-pages
micey969 May 2, 2018
4920860
Merge branch 'gh-pages' into 32-right-align-media
micey969 May 3, 2018
178f3f7
style(section): first attempt with flexbox solution (#32)
micey969 May 5, 2018
e4b47d0
fix(section): fix media--right display on tablet
micey969 May 6, 2018
e0e616c
style(tags): add alt tags to page images and media--right style. Clos…
micey969 Jul 2, 2018
ea2c41d
docs(index): update index
micey969 Jul 2, 2018
c56d77c
chore(text): remove text from code testing
micey969 Jul 3, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@
<div id="wrapper">
<aside id="mainSide" class="column">
<div class="padded">
<div id="logo"><a href="/"><img src="/assets/i/logo.svg"></a></div>
<div id="logo"><a href="/"><img src="/assets/i/logo.svg" alt="Peak Shift logo"></a></div>
<h2 id="portfolioLinks">We craft digital products built on web, mobile &amp; blockchain &mdash; <a href="/about">Meet The Team</a>.</h2>

<div class="contact-footer typeface-colour-secondary">
Expand All @@ -94,13 +94,13 @@ <h2 id="portfolioLinks">We craft digital products built on web, mobile &amp; blo
</ul>
<p class="typeface-colour-secondary rs small">
<a href="//twitter.com/peakshift">
<img src="/assets/icons/twitter.svg" width="16" height="16">
<img src="/assets/icons/twitter.svg" width="16" height="16" alt="Twitter logo">
</a>
<a href="//facebook.com/peakshift">
<img src="/assets/icons/facebook.svg" width="16" height="16">
<img src="/assets/icons/facebook.svg" width="16" height="16" alt="Facebook logo">
</a>
<a href="//dribbble.com/peakshift">
<img class="dribble" src="/assets/icons/dribbble.svg" width="16" height="14">
<img class="dribble" src="/assets/icons/dribbble.svg" width="16" height="14" alt="Dribble logo">
</a>
</p>
</div>
Expand Down
40 changes: 25 additions & 15 deletions assets/css/master.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -313,6 +313,18 @@ section {
section .contentArea .projectDetails .media--stretched {
width: 70vw;
margin-left: -7vw; } }
section .contentArea .projectDetails .section {
display: flex;
flex-direction: column; }
@media only screen and (min-width: 960px) {
section .contentArea .projectDetails .section {
flex-direction: row; } }
@media only screen and (min-width: 960px) {
section .contentArea .projectDetails .section .media--right {
position: absolute;
right: 0;
margin: 0;
width: 25vw !important; } }
section .contentArea .projectMeta {
width: 100%;
text-align: right;
Expand All @@ -324,6 +336,19 @@ section {
@media only screen and (min-width: 768px) {
section .contentArea .projectMeta {
width: 30%; } }
section p:hover {
color: #141414;
border-color: #CCC; }
section p:hover::before {
color: #CDCDCD; }
section p::before {
content: ' \00b6';
display: inline;
margin: 0 0 0 -2em;
width: 2em;
display: inline-block;
color: #EFEFEF;
font-family: "Lucida Grande", Verdana, "Helvetica", Arial; }

.team-modal {
display: none;
Expand Down Expand Up @@ -372,21 +397,6 @@ article .exdent {
width: 100%;
margin: 0; }

article p:hover {
color: #141414;
border-color: #CCC; }
article p:hover::before {
color: #CDCDCD; }

article p::before {
content: ' \00b6';
display: inline;
margin: 0 0 0 -2em;
width: 2em;
display: inline-block;
color: #EFEFEF;
font-family: "Lucida Grande", Verdana, "Helvetica", Arial; }

article a {
text-decoration: none;
color: #505050;
Expand Down
53 changes: 34 additions & 19 deletions assets/sass/master.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -312,7 +312,7 @@ section {
}
}
}
.media--stretched{
.media--stretched {
width: 100vw;
margin-left: -10vw;
margin-top: 60px;
Expand All @@ -326,6 +326,21 @@ section {
margin-left: -7vw;
}
}
.section{
display: flex;
flex-direction: column;
@media only screen and (min-width: 960px){
flex-direction: row;
}
.media--right {
@media only screen and (min-width: 960px){
position: absolute;
right: 0;
margin: 0;
width: 25vw !important;
}
}
}
}
.projectMeta {
width: 100%;
Expand All @@ -340,6 +355,24 @@ section {
}
}
}
p {
&:hover {
color: #141414;
border-color: #CCC;
&::before {
color: #CDCDCD;
}
}
&::before {
content: ' \00b6';
display: inline;
margin: 0 0 0 -2em;
width: 2em;
display: inline-block;
color: #EFEFEF;
font-family: "Lucida Grande", Verdana, "Helvetica", Arial;
}
}
}

.team-modal {
Expand Down Expand Up @@ -392,24 +425,6 @@ article{
margin: 0;
}
}
p {
&:hover {
color: #141414;
border-color: #CCC;
&::before {
color: #CDCDCD;
}
}
&::before {
content: ' \00b6';
display: inline;
margin: 0 0 0 -2em;
width: 2em;
display: inline-block;
color: #EFEFEF;
font-family: "Lucida Grande", Verdana, "Helvetica", Arial;
}
}
a {
text-decoration: none;
color: #505050;
Expand Down
26 changes: 17 additions & 9 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@
<div id="wrapper">
<aside id="mainSide" class="column">
<div class="padded">
<div id="logo"><a href="/"><img src="/assets/i/logo.svg"></a></div>
<div id="logo"><a href="/"><img src="/assets/i/logo.svg" alt="Peak Shift logo"></a></div>
<h2 id="portfolioLinks">We craft digital products built on web, mobile &amp; blockchain &mdash; <a href="/about">Meet The Team</a>.</h2>

<div class="contact-footer typeface-colour-secondary">
Expand All @@ -96,13 +96,13 @@ <h2 id="portfolioLinks">We craft digital products built on web, mobile &amp; blo
</ul>
<p class="typeface-colour-secondary rs small">
<a href="//twitter.com/peakshift">
<img src="/assets/icons/twitter.svg" width="16" height="16">
<img src="/assets/icons/twitter.svg" width="16" height="16" alt="Twitter logo">
</a>
<a href="//facebook.com/peakshift">
<img src="/assets/icons/facebook.svg" width="16" height="16">
<img src="/assets/icons/facebook.svg" width="16" height="16" alt="Facebook logo">
</a>
<a href="//dribbble.com/peakshift">
<img class="dribble" src="/assets/icons/dribbble.svg" width="16" height="14">
<img class="dribble" src="/assets/icons/dribbble.svg" width="16" height="14" alt="Dribble logo">
</a>
</p>
</div>
Expand All @@ -115,7 +115,9 @@ <h2 id="portfolioLinks">We craft digital products built on web, mobile &amp; blo

<section id="mainContent" class="column">
<figure class="active" style="background-image:url('/assets/content/lemariku/lemariku-bg-2.png');">
<div class="padded"><img class="fill" src="/assets/content/lemariku/header-details-2.png?v=1"></div>
<div class="padded">
<img class="fill" src="/assets/content/lemariku/header-details-2.png?v=1" alt="Lemariku Project Designs">
</div>
</figure>
<div class="contentArea padded clearfix">
<h3 class="projectTitle">Branding &amp; UI for a pre-loved fashion marketplace</h3>
Expand All @@ -135,20 +137,26 @@ <h4>Strategy &amp; Roadmap</h4>
</figure>

<h4>Branding</h4>
<p>The brand was specifically catered to the Indonesian market. The brand name Lemariku means &#8220;my closet&#8221;, which comes from &#8220;lemari&#8221; meaning <em>closet</em> and &#8220;ku&#8221; meaning <em>my</em> in Indonesian.
<p>The brand was specifically catered to the Indonesian market. The brand name Lemariku means &#8220;my closet&#8221;, which comes from &#8220;lemari&#8221; meaning <em>closet</em> and &#8220;ku&#8221; meaning <em>my</em> in Indonesian. </p>

<p>The logo was created to clearly visualise that it is a fashion application and add to the meaning of the name.</p>

<figure class="active media--stretched">
<div class="padded"><img class="fill" src="/assets/content/lemariku/branding.svg?v=1"></div>
<div class="padded">
<img class="fill" src="/assets/content/lemariku/branding.svg?v=1" alt="Lemariku Branding Process">
</div>
</figure>

<h4>User Interface &amp; Expereince</h4>
<h4>User Interface &amp; Experience</h4>

<p>Sellers mainly used Instagram to reach potential buyers to advertise their fashion items so we wanted to create an experience that was familliar, with while providing tools to address the challenges they had with current soltuions</p>

<p>In order to encourage sellers to share their profiles, we wanted to provide some personalistion options so we allowed them to choose a colour from a pallete that would distinguish their profiles and items in search results.</p>

<figure class="active media--stretched" style="background-color: #FEF7F9">
<div class="padded"><img class="fill" src="/assets/content/lemariku/lemariku-top.png?v=1"></div>
<div class="padded">
<img class="fill" src="/assets/content/lemariku/lemariku-top.png?v=1" alt="Lemariku Interface Design">
</div>
</figure>

<h4>Technology Stack</h4>
Expand Down
10 changes: 5 additions & 5 deletions journal.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@
<div id="wrapper">
<aside id="mainSide" class="column">
<div class="padded">
<div id="logo"><a href="/"><img src="/assets/i/logo.svg"></a></div>
<div id="logo"><a href="/"><img src="/assets/i/logo.svg" alt="Peak Shift logo"></a></div>
<h2 id="portfolioLinks">
We craft digital products built on <a href="/mindsky">web</a>, <a href="/lemariku">mobile</a> &amp; blockchain.
<br><br>Learn more <a href="/about">about us</a>.
Expand Down Expand Up @@ -93,13 +93,13 @@ <h2 id="portfolioLinks">
</ul>
<p class="typeface-colour-secondary rs small">
<a href="//twitter.com/peakshift">
<img src="/assets/icons/twitter.svg" width="16" height="16">
<img src="/assets/icons/twitter.svg" width="16" height="16" alt="Twitter logo">
</a>
<a href="//facebook.com/peakshift">
<img src="/assets/icons/facebook.svg" width="16" height="16">
<img src="/assets/icons/facebook.svg" width="16" height="16" alt="Facebook logo">
</a>
<a href="//dribbble.com/peakshift">
<img class="dribble" src="/assets/icons/dribbble.svg" width="16" height="14">
<img class="dribble" src="/assets/icons/dribbble.svg" width="16" height="14" alt="Dribble logo">
</a>
</p>
</div>
Expand All @@ -116,7 +116,7 @@ <h2 class="articleTitle">The state of publishing: Lorem ipsum dolor sit amet, co
<p>MindSky is an online <a href="#">platform</a> connecting current university students and graduates in Rwanda with employment opportunities .</p>

<figure class=" exdent active">
<img class="fill" src="/assets/i/sketch.png">
<img class="fill" src="/assets/i/sketch.png" alt="Planning Sketch">
</figure>

<p>Employers post their internships and job opportunities on the MindSky job board. MindSky members apply for openings directly on the platform using our professionally-formatted online profile builder as their application document. Hiring managers log in, view, and sort applications as they come in.</p>
Expand Down
26 changes: 17 additions & 9 deletions lemariku.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@
<div id="wrapper">
<aside id="mainSide" class="column">
<div class="padded">
<div id="logo"><a href="/"><img src="/assets/i/logo.svg"></a></div>
<div id="logo"><a href="/"><img src="/assets/i/logo.svg" alt="Peak Shift logo"></a></div>
<h2 id="portfolioLinks">We craft digital products built on web, mobile &amp; blockchain &mdash; <a href="/about">Meet The Team</a>.</h2>

<div class="contact-footer typeface-colour-secondary">
Expand All @@ -96,13 +96,13 @@ <h2 id="portfolioLinks">We craft digital products built on web, mobile &amp; blo
</ul>
<p class="typeface-colour-secondary rs small">
<a href="//twitter.com/peakshift">
<img src="/assets/icons/twitter.svg" width="16" height="16">
<img src="/assets/icons/twitter.svg" width="16" height="16" alt="Twitter logo">
</a>
<a href="//facebook.com/peakshift">
<img src="/assets/icons/facebook.svg" width="16" height="16">
<img src="/assets/icons/facebook.svg" width="16" height="16" alt="Facebook logo">
</a>
<a href="//dribbble.com/peakshift">
<img class="dribble" src="/assets/icons/dribbble.svg" width="16" height="14">
<img class="dribble" src="/assets/icons/dribbble.svg" width="16" height="14" alt="Dribble logo">
</a>
</p>
</div>
Expand All @@ -115,7 +115,11 @@ <h2 id="portfolioLinks">We craft digital products built on web, mobile &amp; blo

<section id="mainContent" class="column">
<figure class="active" style="background-image:url('/assets/content/lemariku/lemariku-bg-2.png');">
<a href="/lemariku"><div class="padded"><img class="fill" src="/assets/content/lemariku/header-details-2.png?v=1"></div></a>
<a href="/lemariku">
<div class="padded">
<img class="fill" src="/assets/content/lemariku/header-details-2.png?v=1" alt="Lemariku Project Designs">
</div>
</a>
</figure>
<div class="contentArea padded clearfix">
<h3 class="projectTitle">Branding &amp; UI for a pre-loved fashion marketplace</h3>
Expand All @@ -126,7 +130,7 @@ <h3 class="projectTitle">Branding &amp; UI for a pre-loved fashion marketplace</

<p>The platform is specifically created and catered to the purchase behaviour to the indonesian consumer allowing for cash payments and utilising local delivery services like GO-Jek.</p>

<p>In a saturated market, it was our first challenge to clearly communicated the OVP and differentiate Lemariku from the competition. Additional to that was to designing and developing an interface that is intuitive to use for the Indonesian target audience, who find websites too complicated, and don't trust online payments.
<p>In a saturated market, it was our first challenge to clearly communicated the OVP and differentiate Lemariku from the competition. Additional to that was to designing and developing an interface that is intuitive to use for the Indonesian target audience, who find websites too complicated, and don't trust online payments.</p>

<h4>Strategy &amp; Roadmap</h4>
<p>Our collaboration with Lemariku started from the inception of the idea, and when they had only a hypothesis and rough idea for the application.</p>
Expand All @@ -139,13 +143,14 @@ <h4>Strategy &amp; Roadmap</h4>

<p>We worked closely with the founders to set objectives which helped us plan a product development roadmap for which we then broke down into a serise of agile sprints.</p>

<figure class="active media--stretched" style="background-image: url(/assets/content/lemariku/roadmap.svg); height: 300px;">
<figure class="active media--stretched" style="background-image:url('/assets/content/lemariku/roadmap.svg');height: 300px;">
</figure>

<h4>Branding</h4>
<p>The brand was specifically catered to the Indonesian market. The brand name Lemariku means “my closet”, which comes from ‘lemari’ meaning ‘closet’ and ‘ku’ meaning ‘my’ in Indonesian.
<p>The brand was specifically catered to the Indonesian market. The brand name Lemariku means “my closet”, which comes from ‘lemari’ meaning ‘closet’ and ‘ku’ meaning ‘my’ in Indonesian.</p>

<p>The logo was created to clearly visualise that it is a fashion application and add to the meaning of the name.</p>

<figure class="active media--stretched" style="background-color: #FEF7F9; height: 520px;">
</figure>

Expand All @@ -154,8 +159,11 @@ <h4>User Interface &amp; Expereince</h4>
<p>Sellers mainly used Instagram to reach potential buyers to advertise their fashion items so we wanted to create an experience that was familliar, with while providing tools to address the challenges they had with current soltuions</p>

<p>In order to encourage sellers to share their profiles, we wanted to provide some personalistion options so we allowed them to choose a colour from a pallete that would distinguish their profiles and items in search results.</p>

<figure class="active media--stretched" style="background-color: #FEF7F9">
<div class="padded"><img class="fill" src="/assets/content/lemariku/lemariku-top.png?v=1"></div>
<div class="padded">
<img class="fill" src="/assets/content/lemariku/lemariku-top.png?v=1" alt="Lemariku Interface Design">
</div>
</figure>

<h4>Technology Stack</h4>
Expand Down
12 changes: 6 additions & 6 deletions mindsky.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@
<div id="wrapper">
<aside id="mainSide" class="column">
<div class="padded">
<div id="logo"><a href="/"><img src="/assets/i/logo.svg"></a></div>
<div id="logo"><a href="/"><img src="/assets/i/logo.svg" alt="Peak Shift logo"></a></div>
<h2 id="portfolioLinks">We craft digital products built on web, mobile &amp; blockchain &mdash; <a href="/about">Meet The Team</a>.</h2>

<div class="contact-footer typeface-colour-secondary">
Expand All @@ -97,13 +97,13 @@ <h2 id="portfolioLinks">We craft digital products built on web, mobile &amp; blo
</ul>
<p class="typeface-colour-secondary rs small">
<a href="//twitter.com/peakshift">
<img src="/assets/icons/twitter.svg" width="16" height="16">
<img src="/assets/icons/twitter.svg" width="16" height="16" alt="Twitter logo">
</a>
<a href="//facebook.com/peakshift">
<img src="/assets/icons/facebook.svg" width="16" height="16">
<img src="/assets/icons/facebook.svg" width="16" height="16" alt="Facebook logo">
</a>
<a href="//dribbble.com/peakshift">
<img class="dribble" src="/assets/icons/dribbble.svg" width="16" height="14">
<img class="dribble" src="/assets/icons/dribbble.svg" width="16" height="14" alt="Dribble logo">
</a>
</p>
</div>
Expand All @@ -116,7 +116,7 @@ <h2 id="portfolioLinks">We craft digital products built on web, mobile &amp; blo

<section id="mainContent" class="column">
<figure class="active" style="background-image:url('/assets/content/mindsky/header-bg-light.png'); background-color: #F6F6F6;">
<a href="/mindsky"><div class="padded"><img class="fill" src="/assets/content/mindsky/header-details-2.png?v=03"></div></a>
<a href="/mindsky"><div class="padded"><img class="fill" src="/assets/content/mindsky/header-details-2.png?v=03" alt="MindSky Project Design"></div></a>
</figure>
<div class="contentArea padded clearfix">
<h3 class="projectTitle articleTitle">Building an Employment Platform for East Africa</h3>
Expand All @@ -142,7 +142,7 @@ <h4>3. Back Office</h4>
<p>Hiring managers log in, view, and sort applications as they come in then pass them onto employers.</p>
<figure style="background-color: #FCFCFC;" class="media--stretched active">
<div class="padded">
<img class="fill" src="/assets/content/mindsky/backoffice.png?v=03">
<img class="fill" src="/assets/content/mindsky/backoffice.png?v=03" alt="MindSky Backoffice Design">
</div>
</figure>

Expand Down