mkrhere
/
pw
mirror of https://github.com/MKRhere/pw
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

Responsive fixes for portfolio items

master
Muthu Kumar 7 years ago
parent
dbc00e8b9e
commit
f9786c85d8
3 changed files with 152 additions and 98 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 45
      docs/css/style.css
  2. 24
      docs/index.html
  3. 31
      sass/style.sass

45
docs/css/style.css
View File

@ -90,7 +90,6 @@ h1 {
.row-full, .row-3 { .row-full, .row-3 {
display: block; display: block;
display: grid; display: grid;
align-content: center;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
min-height: 100vh; min-height: 100vh;
@ -99,14 +98,15 @@ h1 {
grid-template-columns: [full] 100%; } grid-template-columns: [full] 100%; }
.row-3 { .row-3 {
grid-template-rows: [header] 10% [gutter] 5% [content1] 25% [gutter] 5% [content2] 25%; height: 100vh;
grid-template-columns: [col1] 1fr [col2] 1fr [col3] 1fr; } 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 { .col-full, .col-1-1, .col-1-2, .col-1-3, .col-2-1, .col-2-2, .col-2-3 {
align-self: center; align-self: center;
grid-column: full; grid-column: full;
margin: auto; margin: auto; }
padding: 1rem; }
.row-head { .row-head {
align-self: center; align-self: center;
@ -121,46 +121,58 @@ h1 {
.col-1-1 { .col-1-1 {
grid-row: content1; grid-row: content1;
grid-column: col1; grid-column: col1;
margin: 0.5rem;
min-height: 100%; min-height: 100%;
padding: 0.5rem;
z-index: 99; } z-index: 99; }
.col-1-2 { .col-1-2 {
grid-row: content1; grid-row: content1;
grid-column: col2; grid-column: col2;
margin: 0.5rem;
min-height: 100%; min-height: 100%;
padding: 0.5rem;
z-index: 99; } z-index: 99; }
.col-1-3 { .col-1-3 {
grid-row: content1; grid-row: content1;
grid-column: col3; grid-column: col3;
margin: 0.5rem;
min-height: 100%; min-height: 100%;
padding: 0.5rem;
z-index: 99; } z-index: 99; }
.col-2-1 { .col-2-1 {
grid-row: content2; grid-row: content2;
grid-column: col1; grid-column: col1;
margin: 0.5rem;
min-height: 100%; min-height: 100%;
padding: 0.5rem;
z-index: 98; } z-index: 98; }
.col-2-2 { .col-2-2 {
grid-row: content2; grid-row: content2;
grid-column: col2; grid-column: col2;
margin: 0.5rem;
min-height: 100%; min-height: 100%;
padding: 0.5rem;
z-index: 98; } z-index: 98; }
.col-2-3 { .col-2-3 {
grid-row: content2; grid-row: content2;
grid-column: col3; grid-column: col3;
margin: 0.5rem;
min-height: 100%; min-height: 100%;
padding: 0.5rem;
z-index: 98; } 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 { .row-full, .row-3 {
margin: 0; margin: 0;
display: flex; display: flex;
@ -174,6 +186,7 @@ h1 {
.p-item { .p-item {
position: relative; position: relative;
height: 22vh;
padding: 1.5rem 1.8rem; padding: 1.5rem 1.8rem;
border-radius: .5rem; border-radius: .5rem;
text-align: left; text-align: left;
@ -197,6 +210,14 @@ h1 {
display: inline-block; display: inline-block;
margin: 0.5rem 0.5rem; } 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 {
padding: 0; padding: 0;
display: inline-block; } display: inline-block; }

24
docs/index.html
View File

@ -95,7 +95,8 @@
<div class="row-head t-center"> <div class="row-head t-center">
<h2>Projects</h2> <h2>Projects</h2>
</div> </div>
<div class="col-1-1 t-center p-item"> <div class="col-1-1 t-center">
<div class="p-item">
<h3>Personal Website</h3> <h3>Personal Website</h3>
<p>Source code of this website.</p> <p>Source code of this website.</p>
<ul class="tags"> <ul class="tags">
@ -110,7 +111,9 @@
<a target="_blank" href="https://mkr.pw">Project Site</a> <a target="_blank" href="https://mkr.pw">Project Site</a>
</p> </p>
</div> </div>
<div class="col-1-2 t-center p-item"> </div>
<div class="col-1-2 t-center">
<div class="p-item">
<h3>up-serve</h3> <h3>up-serve</h3>
<p>A very simple to use cli nginx configuration tool.</p> <p>A very simple to use cli nginx configuration tool.</p>
<ul class="tags"> <ul class="tags">
@ -125,7 +128,9 @@
<a target="_blank" href="https://up.js.org">Project Site</a> <a target="_blank" href="https://up.js.org">Project Site</a>
</p> </p>
</div> </div>
<div class="col-1-3 t-center p-item"> </div>
<div class="col-1-3 t-center">
<div class="p-item">
<h3>OutFocusRED</h3> <h3>OutFocusRED</h3>
<p>WordPress theme for the OutFocus.in online magazine.</p> <p>WordPress theme for the OutFocus.in online magazine.</p>
<ul class="tags"> <ul class="tags">
@ -139,7 +144,9 @@
<a target="_blank" href="https://outfocus.in">Project Site</a> <a target="_blank" href="https://outfocus.in">Project Site</a>
</p> </p>
</div> </div>
<div class="col-2-1 t-center p-item"> </div>
<div class="col-2-1 t-center">
<div class="p-item">
<h3>The Feathers</h3> <h3>The Feathers</h3>
<p>Founder, designer and developer of theFeathers.in.</p> <p>Founder, designer and developer of theFeathers.in.</p>
<ul class="tags"> <ul class="tags">
@ -153,7 +160,9 @@
<a target="_blank" href="https://thefeathers.in">Project Site / Currently down</a> <a target="_blank" href="https://thefeathers.in">Project Site / Currently down</a>
</p> </p>
</div> </div>
<div class="col-2-2 t-center p-item"> </div>
<div class="col-2-2 t-center">
<div class="p-item">
<h3>The Devs Network</h3> <h3>The Devs Network</h3>
<p>A Telegram network for developers. Contributed to development.</p> <p>A Telegram network for developers. Contributed to development.</p>
<ul class="tags"> <ul class="tags">
@ -168,7 +177,9 @@
<a target="_blank" href="https://thedevs.network">Project Site</a> <a target="_blank" href="https://thedevs.network">Project Site</a>
</p> </p>
</div> </div>
<div class="col-2-3 t-center p-item"> </div>
<div class="col-2-3 t-center">
<div class="p-item">
<h3>Curatio Healthcare</h3> <h3>Curatio Healthcare</h3>
<p>Design and development of custom site (WordPress).</p> <p>Design and development of custom site (WordPress).</p>
<ul class="tags"> <ul class="tags">
@ -182,6 +193,7 @@
<a target="_blank" href="http://curatiohealthcare.com">Project Site</a> <a target="_blank" href="http://curatiohealthcare.com">Project Site</a>
</p> </p>
</div> </div>
</div>
</section> </section>
<section id="contact" class="row-full"> <section id="contact" class="row-full">
<div class="col-full"> <div class="col-full">

31
sass/style.sass
View File

@ -105,7 +105,6 @@ h1
.row-full .row-full
display: block display: block
display: grid display: grid
align-content: center
align-items: center align-items: center
justify-content: center justify-content: center
min-height: 100vh min-height: 100vh
@ -115,14 +114,15 @@ h1
.row-3 .row-3
@extend .row-full @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 grid-template-columns: [col1] 1fr [col2] 1fr [col3] 1fr
align-content: center
.col-full .col-full
align-self: center align-self: center
grid-column: full grid-column: full
margin: auto margin: auto
padding: 1rem
.row-head .row-head
align-self: center align-self: center
@ -140,11 +140,23 @@ h1
@extend .col-full @extend .col-full
grid-row: content#{$rown} grid-row: content#{$rown}
grid-column: col#{$coln} grid-column: col#{$coln}
margin: 0.5rem
min-height: 100% min-height: 100%
padding: 0.5rem
z-index: #{100 - $rown} 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 .row-full
margin: 0 margin: 0
display: flex display: flex
@ -160,6 +172,7 @@ h1
.p-item .p-item
position: relative position: relative
height: 22vh
padding: 1.5rem 1.8rem padding: 1.5rem 1.8rem
border-radius: .5rem border-radius: .5rem
text-align: left text-align: left
@ -183,6 +196,14 @@ h1
display: inline-block display: inline-block
margin: 0.5rem 0.5rem 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
.tags .tags

Write Preview
Loading…
Cancel
Save