Kevin-Mok/my-site
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Card: fix stacking on Safari, reduce vert. font

Browse Source
This commit is contained in:
Kevin Mok
2019-10-07 02:19:51 -04:00
parent d1d191e413
commit 497ad86122
3 changed files with 59 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
assets/sass/main.scss
View File

@@ -35,6 +35,7 @@ $base-dark-orange: #d27b53;
// $max-page-width: 52em;
$max-page-width: 45em;
$phone-width: 800px;
$vert-phone-width: 500px;
@mixin side-padding-rem($n) {// {{{
padding-left: $n * 1rem;
@@ -694,16 +695,16 @@ header {// {{{
}
}// }}}
#card {
#card {// {{{
@include vert-margin-rem(2);
align-items: center;
justify-content: center;
font-family: 'Oxygen Mono', monospace;
.container {
.container {// {{{
padding-left: 0;
padding-right: 0;
}
.row {
padding-top: 6rem;
padding-bottom: 8rem;
@@ -713,9 +714,11 @@ header {// {{{
padding-bottom: 6rem;
}
}
}// }}}
// $card-bg: #e8e6df;
$card-bg: $base07;
#presentational-container {
#presentational-container {// {{{
margin-top: 3em;
margin-bottom: 1em;
max-width: $max-page-width;
@@ -724,12 +727,17 @@ header {// {{{
// background-color: #fff;
// background-color: #e5e5e5;
background-color: $card-bg;
}
#email-full {
}// }}}
#email-full {// {{{
font-size: 50px;
@media (max-width: $phone-width) {
font-size: 40px;
}
@media (max-width: $vert-phone-width) {
font-size: 33px;
}
@include vert-margin-rem(2);
height: 7em;
@@ -740,7 +748,7 @@ header {// {{{
bottom: -.15em;
}
p {
p { // {{{
position: relative;
// color: grey;
color: #151515;
@@ -750,10 +758,24 @@ header {// {{{
display: inline;
}
.social {
.social {// {{{
// display: none;
display: inline;
white-space: nowrap;
position: absolute;
// left: 5.5rem;
left: 0rem;
.safari {
display: none;
}
@supports (-webkit-backdrop-filter: blur(1px)) {
left: .65rem;
.safari {
display: inline;
}
}
.link-text {
position: relative;
@@ -761,6 +783,9 @@ header {// {{{
}
$border-thickness: 8px;
@media (max-width: $vert-phone-width) {
$border-thickness: 5px;
}
.link {
position: absolute;
border-color: black;
@@ -813,19 +838,14 @@ header {// {{{
top: -$line-spacing * 2.65;
border-color: #d1d0bf;
}
}
}// }}}
.spacing {
opacity: 0;
}
.social {
position: absolute;
// left: 5.5rem;
left: 0rem;
}
}
}
}
}// }}}
}// }}}
}// }}}
// TODO: converted up to here

20
layouts/card/section.html
View File

@@ -14,41 +14,47 @@
<nobr>
me@kevin-mok.com
<span class="social"><span class="spacing">
me</span><span class="link-text">@kevi
me</span><span class="link-text">@kevi<span
class="safari">n</span>
<a href="https://fosstodon.org/@Kevin"
target="_blank" id="mastodon" class="link link-top">
<img src="https://kevin-mok.com/img/social/mastodon.svg" alt=""/>
</a></span>
</span>
<span class="social"><span class="spacing">
me@</span><span class="link-text">ke
me@</span><span class="link-text">ke<span
class="safari">v</span>
<a href="https://www.linkedin.com/in/Kev-Mok" target="_blank"
target="_blank" class="link linkedin linkedin-left">
<img src="https://kevin-mok.com/img/social/linkedin.svg" alt=""/>
</a></span>
</span>
<span class="social"><span class="spacing">
me@kevin</span><span class="link-text">-mo
me@kevin</span><span class="link-text">-mo<span
class="safari">k</span>
<a href="https://www.linkedin.com/in/Kev-Mok" target="_blank" class="link linkedin linkedin-left"></a></span>
</span>
<span class="social"><span class="spacing">
me@kev</span><span class="link-text">i
me@kev</span><span class="link-text">i<span
class="safari">n</span>
<a href="https://www.linkedin.com/in/Kev-Mok" target="_blank"
class="link linkedin linkedin-middle"></a></span>
</span>
<span class="social"><span class="spacing">
me@</span><span class="link-text">kevin-mo
me@</span><span class="link-text">kevin-mo<span
class="safari">k</span>
<a href="https://github.com/Kevin-Mok" target="_blank" id="github" class="link">
<img src="https://kevin-mok.com/img/social/github.svg" alt=""/>
</a></span>
</span>
<span class="social"><span class="spacing">
me@</span><span class="link-text">kevin-mok.co
me@</span><span class="link-text">kevin-mok.co<span
class="safari">m</span>
<a href="https://kevin-mok.com/" target="_blank" id="site" class="link">
<img src="https://kevin-mok.com/img/resume/link.svg" alt=""/>
</a></span>
</span>
<span class="social"><span class="link-text">me@kevin-mok.co
<span class="social"><span class="link-text">me@kevin-mok.co<span class="safari">&nbsp;</span>
<a href="mailto:me@kevin-mok.com" target="_blank" id="email" class="link link-top">
<img src="https://kevin-mok.com/img/resume/envelope.svg" alt=""/>
</a></span>

2
layouts/partials/base/header.html
View File

@@ -12,7 +12,7 @@
{{ .Hugo.Generator }}
<meta name="google-site-verification" content="3aZhrY5bFgQY0HY2DNNUhbkuIfVEcwkrQHnbJd8jCCQ" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://livejs.com/live.js" charset="utf-8"></script>
<script src="https://cdn.khkm.tk/live.js" charset="utf-8"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>