From ddc954ab94bdba3d2542e848cbb1b1e3882fec33 Mon Sep 17 00:00:00 2001 From: micey969 Date: Mon, 30 Apr 2018 15:17:42 -0400 Subject: [PATCH 1/8] style(media): align media--right to alongside projectDetails --- about.html | 20 +++++++++------- assets/css/master.css | 41 +++++++++++++++++++------------- assets/sass/master.scss | 52 ++++++++++++++++++++++++++--------------- journal.html | 12 +++++----- lemariku.html | 35 ++++++++++++++++++--------- mindsky.html | 19 ++++++++------- 6 files changed, 110 insertions(+), 69 deletions(-) diff --git a/about.html b/about.html index 42f3222..5bdf2b1 100644 --- a/about.html +++ b/about.html @@ -20,19 +20,19 @@ Blockchain Product Design & Development Studio - - + + - + - + @@ -99,7 +99,7 @@

Meet the team

Johns Beharry

Johns Beharry

+

Earth

Principal

@@ -171,6 +172,7 @@

Johns Beharry

Early Charlemagne

Early Charlemagne

+

Amsterdam

Web Developer

@@ -179,7 +181,8 @@

Early Charlemagne

Selimira Dimitrova

Selimira Dimitrova

-

Digital Marketing Strategist

+

London, UK

+

Marketing Specialist

@@ -187,6 +190,7 @@

Selimira Dimitrova

Shazelle Isaacs

Shazelle Isaacs

+

SVG

Web Developer

@@ -223,7 +227,7 @@

Shazelle Isaacs

x
Selimira Dimitrova -

Digital Marketing Strategist

+

Marketing Specialist

Selimira is part of the Peak Shift Inc. team and in charge of optimizing digital marketing efforts as well as web design.
Born in Sofia, Bulgaria, Selimira is currently based in London. She's passionate about exploring as many places and cultures as possible. She enjoys photography and recently found out that she is fascinated by the underwater world, ​so scuba diving and snorkeling have become fun pastimes too.
She has worked with Peak Shift Inc. since January 2015 on multiple projects from various industries. She is studying for a Bachelor of Arts in International Marketing with German at the University of Westminster in London with a focus on brand management, research, expansion strategy, and strategic marketing planning.

@@ -237,7 +241,7 @@

Shazelle Isaacs

x
Shazelle Isaacs -

Junior Web Developer

+

Web Developer

Shazelle is the newest member of the Peak Shift team. Hailing from the beautiful multi-island caribbean nation of St. Vincent & the Grenadines, she is fluent in laughing and sarcasm. She enjoys brain teasers and problem solving which lends to her passion of programming.
She graduated with a bachelor's degree in Computer Science and Management and is currently working on finding her niche in this vast technological world. diff --git a/assets/css/master.css b/assets/css/master.css index 60dca2e..b8bf9cb 100644 --- a/assets/css/master.css +++ b/assets/css/master.css @@ -243,7 +243,8 @@ section { text-align: center; } section .contentArea { padding-bottom: 30px; - padding-top: 45px; } + padding-top: 45px; + position: relative; } section .contentArea .articleTitle { font-size: 35px; line-height: 48px; @@ -291,6 +292,13 @@ section { section .contentArea .projectDetails .media--stretched { width: 70vw; margin-left: -7vw; } } + @media only screen and (min-width: 960px) { + section .contentArea .projectDetails .section { + position: absolute; + right: -7vw; + top: 0; + width: 25vw; + margin-top: 60px; } } section .contentArea .projectMeta { width: 100%; text-align: right; @@ -302,6 +310,22 @@ section { @media only screen and (min-width: 768px) { section .contentArea .projectMeta { width: 30%; } } + @media only screen and (min-width: 960px) { + section .contentArea .projectMeta { + /*position: absolute;*/ } } + 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; @@ -350,21 +374,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; diff --git a/assets/sass/master.scss b/assets/sass/master.scss index 3898c0d..ecb8d72 100644 --- a/assets/sass/master.scss +++ b/assets/sass/master.scss @@ -255,6 +255,7 @@ section { .contentArea { padding-bottom: 30px; padding-top: 45px; + position: relative; .articleTitle { font-size: 35px; line-height: 48px; @@ -294,7 +295,7 @@ section { } } } - .media--stretched{ + .media--stretched { width: 100vw; margin-left: -10vw; margin-top: 60px; @@ -308,6 +309,15 @@ section { margin-left: -7vw; } } + .section{ + @media only screen and (min-width: 960px){ + position: absolute; + right: -7vw; + top: 0; + width: 25vw; + margin-top: 60px; + } + } } .projectMeta { width: 100%; @@ -320,6 +330,28 @@ section { @media only screen and (min-width: 768px) { width: 30%; } + @media only screen and (min-width: 960px) { + /*position: absolute;*/ + + } + } + } + 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; } } } @@ -374,24 +406,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; diff --git a/journal.html b/journal.html index 50f1f3f..b404ad4 100644 --- a/journal.html +++ b/journal.html @@ -17,24 +17,24 @@ -Thoughts: Peak Shift Ltd. +Thoughts | Peak Shift Ltd. - + - + - + - + @@ -95,7 +95,7 @@