mirror of
https://github.com/gmemstr/gmemstr.github.io.git
synced 2024-09-20 04:31:09 +01:00
Language pill styling.
This commit is contained in:
Gabriel Simmer
parent
2b2eb853b4
commit
514a9d5cc4
|
|
@ -14,37 +14,61 @@
|
||||||
* Language highlight colours. Should be or match the language/technology's
|
* Language highlight colours. Should be or match the language/technology's
|
||||||
* branding guidelines.
|
* branding guidelines.
|
||||||
*/
|
*/
|
||||||
|
:root {
|
||||||
|
--background-colour: #fff;
|
||||||
|
--text-colour: #222;
|
||||||
|
--php: rgb(136, 146, 191);
|
||||||
|
--javascript: #83CD29;
|
||||||
|
--go: #00ADD8;
|
||||||
|
--flutter: #02569B;
|
||||||
|
--clojure: #62B132;
|
||||||
|
--rust: #DEA584;
|
||||||
|
--python: #4584B6;
|
||||||
|
}
|
||||||
|
|
||||||
.php {
|
.php {
|
||||||
color: rgb(136, 146, 191);
|
background-color: var(--php);
|
||||||
|
border-color: var(--php);
|
||||||
|
color: var(--background-colour);
|
||||||
}
|
}
|
||||||
|
|
||||||
.javascript {
|
.javascript {
|
||||||
color: #83cd29;
|
background-color: var(--javascript);
|
||||||
|
border-color: var(--javascript);
|
||||||
|
color: var(--background-colour);
|
||||||
}
|
}
|
||||||
|
|
||||||
.go {
|
.go {
|
||||||
color: #00ADD8;
|
background-color: var(--go);
|
||||||
|
border-color: var(--go);
|
||||||
|
color: var(--background-colour);
|
||||||
}
|
}
|
||||||
|
|
||||||
.flutter {
|
.flutter {
|
||||||
color: #02569B;
|
background-color: var(--flutter);
|
||||||
|
border-color: var(--flutter);
|
||||||
|
color: var(--background-colour);
|
||||||
}
|
}
|
||||||
|
|
||||||
.clojure {
|
.clojure {
|
||||||
color: #62B132;
|
background-color: var(--clojure);
|
||||||
|
border-color: var(--clojure);
|
||||||
|
color: var(--background-colour);
|
||||||
}
|
}
|
||||||
|
|
||||||
.rust {
|
.rust {
|
||||||
color: #dea584;
|
background-color: var(--rust);
|
||||||
|
border-color: var(--rust);
|
||||||
|
color: var(--background-colour);
|
||||||
}
|
}
|
||||||
|
|
||||||
.python {
|
.python {
|
||||||
color: #4584b6;
|
background-color: var(--python);
|
||||||
|
border-color: var(--python);
|
||||||
|
color: var(--background-colour);
|
||||||
}
|
}
|
||||||
|
|
||||||
.drupal {
|
.pill {
|
||||||
color: #0077C0;
|
border: 1px solid;
|
||||||
|
font-size: 55%;
|
||||||
|
padding: 0 10px;
|
||||||
|
vertical-align: middle;
|
||||||
|
border-radius: 5px;
|
||||||
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Base Styles
|
/* Base Styles
|
||||||
|
|
@ -52,10 +76,6 @@
|
||||||
/* NOTE
|
/* NOTE
|
||||||
html is set to 62.5% so that all the REM measurements throughout Skeleton
|
html is set to 62.5% so that all the REM measurements throughout Skeleton
|
||||||
are based on 10px sizing. So basically 1.5rem = 15px :) */
|
are based on 10px sizing. So basically 1.5rem = 15px :) */
|
||||||
:root {
|
|
||||||
--background-colour: #fff;
|
|
||||||
--text-colour: #222;
|
|
||||||
}
|
|
||||||
* {
|
* {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
text-rendering: optimizeLegibility;
|
text-rendering: optimizeLegibility;
|
||||||
|
|
@ -65,7 +85,7 @@ are based on 10px sizing. So basically 1.5rem = 15px :) */
|
||||||
}
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
font-size: 62.5%;
|
font-size: 62.5%;
|
||||||
-webkit-text-size-adjust: 100%;
|
-webkit-text-size-adjust: 100%;
|
||||||
}
|
}
|
||||||
body {
|
body {
|
||||||
|
|
@ -73,7 +93,7 @@ body {
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
||||||
color: var(--text-colour);
|
color: var(--text-colour);
|
||||||
background-color: var(--background-colour);
|
background-color: var(--background-colour);
|
||||||
margin: 20px 0;
|
margin: 20px 0;
|
||||||
}
|
}
|
||||||
|
|
@ -82,12 +102,43 @@ body {
|
||||||
:root {
|
:root {
|
||||||
--background-colour: #202225;
|
--background-colour: #202225;
|
||||||
--text-colour: #dcddde;
|
--text-colour: #dcddde;
|
||||||
|
--flutter: #0175C2;
|
||||||
|
--python: #FFDE57;
|
||||||
|
}
|
||||||
|
.php {
|
||||||
|
background-color: var(--background-colour);
|
||||||
|
border-color: var(--php);
|
||||||
|
color: var(--php);
|
||||||
|
}
|
||||||
|
.javascript {
|
||||||
|
background-color: var(--background-colour);
|
||||||
|
border-color: var(--javascript);
|
||||||
|
color: var(--javascript);
|
||||||
|
}
|
||||||
|
.go {
|
||||||
|
background-color: var(--background-colour);
|
||||||
|
border-color: var(--go);
|
||||||
|
color: var(--go);
|
||||||
}
|
}
|
||||||
.flutter {
|
.flutter {
|
||||||
color: #0175c2;
|
background-color: var(--background-colour);
|
||||||
|
border-color: var(--go);
|
||||||
|
color: var(--go);
|
||||||
|
}
|
||||||
|
.clojure {
|
||||||
|
background-color: var(--background-colour);
|
||||||
|
border-color: var(--clojure);
|
||||||
|
color: var(--clojure);
|
||||||
|
}
|
||||||
|
.rust {
|
||||||
|
background-color: var(--background-colour);
|
||||||
|
border-color: var(--rust);
|
||||||
|
color: var(--rust);
|
||||||
}
|
}
|
||||||
.python {
|
.python {
|
||||||
color: #ffde57;
|
background-color: var(--background-colour);
|
||||||
|
border-color: var(--python);
|
||||||
|
color: var(--python);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -187,12 +238,16 @@ h1, h2, h3, h4, h5, h6 {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
margin-bottom: 2rem;
|
margin-bottom: 2rem;
|
||||||
font-weight: 300; }
|
font-weight: 300; }
|
||||||
h1 { font-size: 4.0rem; line-height: 1.2; letter-spacing: -.1rem;}
|
h1 { font-size: 4.0rem; line-height: 1.2; font-weight: 500; }
|
||||||
h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
|
h2 { font-size: 3.6rem; line-height: 1.25; }
|
||||||
h3 { font-size: 3.0rem; line-height: 1.3; letter-spacing: -.1rem; }
|
h3 { font-size: 3.0rem; line-height: 1.3; font-weight: 500; }
|
||||||
h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
|
h4 { font-size: 2.4rem; line-height: 1.35; }
|
||||||
h5 { font-size: 1.8rem; line-height: 1.5; letter-spacing: -.05rem; }
|
h5 { font-size: 1.8rem; line-height: 1.5; }
|
||||||
h6 { font-size: 1.5rem; line-height: 1.6; letter-spacing: 0; }
|
h6 { font-size: 1.5rem; line-height: 1.6; }
|
||||||
|
|
||||||
|
.project h4, .experiment h4 {
|
||||||
|
margin-bottom: 0.05rem;
|
||||||
|
}
|
||||||
|
|
||||||
/* Larger than phablet */
|
/* Larger than phablet */
|
||||||
@media (min-width: 550px) {
|
@media (min-width: 550px) {
|
||||||
|
|
@ -231,7 +286,6 @@ input[type="button"] {
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
line-height: 38px;
|
line-height: 38px;
|
||||||
letter-spacing: .1rem;
|
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
|
|
||||||
24
index.html
24
index.html
|
|
@ -15,7 +15,7 @@
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="twelve columns">
|
<div class="twelve columns">
|
||||||
<h1>Gabriel Simmer</h1>
|
<h1>Gabriel Simmer</h1>
|
||||||
<h2>Developer & Community Wrangler</h2>
|
<h3>Developer & Community Wrangler</h3>
|
||||||
<hr>
|
<hr>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -35,55 +35,55 @@
|
||||||
<div class="six columns">
|
<div class="six columns">
|
||||||
<h3>Projects</h3>
|
<h3>Projects</h3>
|
||||||
<div class="project">
|
<div class="project">
|
||||||
<h4>Platypus <span class="go">Go</span></h4>
|
<h4>Platypus <span class="pill go">Go</span></h4>
|
||||||
<p>Large-scale server usage monitoring leveraging websockets. <github-repo>gmemstr/platypus</github-repo></p>
|
<p>Large-scale server usage monitoring leveraging websockets. <github-repo>gmemstr/platypus</github-repo></p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="project">
|
<div class="project">
|
||||||
<h4>pogo <span class="go">Go</span></h4>
|
<h4>pogo <span class="pill go">Go</span></h4>
|
||||||
<p>Self-hosted podcast content manager and RSS feed generator. <github-repo>gmemstr/pogo</github-repo></p>
|
<p>Self-hosted podcast content manager and RSS feed generator. <github-repo>gmemstr/pogo</github-repo></p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="project">
|
<div class="project">
|
||||||
<h4>sliproad <span class="go">Go</span></h4>
|
<h4>sliproad <span class="pill go">Go</span></h4>
|
||||||
<p>Tie together file storage providers in a single unified interface and API. <github-repo>gmemstr/sliproad</github-repo></p>
|
<p>Tie together file storage providers in a single unified interface and API. <github-repo>gmemstr/sliproad</github-repo></p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="project">
|
<div class="project">
|
||||||
<h4>Deploy <span class="flutter">Flutter</span></h4>
|
<h4>Deploy <span class="pill flutter">Flutter</span> <span class="pill">Dart</span></h4>
|
||||||
<p>CircleCI mobile client. <github-repo>gmemstr/deploy-app</github-repo></p>
|
<p>CircleCI mobile client. <github-repo>gmemstr/deploy-app</github-repo></p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="project">
|
<div class="project">
|
||||||
<h4>Database Janitor <span class="php">PHP</span></h4>
|
<h4>Database Janitor <span class="pill php">PHP</span></h4>
|
||||||
<p>Create sanitized database dumps. <github-repo>gmemstr/database-janitor</github-repo></p>
|
<p>Create sanitized database dumps. <github-repo>gmemstr/database-janitor</github-repo></p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="project">
|
<div class="project">
|
||||||
<h4>Drupal modules <span class="drupal">Drupal</span></h4>
|
<h4>Drupal modules <span class="pill php">PHP</span></h4>
|
||||||
<p>Various Drupal modules created both for client sites and personal use. <a href="https://www.drupal.org/u/gmem">/u/gmem</a></p>
|
<p>Various Drupal modules created both for client sites and personal use. <a href="https://www.drupal.org/u/gmem">/u/gmem</a></p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="six columns">
|
<div class="six columns">
|
||||||
<h3>Experiments</h3>
|
<h3>Experiments</h3>
|
||||||
<div class="experiment">
|
<div class="experiment">
|
||||||
<h4>banana-clj <span class="clojure">Clojure</span></h4>
|
<h4>banana-clj <span class="pill clojure">Clojure</span></h4>
|
||||||
<p>Encode your data as the word "banana". <github-repo>gmemstr/banana-clj</github-repo></p>
|
<p>Encode your data as the word "banana". <github-repo>gmemstr/banana-clj</github-repo></p>
|
||||||
</div>
|
</div>
|
||||||
<div class="experiment">
|
<div class="experiment">
|
||||||
<h4>whalepod <span class="rust">Rust</span></h4>
|
<h4>whalepod <span class="pill rust">Rust</span></h4>
|
||||||
<p>Quicky generate Dockerfiles based on a template. <github-repo>gmemstr/whalepod</github-repo></p>
|
<p>Quicky generate Dockerfiles based on a template. <github-repo>gmemstr/whalepod</github-repo></p>
|
||||||
</div>
|
</div>
|
||||||
<div class="experiment">
|
<div class="experiment">
|
||||||
<h4>circleci-api-scripts <span class="python">Python</span></h4>
|
<h4>circleci-api-scripts <span class="pill python">Python</span></h4>
|
||||||
<p>Collection of scripts for interacting with the CircleCI APIs and collecting data. <github-repo>gmemstr/circleci-api-scripts</github-repo></p>
|
<p>Collection of scripts for interacting with the CircleCI APIs and collecting data. <github-repo>gmemstr/circleci-api-scripts</github-repo></p>
|
||||||
</div>
|
</div>
|
||||||
<div class="experiment">
|
<div class="experiment">
|
||||||
<h4>no-swears <span class="javascript">JavaScript</span></h4>
|
<h4>no-swears <span class="pill javascript">JavaScript</span></h4>
|
||||||
<p>Small module for removing swear words from strings. <github-repo>gmemstr/no-swears</github-repo></p>
|
<p>Small module for removing swear words from strings. <github-repo>gmemstr/no-swears</github-repo></p>
|
||||||
</div>
|
</div>
|
||||||
<div class="experiment">
|
<div class="experiment">
|
||||||
<h4>GTFO Terminal OCR <span class="python">Python</span></h4>
|
<h4>GTFO Terminal OCR <span class="pill python">Python</span></h4>
|
||||||
<p>Analyze terminals from the "GTFO" game and extract information. <github-repo>gmemstr/gtfo-terminal-ocr</github-repo></p>
|
<p>Analyze terminals from the "GTFO" game and extract information. <github-repo>gmemstr/gtfo-terminal-ocr</github-repo></p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue