arch/gmemstr.github.io
1
0
Fork 0
mirror of https://github.com/gmemstr/gmemstr.github.io.git synced 2024-09-20 04:31:09 +01:00
Code Issues Packages Projects Releases Wiki Activity

Language pill styling.

Browse source
This commit is contained in:
Gabriel Simmer 2020-07-10 21:15:13 +01:00
parent 2b2eb853b4
commit 514a9d5cc4
No known key found for this signature in database
GPG key ID: 33BA4D83B160A0A9
2 changed files with 96 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

110
assets/stylesheet.css
View file

@ -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;
@ -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
View file

@ -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>