Fix link jumping

This commit is contained in:
Chuck Dries 2017-11-16 19:57:44 -07:00
parent 5506cd2e14
commit 64fcae4804
3 changed files with 18 additions and 9 deletions

View File

@ -224,6 +224,7 @@ body {
.slide { .slide {
padding: 0px; padding: 0px;
width: 100%; width: 100%;
margin-top: 50px;
/* width wrapping */ /* width wrapping */
/* Project bits */ } /* Project bits */ }
.slide .project { .slide .project {
@ -233,8 +234,7 @@ body {
border-radius: 5px; border-radius: 5px;
overflow: hidden; overflow: hidden;
box-shadow: 1px 1px 3px #ddd; box-shadow: 1px 1px 3px #ddd;
background: white; background: white; }
margin-bottom: 20px; }
.slide .project .cover { .slide .project .cover {
height: 14em; height: 14em;
background-position: center center; background-position: center center;
@ -315,8 +315,7 @@ body {
text-indent: 2em; } text-indent: 2em; }
.slide h1 { .slide h1 {
font-size: 2em; font-size: 2em;
font-style: italic; font-style: italic; }
margin-top: 1.7em; }
@media (max-width: 800px) { @media (max-width: 800px) {
.slide .widthCenter, .slide > div, .slide p, .slide h1, .slide h2, .slide h3, .slide h4 { .slide .widthCenter, .slide > div, .slide p, .slide h1, .slide h2, .slide h3, .slide h4 {
margin-left: 12px; margin-left: 12px;

View File

@ -18,6 +18,15 @@
<meta name="msapplication-TileColor" content="#FFFFFF" /> <meta name="msapplication-TileColor" content="#FFFFFF" />
<meta name="msapplication-TileImage" content="http://chuckdri.es/icons/mstile-144x144.png" /> <meta name="msapplication-TileImage" content="http://chuckdri.es/icons/mstile-144x144.png" />
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.jump{
margin-top:-130px;
/* height: 120px; */
position: absolute;
display: block;
visibility: hidden;
}
</style>
</head> </head>
<body> <body>
@ -60,7 +69,7 @@
<div id="spaceTakerUpper"> <div id="spaceTakerUpper">
</div> </div>
<div class="slide" style="margin-top:0px;"> <div class="slide" style="margin-top:0px;">
<a name="about" style="padding-top: 130px"></a> <a name="about" class="jump"></a>
<h1>About Me <h1>About Me
<span style="font-size: .5em; font-weight:normal; color: #666;">Why I rock 🎶</span> <span style="font-size: .5em; font-weight:normal; color: #666;">Why I rock 🎶</span>
</h1> </h1>
@ -72,7 +81,7 @@
</p> </p>
</div> </div>
<div class="slide"> <div class="slide">
<a name="skills" style="padding-top: 130px"></a> <a name="skills" class="jump"></a>
<h2>Skills</h2> <h2>Skills</h2>
<div id="skilltable" style="display:none;"> <div id="skilltable" style="display:none;">
<table> <table>
@ -139,7 +148,7 @@
</div> </div>
</div> </div>
<div class="slide"> <div class="slide">
<a name="projects" style="padding-top: 130px;"></a> <a name="projects" class="jump"></a>
<h1>Projects &amp; Experience</h1> <h1>Projects &amp; Experience</h1>
<p style="text-indent: 0; margin-bottom: 5px;font-style: italic; font-weight:normal; color: #555;">More projects coming. For now, check my github or email me.</p> <p style="text-indent: 0; margin-bottom: 5px;font-style: italic; font-weight:normal; color: #555;">More projects coming. For now, check my github or email me.</p>
<div class="grid"> <div class="grid">

View File

@ -130,6 +130,7 @@
@extend .reset; @extend .reset;
padding: 0px; padding: 0px;
width: 100%; width: 100%;
margin-top: 50px;
/* width wrapping */ /* width wrapping */
&>div { &>div {
@extend .widthCenter; @extend .widthCenter;
@ -144,7 +145,7 @@
overflow: hidden; overflow: hidden;
box-shadow: 1px 1px 3px #ddd; box-shadow: 1px 1px 3px #ddd;
background: white; background: white;
margin-bottom: 20px; // margin-bottom: 20px;
.cover { .cover {
height: 14em; height: 14em;
background-position: center center; background-position: center center;
@ -247,7 +248,7 @@
h1 { h1 {
font-size: 2em; font-size: 2em;
font-style: italic; // font-weight: 700; font-style: italic; // font-weight: 700;
margin-top: 1.7em; // margin-top: 1.7em;
} }
.grid { .grid {
// columns: 2 auto; // columns: 2 auto;