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

Copy resume CSS

resume-pdf-3
Kevin Mok 2 years ago
parent
04a0631b41
commit
f22e48816c
No known key found for this signature in database GPG Key ID: C072BD80DB66DE18
3 changed files with 91 additions and 250 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. 2
      .gitignore
  2. 337
      assets/sass/main.scss
  3. 2
      layouts/partials/base/header.html

2
.gitignore
View File

@ -3,6 +3,8 @@ public/
resources/_gen/ resources/_gen/
themes/base16* themes/base16*
*.pdf
commit-msg.txt commit-msg.txt
.hugo_build.lock .hugo_build.lock
static/server-apps.json static/server-apps.json

337
assets/sass/main.scss
View File

@ -2,14 +2,10 @@
// base colors {{{ // // base colors {{{ //
$base00: #2d2d2d;
$base01: #393939;
$base02: #515151; $base02: #515151;
$base03: #747369; $base03: #747369;
$base04: #a09f93; $base04: #a09f93;
$base05: #d3d0c8; $base05: #d3d0c8;
$base06: #e8e6df;
$base07: #f2f0ec;
$base-red: #f2777a; $base-red: #f2777a;
$base-orange: #f99157; $base-orange: #f99157;
$base-yellow: #ffcc66; $base-yellow: #ffcc66;
@ -19,6 +15,13 @@ $base-blue: #6699cc;
$base-violet: #cc99cc; $base-violet: #cc99cc;
$base-dark-orange: #d27b53; $base-dark-orange: #d27b53;
/* .base00 { color: #2d2d2d; }
.base01 { color: #393939; }
.base02 { color: #515151; }
.base03 { color: #747369; }
.base04 { color: #a09f93; }
.base06 { color: #e8e6df; }
.base07 { color: #f2f0ec; } */
.base08 { color: $base-red; } .base08 { color: $base-red; }
.base09 { color: $base-orange; } .base09 { color: $base-orange; }
.base0a { color: $base-yellow; } .base0a { color: $base-yellow; }
@ -35,7 +38,6 @@ $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;
@ -88,23 +90,14 @@ $vert-phone-width: 500px;
} }
}// }}} }// }}}
@mixin a-no-underline() {// {{{
a {
text-decoration: none;
&:hover {
text-decoration: none;
}
}
}// }}}
// }}} mixins // // }}} mixins //
// general elements {{{ // // general elements {{{ //
$background-color: #2d2d2d;
$color: #f2f0ec;
// $background-color: white;
// $color: black;
// $background-color: #2d2d2d;
// $color: #f2f0ec;
$background-color: white;
$color: black;
body { body {
margin: 0; margin: 0;
@ -112,7 +105,8 @@ body {
color: $color; color: $color;
line-height: 1.5; line-height: 1.5;
// font-size: 100%; // font-size: 100%;
font-size: 15px;
// font-size: 15px;
font-size: 20px;
/* font-family: 'Source Code Pro', monospace; */ /* font-family: 'Source Code Pro', monospace; */
font-family: 'Hack', monospace; font-family: 'Hack', monospace;
display: flex; display: flex;
@ -214,7 +208,6 @@ footer {
position: relative; position: relative;
padding-right: $side-padding; padding-right: $side-padding;
// padding-right: .9em; // padding-right: .9em;
@include a-no-underline();
img { img {
height: 1.5em; height: 1.5em;
@ -256,22 +249,22 @@ p {
margin-bottom: 1rem; margin-bottom: 1rem;
} }
h1 {
font-size: 2rem;
// h1 {
// font-size: 2rem;
@media (max-width: $phone-width) {
font-size: 1.75rem;
}
}
h2 {
font-size: 1.5rem;
// @media (max-width: $phone-width) {
// font-size: 1.75rem;
// }
// }
// h2 {
// font-size: 1.5rem;
@media (max-width: $phone-width) {
font-size: 1.4rem;
}
}
// @media (max-width: $phone-width) {
// font-size: 1.4rem;
// }
// }
h3 { font-size: 1.25rem } h3 { font-size: 1.25rem }
h4 { font-size: 1rem }
// h4 { font-size: 1rem }
h5 { font-size: .875rem } h5 { font-size: .875rem }
h6 { font-size: .75rem } h6 { font-size: .75rem }
@ -486,25 +479,31 @@ header {// {{{
#print-icon {// {{{ #print-icon {// {{{
float: right; float: right;
display: none;
img { img {
height: 2em !important;
position: absolute;
height: 1.75em;
position: relative;
top: 1em; top: 1em;
} }
}// }}} }// }}}
#contact-info {// {{{ #contact-info {// {{{
@include side-margin-em(0); @include side-margin-em(0);
@include side-padding-rem(0);
// @include vert-padding-rem(0.5); // @include vert-padding-rem(0.5);
@include a-color($base-sky-blue); @include a-color($base-sky-blue);
width: 100%;
// @media (min-width: 1200px) {
// .container{
// min-width: $max-page-width;
// }
// }
// min-width: $max-page-width;
@media (min-width: 1200px) {
.container{
min-width: $max-page-width;
}
}
a {// {{{
text-decoration: none;
&:hover {
text-decoration: none;
}
}// }}}
font-size: .9em; font-size: .9em;
@ -531,11 +530,11 @@ header {// {{{
margin-left: 5px; margin-left: 5px;
// position: relative; // position: relative;
// left: -8px; // left: -8px;
@media (max-width: $phone-width) {
// display: none;
// font-size: 10px;
font-size: .8em;
}
// @media (max-width: $phone-width) {
// // display: none;
// // font-size: 10px;
// font-size: .8em;
// }
} }
}// }}} }// }}}
@ -550,45 +549,44 @@ header {// {{{
h1 {// {{{ h1 {// {{{
color: $base-orange; color: $base-orange;
margin-top: 1rem;
margin-top: 1.3rem;
@media (max-width: $phone-width) {
margin-top: .75rem;
}
// @media (max-width: $phone-width) {
// margin-top: .75rem;
// }
}// }}} }// }}}
h2 {// {{{ h2 {// {{{
color: $base-orange; color: $base-orange;
margin-top: .5rem; margin-top: .5rem;
@media (max-width: $phone-width) {
font-size: 1.2em;
margin-top: .75rem;
}
// @media (max-width: $phone-width) {
// font-size: 1.2em;
// margin-top: .75rem;
// }
}// }}} }// }}}
h4 {// {{{ h4 {// {{{
color: $base-yellow; color: $base-yellow;
margin-top: .5rem; margin-top: .5rem;
@media (max-width: $phone-width) {
font-size: 1.2em;
margin-top: .75rem;
}
// @media (max-width: $phone-width) {
// font-size: 1.2em;
// margin-top: .75rem;
// }
}// }}} }// }}}
.date {// {{{ .date {// {{{
padding-top: .8em;
float: right; float: right;
color: $base03; color: $base03;
@media (max-width: $phone-width) {
padding-top: 0em;
}
// @media (max-width: $phone-width) {
// padding-top: 0em;
// }
}// }}} }// }}}
#projects {// {{{ #projects {// {{{
h1 {
margin-bottom: 3px;
}
// // h1 {
// // margin-bottom: 3px;
// // }
.project {// {{{ .project {// {{{
@include vert-padding-rem(.2); @include vert-padding-rem(.2);
@ -602,6 +600,10 @@ header {// {{{
height: 1.2em; height: 1.2em;
} }
.project-header {
margin-bottom: .6em;
}
.project-link { .project-link {
&:hover { &:hover {
text-decoration: none; text-decoration: none;
@ -653,13 +655,14 @@ header {// {{{
} }
}// }}} }// }}}
@media (max-width: $phone-width) {
font-size: 14px;
// font-size: 1em;
}
// @media (max-width: $phone-width) {
// font-size: 14px;
// // font-size: 1em;
// }
&.letter { &.letter {
margin-top: 2em; margin-top: 2em;
line-height: 1.5em;
img { img {
height: 4.5em; height: 4.5em;
@ -668,21 +671,19 @@ header {// {{{
h2 { h2 {
color: $base-red; color: $base-red;
margin-top: 0em; margin-top: 0em;
margin-bottom: .4em;
} }
p { p {
margin-bottom: 1.5em;
margin-bottom: 1em;
} }
.no-line-spacing { .no-line-spacing {
line-height: .5em; line-height: .5em;
margin-bottom: 2.15em;
margin-bottom: 1.75em;
p { p {
margin-bottom: 1em; margin-bottom: 1em;
} }
strong {
line-height: 1.25em;
}
} }
} }
}// }}} }// }}}
@ -737,168 +738,6 @@ header {// {{{
} }
}// }}} }// }}}
#card {// {{{
@include vert-margin-rem(2);
align-items: center;
justify-content: center;
font-family: 'Oxygen Mono', monospace;
.container {// {{{
padding-left: 0;
padding-right: 0;
.row {
padding-top: 6rem;
padding-bottom: 8rem;
@media (max-width: $phone-width) {
padding-top: 5rem;
padding-bottom: 6rem;
}
}
}// }}}
// $card-bg: #e8e6df;
$card-bg: $base07;
#presentational-container {// {{{
margin-top: 3em;
margin-bottom: 1em;
max-width: $max-page-width;
box-shadow: 2px 2px 10px 5px black;
// card bg
// background-color: #fff;
// background-color: #e5e5e5;
background-color: $card-bg;
}// }}}
#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;
img {
height: .5em;
position: absolute;
left: -.8em;
bottom: -.15em;
}
p { // {{{
position: relative;
// color: grey;
color: #151515;
// color: #133337;
div {
display: inline;
}
.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;
width: 100%;
}
$border-thickness: 8px;
@media (max-width: $vert-phone-width) {
$border-thickness: 5px;
}
.link {
position: absolute;
border-color: black;
border-style: solid;
border-width: 0 $border-thickness $border-thickness $border-thickness;
height: .45em;
width: 100%;
left: 0;
img {
position: absolute;
left: -1em;
}
&.link-top {
border-width: $border-thickness $border-thickness 0 $border-thickness;
img {
position: absolute;
top: -.2em;
}
}
&:hover {
opacity: .6;
}
}
$line-spacing: .65em;
#mastodon {
top: -$line-spacing * 1.1;
border-color: #3088d4;
}
.linkedin {
bottom: -$line-spacing * 1.1;
border-color: #0077b7;
&.linkedin-middle {
border-style: dotted;
border-width: 0 0 3.5px 0;
}
}
#github {
bottom: -$line-spacing * 2.7;
}
#site {
bottom: -$line-spacing * 4.25;
border-color: #ff7058;
}
#email {
top: -$line-spacing * 2.65;
border-color: #d1d0bf;
}
}// }}}
.spacing {
opacity: 0;
}
}// }}}
}// }}}
}// }}}
#letter-home {// {{{
#letter-instr {
text-align: center;
margin-top: 1.5em;
// margin-top: 25vh;
font-size: 1.4em;
}
}// }}}
// TODO: converted up to here // TODO: converted up to here
// hero {{{ // // hero {{{ //
@ -917,20 +756,20 @@ h1.site-title {// {{{
text-decoration: none; text-decoration: none;
} }
@media (max-width: $max-page-width) {
font-size: 3em;
}
// @media (max-width: $phone-width) {
// font-size: 3em;
// }
@media (max-width: $phone-width) {
font-size: 3.5em;
@include vert-margin-rem(.3);
// font-size: 2.5em;
// font-size: 2em;
// @media (max-width: $phone-width) {
// font-size: 3.5em;
// @include vert-margin-rem(.3);
// // font-size: 2.5em;
// // font-size: 2em;
.surrounding {
display: none;
}
}
// .surrounding {
// display: none;
// }
// }
}// }}} }// }}}
.hero-logo img { .hero-logo img {

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

@ -18,7 +18,7 @@
<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>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!-- <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700" type="text/css"> --> <!-- <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700" type="text/css"> -->
<link rel='stylesheet' href='//cdn.jsdelivr.net/npm/hack-font@3.3.0/build/web/hack-subset.css'>
<!-- <link rel='stylesheet' href='//cdn.jsdelivr.net/npm/hack-font@3.3.0/build/web/hack-subset.css'> -->
<!-- <link rel="stylesheet" href="https://meyerweb.com/eric/tools/css/reset/reset.css" type="text/css" media="all" /> --> <!-- <link rel="stylesheet" href="https://meyerweb.com/eric/tools/css/reset/reset.css" type="text/css" media="all" /> -->
<link rel="stylesheet" href="{{ "css/style.css" | relURL }}" type="text/css"> <link rel="stylesheet" href="{{ "css/style.css" | relURL }}" type="text/css">
{{ $main_sass := resources.Get "sass/main.scss" }} {{ $main_sass := resources.Get "sass/main.scss" }}

Write Preview
Loading…
Cancel
Save