Skip to content

Commit

Permalink
Mobile UI improvements, improved HTML (#26)
Browse files Browse the repository at this point in the history 
* Improved rendering on mobile devices, highlight path placeholders

* Decreasing default width of dd

* Removing <br> in favor of <section>, improved indenting
  • Loading branch information
@wietze
wietze authored Oct 1, 2024
1 parent 81545ac commit e9537e4
Show file tree
Hide file tree
Showing 4 changed files with 170 additions and 116 deletions.
153 changes: 77 additions & 76 deletions _layouts/bin.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,88 +2,89 @@
layout: common
---

{% include page_title.html title=page.Name %}
{% include function_list.html bin=page %}
{% include page_title.html title=page.Name %}
{% include function_list.html bin=page %}
{{ page.Description | markdownify }}

{{ page.Description | markdownify }}
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-133649096-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

<script async src="https://www.googletagmanager.com/gtag/js?id=UA-133649096-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-133649096-1');
</script>

gtag('config', 'UA-133649096-1');
</script>
<script src="{{ '/assets/url_helper.js' | relative_url }}"></script>
<section>
<h3>Paths:</h3>
<ul style="list-style-type:none">
{%- for ent in page.Full_Path %}
<li data-file-path>{{ent.Path | escape }}</li>
{%- endfor %}
</ul>
</section>
{%- assign resources = page.Resources | where_exp:"resource","resource.Link" %}

<script src="{{ '/assets/url_helper.js' | relative_url }}"></script>
<br>
<div><b>Paths:</b>
<ul style="list-style-type:none">
{% for ent in page.Full_Path %}
<li>{{ent.Path | escape }}</li>
{% endfor %}
</ul>
</div>
{% assign resources = page.Resources %}
{% if resources and resources.size > 0 %}
<br>
<b>Resources:</b>
<ul>
{% for ent in page.Resources %}
<li><a href="{{ent.Link}}">{{ent.Link}}</a></li>
{% endfor %}
</ul>
{% endif %}
{% assign acknowledgements = page.Acknowledgement %}
{% if acknowledgements and acknowledgements.size > 0 %}
<br>
<div><b>Acknowledgements:</b>
<ul>
{% for pers in page.Acknowledgement %}
<li>{{pers.Person}}{% if pers.Handle %} (<a href="https://twitter.com/{{pers.Handle}}">{{pers.Handle}}</a>){% endif %}</li>
{% endfor %}
</ul>
</div>
{% endif %}
{% assign detections = page.Detection %}
{% if detections and detections.size > 0 %}
<br>
<div>
<b>Detection:</b>
<ul>
{% for detection in detections %}{% for entity in detection %}
{%- if resources and resources.size > 0 %}
<section>
<h3>Resources:</h3>
<ul>
{%- for ent in page.Resources %}
<li><a href="{{ent.Link}}">{{ent.Link}}</a></li>
{%- endfor %}
</ul>
</section>
{%- endif %}
{% assign acknowledgements = page.Acknowledgement %}
{%- if acknowledgements and acknowledgements.size > 0 %}
<section>
<h3>Acknowledgements:</h3>
<ul>
{%- for pers in page.Acknowledgement %}
<li>{{pers.Person}}{% if pers.Handle and pers.Handle!="" %} (<a href="https://twitter.com/{{pers.Handle}}">{{pers.Handle}}</a>){% endif %}</li>
{%-endfor %}
</ul>
</section>
{%- endif %}
{% assign detections = page.Detection %}
{%- if detections and detections.size > 0 %}
<section>
<h3>Detections:</h3>
<ul>
{%- for detection in detections %}{% for entity in detection %}
{% if entity[0] != 'IOC' %}
{% capture value %}<a href="{{ entity[1] }}" target="_new" data-shorten="true">{{ entity[1] }}</a>{% endcapture %}
{% capture value %}<a href="{{ entity[1] }}" target="_blank" data-shorten="true">{{ entity[1] }}</a>{% endcapture %}
{% else %}
{% assign value = entity[1] | escape %}
{% endif %}
{%- endif -%}
<li>{{entity[0]}}: {{value}}</li>
{% endfor %}{% endfor %}
</ul>
</div>
{% endif %}
<br>
{%- endfor %}{% endfor %}
</ul>
</section>
{%- endif %}

{% assign test = page.Commands | group_by:"Category"%}
{% for Command in test%}
{% assign function_name = Command.name | downcase %}
<h2 id="{{function_name}}" class ="function-name">
{{- site.data.functions[function_name].label -}}
</h2>
<ol>
{% for item in Command.items %}
<li>
<p>{{item.Description | escape}}</p>
<pre><code>{{item.Command | escape_once}}</code></pre>
<div class="properties">
<dl class="row"><dt class="property">Use case</dt><dd>{{item.Usecase | escape}}</dd></dl>
<dl class="row"><dt class="property">Privileges required</dt><dd>{{item.Privileges}}</dd></dl>
<dl class="row"><dt class="property">Operating systems</dt><dd>{{item.OperatingSystem}}</dd></dl>
<dl class="row"><dt class="property">ATT&CK&reg; technique</dt><dd><span data-attack-tid="{{item.MitreID}}">{{item.MitreID}}</span></dd></dl>
{% if item.Tags %}<dl class="tags row"><dt class="property">Tags</dt><dd>{% for tag_items in item.Tags %}{% for tag_item in tag_items %}{%assign key=tag_item[0]%}{%assign value=tag_item[1]%}{%assign tag=key | append:': ' | append:value %}{% assign default_text = 'This function was tagged with "' | append: tag | append:'".' %}<div class="tag">{{tag}}<div class="tag-tooltip">{{site.data.tags[key][value] | default:default_text}}</div></div>{%endfor%}{%endfor%}</dd></dl>{%endif%}
</div>
</li>
{% endfor %}
</ol>
{% endfor %}
<section>
{%- assign test = page.Commands | group_by:"Category" %}
{%- for Command in test -%}
{%- assign function_name = Command.name | downcase%}
<h2 id="{{function_name}}" class="function-name">
{{- site.data.functions[function_name].label -}}
</h2>
<ol>
{% for item in Command.items -%}
<li>
<p>{{item.Description | escape}}</p>
<pre><code>{{item.Command | escape_once}}</code></pre>
<div class="properties">
<dl class="row"><dt class="property">Use case</dt><dd>{{item.Usecase | escape}}</dd></dl>
<dl class="row"><dt class="property">Privileges required</dt><dd>{{item.Privileges}}</dd></dl>
<dl class="row"><dt class="property">Operating systems</dt><dd>{{item.OperatingSystem}}</dd></dl>
<dl class="row"><dt class="property">ATT&CK&reg; technique</dt><dd><span data-attack-tid="{{item.MitreID}}">{{item.MitreID}}</span></dd></dl>
{%- if item.Tags %}<dl class="tags row"><dt class="property">Tags</dt><dd>{% for tag_items in item.Tags %}{% for tag_item in tag_items %}{%assign key=tag_item[0]%}{%assign value=tag_item[1]%}{%assign tag=key | append:': ' | append:value %}{% assign default_text = 'This function was tagged with "' | append: tag | append:'".' %}<div class="tag">{{tag}}<div class="tag-tooltip">{{site.data.tags[key][value] | default:default_text}}</div></div>{%endfor%}{%endfor%}</dd></dl>{%endif%}
</div>
</li>
{%- endfor %}
</ol>
{%- endfor %}
</section>
73 changes: 42 additions & 31 deletions _layouts/common.html
View file
Original file line number Diff line number Diff line change
@@ -1,36 +1,47 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>
{%- assign title = "" | split:"" -%}
{%- if page.url != '/' -%}
{%- if page.layout == 'bin' -%}
{%- assign page.title = page.title | downcase -%}
{%- endif -%}
{%- assign title = title | push: page.title -%}
<head>
<meta charset="utf-8">
<title>
{%- assign title = "" | split:"" -%}
{%- if page.url != '/' -%}
{%- if page.layout == 'bin' -%}
{%- assign page.title = page.title | downcase -%}
{%- endif -%}
{%- assign title = title | push: page.title -%}
{%- endif -%}

{%- assign title = title | push: site.title -%}
{{- title | join: " | " -}}
</title>
<link rel="icon" href="{{ '/assets/favicon.png' | relative_url }}">
<link rel="stylesheet" href="{{ '/assets/style.css' | relative_url }}" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes">
<script async defer src="https://buttons.github.io/buttons.js"></script>
<script async src="{{ '/assets/mitre_attack.js' | relative_url }}"></script>
</head>
<body>
<a href="https://github.com/LOLBAS-Project/LOLBAS" class="github-corner" aria-label="View source on Github"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
{{ content }}
<script>
// add permalink on headings
document.querySelectorAll('h2, h3, h4, h5, h5').forEach((heading) => {
const link = document.createElement('a');
link.className = 'permalink';
link.href = `#${heading.id}`;
heading.appendChild(link);
});
</script>
</body>
{%- assign title = title | push: site.title -%}
{{- title | join: " | " -}}
</title>
<link rel="icon" href="{{ '/assets/favicon.png' | relative_url }}">
<link rel="stylesheet" href="{{ '/assets/style.css' | relative_url }}" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes">
<script async defer src="https://buttons.github.io/buttons.js"></script>
<script async src="{{ '/assets/mitre_attack.js' | relative_url }}"></script>

{%- if page.layout == 'bin' -%}
<meta name="title" content="{{page.title}} on {{site.title}}">
<meta name="description" content="{{page.Name | escape}} is a living-of-the-land file containing unexpected functionality that can be abused by attackers; this page lists all its use cases.">
<meta property="og:title" name="og:title" content="{{page.title}} on {{site.title}}">
<meta property="og:site_name" name="og:site_name" content="{{site.title}}">
<meta property="og:type" name="og:type" content="object">
<meta property="og:url" name="og:url" content="{{ page.url | absolute_url }}">
<meta property="og:image" name="og:image" content="{{ '/assets/logo.png' | absolute_url }}">
<meta property="og:description" name="og:description" content="{{page.Name | escape}} is a living-of-the-land file containing unexpected functionality that can be abused by attackers; this page lists all its use cases.">
{%- endif %}
</head>
<body>
<a href="https://github.com/LOLBAS-Project/LOLBAS" class="github-corner" aria-label="View source on Github"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
{{ content }}
<script>
// add permalink on headings
document.querySelectorAll('h2').forEach((heading) => {
const link = document.createElement('a');
link.className = 'permalink';
link.href = `#${heading.id}`;
heading.appendChild(link);
});
</script>
</body>
</html>
52 changes: 45 additions & 7 deletions assets/style.scss
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
---
---

@use "sass:color";
$accent: #2fc0f0;
$lighter: #cdf0fc;
$lighter: color.adjust($accent, $lightness: 40%);
$hover: #0d89b3;

// layout
Expand Down Expand Up @@ -43,6 +43,25 @@ $layout-break: "(min-width: #{$column-width + $grace-space})";
max-width: 60vw !important;
transform: translate(-60%, calc(-100% - 2em));
}

