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
Split 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 {
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; }

174
docs/index.html
View File

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

31
sass/style.sass
View File

@ -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

Write Preview
Loading…
Cancel
Save