spdustin

HN Styles

Just some simple CSS styles for Hacker News that I use to keep the default look and feel, but improve usability a bit.

spdustin

$bgColor: #DEDBEE;

%clear {
  *zoom: 1;
  &:before, &:after {
    content: ' ';
    display: table;
  }
  &:after {
    clear: both;

spdustin

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:output method="html" indent="yes" />
    <xsl:template match="/">
        <table>
            <thead>
                <tr>
                    <th>Year</th>
                    <th>Make</th>
                    <th>Model</th>
                </tr>

spdustin

<cars>
	<car year="1972" make="Ford" model="Pinto" explodes="yes"/>
	<car year="2016" make="Toyota" model="Prius"/>
	<car year="1996" make="Nissan" model="Sentra"/>
</cars>

spdustin

.ms-formtable td.ms-formbody,   /* cell containing all form fields */
.ms-formtable td.ms-formlabel   /* cell containing all form labels */
{
  display: block;
  width: auto;
  padding: .5em 1em;
}

.ms-formtable td *              /* resize everything inside the cells */   
{

spdustin

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:param name="xAxis">Date</xsl:param>
    <xsl:param name="Series1">Total</xsl:param>
    <xsl:param name="Series2">Subtotal</xsl:param>
    <xsl:output method="html" indent="yes"/>
    <xsl:template match="/">
        <script src="http://code.highcharts.com/highcharts.js"></script>
        <div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
        <div id="container2" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
        <script type="text/javascript">

spdustin

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:output method="html" indent="yes"/>
    <xsl:template match="/">
        <script src="http://code.highcharts.com/highcharts.js"></script>
        <div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
        <div id="container2" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
        <script type="text/javascript">
            <![CDATA[
                    $('#container').highcharts({
                        chart: {

spdustin

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:output method="html" indent="yes"/>
    <xsl:template match="/">
        <script src="http://code.highcharts.com/highcharts.js"></script>
        <div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
        <div id="container2" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
        <script type="text/javascript">
            <![CDATA[
                    $('#container').highcharts({
                        chart: {

spdustin

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:output method="html" indent="yes"/>
    <xsl:strip-space elements="script"/>
    <xsl:template match="/">

        <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"/>
        <script src="http://code.highcharts.com/highcharts.js"></script>
        <div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>

        <script type="text/javascript">

spdustin

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:param name="WPQ"/>
    <!-- This XSL Stylesheet created by SharePoint Experts, Inc. -->
    <!-- http://sharepointexperience.com -->
    <xsl:output method="html" indent="yes"/>
    <!-- This template is the "wrapper" or "container" for the custom view. -->
    <xsl:template match="/">
        <!-- This is the actual wrapper element that will be emitted -->
        <dl class="faq">
            <!-- This will tell the data view to look for the actual content