Browse Source

Card: fix stacking on Safari, reduce vert. font

tr-letter
Kevin Mok 5 years ago
parent
commit
497ad86122
Signed by: Kevin-Mok GPG Key ID: AEA75288DC135CF5
  1. 70
      assets/sass/main.scss
  2. 20
      layouts/card/section.html
  3. 2
      layouts/partials/base/header.html

70
assets/sass/main.scss

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

20
layouts/card/section.html

@ -14,41 +14,47 @@
<nobr> <nobr>
me@kevin-mok.com me@kevin-mok.com
<span class="social"><span class="spacing"> <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" <a href="https://fosstodon.org/@Kevin"
target="_blank" id="mastodon" class="link link-top"> target="_blank" id="mastodon" class="link link-top">
<img src="https://kevin-mok.com/img/social/mastodon.svg" alt=""/> <img src="https://kevin-mok.com/img/social/mastodon.svg" alt=""/>
</a></span> </a></span>
</span> </span>
<span class="social"><span class="spacing"> <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" <a href="https://www.linkedin.com/in/Kev-Mok" target="_blank"
target="_blank" class="link linkedin linkedin-left"> target="_blank" class="link linkedin linkedin-left">
<img src="https://kevin-mok.com/img/social/linkedin.svg" alt=""/> <img src="https://kevin-mok.com/img/social/linkedin.svg" alt=""/>
</a></span> </a></span>
</span> </span>
<span class="social"><span class="spacing"> <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> <a href="https://www.linkedin.com/in/Kev-Mok" target="_blank" class="link linkedin linkedin-left"></a></span>
</span> </span>
<span class="social"><span class="spacing"> <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" <a href="https://www.linkedin.com/in/Kev-Mok" target="_blank"
class="link linkedin linkedin-middle"></a></span> class="link linkedin linkedin-middle"></a></span>
</span> </span>
<span class="social"><span class="spacing"> <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"> <a href="https://github.com/Kevin-Mok" target="_blank" id="github" class="link">
<img src="https://kevin-mok.com/img/social/github.svg" alt=""/> <img src="https://kevin-mok.com/img/social/github.svg" alt=""/>
</a></span> </a></span>
</span> </span>
<span class="social"><span class="spacing"> <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"> <a href="https://kevin-mok.com/" target="_blank" id="site" class="link">
<img src="https://kevin-mok.com/img/resume/link.svg" alt=""/> <img src="https://kevin-mok.com/img/resume/link.svg" alt=""/>
</a></span> </a></span>
</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"> <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=""/> <img src="https://kevin-mok.com/img/resume/envelope.svg" alt=""/>
</a></span> </a></span>

2
layouts/partials/base/header.html

@ -12,7 +12,7 @@
{{ .Hugo.Generator }} {{ .Hugo.Generator }}
<meta name="google-site-verification" content="3aZhrY5bFgQY0HY2DNNUhbkuIfVEcwkrQHnbJd8jCCQ" /> <meta name="google-site-verification" content="3aZhrY5bFgQY0HY2DNNUhbkuIfVEcwkrQHnbJd8jCCQ" />
<meta name="viewport" content="width=device-width, initial-scale=1"> <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"> <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://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> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

Loading…
Cancel
Save