Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

style: highlight code snippets #17

Merged
merged 4 commits into from
Jul 24, 2020

Conversation

muety
Copy link
Contributor

@muety muety commented Jul 20, 2020

Added a few minor styling changes that I personally like. In case you don't, feel free to simply close the PR.

@brentvollebregt
Copy link
Owner

If you view this on a mobile screen, the content will overflow.

It would be good to have the div.bg-gray-700 not expand the wrapping div it's in and the content scroll within. max-width: 100%; on the element matching div.bg-gray-700 would fix this.

templates/index.html Outdated Show resolved Hide resolved
templates/index.html Outdated Show resolved Hide resolved
templates/index.html Outdated Show resolved Hide resolved
Copy link
Owner

@brentvollebregt brentvollebregt left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Making these code tags have the class d-inline-flex will give the same effect as in the last state - which looks a lot better in my opinion. Other than that, looks good!

@@ -66,7 +68,11 @@ <h1><a href="https://github.com/brentvollebregt/hit-counter">Hit Counter</a></h1

<h2 class="mt-4">Get the Image for the Page It's On</h2>
<p class="my-1">If you want to get the hit count image for a page you can edit and you want to count, add this line:</p>
<p id="standard" class="text-primary my-0 o-a">&lt;img src="<script>host()</script>/count/tag.svg" alt="Hits"&gt;</p>
<div>
<pre class="bg-gray-700 mw-100 rounded py-2 px-4 d-flex align-items-center justify-content-center">
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<pre class="bg-gray-700 mw-100 rounded py-2 px-4 d-flex align-items-center justify-content-center">
<pre class="bg-gray-700 mw-100 rounded py-2 px-4 d-inline-flex align-items-center justify-content-center">

@@ -87,9 +93,17 @@ <h2 class="mt-4">Generate SVG Code For A Different Website</h2>
<img id="resultImage" src="" alt="Selected Hit Counter">
</div>
<p class="text-muted my-1">Image Tag</p>
<p id="resultImageTag" class="text-primary my-0 o-a"></p>
<div>
<pre class="bg-gray-700 mw-100 rounded py-2 px-4 d-flex align-items-center justify-content-center">
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<pre class="bg-gray-700 mw-100 rounded py-2 px-4 d-flex align-items-center justify-content-center">
<pre class="bg-gray-700 mw-100 rounded py-2 px-4 d-inline-flex align-items-center justify-content-center">

<p class="text-muted my-1">Markdown</p>
<p id="resultMarkdown" class="text-primary my-0 o-a"></p>
<div>
<pre class="bg-gray-700 mw-100 rounded py-2 px-4 d-flex align-items-center justify-content-center">
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<pre class="bg-gray-700 mw-100 rounded py-2 px-4 d-flex align-items-center justify-content-center">
<pre class="bg-gray-700 mw-100 rounded py-2 px-4 d-inline-flex align-items-center justify-content-center">

@brentvollebregt brentvollebregt merged commit 5efcf29 into brentvollebregt:master Jul 24, 2020
@muety muety deleted the muety/minor-styling branch July 25, 2020 06:45
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants