From f9786c85d82b72ff0d8c72bce1b0cdc578690d56 Mon Sep 17 00:00:00 2001 From: Muthu Kumar Date: Sun, 10 Dec 2017 20:49:57 +0530 Subject: [PATCH] Responsive fixes for portfolio items --- docs/css/style.css | 45 ++++++++++---- docs/index.html | 174 ++++++++++++++++++++++++++++------------------------- sass/style.sass | 31 ++++++++-- 3 files changed, 152 insertions(+), 98 deletions(-) diff --git a/docs/css/style.css b/docs/css/style.css index 297bea8..f8da74d 100644 --- a/docs/css/style.css +++ b/docs/css/style.css @@ -90,7 +90,6 @@ h1 { .row-full, .row-3 { display: block; display: grid; - align-content: center; align-items: center; justify-content: center; min-height: 100vh; @@ -99,14 +98,15 @@ h1 { grid-template-columns: [full] 100%; } .row-3 { - grid-template-rows: [header] 10% [gutter] 5% [content1] 25% [gutter] 5% [content2] 25%; - grid-template-columns: [col1] 1fr [col2] 1fr [col3] 1fr; } + height: 100vh; + grid-template-rows: [header] 10% [gutter] 5% [content1] 28% [content2] 28%; + grid-template-columns: [col1] 1fr [col2] 1fr [col3] 1fr; + align-content: center; } .col-full, .col-1-1, .col-1-2, .col-1-3, .col-2-1, .col-2-2, .col-2-3 { align-self: center; grid-column: full; - margin: auto; - padding: 1rem; } + margin: auto; } .row-head { align-self: center; @@ -121,46 +121,58 @@ h1 { .col-1-1 { grid-row: content1; grid-column: col1; - margin: 0.5rem; min-height: 100%; + padding: 0.5rem; z-index: 99; } .col-1-2 { grid-row: content1; grid-column: col2; - margin: 0.5rem; min-height: 100%; + padding: 0.5rem; z-index: 99; } .col-1-3 { grid-row: content1; grid-column: col3; - margin: 0.5rem; min-height: 100%; + padding: 0.5rem; z-index: 99; } .col-2-1 { grid-row: content2; grid-column: col1; - margin: 0.5rem; min-height: 100%; + padding: 0.5rem; z-index: 98; } .col-2-2 { grid-row: content2; grid-column: col2; - margin: 0.5rem; min-height: 100%; + padding: 0.5rem; z-index: 98; } .col-2-3 { grid-row: content2; grid-column: col3; - margin: 0.5rem; min-height: 100%; + padding: 0.5rem; z-index: 98; } -@media screen and (max-width: 600px) { +@media screen and (max-width: 768px) { + .row-full, .row-3 { + margin: 0; + display: flex; + flex-direction: column; } + .row-3 { + height: auto; + margin: 5rem auto; + max-width: 260px; } + .row-head { + margin: 2em auto; } } + +@media screen and (max-height: 700px) { .row-full, .row-3 { margin: 0; display: flex; @@ -174,6 +186,7 @@ h1 { .p-item { position: relative; + height: 22vh; padding: 1.5rem 1.8rem; border-radius: .5rem; text-align: left; @@ -197,6 +210,14 @@ h1 { display: inline-block; margin: 0.5rem 0.5rem; } +@media screen and (max-width: 768px) { + .p-item { + height: auto; } } + +@media screen and (max-height: 700px) { + .p-item { + height: auto; } } + .tags { padding: 0; display: inline-block; } diff --git a/docs/index.html b/docs/index.html index 43783e2..39dc9fe 100644 --- a/docs/index.html +++ b/docs/index.html @@ -95,92 +95,104 @@

Projects

-
-

Personal Website

-

Source code of this website.

- -

- GitHub - Project Site -

+
+
+

Personal Website

+

Source code of this website.

+
    +
  • JavaScript
    • +
  • Node
    • +
  • HTML
    • +
  • Sass
    • +
  • Browserify
    • +
+

+ GitHub + Project Site +

+
-
-

up-serve

-

A very simple to use cli nginx configuration tool.

-
    -
  • JavaScript
    • -
  • Node
    • -
  • nginx
    • -
  • Linux
    • -
  • SysAdmin
    • -
-

- GitHub - Project Site -

+
+
+

up-serve

+

A very simple to use cli nginx configuration tool.

+
    +
  • JavaScript
    • +
  • Node
    • +
  • nginx
    • +
  • Linux
    • +
  • SysAdmin
    • +
+

+ GitHub + Project Site +

+
-
-

OutFocusRED

-

WordPress theme for the OutFocus.in online magazine.

-
    -
  • WordPress
    • -
  • PHP
    • -
  • _s
    • -
  • JavaScript
    • -
-

- GitHub - Project Site -

+
+
+

OutFocusRED

+

WordPress theme for the OutFocus.in online magazine.

+
    +
  • WordPress
    • +
  • PHP
    • +
  • _s
    • +
  • JavaScript
    • +
+

+ GitHub + Project Site +

+
-
-

The Feathers

-

Founder, designer and developer of theFeathers.in.

-
    -
  • Design
    • -
  • WordPress
    • -
  • JavaScript
    • -
  • HTML
    • -
  • CSS
    • -
-

- Project Site / Currently down -

+
+
+

The Feathers

+

Founder, designer and developer of theFeathers.in.

+
    +
  • Design
    • +
  • WordPress
    • +
  • JavaScript
    • +
  • HTML
    • +
  • CSS
    • +
+

+ Project Site / Currently down +

+
-
-

The Devs Network

-

A Telegram network for developers. Contributed to development.

-
    -
  • JavaScript
    • -
  • Node
    • -
  • React
    • -
  • Material
    • -
  • Design
    • -
-

- GitHub - Project Site -

+
+
+

The Devs Network

+

A Telegram network for developers. Contributed to development.

+
    +
  • JavaScript
    • +
  • Node
    • +
  • React
    • +
  • Material
    • +
  • Design
    • +
+

+ GitHub + Project Site +

+
-
-

Curatio Healthcare

-

Design and development of custom site (WordPress).

-
    -
  • Design
    • -
  • WordPress
    • -
  • JavaScript
    • -
  • HTML
    • -
  • CSS
    • -
-

- Project Site -

+
+
+

Curatio Healthcare

+

Design and development of custom site (WordPress).

+
    +
  • Design
    • +
  • WordPress
    • +
  • JavaScript
    • +
  • HTML
    • +
  • CSS
    • +
+

+ Project Site +

+
diff --git a/sass/style.sass b/sass/style.sass index 8df3f1c..ca570f9 100644 --- a/sass/style.sass +++ b/sass/style.sass @@ -105,7 +105,6 @@ h1 .row-full display: block display: grid - align-content: center align-items: center justify-content: center min-height: 100vh @@ -115,14 +114,15 @@ h1 .row-3 @extend .row-full - grid-template-rows: [header] 10% [gutter] 5% [content1] 25% [gutter] 5% [content2] 25% + height: 100vh + grid-template-rows: [header] 10% [gutter] 5% [content1] 28% [content2] 28% grid-template-columns: [col1] 1fr [col2] 1fr [col3] 1fr + align-content: center .col-full align-self: center grid-column: full margin: auto - padding: 1rem .row-head align-self: center @@ -140,11 +140,23 @@ h1 @extend .col-full grid-row: content#{$rown} grid-column: col#{$coln} - margin: 0.5rem min-height: 100% + padding: 0.5rem z-index: #{100 - $rown} -@media screen and (max-width: 600px) +@media screen and (max-width: 768px) + .row-full + margin: 0 + display: flex + flex-direction: column + .row-3 + height: auto + margin: 5rem auto + max-width: 260px + .row-head + margin: 2em auto + +@media screen and (max-height: 700px) .row-full margin: 0 display: flex @@ -160,6 +172,7 @@ h1 .p-item position: relative + height: 22vh padding: 1.5rem 1.8rem border-radius: .5rem text-align: left @@ -183,6 +196,14 @@ h1 display: inline-block margin: 0.5rem 0.5rem +@media screen and (max-width: 768px) + .p-item + height: auto + +@media screen and (max-height: 700px) + .p-item + height: auto + // Tags .tags