From 71fff054b01920de6b4dc95b13049a083b6551ad Mon Sep 17 00:00:00 2001 From: David Miller Date: Wed, 15 Apr 2020 18:30:48 -0400 Subject: [PATCH] continue the SCSS and Pug refactor - global style cleanup --- dist/assets/img/close-icon.svg | 1 + dist/assets/img/favicon.ico | Bin 0 -> 23462 bytes dist/assets/img/logo.svg | 1 - dist/css/styles.css | 225 ++++------ dist/index.html | 415 ++++++++---------- src/assets/img/close-icon.svg | 1 + src/assets/img/favicon.ico | Bin 0 -> 23462 bytes src/pug/index.pug | 420 +++++++++---------- src/scss/_global.scss | 17 +- src/scss/components/_buttons.scss | 10 + src/scss/layout/_footer.scss | 43 -- src/scss/layout/_masthead.scss | 48 --- src/scss/layout/_portfolio.scss | 140 ------- src/scss/layout/_services.scss | 5 - src/scss/layout/_team.scss | 18 - src/scss/{layout => sections}/_contact.scss | 0 src/scss/sections/_footer.scss | 6 + src/scss/sections/_masthead.scss | 45 ++ src/scss/sections/_portfolio.scss | 90 ++++ src/scss/sections/_team.scss | 14 + src/scss/{layout => sections}/_timeline.scss | 6 +- src/scss/styles.scss | 15 +- 22 files changed, 633 insertions(+), 887 deletions(-) create mode 100644 dist/assets/img/close-icon.svg create mode 100644 dist/assets/img/favicon.ico delete mode 100644 dist/assets/img/logo.svg create mode 100644 src/assets/img/close-icon.svg create mode 100644 src/assets/img/favicon.ico delete mode 100644 src/scss/layout/_footer.scss delete mode 100644 src/scss/layout/_masthead.scss delete mode 100644 src/scss/layout/_portfolio.scss delete mode 100644 src/scss/layout/_services.scss delete mode 100644 src/scss/layout/_team.scss rename src/scss/{layout => sections}/_contact.scss (100%) create mode 100644 src/scss/sections/_footer.scss create mode 100644 src/scss/sections/_masthead.scss create mode 100644 src/scss/sections/_portfolio.scss create mode 100644 src/scss/sections/_team.scss rename src/scss/{layout => sections}/_timeline.scss (97%) diff --git a/dist/assets/img/close-icon.svg b/dist/assets/img/close-icon.svg new file mode 100644 index 0000000..3924563 --- /dev/null +++ b/dist/assets/img/close-icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/dist/assets/img/favicon.ico b/dist/assets/img/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..9356735ca323587d5730a74bd017d9cb2153479b GIT binary patch literal 23462 zcmeI2Ym8l0701uz4!r`E5nmsKGBw!J7NUL^oNvCW6eRJ5T2QE1Vib%Li7*|q0n*&DMgTO~-9{XjsE?EY|;o%Gf&I*P@A7F%Gk z1r~A(tWf385-t_C2zLk%3S+|mde?_^MUNdn{E3_Ia-1r7u5hEUM`+Ig#NQyCE5JJ+ zq^?S=6K)m8g_*RE7Yi@^X9zs+aFZoU_|wAUf>+0W=pWPbJ|!F}91ikPCHaidkG6>A zZ0Y%0Asw>9nEM+cwmx&=cenCcbBMLrM&;A5@o1)P`jT?H@DOOPLFMpMA*DV~$^RPR zfyB7{8TTvh+rqBI_?zW_tZ*>o1U>W-A+JN|`m+447fu&y!g+${zfZP{1+JdYCuM^N zK6v5xe2e;r<#)U=m$F(9ds-;wVU?-F_kAf3|nsE*~qWO@Y`y%a+gg11j$b_>Rg}7IM2=@N&xa-I}aI>p0PI1xp*b6oIi7z=l@^X$fqoPn;Qi9iu~nrOZI+!kBsA0 zK zP@rt&RkcQje>Q~iGPKUTPxh*I;`@C;u5mXX!k(DDo)ym-j@Ku1PV)PM6Ave2 z;>p5H#oHpu zIJ2{Oo|FElNDlhOzZ@Rc8ZpAW!~ALGg6=~xB!VF@EHkk ztt$A1imWHRd|I;Q>$?y~*>-^x9%oZF)-f^St-tpx*jgWjIGOW^v+|-HV`aM>Ee>>5 z^Gx{}p|O;GOYA#@_X)wui*fKk1fHKeJgohO5_nj*Soy#cGk;o-dV`b`4sYz73NPO?--wmp zEjUC7b?`VsdkTyCW+|;)SnJG0{-|J!_ohVB>m44x&zRqbnBS~C(48j43S+;wH~B^^ ziQ{**^j4009e+>#PKO8X^iemPq_j5SMBhzwu$G~U|by@r2C#d)-q=k8FDZ0w1wICSr+h%KAH zzY&|$NxJH|2>X>Nd0$*>(W5bkDZv?0x_QHNr!8L7m%p; z&K(|4nqN)Qf0ocuP#%ASbgEIsSPFn`y8%*uiH6ePL-Vsu<9LJx1a6AFdrO~n1Ht* z{AD7K=YG2kR{dCSrbuW%cvgUDHqRNptmjyDIgmYwmGUl!{}RhNpbMRatqjC*e&wBI zZVtp*rVmJIwH4=AseQD}PhZ&Y@Kg5`VN9^{+!I0Kor`krL|ev6=v?$&u_TUPs4pyc zVk|ZF@#df#t$>m)bl(1sl5glX)JHdk0wZjk(OP|BZ$xa-<#dM!?(>R{PMQBB;jN7r zuT#YP9fvt`CbC1pR$I;H?>PLP6(gbF2TzP4==p?xA3QFBr|8Q6hhxmM+UoqGV?}wH z>|UR^wIa4?=IqqU1>Lnp$BOdm08dK2ijVQypWNP3bgU>}C%ae2brrEib6q!&Ib6I8 z))p}m8awZbAuxRIkC#j;fiYk)@uuP)oG2qNtC9d8`uxxW{Vs^EEz?Ee<5JZbMED&m=I z7`v_b7o_Jm`;Z(hBWpS<9v$_I{f6Zll+VfPJqP`-g{t;qt>JO3mn|e0$mqp>D-AZCkF_#O- zl|o*(^7UESigO?R{kwv<7cR!rpXREa^r()IU)A`P=SUs42&V}(fo~+Ym9LD~pBKD& z0RQy@Jn+FA(?-NGJ{8}aZs$xG?|&wg>l?a%LjHV*I}+n^PQKHtg(nl^neX~Fj*B{4 zSbv4qt9d;S#+AG-imu7rI5LMZo*#_%@SfRJKBowWqA-ShT=<9Jtbxtpa}dvo>Fp#THm>fd$wC?Oa+~5asg9 z@EI{du4{2TCXg30$T8oQXcM<2_?8C{Y0nS=#z(pgHa1Xe)jH)?y>+aHuui$zXbtJ7=MiF?gUzArif(yys5v}3k`1HJhDZ4`)G3dQ zjx>jxlqa(`<<_9e6ScPZhQ=CG<#Ed6^>(d2HZ)$R+?Z5(aH3ou8=S1S#|I~C^1(d4 ztRU%IL+BgrUb)epXtcAgeyThyrT&hhFP5{Opr5UBk-u0T>gMo@+zR=3>)5T=^!iS< zgV$E$b=t7oo@x==ywlFb_AkDd$!zLl5*M^Ak(-LFa%-GcrtmH!WhNMF4G literal 0 HcmV?d00001 diff --git a/dist/assets/img/logo.svg b/dist/assets/img/logo.svg deleted file mode 100644 index 4242ac3..0000000 --- a/dist/assets/img/logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/dist/css/styles.css b/dist/css/styles.css index 058e3eb..6741482 100644 --- a/dist/css/styles.css +++ b/dist/css/styles.css @@ -9959,25 +9959,24 @@ p { } .page-section { - padding: 100px 0; + padding: 6rem 0; } .page-section h2.section-heading { - font-size: 40px; + font-size: 2.5rem; margin-top: 0; - margin-bottom: 15px; + margin-bottom: 1rem; } .page-section h3.section-subheading { - font-size: 16px; + font-size: 1rem; font-weight: 400; font-style: italic; - margin-bottom: 75px; - text-transform: none; font-family: "Droid Serif", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + margin-bottom: 4rem; } @media (min-width: 768px) { section { - padding: 150px 0; + padding: 9rem 0; } } ::-moz-selection { @@ -10009,6 +10008,16 @@ img::-moz-selection { font-weight: 700; } +.btn-social { + height: 2.5rem; + width: 2.5rem; + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0; + border-radius: 100%; +} + #mainNav { padding-top: 1rem; padding-bottom: 1rem; @@ -10079,6 +10088,8 @@ img::-moz-selection { } } header.masthead { + padding-top: 10.5rem; + padding-bottom: 6rem; text-align: center; color: #fff; background-image: url("../assets/img/header-bg.jpg"); @@ -10087,175 +10098,122 @@ header.masthead { background-position: center center; background-size: cover; } -header.masthead .intro-text { - padding-top: 150px; - padding-bottom: 100px; -} -header.masthead .intro-text .intro-lead-in { - font-size: 22px; +header.masthead .masthead-subheading { + font-size: 1.5rem; font-style: italic; - line-height: 22px; + line-height: 1.5rem; margin-bottom: 25px; font-family: "Droid Serif", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; } -header.masthead .intro-text .intro-heading { - font-size: 50px; +header.masthead .masthead-heading { + font-size: 3.25rem; font-weight: 700; - line-height: 50px; - margin-bottom: 25px; + line-height: 3.25rem; + margin-bottom: 2rem; font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; } @media (min-width: 768px) { - header.masthead .intro-text { - padding-top: 300px; - padding-bottom: 200px; + header.masthead { + padding-top: 17rem; + padding-bottom: 12.5rem; } - header.masthead .intro-text .intro-lead-in { - font-size: 40px; + header.masthead .masthead-subheading { + font-size: 2.25rem; font-style: italic; - line-height: 40px; - margin-bottom: 25px; + line-height: 2.25rem; + margin-bottom: 2rem; } - header.masthead .intro-text .intro-heading { - font-size: 75px; + header.masthead .masthead-heading { + font-size: 4.5rem; font-weight: 700; - line-height: 75px; - margin-bottom: 50px; + line-height: 4.5rem; + margin-bottom: 4rem; } } -.service-heading { - margin: 15px 0; - text-transform: none; -} - #portfolio .portfolio-item { - right: 0; - margin: 0 0 15px; + max-width: 25rem; + margin-left: auto; + margin-right: auto; } #portfolio .portfolio-item .portfolio-link { position: relative; display: block; - max-width: 400px; margin: 0 auto; - cursor: pointer; } #portfolio .portfolio-item .portfolio-link .portfolio-hover { + display: flex; position: absolute; width: 100%; height: 100%; - transition: all ease 0.5s; - opacity: 0; background: rgba(254, 209, 54, 0.9); -} -#portfolio .portfolio-item .portfolio-link .portfolio-hover:hover { - opacity: 1; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity ease-in-out 0.25s; } #portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content { - font-size: 20px; - position: absolute; - top: 50%; - width: 100%; - height: 20px; - margin-top: -12px; - text-align: center; + font-size: 1.25rem; color: white; } -#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content i { - margin-top: -12px; -} -#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h3, -#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h4 { - margin: 0; +#portfolio .portfolio-item .portfolio-link:hover .portfolio-hover { + opacity: 1; } #portfolio .portfolio-item .portfolio-caption { - max-width: 400px; - margin: 0 auto; - padding: 25px; + padding: 1.5rem; text-align: center; background-color: #fff; } -#portfolio .portfolio-item .portfolio-caption h4 { - margin: 0; - text-transform: none; +#portfolio .portfolio-item .portfolio-caption .portfolio-caption-heading { + font-size: 1.5rem; + font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + font-weight: 700; + margin-bottom: 0; } -#portfolio .portfolio-item .portfolio-caption p { - font-size: 16px; +#portfolio .portfolio-item .portfolio-caption .portfolio-caption-subheading { font-style: italic; - margin: 0; font-family: "Droid Serif", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; } -#portfolio * { - z-index: 2; -} -@media (min-width: 767px) { - #portfolio .portfolio-item { - margin: 0 0 30px; - } -} .portfolio-modal .modal-dialog { margin: 1rem; max-width: 100vw; } .portfolio-modal .modal-content { - padding: 100px 0; + padding-top: 6rem; + padding-bottom: 6rem; text-align: center; } .portfolio-modal .modal-content h2 { - font-size: 3em; - margin-bottom: 15px; -} -.portfolio-modal .modal-content p { - margin-bottom: 30px; + font-size: 3rem; + line-height: 3rem; } .portfolio-modal .modal-content p.item-intro { - font-size: 16px; font-style: italic; - margin: 20px 0 30px; + margin-bottom: 2rem; font-family: "Droid Serif", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; } +.portfolio-modal .modal-content p { + margin-bottom: 2rem; +} .portfolio-modal .modal-content ul.list-inline { - margin-top: 0; - margin-bottom: 30px; + margin-bottom: 2rem; } .portfolio-modal .modal-content img { - margin-bottom: 30px; -} -.portfolio-modal .modal-content button { - cursor: pointer; + margin-bottom: 2rem; } .portfolio-modal .close-modal { position: absolute; - top: 25px; - right: 25px; - width: 75px; - height: 75px; + top: 1.5rem; + right: 1.5rem; + width: 3rem; + height: 3rem; cursor: pointer; background-color: transparent; } .portfolio-modal .close-modal:hover { opacity: 0.3; } -.portfolio-modal .close-modal .lr { - /* Safari and Chrome */ - z-index: 1051; - width: 1px; - height: 75px; - margin-left: 35px; - /* IE 9 */ - transform: rotate(45deg); - background-color: #212529; -} -.portfolio-modal .close-modal .lr .rl { - /* Safari and Chrome */ - z-index: 1052; - width: 1px; - height: 75px; - /* IE 9 */ - transform: rotate(90deg); - background-color: #212529; -} .timeline { position: relative; @@ -10425,21 +10383,17 @@ header.masthead .intro-text .intro-heading { } } .team-member { - margin-bottom: 50px; + margin-bottom: 3rem; text-align: center; } .team-member img { - width: 225px; - height: 225px; - border: 7px solid rgba(0, 0, 0, 0.1); + width: 14rem; + height: 14rem; + border: 0.5rem solid rgba(0, 0, 0, 0.1); } .team-member h4 { - margin-top: 25px; + margin-top: 1.5rem; margin-bottom: 0; - text-transform: none; -} -.team-member p { - margin-top: 0; } section#contact { @@ -10497,38 +10451,7 @@ section#contact form#contactForm :-ms-input-placeholder { } .footer { - padding: 25px 0; text-align: center; -} -.footer span.copyright { - font-size: 90%; - line-height: 40px; - text-transform: none; + font-size: 0.9rem; font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; -} -.footer ul.quicklinks { - font-size: 90%; - line-height: 40px; - margin-bottom: 0; - text-transform: none; - font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; -} - -ul.social-buttons { - margin-bottom: 0; -} -ul.social-buttons li a { - font-size: 20px; - line-height: 50px; - display: block; - width: 50px; - height: 50px; - transition: all 0.3s; - color: #fff; - border-radius: 100%; - outline: none; - background-color: #212529; -} -ul.social-buttons li a:active, ul.social-buttons li a:focus, ul.social-buttons li a:hover { - background-color: #fed136; } \ No newline at end of file diff --git a/dist/index.html b/dist/index.html index 93d934c..ad27ab2 100644 --- a/dist/index.html +++ b/dist/index.html @@ -6,7 +6,7 @@ Agency - Start Bootstrap Theme - + @@ -35,121 +35,127 @@
-
-
Welcome To Our Studio!
-
It's Nice To Meet You
- Tell Me More -
+
Welcome To Our Studio!
+
It's Nice To Meet You
+ Tell Me More
-
-
-

