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:
parent
2b2eb853b4
commit
514a9d5cc4
|
@ -14,37 +14,61 @@
|
|||
* Language highlight colours. Should be or match the language/technology's
|
||||
* 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 {
|
||||
color: rgb(136, 146, 191);
|
||||
background-color: var(--php);
|
||||
border-color: var(--php);
|
||||
color: var(--background-colour);
|
||||
}
|
||||
|
||||
.javascript {
|
||||
color: #83cd29;
|
||||
background-color: var(--javascript);
|
||||
border-color: var(--javascript);
|
||||
color: var(--background-colour);
|
||||
}
|
||||
|
||||
.go {
|
||||
color: #00ADD8;
|
||||
background-color: var(--go);
|
||||
border-color: var(--go);
|
||||
color: var(--background-colour);
|
||||
}
|
||||
|
||||
.flutter {
|
||||
color: #02569B;
|
||||
background-color: var(--flutter);
|
||||
border-color: var(--flutter);
|
||||
color: var(--background-colour);
|
||||
}
|
||||
|
||||
.clojure {
|
||||
color: #62B132;
|
||||
background-color: var(--clojure);
|
||||
border-color: var(--clojure);
|
||||
color: var(--background-colour);
|
||||
}
|
||||
|
||||
.rust {
|
||||
color: #dea584;
|
||||
background-color: var(--rust);
|
||||
border-color: var(--rust);
|
||||
color: var(--background-colour);
|
||||
}
|
||||
|
||||
.python {
|
||||
color: #4584b6;
|
||||
background-color: var(--python);
|
||||
border-color: var(--python);
|
||||
color: var(--background-colour);
|
||||
}
|
||||
|
||||
.drupal {
|
||||
color: #0077C0;
|
||||
.pill {
|
||||
border: 1px solid;
|
||||
font-size: 55%;
|
||||
padding: 0 10px;
|
||||
vertical-align: middle;
|
||||
border-radius: 5px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Base Styles
|
||||
|
@ -52,10 +76,6 @@
|
|||
/* NOTE
|
||||
html is set to 62.5% so that all the REM measurements throughout Skeleton
|
||||
are based on 10px sizing. So basically 1.5rem = 15px :) */
|
||||
:root {
|
||||
--background-colour: #fff;
|
||||
--text-colour: #222;
|
||||
}
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
text-rendering: optimizeLegibility;
|
||||
|
@ -65,7 +85,7 @@ are based on 10px sizing. So basically 1.5rem = 15px :) */
|
|||
}
|
||||
|
||||
html {
|
||||
font-size: 62.5%;
|
||||
font-size: 62.5%;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
body {
|
||||
|
@ -73,7 +93,7 @@ body {
|
|||
line-height: 1.6;
|
||||
font-weight: 400;
|
||||
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);
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
@ -82,12 +102,43 @@ body {
|
|||
:root {
|
||||
--background-colour: #202225;
|
||||
--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 {
|
||||
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 {
|
||||
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-bottom: 2rem;
|
||||
font-weight: 300; }
|
||||
h1 { font-size: 4.0rem; line-height: 1.2; letter-spacing: -.1rem;}
|
||||
h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
|
||||
h3 { font-size: 3.0rem; line-height: 1.3; letter-spacing: -.1rem; }
|
||||
h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
|
||||
h5 { font-size: 1.8rem; line-height: 1.5; letter-spacing: -.05rem; }
|
||||
h6 { font-size: 1.5rem; line-height: 1.6; letter-spacing: 0; }
|
||||
h1 { font-size: 4.0rem; line-height: 1.2; font-weight: 500; }
|
||||
h2 { font-size: 3.6rem; line-height: 1.25; }
|
||||
h3 { font-size: 3.0rem; line-height: 1.3; font-weight: 500; }
|
||||
h4 { font-size: 2.4rem; line-height: 1.35; }
|
||||
h5 { font-size: 1.8rem; line-height: 1.5; }
|
||||
h6 { font-size: 1.5rem; line-height: 1.6; }
|
||||
|
||||
.project h4, .experiment h4 {
|
||||
margin-bottom: 0.05rem;
|
||||
}
|
||||
|
||||
/* Larger than phablet */
|
||||
@media (min-width: 550px) {
|
||||
|
@ -231,7 +286,6 @@ input[type="button"] {
|
|||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
line-height: 38px;
|
||||
letter-spacing: .1rem;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
|
|
24
index.html
24
index.html
|
@ -15,7 +15,7 @@
|
|||
<div class="row">
|
||||
<div class="twelve columns">
|
||||
<h1>Gabriel Simmer</h1>
|
||||
<h2>Developer & Community Wrangler</h2>
|
||||
<h3>Developer & Community Wrangler</h3>
|
||||
<hr>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -35,55 +35,55 @@
|
|||
<div class="six columns">
|
||||
<h3>Projects</h3>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="six columns">
|
||||
<h3>Experiments</h3>
|
||||
<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>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
|
Loading…
Reference in a new issue