From 623dc8bc5229fcb6456ddb7c54b5365b40fa1315 Mon Sep 17 00:00:00 2001 From: Gabriel Simmer Date: Fri, 10 Jul 2020 21:57:00 +0100 Subject: [PATCH] Fix pills, prefix subheader. --- assets/stylesheet.css | 180 ++++++------------------------------------ index.html | 5 +- 2 files changed, 25 insertions(+), 160 deletions(-) diff --git a/assets/stylesheet.css b/assets/stylesheet.css index 4aa8cc9..fa488d1 100644 --- a/assets/stylesheet.css +++ b/assets/stylesheet.css @@ -26,6 +26,17 @@ --python: #4584B6; } +.pill { + border: 1px solid var(--text-colour); + font-size: 55%; + padding: 0 10px; + vertical-align: middle; + border-radius: 5px; + font-weight: bold; + background-color: var(--text-colour); + color: var(--background-colour); +} + .php { background-color: var(--php); border-color: var(--php); @@ -62,15 +73,6 @@ color: var(--background-colour); } -.pill { - border: 1px solid; - font-size: 55%; - padding: 0 10px; - vertical-align: middle; - border-radius: 5px; - font-weight: bold; -} - /* Base Styles –––––––––––––––––––––––––––––––––––––––––––––––––– */ /* NOTE @@ -105,6 +107,11 @@ body { --flutter: #0175C2; --python: #FFDE57; } + .pill { + border: 1px solid var(--text-colour); + background-color: var(--background-colour); + color: var(--text-colour); + } .php { background-color: var(--background-colour); border-color: var(--php); @@ -197,39 +204,6 @@ body { .two-thirds.column { width: 65.3333333333%; } .one-half.column { width: 48%; } - - /* Offsets */ - .offset-by-one.column, - .offset-by-one.columns { margin-left: 8.66666666667%; } - .offset-by-two.column, - .offset-by-two.columns { margin-left: 17.3333333333%; } - .offset-by-three.column, - .offset-by-three.columns { margin-left: 26%; } - .offset-by-four.column, - .offset-by-four.columns { margin-left: 34.6666666667%; } - .offset-by-five.column, - .offset-by-five.columns { margin-left: 43.3333333333%; } - .offset-by-six.column, - .offset-by-six.columns { margin-left: 52%; } - .offset-by-seven.column, - .offset-by-seven.columns { margin-left: 60.6666666667%; } - .offset-by-eight.column, - .offset-by-eight.columns { margin-left: 69.3333333333%; } - .offset-by-nine.column, - .offset-by-nine.columns { margin-left: 78.0%; } - .offset-by-ten.column, - .offset-by-ten.columns { margin-left: 86.6666666667%; } - .offset-by-eleven.column, - .offset-by-eleven.columns { margin-left: 95.3333333333%; } - - .offset-by-one-third.column, - .offset-by-one-third.columns { margin-left: 34.6666666667%; } - .offset-by-two-thirds.column, - .offset-by-two-thirds.columns { margin-left: 69.3333333333%; } - - .offset-by-one-half.column, - .offset-by-one-half.columns { margin-left: 52%; } - } /* Typography @@ -260,15 +234,18 @@ h6 { font-size: 1.5rem; line-height: 1.6; } } p { - margin-top: 0; } + margin-top: 0; +} /* Links –––––––––––––––––––––––––––––––––––––––––––––––––– */ a { - color: #1EAEDB; } + color: #1EAEDB; +} a:hover { - color: #0FA0CE; } + color: #0FA0CE; +} /* Buttons @@ -329,119 +306,6 @@ input[type="button"].button-primary:focus { background-color: #1EAEDB; border-color: #1EAEDB; } - -/* Forms -–––––––––––––––––––––––––––––––––––––––––––––––––– */ -input[type="email"], -input[type="number"], -input[type="search"], -input[type="text"], -input[type="tel"], -input[type="url"], -input[type="password"], -textarea, -select { - height: 38px; - padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */ - background-color: #fff; - border: 1px solid #D1D1D1; - border-radius: 4px; - box-shadow: none; - box-sizing: border-box; } -/* Removes awkward default styles on some inputs for iOS */ -input[type="email"], -input[type="number"], -input[type="search"], -input[type="text"], -input[type="tel"], -input[type="url"], -input[type="password"], -textarea { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; } -textarea { - min-height: 65px; - padding-top: 6px; - padding-bottom: 6px; } -input[type="email"]:focus, -input[type="number"]:focus, -input[type="search"]:focus, -input[type="text"]:focus, -input[type="tel"]:focus, -input[type="url"]:focus, -input[type="password"]:focus, -textarea:focus, -select:focus { - border: 1px solid #33C3F0; - outline: 0; } -label, -legend { - display: block; - margin-bottom: .5rem; - font-weight: 600; } -fieldset { - padding: 0; - border-width: 0; } -input[type="checkbox"], -input[type="radio"] { - display: inline; } -label > .label-body { - display: inline-block; - margin-left: .5rem; - font-weight: normal; } - - -/* Lists -–––––––––––––––––––––––––––––––––––––––––––––––––– */ -ul { - list-style: circle inside; } -ol { - list-style: decimal inside; } -ol, ul { - padding-left: 0; - margin-top: 0; } -ul ul, -ul ol, -ol ol, -ol ul { - margin: 1.5rem 0 1.5rem 3rem; - font-size: 90%; } -li { - margin-bottom: 1rem; } - - -/* Code -–––––––––––––––––––––––––––––––––––––––––––––––––– */ -code { - padding: .2rem .5rem; - margin: 0 .2rem; - font-size: 90%; - white-space: nowrap; - background: #F1F1F1; - border: 1px solid #E1E1E1; - border-radius: 4px; } -pre > code { - display: block; - padding: 1rem 1.5rem; - white-space: pre; } - - -/* Tables -–––––––––––––––––––––––––––––––––––––––––––––––––– */ -th, -td { - padding: 12px 15px; - text-align: left; - border-bottom: 1px solid #E1E1E1; } -th:first-child, -td:first-child { - padding-left: 0; } -th:last-child, -td:last-child { - padding-right: 0; } - - /* Spacing –––––––––––––––––––––––––––––––––––––––––––––––––– */ button, diff --git a/index.html b/index.html index b737ed1..439d892 100644 --- a/index.html +++ b/index.html @@ -15,7 +15,7 @@

Gabriel Simmer

-

Developer & Community Wrangler

+

Canadian Developer & Community Wrangler

@@ -23,7 +23,8 @@

What I'm currently doing

-

Working as a Community and Partner Engineer @ CircleCI, with a focus on orbs and tooling. +

Working as a Community and Partner Engineer @ CircleCI, with a focus on orbs and tooling. + Currently living in the United Kingdom. Moderator on the /r/webdev and /r/web_design subreddits, and admin on the associated Discord server. Playing around with Clojure in my free time.

More updates