Services

-

Lorem ipsum dolor sit amet consectetur.

-
+
+

Services

+

Lorem ipsum dolor sit amet consectetur.

-

E-Commerce

+

E-Commerce

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

-

Responsive Design

+

Responsive Design

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

-

Web Security

+

Web Security

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

-
+
-
-
-

Portfolio

-

Lorem ipsum dolor sit amet consectetur.

-
+
+

Portfolio

+

Lorem ipsum dolor sit amet consectetur.

-
-
-
+
+
+
+
+
+ +
+
Threads
+
Illustration
- -
-

Threads

-

Illustration

-
-
-
+
+
+
+
+
+ +
+
Explore
+
Graphic Design
- -
-

Explore

-

Graphic Design

-
-
-
+
+
+
+
+
+ +
+
Finish
+
Identity
- -
-

Finish

-

Identity

-
-
-
+
+
+
+
+
+ +
+
Lines
+
Branding
- -
-

Lines

-

Branding

-
-
-
+
+
+
+
+
+ +
+
Southwest
+
Website Design
- -
-

Southwest

-

Website Design

-
-
-
+
+
+
+
+
+ +
+
Window
+
Photography
- -
-

Window

-

Photography

@@ -158,73 +164,65 @@
-
-
-

About

-

Lorem ipsum dolor sit amet consectetur.

