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. 174
      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; }

174
docs/index.html
View File

@ -95,92 +95,104 @@
<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">
<h3>Personal Website</h3> <div class="p-item">
<p>Source code of this website.</p> <h3>Personal Website</h3>
<ul class="tags"> <p>Source code of this website.</p>
<li>JavaScript</li> <ul class="tags">
<li>Node</li> <li>JavaScript</li>
<li>HTML</li> <li>Node</li>
<li>Sass</li> <li>HTML</li>
<li>Browserify</li> <li>Sass</li>
</ul> <li>Browserify</li>
<p class="p-links"> </ul>
<a target="_blank" href="https://github.com/MKRhere/pw">GitHub</a> <p class="p-links">
<a target="_blank" href="https://mkr.pw">Project Site</a> <a target="_blank" href="https://github.com/MKRhere/pw">GitHub</a>
</p> <a target="_blank" href="https://mkr.pw">Project Site</a>
</p>
</div>
</div> </div>
<div class="col-1-2 t-center p-item"> <div class="col-1-2 t-center">
<h3>up-serve</h3> <div class="p-item">
<p>A very simple to use cli nginx configuration tool.</p> <h3>up-serve</h3>
<ul class="tags"> <p>A very simple to use cli nginx configuration tool.</p>
<li>JavaScript</li> <ul class="tags">
<li>Node</li> <li>JavaScript</li>
<li>nginx</li> <li>Node</li>
<li>Linux</li> <li>nginx</li>
<li>SysAdmin</li> <li>Linux</li>
</ul> <li>SysAdmin</li>
<p class="p-links"> </ul>
<a target="_blank" href="https://github.com/CodeFeathers/up-serve">GitHub</a> <p class="p-links">
<a target="_blank" href="https://up.js.org">Project Site</a> <a target="_blank" href="https://github.com/CodeFeathers/up-serve">GitHub</a>
</p> <a target="_blank" href="https://up.js.org">Project Site</a>
</p>
</div>
</div> </div>
<div class="col-1-3 t-center p-item"> <div class="col-1-3 t-center">
<h3>OutFocusRED</h3> <div class="p-item">
<p>WordPress theme for the OutFocus.in online magazine.</p> <h3>OutFocusRED</h3>
<ul class="tags"> <p>WordPress theme for the OutFocus.in online magazine.</p>
<li>WordPress</li> <ul class="tags">
<li>PHP</li> <li>WordPress</li>
<li>_s</li> <li>PHP</li>
<li>JavaScript</li> <li>_s</li>
</ul> <li>JavaScript</li>
<p class="p-links"> </ul>
<a target="_blank" href="https://github.com/CodeFeathers/OutFocusRED">GitHub</a> <p class="p-links">
<a target="_blank" href="https://outfocus.in">Project Site</a> <a target="_blank" href="https://github.com/CodeFeathers/OutFocusRED">GitHub</a>
</p> <a target="_blank" href="https://outfocus.in">Project Site</a>
</p>
</div>
</div> </div>
<div class="col-2-1 t-center p-item"> <div class="col-2-1 t-center">
<h3>The Feathers</h3> <div class="p-item">
<p>Founder, designer and developer of theFeathers.in.</p> <h3>The Feathers</h3>
<ul class="tags"> <p>Founder, designer and developer of theFeathers.in.</p>
<li>Design</li> <ul class="tags">
<li>WordPress</li> <li>Design</li>
<li>JavaScript</li> <li>WordPress</li>
<li>HTML</li> <li>JavaScript</li>
<li>CSS</li> <li>HTML</li>
</ul> <li>CSS</li>
<p class="p-links"> </ul>
<a target="_blank" href="https://thefeathers.in">Project Site / Currently down</a> <p class="p-links">
</p> <a target="_blank" href="https://thefeathers.in">Project Site / Currently down</a>
</p>
</div>
</div> </div>
<div class="col-2-2 t-center p-item"> <div class="col-2-2 t-center">
<h3>The Devs Network</h3> <div class="p-item">
<p>A Telegram network for developers. Contributed to development.</p> <h3>The Devs Network</h3>
<ul class="tags"> <p>A Telegram network for developers. Contributed to development.</p>
<li>JavaScript</li> <ul class="tags">
<li>Node</li> <li>JavaScript</li>
<li>React</li> <li>Node</li>
<li>Material</li> <li>React</li>
<li>Design</li> <li>Material</li>
</ul> <li>Design</li>
<p class="p-links"> </ul>
<a target="_blank" href="https://github.com/thedevs-network">GitHub</a> <p class="p-links">
<a target="_blank" href="https://thedevs.network">Project Site</a> <a target="_blank" href="https://github.com/thedevs-network">GitHub</a>
</p> <a target="_blank" href="https://thedevs.network">Project Site</a>
</p>
</div>
</div> </div>
<div class="col-2-3 t-center p-item"> <div class="col-2-3 t-center">
<h3>Curatio Healthcare</h3> <div class="p-item">
<p>Design and development of custom site (WordPress).</p> <h3>Curatio Healthcare</h3>
<ul class="tags"> <p>Design and development of custom site (WordPress).</p>
<li>Design</li> <ul class="tags">
<li>WordPress</li> <li>Design</li>
<li>JavaScript</li> <li>WordPress</li>
<li>HTML</li> <li>JavaScript</li>
<li>CSS</li> <li>HTML</li>
</ul> <li>CSS</li>
<p class="p-links"> </ul>
<a target="_blank" href="http://curatiohealthcare.com">Project Site</a> <p class="p-links">
</p> <a target="_blank" href="http://curatiohealthcare.com">Project Site</a>
</p>
</div>
</div> </div>
</section> </section>
<section id="contact" class="row-full"> <section id="contact" class="row-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