Customizing GitHub Gists: Custom Frame

In this example below you will see how to do a Customizing GitHub Gists: Custom Frame with some HTML / CSS and Javascript

Customizing the look and feel of a Gist.

Thumbnail
This awesome code was written by lonekorean, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright lonekorean ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Customizing GitHub Gists: Custom Frame</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <p>This is just filler text, showing what an article might look like. Let's say it's an article about code, with an embedded Gist, like this!</p>

<script src="https://gist.github.com/lonekorean/8a6a3c508b7c71deb4070d3314900b1f.js"></script>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/lonekorean/customizing-github-gists-custom-frame-YZXXBr */
@import url('https://fonts.googleapis.com/css?family=Droid+Sans+Mono|Open+Sans');

body {
  margin: 20px;
  font: 16px 'Open Sans', sans-serif;
}

body .gist .gist-file {
  margin-bottom: 0;
  border: 1px dashed #adb5bd;
  border-radius: 0;
}

body .gist .gist-data {
  border-bottom: none;
  border-radius: 0;
  background-color: #f1f3f5;
}

body .gist .blob-wrapper {
  border-radius: 0;
}

body .gist .highlight {
  background-color: transparent;
  font-family: 'Droid Sans Mono', monospace;
  font-size: 14px;
}

body .gist .highlight td {
  padding: 5px 15px !important;
  line-height: 1;
  font-family: inherit;
  font-size: inherit;
}

body .gist tr:first-child td {
  padding-top: 15px !important;
}

body .gist tr:last-child td {
  padding-bottom: 15px !important;
}

body .gist .blob-num {
  color: #ced4da;
  background-color: #495057;
  pointer-events: none;
}

body .gist .gist-meta {
  display: none;
}

Comments