-
-
-
-
-
    -
  • -
    -
    -
    -

    2009-2011

    -

    Our Humble Beginnings

    -
    -

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!

    -
    -
    • -
  • -
    -
    -
    -

    March 2011

    -

    An Agency is Born

    -
    -

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!

    -
    -
    • -
  • -
    -
    -
    -

    December 2012

    -

    Transition to Full Service

    -
    -

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!

    -
    -
    • -
  • -
    -
    -
    -

    July 2014

    -

    Phase Two Expansion

    -
    -

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!

    -
    -
    • -
  • -
    -

    Be Part
    Of Our
    Story!

    -
    -
    • -
-
+
+

About

+

Lorem ipsum dolor sit amet consectetur.

+
    +
  • +
    +
    +
    +

    2009-2011

    +

    Our Humble Beginnings

    +
    +

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!

    +
    +
    • +
  • +
    +
    +
    +

    March 2011

    +

    An Agency is Born

    +
    +

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!

    +
    +
    • +
  • +
    +
    +
    +

    December 2012

    +

    Transition to Full Service

    +
    +

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!

    +
    +
    • +
  • +
    +
    +
    +

    July 2014

    +

    Phase Two Expansion

    +
    +

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!

    +
    +
    • +
  • +
    +

    Be Part
    Of Our
    Story!

    +
    +
    • +
-
+
-
-
-

Our Amazing Team

-

Lorem ipsum dolor sit amet consectetur.

-
+
+

Our Amazing Team

+

Lorem ipsum dolor sit amet consectetur.

@@ -232,17 +230,7 @@

Kay Garland

Lead Designer

- +
@@ -250,17 +238,7 @@

Larry Parker

Lead Marketer

- +
@@ -268,17 +246,7 @@

Diana Pertersen

Lead Developer

- +
@@ -291,17 +259,17 @@
-
- +
+
-
- +
+
-
- +
+
-
- +
+
@@ -309,11 +277,9 @@
-
-
-

Contact Us

-

Lorem ipsum dolor sit amet consectetur.

-
+
+

Contact Us

+

Lorem ipsum dolor sit amet consectetur.

@@ -346,29 +312,14 @@
-