Skip to content

Add hover effects to navbar links (fixes #3914) #3916

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.

Sign up for GitHub

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

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Add hover effects to navbar links (fixes #3914) #3916

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 25 additions & 33 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="author" content="" />

<!-- Bootstrap -->
<link href="./examples/css/bootstrap.min.css" rel="stylesheet" />

<!-- Editor CSS -->
<link href="./examples/css/editor.css" rel="stylesheet" />
</head>

<body>
<style>
#forkongithub a {
Expand Down Expand Up @@ -67,10 +64,20 @@
-webkit-transform: rotate(45deg);
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.8);
}
}</style
><span id="forkongithub"
><a href="https://github.com/MrRio/jsPDF">Star me on GitHub</a></span
>
}

/* Navbar hover effects - added to improve UX */
.masthead a {
transition: color 0.3s ease, text-decoration 0.3s ease;
}
.masthead a:hover {
color: #0066cc;
text-decoration: underline;
}
</style>
<span id="forkongithub">
<a href="https://github.com/MrRio/jsPDF">Star me on GitHub</a>
</span>
<div class="container">
<div class="masthead" style="margin-top: 20px">
<div class="pull-right" style="text-align: right;">
Expand Down Expand Up @@ -133,7 +140,6 @@ <h4>
<a href="http://parall.ax">Parallax</a>
</h4>
</div>

<div class="row-fluid">
<div class="span6" style="float: right; height: 650px;width: 50%;">
<div
Expand All @@ -142,37 +148,30 @@ <h4>
></div>
</div>
<div class="span5 no-gutter" style="width: 49%;float:left">
<h2>Have a play.</h2>

Have a play.
<p>
A HTML5 client-side solution for generating PDFs. Perfect for event
tickets, reports, certificates, you name it!
</p>

<p><b>No servers were used in the making of this demo.</b></p>

No servers were used in the making of this demo.
<div class="template-picker">
<label for="template">Choose example</label>
<select id="template" name="template">
<option>Hold your horses...</option>
Hold your horses...
</select>
</div>
</div>

<div id="editor" class="bypass" style="width: 49%;"></div>

<div class="bypass" id="editor" style="width: 49%;"></div>
<div class="controls" style="width: 49%;">
<div class="pull-right">
<!--<a href="#" class="btn btn-primary">Download Your Code</a>-->
<a href="#" class="btn btn-primary download-pdf">Download PDF</a>
<a class="btn btn-primary download-pdf" href="#">Download PDF</a>
</div>

<label class="checkbox-inline">
<input type="checkbox" id="auto-refresh" checked="checked" /> Auto
<input checked="checked" id="auto-refresh" type="checkbox" /> Auto
refresh on changes?
</label>
<a href="#" class="run-code hide btn btn-success">Run Code</a>

<a class="run-code hide btn btn-success" href="#">Run Code</a>
<div class="alert hide">
Auto refresh disabled for this
</div>
Expand All @@ -181,18 +180,14 @@ <h2>Have a play.</h2>
<div class="clerfix"></div>
</div>
<!-- /container -->

<footer>
&copy; 2017-2025 James Hall, 2025 yWorks GmbH -
© 2017-2025 James Hall, 2025 yWorks GmbH -
<a href="https://parall.ax/pages/privacy-policy">Privacy Policy</a>
</footer>

<!-- Scripts down here -->
<script src="./examples/js/jquery/jquery-1.7.1.min.js"></script>

<script type="text/javascript" src="dist/polyfills.umd.js"></script>
<script type="text/javascript" src="dist/jspdf.umd.js"></script>

<script src="dist/polyfills.umd.js" type="text/javascript"></script>
<script src="dist/jspdf.umd.js" type="text/javascript"></script>
<script type="text/javascript">
var jsPDF = window.jspdf.jsPDF;
$(document).ready(function() {
Expand All @@ -201,20 +196,17 @@ <h2>Have a play.</h2>
}
});
</script>

<!-- Code editor -->

<script
src="./examples/js/ace.js"
type="text/javascript"
charset="utf-8"
></script>

<!-- Scripts in development mode -->
<script
type="text/javascript"
src="./examples/js/pdfobject.min.js"
></script>
<script type="text/javascript" src="./examples/js/editor.js"></script>
<script src="./examples/js/editor.js" type="text/javascript"></script>
</body>
</html>