Welcome to mirror list, hosted at ThFree Co, Russian Federation.

github.com/fncnt/vncnt-hugo.git - Unnamed repository; edit this file 'description' to name the repository.
summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorfncnt <fncnt@users.noreply.github.com>2019-03-28 13:50:12 +0300
committerGitHub <noreply@github.com>2019-03-28 13:50:12 +0300
commite5883d4ddea8b08f822ac141f46c0fb4d9ee55c0 (patch)
tree47ff06f9845c2044a8caefe705b700e9a20f964b
parent849ca19b3c289353d889c185630948435c884ca8 (diff)
parent5e01c7d6628c931f2d61d948b39f73b7849ae822 (diff)
Merge pull request #9 from fncnt/barebones-css
Switch from skeleton.css to barebones.css.
Diffstat
-rw-r--r--README.md8
-rw-r--r--layouts/404.html4
-rw-r--r--layouts/partials/body.html8
-rw-r--r--static/css/barebones.css (renamed from static/css/skeleton.css)313
-rw-r--r--static/css/normalize.css392
-rw-r--r--static/css/vncnt.css39
6 files changed, 376 insertions, 388 deletions
diff --git a/README.md b/README.md
index 5006f82..3f3ce74 100644
--- a/README.md
+++ b/README.md
@@ -32,12 +32,13 @@ However, those are trade-offs I'm willing to accept for simplicity.
## Third-party Components
+The spine (I'm so sorry) of this theme is made of [`Barebones`](https://github.com/acahir/Barebones).
+Both `normalize.css` and `barebones.css` are licensed unter the MIT License.
+
This theme relies on fontawesome. The included files in `static/webfonts` are used under the SIL Open Font License 1.1 as described in `static/css/all.min.css`. The latter file is licensed under the MIT License.
The Raleway font files in `static/fonts` are licensed under the SIL Open Font License 1.1 (see `static/fonts/OFL.txt`)
-Both `normalize.css` and `skeleton.css` are licensed unter the MIT License.
-
### Tracking
The theme supports Google Analytics using Hugo's internal templates. To enable
@@ -46,6 +47,5 @@ and (optionally) [privacy](https://gohugo.io/about/hugo-and-gdpr/#all-privacy-se
## Roadmap
-- possibly get rid of skeleton.css
-- add support for including blog-like content
+- add support for blog-like content
diff --git a/layouts/404.html b/layouts/404.html
index b79ec51..80a4424 100644
--- a/layouts/404.html
+++ b/layouts/404.html
@@ -1,8 +1,8 @@
<!DOCTYPE HTML>
{{ partial "includes" . }}
<div class="error404">
- <div class="row">
- <div class="twelve columns">
+ <div class="grid-container full">
+ <div>
<h1>{{ "**404**" | markdownify }}</h1>
{{ with .Site.Params.error404 }}
<h2>{{ "---" | markdownify }}{{ . | markdownify }}</h2>
diff --git a/layouts/partials/body.html b/layouts/partials/body.html
index 9dd727f..c23a253 100644
--- a/layouts/partials/body.html
+++ b/layouts/partials/body.html
@@ -1,12 +1,11 @@
<div class="landingpage">
- <div class="row">
- <div class="five columns">
+ <div class="grid-container fivetoseven">
+ <div class="item">
<section id="avatar">
<img class="avatar" src="{{.Site.Params.avatar}}">
</section>
</div>
- <div class="seven columns">
- <div class="autocenter">
+ <div class="grid-container full autocenter">
<section id="bio">
<h3>{{ .Site.Params.author }}</h3>
<p class="reset-margin">{{ .Site.Params.bio | markdownify }}</p>
@@ -24,6 +23,5 @@
</div>
</section>
</div>
- </div>
</div>
</div>
diff --git a/static/css/skeleton.css b/static/css/barebones.css
index f28bf6c..ea579df 100644
--- a/static/css/skeleton.css
+++ b/static/css/barebones.css
@@ -1,15 +1,16 @@
/*
-* Skeleton V2.0.4
-* Copyright 2014, Dave Gamache
-* www.getskeleton.com
+* Barebones V3
+* Copyright 2019 Steve Cochran
+*
+* Based of Skeleton by Dave Gamache
+*
* Free to use under the MIT license.
-* http://www.opensource.org/licenses/mit-license.php
-* 12/29/2014
*/
-
/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
+- Media Breakpoints
+- Variables
- Grid
- Base Styles
- Typography
@@ -25,107 +26,160 @@
- Media Queries
*/
+/* ENV Variables
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+/* Media breakpoint variables for use in media queries
+* Note: this section is currently commented out pending release of
+* final CSS env() spec
+* Breakpoints based on
+* https://medium.freecodecamp.org/the-100-correct-way-to-do-css-breakpoints-88d6a5ba1862
+*
+*/
-/* Grid
+
+
+/* CSS Variables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
-.container {
- position: relative;
- width: 100%;
- max-width: 960px;
- margin: 0 auto;
- padding: 0 20px;
- box-sizing: border-box; }
-.column,
-.columns {
- width: 100%;
- float: left;
- box-sizing: border-box; }
+html {
+
+ /* default theme: light background, dark text, blue accent */
+ --theme-hue: 0; /* white */
+ --accent-hue: 194; /* blue */
+
+ --text-color-richer: hsl(var(--theme-hue), 0%, 5%); /* #0d0d0d */
+ --text-color-normal: hsl(var(--theme-hue), 0%, 13%); /* #222222 text color; button:hover:focus color */
+ --text-color-softer: hsl(var(--theme-hue), 0%, 33%); /* #555555 button color; button:hover border */
+
+ --accent-color: hsl(var(--accent-hue), 86%, 57%); /* #33C3F0 link; button-primary bg+border; textarea,select:focus border */
+ --accent-color-hover: hsl(var(--accent-hue), 76%, 49%); /* #1EAEDB link hover; button-primary:hover:focus bg+border */
+
+ --border-color: hsl(var(--theme-hue), 0%, 73%); /* #bbbbbb button border */
+ --border-color-softer: hsl(var(--theme-hue), 0%, 82%); /* #d1d1d1 textarea,select,code,td,hr border */
+
+ --background-color: white; /* transparent body background; textarea,select background */
+ --background-color-softer: hsl(var(--theme-hue), 0%, 95%);
+ --code-background: hsl(var(--theme-hue), 0%, 95%); /* #f1f1f1 code background*/
+
+ --button-primary-color: white;
+
+
+ /* Note: Skeleton was based off a 10px font sizing for REM */
+ /* 62.5% of typical 16px browser default = 10px */
+ --base-font-size: 62.5%;
+
+ /* Grid Defaults - default to match orig skeleton settings */
+ --grid-max-width: 960px;
+}
-/* For devices larger than 400px */
-@media (min-width: 400px) {
- .container {
- width: 85%;
- padding: 0; }
+/* Dark Theme
+ Note: prefers-color-scheme selector support is still limited, but
+ included for future and an example of defining a different base 'theme'
+*/
+@media (prefers-color-scheme: dark) {
+ :html {
+ /* dark theme: light background, dark text, blue accent */
+ --theme-hue: 0; /* black */
+ --accent-hue: 194; /* blue */
+
+ --text-color-richer: hsl(var(--theme-hue), 0%, 95%); /* */
+ --text-color-normal: hsl(var(--theme-hue), 0%, 80%); /* text color; button:hover:focus color */
+ --text-color-softer: hsl(var(--theme-hue), 0%, 67%); /* button color; button:hover border */
+
+ --accent-color: hsl(var(--accent-hue), 76%, 49%); /* link; button-primary bg+border; textarea,select:focus border */
+ --accent-color-hover: hsl(var(--accent-hue), 86%, 57%); /* link hover; button-primary:hover:focus bg+border */
+
+ --border-color: hsl(var(--theme-hue), 0%, 27%); /* button border */
+ --border-color-softer: hsl(var(--theme-hue), 0%, 20%); /* textarea,select,code,td,hr border */
+
+ --background-color: hsl(var(--theme-hue), 0%, 12%); /* body background; textarea,select background */
+ --background-color-softer: hsl(var(--theme-hue), 0%, 18%);
+ --code-background: hsl(var(--theme-hue), 0%, 5%); /* code background*/
+
+ --button-primary-color: white;
+ }
+
+ img.value-img {
+ filter: invert(0.8);
+ }
+ /* TODO - test dialing back image intensity on dark background
+ img {
+ opacity: .80;
+ transition: opacity .5s ease-in-out;
+ }
+ img:hover {
+ opacity: 1;
+ }
+ */
}
-/* For devices larger than 550px */
-@media (min-width: 550px) {
- .container {
- width: 80%; }
- .column,
- .columns {
- margin-left: 4%; }
- .column:first-child,
- .columns:first-child {
- margin-left: 0; }
-
- .one.column,
- .one.columns { width: 4.66666666667%; }
- .two.columns { width: 13.3333333333%; }
- .three.columns { width: 22%; }
- .four.columns { width: 30.6666666667%; }
- .five.columns { width: 39.3333333333%; }
- .six.columns { width: 48%; }
- .seven.columns { width: 56.6666666667%; }
- .eight.columns { width: 65.3333333333%; }
- .nine.columns { width: 74.0%; }
- .ten.columns { width: 82.6666666667%; }
- .eleven.columns { width: 91.3333333333%; }
- .twelve.columns { width: 100%; margin-left: 0; }
-
- .one-third.column { width: 30.6666666667%; }
- .two-thirds.column { width: 65.3333333333%; }
-
- .one-half.column { width: 48%; }
-
- /* Offsets */
- .offset-by-one.column,
- .offset-by-one.columns { margin-left: 8.66666666667%; }
- .offset-by-two.column,
- .offset-by-two.columns { margin-left: 17.3333333333%; }
- .offset-by-three.column,
- .offset-by-three.columns { margin-left: 26%; }
- .offset-by-four.column,
- .offset-by-four.columns { margin-left: 34.6666666667%; }
- .offset-by-five.column,
- .offset-by-five.columns { margin-left: 43.3333333333%; }
- .offset-by-six.column,
- .offset-by-six.columns { margin-left: 52%; }
- .offset-by-seven.column,
- .offset-by-seven.columns { margin-left: 60.6666666667%; }
- .offset-by-eight.column,
- .offset-by-eight.columns { margin-left: 69.3333333333%; }
- .offset-by-nine.column,
- .offset-by-nine.columns { margin-left: 78.0%; }
- .offset-by-ten.column,
- .offset-by-ten.columns { margin-left: 86.6666666667%; }
- .offset-by-eleven.column,
- .offset-by-eleven.columns { margin-left: 95.3333333333%; }
-
- .offset-by-one-third.column,
- .offset-by-one-third.columns { margin-left: 34.6666666667%; }
- .offset-by-two-thirds.column,
- .offset-by-two-thirds.columns { margin-left: 69.3333333333%; }
-
- .offset-by-one-half.column,
- .offset-by-one-half.columns { margin-left: 52%; }
+/* Grid
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+/* CSS Grid depends much more on CSS than HTML, so there is less boilerplate
+ than with skeleton. Only basic 1-4 column grids are included.
+ Any additional needs should be made using custom CSS directives */
+
+
+.grid-container {
+ position: relative;
+ max-width: var(--grid-max-width);
+ margin: 0 auto;
+ padding: 20px;
+ text-align: center;
+ display: grid;
+ grid-gap: 20px;
+ gap: 20px;
+
+ /* by default use min 200px wide columns auto-fit into width */
+ grid-template-columns: minmax(200px, 1fr);
+}
+
+/* grids to 3 columns above mobile sizes */
+@media (min-width: 600px) {
+ .grid-container {
+ grid-template-columns: repeat(3, 1fr);
+ padding: 10px 0;
+ }
+
+ /* basic grids */
+ .grid-container.fifths {
+ grid-template-columns: repeat(5, 1fr);
+ }
+ .grid-container.quarters {
+ grid-template-columns: repeat(4, 1fr);
+ }
+ .grid-container.thirds {
+ grid-template-columns: repeat(3, 1fr);
+ }
+ .grid-container.halves {
+ grid-template-columns: repeat(2, 1fr);
+ }
+ .grid-container.full {
+ grid-template-columns: 1fr;
+ }
+
}
+
+
+
+
+
/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
-/* NOTE
-html is set to 62.5% so that all the REM measurements throughout Skeleton
-are based on 10px sizing. So basically 1.5rem = 15px :) */
html {
- font-size: 62.5%; }
+ font-size: var(--base-font-size);
+ scroll-behavior: smooth;
+}
body {
- font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
+ font-size: 1.6rem; /* changed from 15px in orig skeleton */
line-height: 1.6;
font-weight: 400;
font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
- color: #222; }
+ color: var(--text-color-normal);
+ background-color: var(--background-color);;
+}
/* Typography
@@ -142,7 +196,7 @@ h5 { font-size: 1.8rem; line-height: 1.5; letter-spacing: -.05rem; }
h6 { font-size: 1.5rem; line-height: 1.6; letter-spacing: 0; }
/* Larger than phablet */
-@media (min-width: 550px) {
+@media (min-width: 600px) {
h1 { font-size: 5.0rem; }
h2 { font-size: 4.2rem; }
h3 { font-size: 3.6rem; }
@@ -158,9 +212,9 @@ p {
/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {
- color: #1EAEDB; }
+ color: var(--accent-color); }
a:hover {
- color: #0FA0CE; }
+ color: var(--accent-color-hover); }
/* Buttons
@@ -173,7 +227,7 @@ input[type="button"] {
display: inline-block;
height: 38px;
padding: 0 30px;
- color: #555;
+ color: var(--text-color-softer);
text-align: center;
font-size: 11px;
font-weight: 600;
@@ -184,7 +238,7 @@ input[type="button"] {
white-space: nowrap;
background-color: transparent;
border-radius: 4px;
- border: 1px solid #bbb;
+ border: 1px solid var(--border-color);
cursor: pointer;
box-sizing: border-box; }
.button:hover,
@@ -197,17 +251,17 @@ button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
- color: #333;
- border-color: #888;
+ color: var(--text-color-normal);
+ border-color: var(--text-color-softer);
outline: 0; }
.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary {
- color: #FFF;
- background-color: #33C3F0;
- border-color: #33C3F0; }
+ color: var(--button-primary-color);
+ background-color: var(--accent-color);
+ border-color: var(--accent-color); }
.button.button-primary:hover,
button.button-primary:hover,
input[type="submit"].button-primary:hover,
@@ -218,9 +272,9 @@ button.button-primary:focus,
input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:focus,
input[type="button"].button-primary:focus {
- color: #FFF;
- background-color: #1EAEDB;
- border-color: #1EAEDB; }
+ color: var(--button-primary-color);
+ background-color: var(--accent-color-hover);
+ border-color: var(--accent-color-hover); }
/* Forms
@@ -236,8 +290,8 @@ textarea,
select {
height: 38px;
padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
- background-color: #fff;
- border: 1px solid #D1D1D1;
+ background-color: var(--background-color);
+ border: 1px solid var(--border-color-softer);
border-radius: 4px;
box-shadow: none;
box-sizing: border-box; }
@@ -249,6 +303,8 @@ input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
+input[type="button"],
+input[type="submit"],
textarea {
-webkit-appearance: none;
-moz-appearance: none;
@@ -266,7 +322,7 @@ input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
- border: 1px solid #33C3F0;
+ border: 1px solid var(--accent-color);
outline: 0; }
label,
legend {
@@ -294,14 +350,13 @@ ol {
ol, ul {
padding-left: 0;
margin-top: 0; }
-ul ul,
-ul ol,
-ol ol,
-ol ul {
- margin: 1.5rem 0 1.5rem 3rem;
- font-size: 90%; }
+ul ul, ul ol, ol ol, ol ul {
+ font-size: 100%;
+ margin: 1rem 0 1rem 3rem;
+ color: var(--text-color-softer);
+}
li {
- margin-bottom: 1rem; }
+ margin-bottom: 0.5rem; }
/* Code
@@ -311,13 +366,14 @@ code {
margin: 0 .2rem;
font-size: 90%;
white-space: nowrap;
- background: #F1F1F1;
- border: 1px solid #E1E1E1;
+ background: var(--code-background);
+ border: 1px solid var(--border-color-softer);
border-radius: 4px; }
pre > code {
display: block;
padding: 1rem 1.5rem;
- white-space: pre; }
+ white-space: pre;
+ overflow: auto; }
/* Tables
@@ -326,7 +382,7 @@ th,
td {
padding: 12px 15px;
text-align: left;
- border-bottom: 1px solid #E1E1E1; }
+ border-bottom: 1px solid var(--border-color-softer); }
th:first-child,
td:first-child {
padding-left: 0; }
@@ -369,6 +425,10 @@ form {
float: right; }
.u-pull-left {
float: left; }
+.u-align-left {
+ text-align: left; }
+.u-align-right {
+ text-align: right; }
/* Misc
@@ -377,7 +437,7 @@ hr {
margin-top: 3rem;
margin-bottom: 3.5rem;
border-width: 0;
- border-top: 1px solid #E1E1E1; }
+ border-top: 1px solid var(--border-color-softer); }
/* Clearing
@@ -402,17 +462,12 @@ there.
*/
-/* Larger than mobile */
-@media (min-width: 400px) {}
+/* Larger than mobile (default point when grid becomes active) */
+@media (min-width: 600px) {}
-/* Larger than phablet (also point when grid becomes active) */
-@media (min-width: 550px) {}
+/* Larger than phablet */
+@media (min-width: 900px) {}
/* Larger than tablet */
-@media (min-width: 750px) {}
-
-/* Larger than desktop */
-@media (min-width: 1000px) {}
-
-/* Larger than Desktop HD */
@media (min-width: 1200px) {}
+
diff --git a/static/css/normalize.css b/static/css/normalize.css
index 81c6f31..b0c1902 100644
--- a/static/css/normalize.css
+++ b/static/css/normalize.css
@@ -1,89 +1,76 @@
-/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+ ========================================================================== */
/**
- * 1. Set default font family to sans-serif.
- * 2. Prevent iOS text size adjust after orientation change, without disabling
- * user zoom.
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
*/
html {
- font-family: sans-serif; /* 1 */
- -ms-text-size-adjust: 100%; /* 2 */
+ line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
}
+/* Sections
+ ========================================================================== */
+
/**
- * Remove default margin.
+ * Remove the margin in all browsers.
*/
body {
margin: 0;
}
-/* HTML5 display definitions
- ========================================================================== */
-
/**
- * Correct `block` display not defined for any HTML5 element in IE 8/9.
- * Correct `block` display not defined for `details` or `summary` in IE 10/11
- * and Firefox.
- * Correct `block` display not defined for `main` in IE 11.
- */
-
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-hgroup,
-main,
-menu,
-nav,
-section,
-summary {
+ * Render the `main` element consistently in IE.
+ */
+
+main {
display: block;
}
/**
- * 1. Correct `inline-block` display not defined in IE 8/9.
- * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
*/
-audio,
-canvas,
-progress,
-video {
- display: inline-block; /* 1 */
- vertical-align: baseline; /* 2 */
+h1 {
+ font-size: 2em;
+ margin: 0.67em 0;
}
+/* Grouping content
+ ========================================================================== */
+
/**
- * Prevent modern browsers from displaying `audio` without controls.
- * Remove excess height in iOS 5 devices.
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
*/
-audio:not([controls]) {
- display: none;
- height: 0;
+hr {
+ box-sizing: content-box; /* 1 */
+ height: 0; /* 1 */
+ overflow: visible; /* 2 */
}
/**
- * Address `[hidden]` styling not present in IE 8/9/10.
- * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
*/
-[hidden],
-template {
- display: none;
+pre {
+ font-family: monospace, monospace; /* 1 */
+ font-size: 1em; /* 2 */
}
-/* Links
+/* Text-level semantics
========================================================================== */
/**
- * Remove the gray background color from active links in IE 10.
+ * Remove the gray background on active links in IE 10.
*/
a {
@@ -91,63 +78,39 @@ a {
}
/**
- * Improve readability when focused and also mouse hovered in all browsers.
- */
-
-a:active,
-a:hover {
- outline: 0;
-}
-
-/* Text-level semantics
- ========================================================================== */
-
-/**
- * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
- border-bottom: 1px dotted;
+ border-bottom: none; /* 1 */
+ text-decoration: underline; /* 2 */
+ text-decoration: underline dotted; /* 2 */
}
/**
- * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
+ * Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
- font-weight: bold;
-}
-
-/**
- * Address styling not present in Safari and Chrome.
- */
-
-dfn {
- font-style: italic;
-}
-
-/**
- * Address variable `h1` font-size and margin within `section` and `article`
- * contexts in Firefox 4+, Safari, and Chrome.
- */
-
-h1 {
- font-size: 2em;
- margin: 0.67em 0;
+ font-weight: bolder;
}
/**
- * Address styling not present in IE 8/9.
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
*/
-mark {
- background: #ff0;
- color: #000;
+code,
+kbd,
+samp {
+ font-family: monospace, monospace; /* 1 */
+ font-size: 1em; /* 2 */
}
/**
- * Address inconsistent and variable font size in all browsers.
+ * Add the correct font size in all browsers.
*/
small {
@@ -155,7 +118,8 @@ small {
}
/**
- * Prevent `sub` and `sup` affecting `line-height` in all browsers.
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
*/
sub,
@@ -166,262 +130,220 @@ sup {
vertical-align: baseline;
}
-sup {
- top: -0.5em;
-}
-
sub {
bottom: -0.25em;
}
+sup {
+ top: -0.5em;
+}
+
/* Embedded content
========================================================================== */
/**
- * Remove border when inside `a` element in IE 8/9/10.
+ * Remove the border on images inside links in IE 10.
*/
img {
- border: 0;
-}
-
-/**
- * Correct overflow not hidden in IE 9/10/11.
- */
-
-svg:not(:root) {
- overflow: hidden;
+ border-style: none;
}
-/* Grouping content
+/* Forms
========================================================================== */
/**
- * Address margin not present in IE 8/9 and Safari.
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
*/
-figure {
- margin: 1em 40px;
-}
-
-/**
- * Address differences between Firefox and other browsers.
- */
-
-hr {
- -moz-box-sizing: content-box;
- box-sizing: content-box;
- height: 0;
+button,
+input,
+optgroup,
+select,
+textarea {
+ font-family: inherit; /* 1 */
+ font-size: 100%; /* 1 */
+ line-height: 1.15; /* 1 */
+ margin: 0; /* 2 */
}
/**
- * Contain overflow in all browsers.
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
*/
-pre {
- overflow: auto;
+button,
+input { /* 1 */
+ overflow: visible;
}
/**
- * Address odd `em`-unit font size rendering in all browsers.
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
*/
-code,
-kbd,
-pre,
-samp {
- font-family: monospace, monospace;
- font-size: 1em;
+button,
+select { /* 1 */
+ text-transform: none;
}
-/* Forms
- ========================================================================== */
-
-/**
- * Known limitation: by default, Chrome and Safari on OS X allow very limited
- * styling of `select`, unless a `border` property is set.
- */
-
/**
- * 1. Correct color not being inherited.
- * Known issue: affects color of disabled elements.
- * 2. Correct font properties not being inherited.
- * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
+ * Correct the inability to style clickable types in iOS and Safari.
*/
button,
-input,
-optgroup,
-select,
-textarea {
- color: inherit; /* 1 */
- font: inherit; /* 2 */
- margin: 0; /* 3 */
+[type="button"],
+[type="reset"],
+[type="submit"] {
+ -webkit-appearance: button;
}
/**
- * Address `overflow` set to `hidden` in IE 8/9/10/11.
+ * Remove the inner border and padding in Firefox.
*/
-button {
- overflow: visible;
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+ border-style: none;
+ padding: 0;
}
/**
- * Address inconsistent `text-transform` inheritance for `button` and `select`.
- * All other form control elements do not inherit `text-transform` values.
- * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
- * Correct `select` style inheritance in Firefox.
+ * Restore the focus styles unset by the previous rule.
*/
-button,
-select {
- text-transform: none;
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+ outline: 1px dotted ButtonText;
}
/**
- * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
- * and `video` controls.
- * 2. Correct inability to style clickable `input` types in iOS.
- * 3. Improve usability and consistency of cursor style between image-type
- * `input` and others.
+ * Correct the padding in Firefox.
*/
-button,
-html input[type="button"], /* 1 */
-input[type="reset"],
-input[type="submit"] {
- -webkit-appearance: button; /* 2 */
- cursor: pointer; /* 3 */
+fieldset {
+ padding: 0.35em 0.75em 0.625em;
}
/**
- * Re-set default cursor for disabled elements.
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ * `fieldset` elements in all browsers.
*/
-button[disabled],
-html input[disabled] {
- cursor: default;
+legend {
+ box-sizing: border-box; /* 1 */
+ color: inherit; /* 2 */
+ display: table; /* 1 */
+ max-width: 100%; /* 1 */
+ padding: 0; /* 3 */
+ white-space: normal; /* 1 */
}
/**
- * Remove inner padding and border in Firefox 4+.
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
-button::-moz-focus-inner,
-input::-moz-focus-inner {
- border: 0;
- padding: 0;
+progress {
+ vertical-align: baseline;
}
/**
- * Address Firefox 4+ setting `line-height` on `input` using `!important` in
- * the UA stylesheet.
+ * Remove the default vertical scrollbar in IE 10+.
*/
-input {
- line-height: normal;
+textarea {
+ overflow: auto;
}
/**
- * It's recommended that you don't attempt to style these elements.
- * Firefox's implementation doesn't respect box-sizing, padding, or width.
- *
- * 1. Address box sizing set to `content-box` in IE 8/9/10.
- * 2. Remove excess padding in IE 8/9/10.
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
*/
-input[type="checkbox"],
-input[type="radio"] {
+[type="checkbox"],
+[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
- * Fix the cursor style for Chrome's increment/decrement buttons. For certain
- * `font-size` values of the `input`, it causes the cursor style of the
- * decrement button to change from `default` to `text`.
+ * Correct the cursor style of increment and decrement buttons in Chrome.
*/
-input[type="number"]::-webkit-inner-spin-button,
-input[type="number"]::-webkit-outer-spin-button {
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
- * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
- * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
- * (include `-moz` to future-proof).
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
*/
-input[type="search"] {
+[type="search"] {
-webkit-appearance: textfield; /* 1 */
- -moz-box-sizing: content-box;
- -webkit-box-sizing: content-box; /* 2 */
- box-sizing: content-box;
+ outline-offset: -2px; /* 2 */
}
/**
- * Remove inner padding and search cancel button in Safari and Chrome on OS X.
- * Safari (but not Chrome) clips the cancel button when the search input has
- * padding (and `textfield` appearance).
+ * Remove the inner padding in Chrome and Safari on macOS.
*/
-input[type="search"]::-webkit-search-cancel-button,
-input[type="search"]::-webkit-search-decoration {
+[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
- * Define consistent border, margin, and padding.
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
*/
-fieldset {
- border: 1px solid #c0c0c0;
- margin: 0 2px;
- padding: 0.35em 0.625em 0.75em;
+::-webkit-file-upload-button {
+ -webkit-appearance: button; /* 1 */
+ font: inherit; /* 2 */
}
-/**
- * 1. Correct `color` not being inherited in IE 8/9/10/11.
- * 2. Remove padding so people aren't caught out if they zero out fieldsets.
- */
-
-legend {
- border: 0; /* 1 */
- padding: 0; /* 2 */
-}
+/* Interactive
+ ========================================================================== */
-/**
- * Remove default vertical scrollbar in IE 8/9/10/11.
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
*/
-textarea {
- overflow: auto;
+details {
+ display: block;
}
-/**
- * Don't inherit the `font-weight` (applied by a rule above).
- * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
+/*
+ * Add the correct display in all browsers.
*/
-optgroup {
- font-weight: bold;
+summary {
+ display: list-item;
}
-/* Tables
+/* Misc
========================================================================== */
/**
- * Remove most spacing between table cells.
+ * Add the correct display in IE 10+.
*/
-table {
- border-collapse: collapse;
- border-spacing: 0;
+template {
+ display: none;
}
-td,
-th {
- padding: 0;
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+ display: none;
} \ No newline at end of file
diff --git a/static/css/vncnt.css b/static/css/vncnt.css
index 885a58e..3b83227 100644
--- a/static/css/vncnt.css
+++ b/static/css/vncnt.css
@@ -16,7 +16,11 @@ near the relevant code. For example, if you wanted to change the styles for butt
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/
-@import url('skeleton.css');
+@import url('barebones.css');
+
+html {
+ --base-font-size: 80%;
+}
.landingpage, .error404 {
position: absolute;
@@ -33,7 +37,7 @@ there.
}
p.reset-margin {
- margin-bottom: 1rem; /*skeleton.css: 2.5rem*/
+ margin-bottom: 2rem; /*skeleton.css: 2.5rem*/
}
.avatar {
@@ -53,9 +57,14 @@ p.reset-margin {
}
.icons {
+ bottom: 0;
+}
+.icons h3 {
+ margin-bottom: 0;
}
+
.icon {
text-rendering: geometricPrecision !important;
text-decoration: none;
@@ -64,11 +73,16 @@ p.reset-margin {
color: #555555;
}
-/* Larger than mobile */
-@media (min-width: 400px) {}
+/* Larger than mobile (default point when grid becomes active) */
+@media (min-width: 600px) {
+ .grid-container.fivetoseven {
+ grid-template-columns: 5fr 7fr;
+ }
+
+ .item {
+ align-self: center;
+ }
-/* Larger than phablet (also point when grid becomes active) */
-@media (min-width: 550px) {
.landingpage, .error404 {
position: absolute;
top: 50%;
@@ -86,13 +100,12 @@ p.reset-margin {
.autocenter {
text-align: left;
- }}
-
-/* Larger than tablet */
-@media (min-width: 750px) {}
+ padding: 0 0;
+ }
+}
-/* Larger than desktop */
-@media (min-width: 1000px) {}
+/* Larger than phablet */
+@media (min-width: 900px) {}
-/* Larger than Desktop HD */
+/* Larger than tablet */
@media (min-width: 1200px) {}
generated by cgit v1.2.3 (git 2.25.1) at 2024-05-19 12:29:00 +0300