ViMaSter/hackertours-theme
Watch
0
0
Fork
You've already forked hackertours-theme
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Replace obsolete normalize with a lightweight reset.

Browse source
This commit is contained in:
Fredrik Jonsson 2021-12-25 18:28:17 +01:00
commit a1e745c686
28 changed files with 220 additions and 703 deletions
Download patch file Download diff file Expand all files Collapse all files

1
assets/sass/_colors.scss
View file

@ -48,6 +48,7 @@ $colors: (
mobile-menu-cover: rgba($black, .2),
button: $nearblack,
button-text: $white,
button-disabled: $grey,
form-error: $red,

2
assets/sass/_variables.scss
View file

@ -63,7 +63,7 @@ $font-weight: (
$times-new-roman: 'Times New Roman', Times, Georgia, 'DejaVu Serif', serif;
$times: Times, 'Times New Roman', Georgia, 'DejaVu Serif', serif;
$georgia: Georgia, 'Times New Roman', 'DejaVu Serif', serif;
$garamond: 'Garamond Premier Pro', Charter, 'Times New Roman', serif;
$garamond: 'Garamond Premier Pro', Garamond, Charter, 'Times New Roman', serif;
// Sans-serif font stacks.
$verdana: Verdana, Tahoma, 'DejaVu Sans', sans-serif;

7
assets/sass/_zen.scss
View file

@ -298,6 +298,13 @@ figure {
}
}
// Icons.
.icon {
// Reset set SVG to block but icons are normally inline.
display: inline;
}
// Header anchor links
.anchor-link {

25
assets/sass/base/_normalize.scss
View file

@ -1,25 +0,0 @@
// Normalize.css is intended to be used as an alternative to CSS resets.
//
// @see https://necolas.github.io/normalize.css/
//
// This directory is a slight fork of this original source:
// normalize.css 8.0.1 | MIT License
// Universal
// ==========================================================================
// Broken into modular pieces to make it easier to edit.
@import 'document/document';
@import 'sections/sections';
@import 'grouping/grouping';
@import 'links/links';
@import 'text/text';
@import 'embedded/embedded';
@import 'forms/forms';
@import 'tables/tables';
@import 'interactive/interactive';
@import 'scripting/scripting';
// Note: we allow the .button component (loaded by forms) to override :link, by
// loading links first.

31
assets/sass/base/embedded/_embedded.scss
View file

@ -1,31 +0,0 @@
// Embedded content
// Audio
audio {
// Add your styles.
}
// Image
//
// An `<img>` element represents an image.
img {
// Add your styles.
}
img,
svg {
// Suppress the space beneath the baseline
// vertical-align: bottom;
// Responsive images
max-width: 100%;
height: auto;
}
// Video
video {
// Add your styles.
}

229
assets/sass/base/forms/_forms.scss
View file

@ -1,229 +0,0 @@
// stylelint-disable property-no-vendor-prefix
// Form defaults
//
// These are the default base styles applied to HTML form elements.
//
// Component classes can override these styles, but if no class applies a style
// to an HTML form element, these styles will be the ones displayed.
//
// The following rules are from normalize.css and help to fix inconsistencies
// across various browsers. You should probably leave these rules as is and jump
// to the "Buttons" rule on line 92 before you start editing this file.
//
button,
input,
optgroup,
select,
textarea {
// Change the font styles in all browsers (opinionated).
@include typeface(body);
@include line-height(1);
font-size: 100%;
// Keep form elements constrained in their containers.
box-sizing: border-box;
max-width: 100%;
// Remove the margin in Firefox and Safari.
margin: 0;
}
// Show the overflow in IE.
button {
overflow: visible;
}
// Remove the inheritance of text transform in Edge, Firefox, and IE.
button,
select {
text-transform: none;
}
// Show the overflow in Edge.
input {
overflow: visible;
}
// Correct the cursor style of increment and decrement buttons in Chrome.
[type='number']::-webkit-inner-spin-button,
[type='number']::-webkit-outer-spin-button {
height: auto;
}
[type='search'] {
// Correct the odd appearance in Chrome and Safari.
-webkit-appearance: textfield;
// Correct the outline style in Safari.
outline-offset: -2px;
// Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
&::-webkit-search-cancel-button,
&::-webkit-search-decoration {
-webkit-appearance: none;
}
}
::-webkit-file-upload-button {
// Correct the inability to style clickable types in iOS and Safari.
-webkit-appearance: button;
// Change font properties to `inherit` in Safari.
font: inherit;
}
// Buttons
//
// Buttons built with the `<button>` element are the most flexible for styling
// purposes. But `<input>` elements with `type` set to `submit`, `image`,
// `reset`, or `button` are also supported.
//
// Below is the default button styling. To see variations on the button styling
// see the [button component](section-forms.html#kssref-forms-button).
//
// :hover - Hover styling.
// :active:hover - Depressed button styling.
@import 'components/button/button';
// The %text-form-element can be used to style `<input>` text types and
// `<textarea>` elements at the same time.
%text-form-element {
// Add your styles.
}
// Inputs
//
// The `<input>` element is mostly used for text-based inputs that include the
// HTML5 types: `text`, `search`, `tel`, `url`, `email`, `password`, `date`,
// `time`, `number`, `range`, `color`, and `file`.
//
// Note: Certain font size values applied to `number` inputs cause the cursor
// style of the decrement button to change from `default` to `text`.
//
// Note: The search input is not fully stylable by default. In Chrome and Safari
// on OSX/iOS you can't control `font`, `padding`, `border`, or `background`. In
// Chrome and Safari on Windows you can't control `border` properly. It will
// apply `border-width` but will only show a border color (which cannot be
// controlled) for the outer 1px of that border. Applying
// `-webkit-appearance: textfield` addresses these issues without removing the
// benefits of search inputs (e.g. showing past searches). Safari (but not
// Chrome) will clip the cancel button on when it has padding (and `textfield`
// appearance).
[type='text'],
[type='search'],
[type='tel'],
[type='url'],
[type='email'],
[type='password'],
[type='date'],
[type='time'],
[type='number'] {
@extend %text-form-element !optional;
}
[type='range'] {
// Add your styles.
}
[type='color'] {
// Add your styles.
}
[type='file'] {
// Add your styles.
}
// Checkboxes
//
// If an `<input>` element has the `type='checkbox'` attribute set, the form
// field is displayed as a checkbox.
//
// It is recommended that you do not style checkbox and radio inputs as
// Firefox's implementation does not respect box-sizing, padding, or width.
// Radio buttons
//
// If an `<input>` element has the `type='radio'` attribute set, the form field
// is displayed as a radio button.
//
// It is recommended that you do not style checkbox and radio inputs as
// Firefox's implementation does not respect box-sizing, padding, or width.
[type='checkbox'],
[type='radio'] {
// Add the correct box sizing in IE 10-.
box-sizing: border-box;
// Remove the padding in IE 10-.
padding: 0;
}
// Fieldsets
//
// The `<fieldset>` element groups a set of form fields, optionally under a
// common name given by the `<legend>` element.
fieldset {
// Correct the padding in Firefox.
@include padding(.35 .5 .65);
border: 1px solid var(--color-border);
}
legend {
// Correct the text wrapping in Edge and IE.
box-sizing: border-box;
display: table;
max-width: 100%;
// Align legend text with a fieldset's text while removing left padding so
// people aren't caught out if they zero out fieldset padding.
margin-left: -5px;
padding: 0 5px;
// Correct the color inheritance from `fieldset` elements in IE.
color: inherit;
white-space: normal;
}
// Labels
//
// The `<label>` element represents a caption of a form field. The label can be
// associated with a specific form control by using the `for` attribute or by
// putting the form control inside the label element itself.
label {
// Drupal-style form labels.
display: block;
font-weight: bold;
}
// Select list
//
// The `<select>` element represents a form field for selecting amongst a set of
// options.
//
// Known limitation: by default, Chrome and Safari on OS X allow very limited
// styling of `<select>`, unless a `border` property is set. The default font
// weight on `optgroup` elements cannot safely be changed in Chrome on OSX and
// Safari on OS X.
select {
// Add your styles.
}
// Progress
//
// The `<progress>` element represents the completion progress of a task.
progress {
// Add the correct vertical alignment in Chrome, Firefox, and Opera.
vertical-align: baseline;
}
// Text areas
//
// The `<textarea>` element represents a multi-line plain text form field.
textarea {
@extend %text-form-element !optional;
// Remove the default vertical scrollbar in IE.
overflow: auto;
}

141
assets/sass/base/grouping/_grouping.scss
View file

@ -1,141 +0,0 @@
// Dependencies.
@import 'components/divider/divider';
// Grouping content
// Block quotes
//
// The `<blockquote>` element is for quoting blocks of content from another
// source within your document. Wrap the `<blockquote>` around any <abbr
// title="HyperText Markup Language">HTML</abbr> as the quote. For straight
// quotes, we recommend a `<p>`.
//
// Optionally, add a `<footer>` to identify the source of the quote, wrapping
// the name of the source work in `<cite>`.
blockquote {
// Set 1 unit of vertical rhythm on the top and bottom margin.
// Also indent the quote on both sides.
@include margin(1 $indent-amount);
}
// Lists
//
// Style guide: base.grouping.lists
// Unordered list
//
// The `<ul>` element is a list of items in which the order does <em>not</em>
// explicitly matter.
// Ordered list
//
// The `<ol>` element is a list of items in which the order <em>does</em>
// explicitly matter.
// Description list
//
// The `<dl>` element is a list of terms with their associated descriptions.
dl,
ol,
ul {
// Add vertical rhythm margins.
@include margin(1 0);
}
dt {
// Add your styles.
}
dd {
margin: 0 0 0 $indent-amount;
@include rtl {
margin: 0 $indent-amount 0 0;
}
}
ol,
ul {
padding: 0 0 0 $indent-amount;
@include rtl {
padding: 0 $indent-amount 0 0;
}
// Turn off margins on nested lists.
ol,
ul {
margin: 0;
}
}
// Figures
//
// The `<figure>` element can be used to annotate illustrations, diagrams,
// photos, code listings, etc.
//
// Optionally, a `<figcaption>` element inside the `<figure>` represents the
// caption of the figure.
figure {
// Add vertical rhythm margins.
@include margin(1 0);
}
figcaption {
// Add your styles.
}
// Horizontal rule
//
// The `<hr>` element represents a paragraph-level thematic break, e.g. a scene
// change in a story, or a transition to another topic within a section of a
// reference book.
hr {
@extend %divider;
// Add the correct box sizing in Firefox.
box-sizing: content-box;
height: 0;
// Show the overflow in Edge and IE.
overflow: visible;
}
// Main
//
// The `<main>` element represents the main content of the page.
main {
// Add your styles.
}
// Body copy
//
// The default `font-size` and `line-height` properties are applied to the
// `<body>` element and all paragraphs. In addition, `<p>` (paragraphs) receive
// a top and bottom margin.
p,
pre {
@include margin(.75 0);
}
// Preformatted text
//
// The `<pre>` element represents a block of preformatted text, such as
// fragments of computer code, ASCII art, etc.
%monospace {
// Correct the inheritance and scaling of font size in all browsers.
// The font-family value ends with ", serif".
@include typeface(monospace);
// Correct the odd `em` font sizing in all browsers.
font-size: 1em;
}
pre {
@extend %monospace;
}

13
assets/sass/base/scripting/_scripting.scss
View file

@ -1,13 +0,0 @@
// Scripting
// Canvas
canvas {
// Add your styles.
}
// Template
template {
// Add your styles.
}

165
assets/sass/base/text/_text.scss
View file

@ -1,165 +0,0 @@
// Text-level semantics
//
// The elements in this section give semantics to inline text.
// Abbreviation / Acroynym
//
// The `<abbr>` element makes the meanings of abbreviations and acronyms visible
// on hover.
abbr[title] {
// Remove the bottom border in Chrome 57- and Firefox 39-.
border-bottom: 0;
// stylelint-disable no-duplicate-properties
// Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
text-decoration: underline;
text-decoration: underline dotted;
}
// Bold
//
// The `<strong>` element or the `<b>` element is for emphasizing a snippet of
// text with a heavier font-weight.
//
// Feel free to use `<b>` in HTML5. `<b>` is meant to highlight words or phrases
// without conveying additional importance.
// Prevent the duplicate application of `bolder` by the next rule in Safari 6.
b,
strong {
font-weight: inherit;
}
// stylelint-disable no-mergeable-selectors
b,
strong {
// Add the correct font weight in Chrome, Edge, and Safari.
font-weight: bolder;
}
// sass-lint:enable no-mergeable-selectors
// Cite
//
// The `<cite>` element represents a reference to a creative work.
cite {
// Add your styles.
}
// Code
//
// The `<code>` element represents a fragment of computer code. The `<samp>`
// element represents (sample) output from a program or computing system. The
// `<kbd>` element represents user input (typically keyboard input.)
code,
kbd,
samp {
@extend %monospace;
}
// Deleted text
//
// The `<del>` element indicates blocks of text that have been deleted.
del {
// Add your styles.
}
// Definition
//
// The `<dfn>` element represents the defining instance of a term.
dfn {
// Add your styles.
}
// Italics
//
// The `<em>` element or the `<i>` element is used for emphasizing a snippet of
// text with italics.
//
// Feel free to use `<i>` element in HTML5. `<i>` is meant to convey voice,
// technical terms, etc.
i,
em {
// Add your styles.
}
// Inserted text
//
// The `<ins>` element indicates additions to the document.
ins {
// Add your styles.
}
// Marked text
//
// The `<mark>` element highlights a run of text due to its relevance in another
// context.
mark {
// Add your styles.
}
// Quote
//
// The `<q>` element represents an inline quote from another source. Longer
// quotes should use the `<blockquote>` element.
q {
// Add your styles.
}
// Strikethrough text
//
// The `<s>` element indicates blocks of text that are no longer relevant.
s {
// Add your styles.
}
// Small text
//
// For de-emphasizing inline or blocks of text, use the `<small>` element to set
// text at 80% the size of the parent.
small {
// Add the correct font size in all browsers.
@include font-size(s);
}
// Superscript / Subscript
//
// The `<sup>` element represents a superscript and the `<sub>` element
// represents a subscript.
sub,
sup {
// Prevent `sub` and `sup` elements from affecting the line height in
// all browsers.
@include font-size(xs);
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -.25em;
}
sup {
top: -.5em;
}
// Underlined text
//
// To underline text use the `<u>` element. Not recommended since underlines are
// used by web browsers to style hyperlinks.
u {
// Add your styles.
}

4
assets/sass/components/box/box.json
View file

@ -1,4 +0,0 @@
{
"title": "Box title",
"content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
}

58
assets/sass/components/button/_button.scss
View file

@ -14,60 +14,29 @@ button,
[type='button'],
[type='reset'],
[type='submit'] {
// stylelint-disable color-no-hex, color-named
@extend %button--disabled;
@include typeface(headings);
@include margin-right(.75);
@include margin-bottom(.75);
// Some styles don't apply to <a> links since they are inline elements by default.
display: inline-block;
padding: 2px 10px;
// Address Firefox 4+ setting `line-height` on `input` using `!important` in
// the UA stylesheet. And prevent its "line-height: normal" rule below from
// breaking the "appearance: button" styling on the input elements.
line-height: inherit;
padding: 4px 10px;
text-decoration: none;
text-align: center;
// Improve usability and consistency of cursor style between image-type `input` and others.
cursor: pointer;
color: var(--color-button);
text-align: center;
background-image: linear-gradient(#f6f6f6, #e2e2e2);
border: 1px solid #e4e4e4;
border-left-color: #d2d2d2;
border-right-color: #d2d2d2;
border-bottom-color: #b4b4b4;
color: var(--color-button-text);
background-color: var(--color-button);
border: 0;
border-radius: 2px;
// stylelint-disable property-no-vendor-prefix
// Correct the inability to style clickable types in iOS and Safari.
-moz-appearance: button;
-webkit-appearance: button;
// Remove the inner border and padding in Firefox.
&::-moz-focus-inner {
border-style: none;
padding: 0;
}
// Restore the focus styles unset by the previous rule.
&:-moz-focusring {
outline: 1px dotted ButtonText;
}
// sass-lint:enable property-no-vendor-prefix
&:hover,
&:focus,
&:active {
// Override any link underlines and color changes.
text-decoration: none;
color: var(--color-button);
}
&:active {
border-color: #555;
text-shadow: var(--color-button 0 -1px 0) 0 -1px 0;
background: var(--color-grey-dark);
color: var(--color-text-bg);
background-color: var(--color-button-text);
}
}
@ -78,11 +47,20 @@ button,
@include type-layout(xs, 1);
@include margin-right(.3);
@include margin-bottom(.3);
padding: 0 6px;
padding: 2px 6px;
}
&--variant-name {
// Add styles here.
&--outline {
color: var(--color-button);
background-color: var(--color-button-text);
border: 1px solid var(--color-button);
&:hover,
&:focus,
&:active {
color: var(--color-button-text);
background-color: var(--color-button);
}
}
}

3
assets/sass/components/divider/divider.json
View file

@ -1,3 +0,0 @@
{
"content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
}

10
assets/sass/components/monospace/_monospace.scss Normal file
View file

@ -0,0 +1,10 @@
// Monospace
.monospace,
%monospace {
// Correct the inheritance and scaling of font size in all browsers.
// The font-family value ends with ", serif".
@include typeface(monospace);
// Correct the odd `em` font sizing in all browsers.
font-size: 1em;
}

3
assets/sass/components/visually-hidden/visually-hidden.json
View file

@ -1,3 +0,0 @@
{
"content": "This text will be read by screen readers, but will be visually hidden."
}

1
assets/sass/components/watermark/_watermark.scss
View file

@ -8,7 +8,6 @@
display: block;
height: 0;
overflow: visible;
// Remove background highlighting from <mark> in normalize.
background-color: transparent;
color: var(--color-watermark);
font-size: 75px;

4
assets/sass/components/watermark/watermark.json
View file

@ -1,4 +0,0 @@
{
"content": "Unpublished",
"sibling": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
}

3
assets/sass/components/wireframe/wireframe.json
View file

@ -1,3 +0,0 @@
{
"content": "An item inside a wireframe."
}

12
assets/sass/reset/_reset.scss Normal file
View file

@ -0,0 +1,12 @@
// Reset browsers to some sane defaults.
// Broken into modular pieces to make it easier to edit.
@import 'document/document';
@import 'embedded/embedded';
@import 'forms/forms';
@import 'grouping/grouping';
@import 'interactive/interactive';
@import 'links/links';
@import 'sections/sections';
@import 'tables/tables';
@import 'text/text';

35
assets/sass/reset/document/_document.scss Normal file
View file

@ -0,0 +1,35 @@
// stylelint-disable property-no-vendor-prefix
// Document
html {
// Change the default font family in all browsers (opinionated).
@include typeface(body);
// Correct the line height in all browsers.
@include define-type-sizing();
// Prevent adjustments of font size.
-webkit-text-size-adjust: none;
text-size-adjust: none;
// On short pages, we want any background gradients to fill the entire height
// of the browser.
min-height: 100%;
// Use the saner border-box model.
box-sizing: border-box;
// Use smooth scrolling.
scroll-behavior: smooth;
// Improve text rendering.
-webkit-font-smoothing: antialiased;
@include respond-to(xxl) {
@include define-type-sizing($base-font-size-2, $base-line-height-2);
}
}
// Use the saner border-box model for all elements.
*,
*::before,
*::after {
box-sizing: inherit;
}

15
assets/sass/reset/embedded/_embedded.scss Normal file
View file

@ -0,0 +1,15 @@
// Embedded content
img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
}
img,
svg {
height: auto;
}

Some files were not shown because too many files have changed in this diff Show more