ol:has(> :nth-child(2)) {
padding-left: 1em !important;
}

.properties .row {
flex-wrap: wrap;

.property {
min-width: unset;
width: unset;
}
}

h2.function-name {
margin-top: 1em !important;
padding-top: 1em;
border-top: 1px dotted black;
}
}

// common tags
Expand All @@ -63,6 +82,7 @@ pre {
background: $lighter;
padding: 1em;
overflow-x: auto;
white-space: pre-wrap;

code {
padding: 0;
Expand All @@ -80,7 +100,7 @@ a:hover {

// permalink on headings

h2, h3, h4, h5, h5 {
h2, h3, h4, h5 {
.permalink {
margin-left: 5px;
text-decoration: none;
Expand All @@ -103,6 +123,12 @@ h2, h3, h4, h5, h5 {
}
}

h3 {
margin: 0;
font-weight: bold;
font-size: 1em;
}

// binary list and search

#bin-search {
Expand Down Expand Up @@ -263,6 +289,7 @@ ul {
.tags dd {
display: flex;
gap: 1px 5px;
flex-wrap: wrap;
}

.tag {
Expand Down Expand Up @@ -308,24 +335,26 @@ ul {

.properties .property {
font-weight: bold;
min-width: 195px;
box-sizing: border-box
min-width: 175px;
width: 175px;
box-sizing: border-box;
}

.properties .property::after {
content: ':\00a0';
white-space: pre;
}

ol+h2.function-name {
margin-top: 3em;
margin-top: 2em;
}

ol {
padding: 0;
}

ol li+li {
margin-top: 3em;
margin-top: 1em;
}

ol li:only-child {
Expand All @@ -339,3 +368,12 @@ dl.row>dd {
dl { /* Required for Chrome, default in Firefox */
margin: 0;
}

section + section {
margin-top: 1em;
}


.path-highlight {
color: #888;
}
8 changes: 6 additions & 2 deletions assets/url_helper.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,13 @@ function shorten_url(url_input) {
return url_input
}

const highlight_path = file_path => file_path.replace(/(\&lt;.*?\&gt;)/g, '<span class="path-highlight">$1</span>');

window.addEventListener('load', function () {
document.querySelectorAll('a[data-shorten]').forEach((element) => {
element.innerHTML = shorten_url(element.innerHTML)
element.innerHTML = shorten_url(element.innerHTML);
});
document.querySelectorAll('*[data-file-path]').forEach((element) => {
element.innerHTML = highlight_path(element.innerHTML);
});
});

0 comments on commit e9537e4

Please sign in to comment.