From a969a741662be24c72fad1a8b6b882fa9d1605af Mon Sep 17 00:00:00 2001 From: Arthur C Edwards Date: Tue, 16 Jul 2024 12:40:36 -0400 Subject: [PATCH] new styles added for masion grid. not quite working. --- css/labs.css | 538 +++++++++++++++++++++++++++++++++++ css/masonry.css | 123 ++++++++ index-playground.html | 211 +++----------- index.html | 2 +- scss/masion-grid-lab.css | 488 +++++++++++++++++++++++++++++++ scss/masion-grid-lab.min.css | 1 + scss/masion-grid-lab.scss | 518 +++++++++++++++++++++++++++++++++ scss/masion-grid.css | 111 ++++++++ scss/masion-grid.min.css | 1 + scss/masion-grid.scss | 112 ++++++++ 10 files changed, 1929 insertions(+), 176 deletions(-) create mode 100644 css/labs.css create mode 100644 css/masonry.css create mode 100644 scss/masion-grid-lab.css create mode 100644 scss/masion-grid-lab.min.css create mode 100644 scss/masion-grid-lab.scss create mode 100644 scss/masion-grid.css create mode 100644 scss/masion-grid.min.css diff --git a/css/labs.css b/css/labs.css new file mode 100644 index 0000000..c033fb9 --- /dev/null +++ b/css/labs.css @@ -0,0 +1,538 @@ +/** + * RESET + * Reference: http://meyerweb.com/eric/tools/css/reset/ + */ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +main, menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} + +article, aside, details, figcaption, figure, +footer, header, hgroup, main, menu, nav, section { + display: block; +} + +body { + line-height: 1.618; + font-family: Arial, Helvetica, sans-serif; +} + +ol, ul { + list-style: none; +} + +blockquote, q { + quotes: none; +} + +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +a { + text-decoration: none; +} + +code, pre, samp { +font-family: monospace; +} + +/** + * BASIC TYPE + */ + +img, video { + max-width: 100%; + vertical-align: middle; +} + +p { + margin: 0 0 1em; +} + +h1, h2, h3, h4 { + margin: .5em 0 .75em; + line-height: 1.3; +} + +h1 { + font-size: 1.5em; +} + +h2 { + font-size: 1.25em; +} + +h3 { + font-size: 1.125em; +} + +h4 { + font-size: 1em; +} + +/** + * BOX HACKING + */ + +html { + box-sizing: border-box; +} + +*, +*:before, +*:after { + box-sizing: inherit; +} + +/** + * CLEAR FLOATS + * Reference: http://w3bits.com/clearfix + */ + +.cf:after, +.lab-grid:after { + content: ""; + display: table; + clear: both; +} + +/** + * CONTENT WRAPPER + */ + +.wrapper { + margin-left: auto; + margin-right: auto; + padding-right: 1.5em; + padding-left: 1.5em; + max-width: 1080px; +} + +/** +* ICON SYSTEM +*/ + +.icon { + height: 1em; + width: 1em; + display: inline-block; + vertical-align: middle; + fill: currentColor; +} + +/** + * BUTTONS + */ + +.buttons { + margin: 1.5em 0; +} + +.button { + padding: 1em 1.5em; + color: rgba(255, 255, 255, 0.75); + border-radius: 3px; +} + +.button:hover { + color: rgba(255, 255, 255, 0.9); +} + +.green-sea { + background: #16a085; +} + +.button.green-sea:hover { + background: #1abc9c; +} + +.belize-hole { + background: #2980b9; +} + +.button.belize-hole:hover { + background: #3498db; +} + +.pomegranate { + background: #c0392b; +} + +.button.pomegranate:hover { + background: #e74c3c; +} + +/** + * HYPERLINKS & NAVIGATION + */ + +.lab-nav { + width: 100%; +} + +.lab-nav--fixed { + position: fixed; +} + +.lab-nav--top { + top: 0; +} + +.lab-nav--bottom { + bottom: 0; +} + +.lab-nav, +.lab-follow { + font-size: 13px; + line-height: 1; +} + +.lab-theme-light body { + color: rgba(0, 0, 0, .75); +} + +.lab-theme-light .lab-nav, +.lab-theme-light .lab-follow { + background: rgba(0, 0, 0, 0.05); +} + +.lab-theme-light .lab-nav, +.lab-theme-light .lab-follow, +.lab-theme-light .lab-nav a { + color: rgba(0, 0, 0, 0.35); +} + +.lab-theme-light .lab-nav a:hover, +.lab-theme-light .lab-nav a:active, +.lab-theme-light .lab-nav a:focus, +.lab-theme-light .lab-follow:hover, +.lab-theme-light .lab-follow:active, +.lab-theme-light .lab-follow:focus { + background: rgba(0, 0, 0, 0.1); + color: rgba(0, 0, 0, 0.5); +} + +.lab-theme-light .lab-article-button { + color: rgba(0, 0, 0, .25); + border: 3px solid rgba(0, 0, 0, .1); +} + +.lab-theme-light .lab-article-button:hover, +.lab-theme-light .lab-article-button:active, +.lab-theme-light .lab-article-button:focus { + color: rgba(0, 0, 0, .3); + border-color: rgba(0, 0, 0, .15); +} + +.lab-theme-dark body { + color: rgba(255, 255, 255, .75); +} + +.lab-theme-dark .lab-nav, +.lab-theme-dark .lab-follow { + background: rgba(255, 255, 255, 0.05); +} + +.lab-theme-dark .lab-nav, +.lab-theme-dark .lab-nav a, +.lab-theme-dark .lab-follow { + color: rgba(255, 255, 255, 0.35); +} + +.lab-theme-dark .lab-nav a:hover, +.lab-theme-dark .lab-nav a:active, +.lab-theme-dark .lab-nav a:focus, +.lab-theme-dark .lab-follow:hover, +.lab-theme-dark .lab-follow:active, +.lab-theme-dark .lab-follow:focus { + background: rgba(255, 255, 255, 0.1); + color: rgba(255, 255, 255, 0.5); +} + +.lab-theme-dark .lab-article-button { + color: rgba(255, 255, 255, .25); + border: 3px solid rgba(255, 255, 255, .1); +} + +.lab-theme-dark .lab-article-button:hover, +.lab-theme-dark .lab-article-button:active, +.lab-theme-dark .lab-article-button:focus { + color: rgba(255, 255, 255, .3); + border-color: rgba(255, 255, 255, .15); +} + +.lab-follow, +.lab-article-link, +.lab-share a { + padding: 1.25em .75em; + display: inline-block; + vertical-align: bottom; + text-decoration: none; +} + +.lab-follow, +.lab-article-link span, +.lab-share-link span { + letter-spacing: 1px; + text-transform: uppercase; +} + +.lab-follow { + display: none; +} + +.lab-follow .icon { + vertical-align: top; +} + +.lab-article-link { + float: left; +} + +.lab-share { + float: right; + text-align: right; +} + +.lab-share ul { + margin: 0; +} + +.lab-share li { + display: inline; + margin: 0; +} + +.lab-article-button { + font-weight: 700; + display: block; + margin: 2em 0; + padding: 1.25em; + text-align: center; +} + +/** + * Grid + */ +.lab-grid { + width: 100%; +} + +.lab-grid .lab-grid-cell { + margin-bottom: 1.5em; +} + +.lab-grid .lab-grid-cell--mb-2x { + margin-bottom: 3em; +} + +.lab-grid-cell { + padding-left: 0; +} + +.w-full { + width: 100%; +} + +.w-three-quarters { + width: 75%; +} + +.w-two-thirds { + width: 66.66666%; +} + +.w-half { + width: 50%; +} + +.w-third { + width: 33.33333%; +} + +.w-quarter { + width: 25%; +} + +/** + * Pagination + */ + +.labs-pagination { + display: flex; + justify-content: center; +} +.labs-pagination span, +.labs-pagination a { + vertical-align: middle; + margin: .5em; +} + +.labs-pagination span a { + padding: .5em 1em; +} + +/** +* MEDIA SETTINGS +*/ + +@media only screen and (min-width: 1024px) { + h1 { + font-size: 2em; + } + h2 { + font-size: 1.65em; + } + h3 { + font-size: 1.25em; + } + h4 { + font-size: 1em; + } + + .w-full--d { + width: 100%; + } + + .w-three-quarters--d { + width: 75%; + } + + .w-two-thirds--d { + width: 66.66666%; + } + + .w-half--d { + width: 50%; + } + + .w-third--d { + width: 33.33333%; + } + + .w-quarter--d { + width: 25%; + } +} + +@media only screen and (max-width: 767px) { + .lab-article-link span, + .lab-share span { + display: none; + } +} + +@media only screen and (min-width: 1024px) { + .lab-follow { + display: inline-block; + position: fixed; + right: -34px; + bottom: 20%; + transform: rotate(-90deg); + } +} + +@media only screen and (min-width: 768px) { + .lab-grid { + margin-left: -1.5em; + width: calc( 100% + 1.5em ); + } + + .lab-grid-cell { + float: left; + padding-left: 1.5em; + } +} + +@media only screen and (max-width: 1023px) and (min-width: 768px) { + h1 { + font-size: 1.75em; + } + h2 { + font-size: 1.45em; + } + + .lab-grid--3 .lab-grid-cell { + width: 50%; + } + + .w-full--t { + width: 100%; + } + + .w-three-quarters--t { + width: 75%; + } + + .w-two-thirds--t { + width: 66.66666%; + } + + .w-half--t { + width: 50%; + } + + .w-third--t { + width: 33.33333%; + } + + .w-quarter--t { + width: 25%; + } +} + +@media only screen and (max-width: 767px) { + .lab-share { + text-align: right; + } + + .w-full--m { + width: 100%; + } + + .w-three-quarters--m { + width: 75%; + } + + .w-two-thirds--m { + width: 66.66666%; + } + + .w-half--m { + width: 50%; + } + + .w-third--m { + width: 33.33333%; + } + + .w-quarter--m { + width: 25%; + } +} \ No newline at end of file diff --git a/css/masonry.css b/css/masonry.css new file mode 100644 index 0000000..3d36ce5 --- /dev/null +++ b/css/masonry.css @@ -0,0 +1,123 @@ +/* Defaults */ +body { + background: #f9f9f9; + color: #465665; +} + +a { + color: #5b7083; + transition: all .25s ease-in-out; +} + +/* The title */ +.title { + font-weight: 700; +} + +/* The description */ +.desc { + font-size: 1em; + font-style: italic; + font-family: Georgia, serif; +} + +/* Text-centering */ +.title, +.desc, +.intro { + text-align: center; +} + +/* Intro section */ +.intro { + margin: 1.75em 0 .75em; + border-bottom: 3px double rgba(0, 0, 0, 0.05); + margin-bottom: 1.75em; +} + +.intro a { + opacity: .7; +} + +.intro a:hover { + opacity: 1; +} + +.intro h3 { + font-size: .825em; + font-weight: 700; + text-transform: uppercase; + display: inline-block; + margin: .25em .75em .75em; +} + +.intro h3 a { + font-weight: 400; +} + +/* Masonry grid */ +.masonry { + transition: all .5s ease-in-out; + column-gap: 30px; + column-fill: initial; +} + +/* Masonry item */ +.masonry .brick { + margin-bottom: 30px; + display: inline-block; /* Fix the misalignment of items */ + vertical-align: top; /* Keep the item on the very top */ +} + +/* Masonry image effects */ +.masonry .brick img { + transition: all .5s ease-in-out; + backface-visibility: hidden; /* Remove Image flickering on hover */ +} + +.masonry .brick:hover img { + opacity: .75; +} + +/* Bordered masonry */ +.masonry.bordered { + column-rule: 1px solid #eee; + column-gap: 50px; +} + +.masonry.bordered .brick { + padding-bottom: 25px; + margin-bottom: 25px; + border-bottom: 1px solid #eee; +} + +/* Gutterless masonry */ +.masonry.gutterless { + column-gap: 0; +} + +.masonry.gutterless .brick { + margin-bottom: 0; +} + +/* Masonry on tablets */ +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .masonry { + column-count: 2; + } +} + +/* Masonry on big screens */ +@media only screen and (min-width: 1024px) { + .desc { + font-size: 1.25em; + } + + .intro { + letter-spacing: 1px; + } + + .masonry { + column-count: 3; + } +} \ No newline at end of file diff --git a/index-playground.html b/index-playground.html index 9c86a6a..bdbb836 100644 --- a/index-playground.html +++ b/index-playground.html @@ -15,6 +15,8 @@ + + I specialize in UI Design with 8

- -
-
-
- -
- -
-

Branding Design

-
-

Network Solutions. Revitalizing a brand in the modern era

-
-
-
- -
-
- -
- -
-

Visual Design

-
-

Advertising and Marketing. Black Friday Campaign

-
-
-
- -
-
-
-
- -
- -
-

App Design

-
-

Florida Blue Insurance. Online Billing Application.

-
-
-
- -
-
- -
- -
-

Web Design

-
-

Google Workspace. Advertising a premiere product.

-
-
-
- -
+
+
+
+
+
+ Cherry plant +
+
+ Oranges and Pomegranates +
+
+ Strawberry +
+
+ Blueberries +
+
+ Pears +
+
+ Easter-eggs +
+
+ Lemons +
+
+ Cherries +
+
+ Grapes +
+
+
- - -
-
- -
- -
-

Visual Design

-
-

Bluehost. Social Media Marketing. WordPress Affiliation

-
-
-
- -
-
- -
- -
-

Web Design

-
-

Domain.com. Professional Marketing Services

-
-
-
- -
-
- -
- -
- -
- -
-

UI/UX Design

-
-

Fidelity National Information Services. Business Collaboration Application

-
-
-
- -
-
- -
- -
-

Visual Design

-
-

We are setting clear standards for creative teams.

-
-
-
- -
- -
- -
-
- -
- -
-

Web Design

-
-

Florida Blue. Helping developers program applications.

-
-
-
- -
-
- -
- -
-

Graphic Design

-
-

Domain.com. Promoting excellence in the Internet industry.

-
-
-
- -
-
-
@@ -310,33 +197,7 @@

-
-
-
-
-

arthur
charles
edwards

-
-
-

- Find out more about my professional journey and design perspective. -

- - Learn More - - Services - -
-
-
-
+
diff --git a/index.html b/index.html index 9c86a6a..44c21aa 100644 --- a/index.html +++ b/index.html @@ -169,7 +169,7 @@

Visual Design

- +

App Design

diff --git a/scss/masion-grid-lab.css b/scss/masion-grid-lab.css new file mode 100644 index 0000000..d2a4a36 --- /dev/null +++ b/scss/masion-grid-lab.css @@ -0,0 +1,488 @@ +/** + * RESET + * Reference: http://meyerweb.com/eric/tools/css/reset/ + */ +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +main, menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} + +article, aside, details, figcaption, figure, +footer, header, hgroup, main, menu, nav, section { + display: block; +} + +body { + line-height: 1.618; + font-family: Arial, Helvetica, sans-serif; +} + +ol, ul { + list-style: none; +} + +blockquote, q { + quotes: none; +} + +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +a { + text-decoration: none; +} + +code, pre, samp { + font-family: monospace; +} + +/** + * BASIC TYPE + */ +img, video { + max-width: 100%; + vertical-align: middle; +} + +p { + margin: 0 0 1em; +} + +/** + * BOX HACKING + */ +html { + box-sizing: border-box; +} + +*, +*:before, +*:after { + box-sizing: inherit; +} + +/** + * CLEAR FLOATS + * Reference: http://w3bits.com/clearfix + */ +.cf:after, +.lab-grid:after { + content: ""; + display: table; + clear: both; +} + +/** + * CONTENT WRAPPER + */ +.wrapper { + margin-left: auto; + margin-right: auto; + padding-right: 0em; + padding-left: 0em; + max-width: 100%; +} + +/** +* ICON SYSTEM +*/ +.icon { + height: 1em; + width: 1em; + display: inline-block; + vertical-align: middle; + fill: currentColor; +} + +/** + * BUTTONS + */ +.buttons { + margin: 1.5em 0; +} + +.button { + padding: 1em 1.5em; + color: rgba(255, 255, 255, 0.75); + border-radius: 3px; +} + +.button:hover { + color: rgba(255, 255, 255, 0.9); +} + +.green-sea { + background: #16a085; +} + +.button.green-sea:hover { + background: #1abc9c; +} + +.belize-hole { + background: #2980b9; +} + +.button.belize-hole:hover { + background: #3498db; +} + +.pomegranate { + background: #c0392b; +} + +.button.pomegranate:hover { + background: #e74c3c; +} + +/** + * HYPERLINKS & NAVIGATION + */ +.lab-nav { + width: 100%; +} + +.lab-nav--fixed { + position: fixed; +} + +.lab-nav--top { + top: 0; +} + +.lab-nav--bottom { + bottom: 0; +} + +.lab-nav, +.lab-follow { + font-size: 13px; + line-height: 1; +} + +.lab-theme-light body { + color: rgba(0, 0, 0, 0.75); +} + +.lab-theme-light .lab-nav, +.lab-theme-light .lab-follow { + background: rgba(0, 0, 0, 0.05); +} + +.lab-theme-light .lab-nav, +.lab-theme-light .lab-follow, +.lab-theme-light .lab-nav a { + color: rgba(0, 0, 0, 0.35); +} + +.lab-theme-light .lab-nav a:hover, +.lab-theme-light .lab-nav a:active, +.lab-theme-light .lab-nav a:focus, +.lab-theme-light .lab-follow:hover, +.lab-theme-light .lab-follow:active, +.lab-theme-light .lab-follow:focus { + background: rgba(0, 0, 0, 0.1); + color: rgba(0, 0, 0, 0.5); +} + +.lab-theme-light .lab-article-button { + color: rgba(0, 0, 0, 0.25); + border: 3px solid rgba(0, 0, 0, 0.1); +} + +.lab-theme-light .lab-article-button:hover, +.lab-theme-light .lab-article-button:active, +.lab-theme-light .lab-article-button:focus { + color: rgba(0, 0, 0, 0.3); + border-color: rgba(0, 0, 0, 0.15); +} + +.lab-theme-dark body { + color: rgba(255, 255, 255, 0.75); +} + +.lab-theme-dark .lab-nav, +.lab-theme-dark .lab-follow { + background: rgba(255, 255, 255, 0.05); +} + +.lab-theme-dark .lab-nav, +.lab-theme-dark .lab-nav a, +.lab-theme-dark .lab-follow { + color: rgba(255, 255, 255, 0.35); +} + +.lab-theme-dark .lab-nav a:hover, +.lab-theme-dark .lab-nav a:active, +.lab-theme-dark .lab-nav a:focus, +.lab-theme-dark .lab-follow:hover, +.lab-theme-dark .lab-follow:active, +.lab-theme-dark .lab-follow:focus { + background: rgba(255, 255, 255, 0.1); + color: rgba(255, 255, 255, 0.5); +} + +.lab-theme-dark .lab-article-button { + color: rgba(255, 255, 255, 0.25); + border: 3px solid rgba(255, 255, 255, 0.1); +} + +.lab-theme-dark .lab-article-button:hover, +.lab-theme-dark .lab-article-button:active, +.lab-theme-dark .lab-article-button:focus { + color: rgba(255, 255, 255, 0.3); + border-color: rgba(255, 255, 255, 0.15); +} + +.lab-follow, +.lab-article-link, +.lab-share a { + padding: 1.25em .75em; + display: inline-block; + vertical-align: bottom; + text-decoration: none; +} + +.lab-follow, +.lab-article-link span, +.lab-share-link span { + letter-spacing: 1px; + text-transform: uppercase; +} + +.lab-follow { + display: none; +} + +.lab-follow .icon { + vertical-align: top; +} + +.lab-article-link { + float: left; +} + +.lab-share { + float: right; + text-align: right; +} + +.lab-share ul { + margin: 0; +} + +.lab-share li { + display: inline; + margin: 0; +} + +.lab-article-button { + font-weight: 700; + display: block; + margin: 2em 0; + padding: 1.25em; + text-align: center; +} + +/** + * Grid + */ +.lab-grid { + width: 100%; +} + +.lab-grid .lab-grid-cell { + margin-bottom: 1.5em; +} + +.lab-grid .lab-grid-cell--mb-2x { + margin-bottom: 3em; +} + +.lab-grid-cell { + padding-left: 0; +} + +.w-full { + width: 100%; +} + +.w-three-quarters { + width: 75%; +} + +.w-two-thirds { + width: 66.66666%; +} + +.w-half { + width: 50%; +} + +.w-third { + width: 33.33333%; +} + +.w-quarter { + width: 25%; +} + +/** + * Pagination + */ +.labs-pagination { + display: flex; + justify-content: center; +} + +.labs-pagination span, +.labs-pagination a { + vertical-align: middle; + margin: .5em; +} + +.labs-pagination span a { + padding: .5em 1em; +} + +/** +* MEDIA SETTINGS +*/ +@media only screen and (min-width: 1024px) { + h1 { + font-size: 2em; + } + h2 { + font-size: 1.65em; + } + h3 { + font-size: 1.25em; + } + h4 { + font-size: 1em; + } + .w-full--d { + width: 100%; + } + .w-three-quarters--d { + width: 75%; + } + .w-two-thirds--d { + width: 66.66666%; + } + .w-half--d { + width: 50%; + } + .w-third--d { + width: 33.33333%; + } + .w-quarter--d { + width: 25%; + } +} + +@media only screen and (max-width: 767px) { + .lab-article-link span, + .lab-share span { + display: none; + } +} + +@media only screen and (min-width: 1024px) { + .lab-follow { + display: inline-block; + position: fixed; + right: -34px; + bottom: 20%; + transform: rotate(-90deg); + } +} + +@media only screen and (min-width: 768px) { + .lab-grid { + margin-left: -1.5em; + width: calc( 100% + 1.5em); + } + .lab-grid-cell { + float: left; + padding-left: 1.5em; + } +} + +@media only screen and (max-width: 1023px) and (min-width: 768px) { + h1 { + font-size: 1.75em; + } + h2 { + font-size: 1.45em; + } + .lab-grid--3 .lab-grid-cell { + width: 50%; + } + .w-full--t { + width: 100%; + } + .w-three-quarters--t { + width: 75%; + } + .w-two-thirds--t { + width: 66.66666%; + } + .w-half--t { + width: 50%; + } + .w-third--t { + width: 33.33333%; + } + .w-quarter--t { + width: 25%; + } +} + +@media only screen and (max-width: 767px) { + .lab-share { + text-align: right; + } + .w-full--m { + width: 100%; + } + .w-three-quarters--m { + width: 75%; + } + .w-two-thirds--m { + width: 66.66666%; + } + .w-half--m { + width: 50%; + } + .w-third--m { + width: 33.33333%; + } + .w-quarter--m { + width: 25%; + } +} diff --git a/scss/masion-grid-lab.min.css b/scss/masion-grid-lab.min.css new file mode 100644 index 0000000..4c02790 --- /dev/null +++ b/scss/masion-grid-lab.min.css @@ -0,0 +1 @@ +html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,main,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section{display:block}body{line-height:1.618;font-family:Arial, Helvetica, sans-serif}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}a{text-decoration:none}code,pre,samp{font-family:monospace}img,video{max-width:100%;vertical-align:middle}p{margin:0 0 1em}html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}.cf:after,.lab-grid:after{content:"";display:table;clear:both}.wrapper{margin-left:auto;margin-right:auto;padding-right:0em;padding-left:0em;max-width:100%}.icon{height:1em;width:1em;display:inline-block;vertical-align:middle;fill:currentColor}.buttons{margin:1.5em 0}.button{padding:1em 1.5em;color:rgba(255,255,255,0.75);border-radius:3px}.button:hover{color:rgba(255,255,255,0.9)}.green-sea{background:#16a085}.button.green-sea:hover{background:#1abc9c}.belize-hole{background:#2980b9}.button.belize-hole:hover{background:#3498db}.pomegranate{background:#c0392b}.button.pomegranate:hover{background:#e74c3c}.lab-nav{width:100%}.lab-nav--fixed{position:fixed}.lab-nav--top{top:0}.lab-nav--bottom{bottom:0}.lab-nav,.lab-follow{font-size:13px;line-height:1}.lab-theme-light body{color:rgba(0,0,0,0.75)}.lab-theme-light .lab-nav,.lab-theme-light .lab-follow{background:rgba(0,0,0,0.05)}.lab-theme-light .lab-nav,.lab-theme-light .lab-follow,.lab-theme-light .lab-nav a{color:rgba(0,0,0,0.35)}.lab-theme-light .lab-nav a:hover,.lab-theme-light .lab-nav a:active,.lab-theme-light .lab-nav a:focus,.lab-theme-light .lab-follow:hover,.lab-theme-light .lab-follow:active,.lab-theme-light .lab-follow:focus{background:rgba(0,0,0,0.1);color:rgba(0,0,0,0.5)}.lab-theme-light .lab-article-button{color:rgba(0,0,0,0.25);border:3px solid rgba(0,0,0,0.1)}.lab-theme-light .lab-article-button:hover,.lab-theme-light .lab-article-button:active,.lab-theme-light .lab-article-button:focus{color:rgba(0,0,0,0.3);border-color:rgba(0,0,0,0.15)}.lab-theme-dark body{color:rgba(255,255,255,0.75)}.lab-theme-dark .lab-nav,.lab-theme-dark .lab-follow{background:rgba(255,255,255,0.05)}.lab-theme-dark .lab-nav,.lab-theme-dark .lab-nav a,.lab-theme-dark .lab-follow{color:rgba(255,255,255,0.35)}.lab-theme-dark .lab-nav a:hover,.lab-theme-dark .lab-nav a:active,.lab-theme-dark .lab-nav a:focus,.lab-theme-dark .lab-follow:hover,.lab-theme-dark .lab-follow:active,.lab-theme-dark .lab-follow:focus{background:rgba(255,255,255,0.1);color:rgba(255,255,255,0.5)}.lab-theme-dark .lab-article-button{color:rgba(255,255,255,0.25);border:3px solid rgba(255,255,255,0.1)}.lab-theme-dark .lab-article-button:hover,.lab-theme-dark .lab-article-button:active,.lab-theme-dark .lab-article-button:focus{color:rgba(255,255,255,0.3);border-color:rgba(255,255,255,0.15)}.lab-follow,.lab-article-link,.lab-share a{padding:1.25em .75em;display:inline-block;vertical-align:bottom;text-decoration:none}.lab-follow,.lab-article-link span,.lab-share-link span{letter-spacing:1px;text-transform:uppercase}.lab-follow{display:none}.lab-follow .icon{vertical-align:top}.lab-article-link{float:left}.lab-share{float:right;text-align:right}.lab-share ul{margin:0}.lab-share li{display:inline;margin:0}.lab-article-button{font-weight:700;display:block;margin:2em 0;padding:1.25em;text-align:center}.lab-grid{width:100%}.lab-grid .lab-grid-cell{margin-bottom:1.5em}.lab-grid .lab-grid-cell--mb-2x{margin-bottom:3em}.lab-grid-cell{padding-left:0}.w-full{width:100%}.w-three-quarters{width:75%}.w-two-thirds{width:66.66666%}.w-half{width:50%}.w-third{width:33.33333%}.w-quarter{width:25%}.labs-pagination{display:flex;justify-content:center}.labs-pagination span,.labs-pagination a{vertical-align:middle;margin:.5em}.labs-pagination span a{padding:.5em 1em}@media only screen and (min-width: 1024px){h1{font-size:2em}h2{font-size:1.65em}h3{font-size:1.25em}h4{font-size:1em}.w-full--d{width:100%}.w-three-quarters--d{width:75%}.w-two-thirds--d{width:66.66666%}.w-half--d{width:50%}.w-third--d{width:33.33333%}.w-quarter--d{width:25%}}@media only screen and (max-width: 767px){.lab-article-link span,.lab-share span{display:none}}@media only screen and (min-width: 1024px){.lab-follow{display:inline-block;position:fixed;right:-34px;bottom:20%;transform:rotate(-90deg)}}@media only screen and (min-width: 768px){.lab-grid{margin-left:-1.5em;width:calc( 100% + 1.5em)}.lab-grid-cell{float:left;padding-left:1.5em}}@media only screen and (max-width: 1023px) and (min-width: 768px){h1{font-size:1.75em}h2{font-size:1.45em}.lab-grid--3 .lab-grid-cell{width:50%}.w-full--t{width:100%}.w-three-quarters--t{width:75%}.w-two-thirds--t{width:66.66666%}.w-half--t{width:50%}.w-third--t{width:33.33333%}.w-quarter--t{width:25%}}@media only screen and (max-width: 767px){.lab-share{text-align:right}.w-full--m{width:100%}.w-three-quarters--m{width:75%}.w-two-thirds--m{width:66.66666%}.w-half--m{width:50%}.w-third--m{width:33.33333%}.w-quarter--m{width:25%}} diff --git a/scss/masion-grid-lab.scss b/scss/masion-grid-lab.scss new file mode 100644 index 0000000..7290af4 --- /dev/null +++ b/scss/masion-grid-lab.scss @@ -0,0 +1,518 @@ +/** + * RESET + * Reference: http://meyerweb.com/eric/tools/css/reset/ + */ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +main, menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} + +article, aside, details, figcaption, figure, +footer, header, hgroup, main, menu, nav, section { + display: block; +} + +body { + line-height: 1.618; + font-family: Arial, Helvetica, sans-serif; +} + +ol, ul { + list-style: none; +} + +blockquote, q { + quotes: none; +} + +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +a { + text-decoration: none; +} + +code, pre, samp { +font-family: monospace; +} + +/** + * BASIC TYPE + */ + +img, video { + max-width: 100%; + vertical-align: middle; +} + +p { + margin: 0 0 1em; +} + + +/** + * BOX HACKING + */ + +html { + box-sizing: border-box; +} + +*, +*:before, +*:after { + box-sizing: inherit; +} + +/** + * CLEAR FLOATS + * Reference: http://w3bits.com/clearfix + */ + +.cf:after, +.lab-grid:after { + content: ""; + display: table; + clear: both; +} + +/** + * CONTENT WRAPPER + */ + +.wrapper { + margin-left: auto; + margin-right: auto; + padding-right: 0em; + padding-left: 0em; + max-width: 100%; +} + +/** +* ICON SYSTEM +*/ + +.icon { + height: 1em; + width: 1em; + display: inline-block; + vertical-align: middle; + fill: currentColor; +} + +/** + * BUTTONS + */ + +.buttons { + margin: 1.5em 0; +} + +.button { + padding: 1em 1.5em; + color: rgba(255, 255, 255, 0.75); + border-radius: 3px; +} + +.button:hover { + color: rgba(255, 255, 255, 0.9); +} + +.green-sea { + background: #16a085; +} + +.button.green-sea:hover { + background: #1abc9c; +} + +.belize-hole { + background: #2980b9; +} + +.button.belize-hole:hover { + background: #3498db; +} + +.pomegranate { + background: #c0392b; +} + +.button.pomegranate:hover { + background: #e74c3c; +} + +/** + * HYPERLINKS & NAVIGATION + */ + +.lab-nav { + width: 100%; +} + +.lab-nav--fixed { + position: fixed; +} + +.lab-nav--top { + top: 0; +} + +.lab-nav--bottom { + bottom: 0; +} + +.lab-nav, +.lab-follow { + font-size: 13px; + line-height: 1; +} + +.lab-theme-light body { + color: rgba(0, 0, 0, .75); +} + +.lab-theme-light .lab-nav, +.lab-theme-light .lab-follow { + background: rgba(0, 0, 0, 0.05); +} + +.lab-theme-light .lab-nav, +.lab-theme-light .lab-follow, +.lab-theme-light .lab-nav a { + color: rgba(0, 0, 0, 0.35); +} + +.lab-theme-light .lab-nav a:hover, +.lab-theme-light .lab-nav a:active, +.lab-theme-light .lab-nav a:focus, +.lab-theme-light .lab-follow:hover, +.lab-theme-light .lab-follow:active, +.lab-theme-light .lab-follow:focus { + background: rgba(0, 0, 0, 0.1); + color: rgba(0, 0, 0, 0.5); +} + +.lab-theme-light .lab-article-button { + color: rgba(0, 0, 0, .25); + border: 3px solid rgba(0, 0, 0, .1); +} + +.lab-theme-light .lab-article-button:hover, +.lab-theme-light .lab-article-button:active, +.lab-theme-light .lab-article-button:focus { + color: rgba(0, 0, 0, .3); + border-color: rgba(0, 0, 0, .15); +} + +.lab-theme-dark body { + color: rgba(255, 255, 255, .75); +} + +.lab-theme-dark .lab-nav, +.lab-theme-dark .lab-follow { + background: rgba(255, 255, 255, 0.05); +} + +.lab-theme-dark .lab-nav, +.lab-theme-dark .lab-nav a, +.lab-theme-dark .lab-follow { + color: rgba(255, 255, 255, 0.35); +} + +.lab-theme-dark .lab-nav a:hover, +.lab-theme-dark .lab-nav a:active, +.lab-theme-dark .lab-nav a:focus, +.lab-theme-dark .lab-follow:hover, +.lab-theme-dark .lab-follow:active, +.lab-theme-dark .lab-follow:focus { + background: rgba(255, 255, 255, 0.1); + color: rgba(255, 255, 255, 0.5); +} + +.lab-theme-dark .lab-article-button { + color: rgba(255, 255, 255, .25); + border: 3px solid rgba(255, 255, 255, .1); +} + +.lab-theme-dark .lab-article-button:hover, +.lab-theme-dark .lab-article-button:active, +.lab-theme-dark .lab-article-button:focus { + color: rgba(255, 255, 255, .3); + border-color: rgba(255, 255, 255, .15); +} + +.lab-follow, +.lab-article-link, +.lab-share a { + padding: 1.25em .75em; + display: inline-block; + vertical-align: bottom; + text-decoration: none; +} + +.lab-follow, +.lab-article-link span, +.lab-share-link span { + letter-spacing: 1px; + text-transform: uppercase; +} + +.lab-follow { + display: none; +} + +.lab-follow .icon { + vertical-align: top; +} + +.lab-article-link { + float: left; +} + +.lab-share { + float: right; + text-align: right; +} + +.lab-share ul { + margin: 0; +} + +.lab-share li { + display: inline; + margin: 0; +} + +.lab-article-button { + font-weight: 700; + display: block; + margin: 2em 0; + padding: 1.25em; + text-align: center; +} + +/** + * Grid + */ +.lab-grid { + width: 100%; +} + +.lab-grid .lab-grid-cell { + margin-bottom: 1.5em; +} + +.lab-grid .lab-grid-cell--mb-2x { + margin-bottom: 3em; +} + +.lab-grid-cell { + padding-left: 0; +} + +.w-full { + width: 100%; +} + +.w-three-quarters { + width: 75%; +} + +.w-two-thirds { + width: 66.66666%; +} + +.w-half { + width: 50%; +} + +.w-third { + width: 33.33333%; +} + +.w-quarter { + width: 25%; +} + +/** + * Pagination + */ + +.labs-pagination { + display: flex; + justify-content: center; +} +.labs-pagination span, +.labs-pagination a { + vertical-align: middle; + margin: .5em; +} + +.labs-pagination span a { + padding: .5em 1em; +} + +/** +* MEDIA SETTINGS +*/ + +@media only screen and (min-width: 1024px) { + h1 { + font-size: 2em; + } + h2 { + font-size: 1.65em; + } + h3 { + font-size: 1.25em; + } + h4 { + font-size: 1em; + } + + .w-full--d { + width: 100%; + } + + .w-three-quarters--d { + width: 75%; + } + + .w-two-thirds--d { + width: 66.66666%; + } + + .w-half--d { + width: 50%; + } + + .w-third--d { + width: 33.33333%; + } + + .w-quarter--d { + width: 25%; + } +} + +@media only screen and (max-width: 767px) { + .lab-article-link span, + .lab-share span { + display: none; + } +} + +@media only screen and (min-width: 1024px) { + .lab-follow { + display: inline-block; + position: fixed; + right: -34px; + bottom: 20%; + transform: rotate(-90deg); + } +} + +@media only screen and (min-width: 768px) { + .lab-grid { + margin-left: -1.5em; + width: calc( 100% + 1.5em ); + } + + .lab-grid-cell { + float: left; + padding-left: 1.5em; + } +} + +@media only screen and (max-width: 1023px) and (min-width: 768px) { + h1 { + font-size: 1.75em; + } + h2 { + font-size: 1.45em; + } + + .lab-grid--3 .lab-grid-cell { + width: 50%; + } + + .w-full--t { + width: 100%; + } + + .w-three-quarters--t { + width: 75%; + } + + .w-two-thirds--t { + width: 66.66666%; + } + + .w-half--t { + width: 50%; + } + + .w-third--t { + width: 33.33333%; + } + + .w-quarter--t { + width: 25%; + } +} + +@media only screen and (max-width: 767px) { + .lab-share { + text-align: right; + } + + .w-full--m { + width: 100%; + } + + .w-three-quarters--m { + width: 75%; + } + + .w-two-thirds--m { + width: 66.66666%; + } + + .w-half--m { + width: 50%; + } + + .w-third--m { + width: 33.33333%; + } + + .w-quarter--m { + width: 25%; + } +} \ No newline at end of file diff --git a/scss/masion-grid.css b/scss/masion-grid.css new file mode 100644 index 0000000..f78cd23 --- /dev/null +++ b/scss/masion-grid.css @@ -0,0 +1,111 @@ +/* Defaults */ +body { + background: #f9f9f9; + color: #465665; +} + +/* The title */ +.title { + font-weight: 700; +} + +/* The description */ +.desc { + font-size: 1em; + font-style: italic; + font-family: Georgia, serif; +} + +/* Text-centering */ +.title, +.desc, +.intro { + text-align: center; +} + +/* Intro section */ +.intro { + margin: 1.75em 0 .75em; + border-bottom: 3px double rgba(0, 0, 0, 0.05); + margin-bottom: 1.75em; +} + +.intro a { + opacity: .7; +} + +.intro a:hover { + opacity: 1; +} + +.intro h3 a { + font-weight: 400; +} + +/* Masonry grid */ +.masonry { + transition: all .5s ease-in-out; + column-gap: 30px; + column-fill: initial; +} + +/* Masonry item */ +.masonry .brick { + margin-bottom: 30px; + display: inline-block; + /* Fix the misalignment of items */ + vertical-align: top; + /* Keep the item on the very top */ +} + +/* Masonry image effects */ +.masonry .brick img { + transition: all .5s ease-in-out; + backface-visibility: hidden; + /* Remove Image flickering on hover */ +} + +.masonry .brick:hover img { + opacity: .75; +} + +/* Bordered masonry */ +.masonry.bordered { + column-rule: 1px solid #eee; + column-gap: 50px; +} + +.masonry.bordered .brick { + padding-bottom: 25px; + margin-bottom: 25px; + border-bottom: 1px solid #eee; +} + +/* Gutterless masonry */ +.masonry.gutterless { + column-gap: 0; +} + +.masonry.gutterless .brick { + margin-bottom: 0; +} + +/* Masonry on tablets */ +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .masonry { + column-count: 2; + } +} + +/* Masonry on big screens */ +@media only screen and (min-width: 1024px) { + .desc { + font-size: 1.25em; + } + .intro { + letter-spacing: 1px; + } + .masonry { + column-count: 3; + } +} diff --git a/scss/masion-grid.min.css b/scss/masion-grid.min.css new file mode 100644 index 0000000..10ef1b8 --- /dev/null +++ b/scss/masion-grid.min.css @@ -0,0 +1 @@ +body{background:#f9f9f9;color:#465665}.title{font-weight:700}.desc{font-size:1em;font-style:italic;font-family:Georgia, serif}.title,.desc,.intro{text-align:center}.intro{margin:1.75em 0 .75em;border-bottom:3px double rgba(0,0,0,0.05);margin-bottom:1.75em}.intro a{opacity:.7}.intro a:hover{opacity:1}.intro h3 a{font-weight:400}.masonry{transition:all .5s ease-in-out;column-gap:30px;column-fill:initial}.masonry .brick{margin-bottom:30px;display:inline-block;vertical-align:top}.masonry .brick img{transition:all .5s ease-in-out;backface-visibility:hidden}.masonry .brick:hover img{opacity:.75}.masonry.bordered{column-rule:1px solid #eee;column-gap:50px}.masonry.bordered .brick{padding-bottom:25px;margin-bottom:25px;border-bottom:1px solid #eee}.masonry.gutterless{column-gap:0}.masonry.gutterless .brick{margin-bottom:0}@media only screen and (min-width: 768px) and (max-width: 1023px){.masonry{column-count:2}}@media only screen and (min-width: 1024px){.desc{font-size:1.25em}.intro{letter-spacing:1px}.masonry{column-count:3}} diff --git a/scss/masion-grid.scss b/scss/masion-grid.scss index e69de29..3aa4b98 100644 --- a/scss/masion-grid.scss +++ b/scss/masion-grid.scss @@ -0,0 +1,112 @@ +/* Defaults */ +body { + background: #f9f9f9; + color: #465665; +} + + +/* The title */ +.title { + font-weight: 700; +} + +/* The description */ +.desc { + font-size: 1em; + font-style: italic; + font-family: Georgia, serif; +} + +/* Text-centering */ +.title, +.desc, +.intro { + text-align: center; +} + +/* Intro section */ +.intro { + margin: 1.75em 0 .75em; + border-bottom: 3px double rgba(0, 0, 0, 0.05); + margin-bottom: 1.75em; +} + +.intro a { + opacity: .7; +} + +.intro a:hover { + opacity: 1; +} + + +.intro h3 a { + font-weight: 400; +} + +/* Masonry grid */ +.masonry { + transition: all .5s ease-in-out; + column-gap: 30px; + column-fill: initial; +} + +/* Masonry item */ +.masonry .brick { + margin-bottom: 30px; + display: inline-block; /* Fix the misalignment of items */ + vertical-align: top; /* Keep the item on the very top */ +} + +/* Masonry image effects */ +.masonry .brick img { + transition: all .5s ease-in-out; + backface-visibility: hidden; /* Remove Image flickering on hover */ +} + +.masonry .brick:hover img { + opacity: .75; +} + +/* Bordered masonry */ +.masonry.bordered { + column-rule: 1px solid #eee; + column-gap: 50px; +} + +.masonry.bordered .brick { + padding-bottom: 25px; + margin-bottom: 25px; + border-bottom: 1px solid #eee; +} + +/* Gutterless masonry */ +.masonry.gutterless { + column-gap: 0; +} + +.masonry.gutterless .brick { + margin-bottom: 0; +} + +/* Masonry on tablets */ +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .masonry { + column-count: 2; + } +} + +/* Masonry on big screens */ +@media only screen and (min-width: 1024px) { + .desc { + font-size: 1.25em; + } + + .intro { + letter-spacing: 1px; + } + + .masonry { + column-count: 3; + } +} \ No newline at end of file