commit e35ecc7bc31c82eeada8b5737df7ae807dc87b77
parent 423c4d13ac0e5f49fc1a032aa37150af067ab97e
Author: thiagolif <thiagooliveiraf@alu.ufc.br>
Date: Sat, 14 Aug 2021 19:29:49 -0300
added dark mode
open sans font now is directly included
removed normalize.css and bloated content of skeleton.css
Diffstat:
13 files changed, 271 insertions(+), 1270 deletions(-)
diff --git a/assets/css/normalize.css b/assets/css/normalize.css
@@ -1,349 +0,0 @@
-/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
-
-/* Document
- ========================================================================== */
-
-/**
- * 1. Correct the line height in all browsers.
- * 2. Prevent adjustments of font size after orientation changes in iOS.
- */
-
-html {
- line-height: 1.15; /* 1 */
- -webkit-text-size-adjust: 100%; /* 2 */
-}
-
-/* Sections
- ========================================================================== */
-
-/**
- * Remove the margin in all browsers.
- */
-
-body {
- margin: 0;
-}
-
-/**
- * Render the `main` element consistently in IE.
- */
-
-main {
- display: block;
-}
-
-/**
- * Correct the font size and margin on `h1` elements within `section` and
- * `article` contexts in Chrome, Firefox, and Safari.
- */
-
-h1 {
- font-size: 2em;
- margin: 0.67em 0;
-}
-
-/* Grouping content
- ========================================================================== */
-
-/**
- * 1. Add the correct box sizing in Firefox.
- * 2. Show the overflow in Edge and IE.
- */
-
-hr {
- box-sizing: content-box; /* 1 */
- height: 0; /* 1 */
- overflow: visible; /* 2 */
-}
-
-/**
- * 1. Correct the inheritance and scaling of font size in all browsers.
- * 2. Correct the odd `em` font sizing in all browsers.
- */
-
-pre {
- font-family: monospace, monospace; /* 1 */
- font-size: 1em; /* 2 */
-}
-
-/* Text-level semantics
- ========================================================================== */
-
-/**
- * Remove the gray background on active links in IE 10.
- */
-
-a {
- background-color: transparent;
-}
-
-/**
- * 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: none; /* 1 */
- text-decoration: underline; /* 2 */
- text-decoration: underline dotted; /* 2 */
-}
-
-/**
- * Add the correct font weight in Chrome, Edge, and Safari.
- */
-
-b,
-strong {
- font-weight: bolder;
-}
-
-/**
- * 1. Correct the inheritance and scaling of font size in all browsers.
- * 2. Correct the odd `em` font sizing in all browsers.
- */
-
-code,
-kbd,
-samp {
- font-family: monospace, monospace; /* 1 */
- font-size: 1em; /* 2 */
-}
-
-/**
- * Add the correct font size in all browsers.
- */
-
-small {
- font-size: 80%;
-}
-
-/**
- * Prevent `sub` and `sup` elements from affecting the line height in
- * all browsers.
- */
-
-sub,
-sup {
- font-size: 75%;
- line-height: 0;
- position: relative;
- vertical-align: baseline;
-}
-
-sub {
- bottom: -0.25em;
-}
-
-sup {
- top: -0.5em;
-}
-
-/* Embedded content
- ========================================================================== */
-
-/**
- * Remove the border on images inside links in IE 10.
- */
-
-img {
- border-style: none;
-}
-
-/* Forms
- ========================================================================== */
-
-/**
- * 1. Change the font styles in all browsers.
- * 2. Remove the margin in Firefox and Safari.
- */
-
-button,
-input,
-optgroup,
-select,
-textarea {
- font-family: inherit; /* 1 */
- font-size: 100%; /* 1 */
- line-height: 1.15; /* 1 */
- margin: 0; /* 2 */
-}
-
-/**
- * Show the overflow in IE.
- * 1. Show the overflow in Edge.
- */
-
-button,
-input { /* 1 */
- overflow: visible;
-}
-
-/**
- * Remove the inheritance of text transform in Edge, Firefox, and IE.
- * 1. Remove the inheritance of text transform in Firefox.
- */
-
-button,
-select { /* 1 */
- text-transform: none;
-}
-
-/**
- * Correct the inability to style clickable types in iOS and Safari.
- */
-
-button,
-[type="button"],
-[type="reset"],
-[type="submit"] {
- -webkit-appearance: button;
-}
-
-/**
- * Remove the inner border and padding in Firefox.
- */
-
-button::-moz-focus-inner,
-[type="button"]::-moz-focus-inner,
-[type="reset"]::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner {
- border-style: none;
- padding: 0;
-}
-
-/**
- * Restore the focus styles unset by the previous rule.
- */
-
-button:-moz-focusring,
-[type="button"]:-moz-focusring,
-[type="reset"]:-moz-focusring,
-[type="submit"]:-moz-focusring {
- outline: 1px dotted ButtonText;
-}
-
-/**
- * Correct the padding in Firefox.
- */
-
-fieldset {
- padding: 0.35em 0.75em 0.625em;
-}
-
-/**
- * 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.
- */
-
-legend {
- box-sizing: border-box; /* 1 */
- color: inherit; /* 2 */
- display: table; /* 1 */
- max-width: 100%; /* 1 */
- padding: 0; /* 3 */
- white-space: normal; /* 1 */
-}
-
-/**
- * Add the correct vertical alignment in Chrome, Firefox, and Opera.
- */
-
-progress {
- vertical-align: baseline;
-}
-
-/**
- * Remove the default vertical scrollbar in IE 10+.
- */
-
-textarea {
- overflow: auto;
-}
-
-/**
- * 1. Add the correct box sizing in IE 10.
- * 2. Remove the padding in IE 10.
- */
-
-[type="checkbox"],
-[type="radio"] {
- box-sizing: border-box; /* 1 */
- padding: 0; /* 2 */
-}
-
-/**
- * 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;
-}
-
-/**
- * 1. Correct the odd appearance in Chrome and Safari.
- * 2. Correct the outline style in Safari.
- */
-
-[type="search"] {
- -webkit-appearance: textfield; /* 1 */
- outline-offset: -2px; /* 2 */
-}
-
-/**
- * Remove the inner padding in Chrome and Safari on macOS.
- */
-
-[type="search"]::-webkit-search-decoration {
- -webkit-appearance: none;
-}
-
-/**
- * 1. Correct the inability to style clickable types in iOS and Safari.
- * 2. Change font properties to `inherit` in Safari.
- */
-
-::-webkit-file-upload-button {
- -webkit-appearance: button; /* 1 */
- font: inherit; /* 2 */
-}
-
-/* Interactive
- ========================================================================== */
-
-/*
- * Add the correct display in Edge, IE 10+, and Firefox.
- */
-
-details {
- display: block;
-}
-
-/*
- * Add the correct display in all browsers.
- */
-
-summary {
- display: list-item;
-}
-
-/* Misc
- ========================================================================== */
-
-/**
- * Add the correct display in IE 10+.
- */
-
-template {
- display: none;
-}
-
-/**
- * Add the correct display in IE 10.
- */
-
-[hidden] {
- display: none;
-}
diff --git a/assets/css/skeleton.css b/assets/css/skeleton.css
@@ -1,418 +0,0 @@
-/*
-* Skeleton V2.0.4
-* Copyright 2014, Dave Gamache
-* www.getskeleton.com
-* Free to use under the MIT license.
-* http://www.opensource.org/licenses/mit-license.php
-* 12/29/2014
-*/
-
-
-/* Table of contents
-––––––––––––––––––––––––––––––––––––––––––––––––––
-- Grid
-- Base Styles
-- Typography
-- Links
-- Buttons
-- Forms
-- Lists
-- Code
-- Tables
-- Spacing
-- Utilities
-- Clearing
-- Media Queries
-*/
-
-
-/* Grid
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
-.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; }
-
-/* For devices larger than 400px */
-@media (min-width: 400px) {
- .container {
- width: 85%;
- padding: 0; }
-}
-
-/* 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%; }
-
-}
-
-
-/* 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%; }
-body {
- font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
- line-height: 1.6;
- font-weight: 400;
- font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
- color: #222; }
-
-
-/* Typography
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
-h1, h2, h3, h4, h5, h6 {
- margin-top: 0;
- margin-bottom: 2rem;
- font-weight: 300; }
-h1 { font-size: 4.0rem; line-height: 1.2; letter-spacing: -.1rem;}
-h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
-h3 { font-size: 3.0rem; line-height: 1.3; letter-spacing: -.1rem; }
-h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
-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) {
- h1 { font-size: 5.0rem; }
- h2 { font-size: 4.2rem; }
- h3 { font-size: 3.6rem; }
- h4 { font-size: 3.0rem; }
- h5 { font-size: 2.4rem; }
- h6 { font-size: 1.5rem; }
-}
-
-p {
- margin-top: 0; }
-
-
-/* Links
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
-a {
- color: #1EAEDB; }
-a:hover {
- color: #0FA0CE; }
-
-
-/* Buttons
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
-.button,
-button,
-input[type="submit"],
-input[type="reset"],
-input[type="button"] {
- display: inline-block;
- height: 38px;
- padding: 0 30px;
- color: #555;
- text-align: center;
- font-size: 11px;
- font-weight: 600;
- line-height: 38px;
- letter-spacing: .1rem;
- text-transform: uppercase;
- text-decoration: none;
- white-space: nowrap;
- background-color: transparent;
- border-radius: 4px;
- border: 1px solid #bbb;
- cursor: pointer;
- box-sizing: border-box; }
-.button:hover,
-button:hover,
-input[type="submit"]:hover,
-input[type="reset"]:hover,
-input[type="button"]:hover,
-.button:focus,
-button:focus,
-input[type="submit"]:focus,
-input[type="reset"]:focus,
-input[type="button"]:focus {
- color: #333;
- border-color: #888;
- 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; }
-.button.button-primary:hover,
-button.button-primary:hover,
-input[type="submit"].button-primary:hover,
-input[type="reset"].button-primary:hover,
-input[type="button"].button-primary:hover,
-.button.button-primary:focus,
-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; }
-
-
-/* Forms
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
-input[type="email"],
-input[type="number"],
-input[type="search"],
-input[type="text"],
-input[type="tel"],
-input[type="url"],
-input[type="password"],
-textarea,
-select {
- height: 38px;
- padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
- background-color: #fff;
- border: 1px solid #D1D1D1;
- border-radius: 4px;
- box-shadow: none;
- box-sizing: border-box; }
-/* Removes awkward default styles on some inputs for iOS */
-input[type="email"],
-input[type="number"],
-input[type="search"],
-input[type="text"],
-input[type="tel"],
-input[type="url"],
-input[type="password"],
-textarea {
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none; }
-textarea {
- min-height: 65px;
- padding-top: 6px;
- padding-bottom: 6px; }
-input[type="email"]:focus,
-input[type="number"]:focus,
-input[type="search"]:focus,
-input[type="text"]:focus,
-input[type="tel"]:focus,
-input[type="url"]:focus,
-input[type="password"]:focus,
-textarea:focus,
-select:focus {
- border: 1px solid #33C3F0;
- outline: 0; }
-label,
-legend {
- display: block;
- margin-bottom: .5rem;
- font-weight: 600; }
-fieldset {
- padding: 0;
- border-width: 0; }
-input[type="checkbox"],
-input[type="radio"] {
- display: inline; }
-label > .label-body {
- display: inline-block;
- margin-left: .5rem;
- font-weight: normal; }
-
-
-/* Lists
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
-ul {
- list-style: circle inside; }
-ol {
- list-style: decimal inside; }
-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%; }
-li {
- margin-bottom: 1rem; }
-
-
-/* Code
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
-code {
- padding: .2rem .5rem;
- margin: 0 .2rem;
- font-size: 90%;
- white-space: nowrap;
- background: #F1F1F1;
- border: 1px solid #E1E1E1;
- border-radius: 4px; }
-pre > code {
- display: block;
- padding: 1rem 1.5rem;
- white-space: pre; }
-
-
-/* Tables
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
-th,
-td {
- padding: 12px 15px;
- text-align: left;
- border-bottom: 1px solid #E1E1E1; }
-th:first-child,
-td:first-child {
- padding-left: 0; }
-th:last-child,
-td:last-child {
- padding-right: 0; }
-
-
-/* Spacing
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
-button,
-.button {
- margin-bottom: 1rem; }
-input,
-textarea,
-select,
-fieldset {
- margin-bottom: 1.5rem; }
-pre,
-blockquote,
-dl,
-figure,
-table,
-p,
-ul,
-ol,
-form {
- margin-bottom: 2.5rem; }
-
-
-/* Utilities
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
-.u-full-width {
- width: 100%;
- box-sizing: border-box; }
-.u-max-full-width {
- max-width: 100%;
- box-sizing: border-box; }
-.u-pull-right {
- float: right; }
-.u-pull-left {
- float: left; }
-
-
-/* Misc
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
-hr {
- margin-top: 3rem;
- margin-bottom: 3.5rem;
- border-width: 0;
- border-top: 1px solid #E1E1E1; }
-
-
-/* Clearing
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
-
-/* Self Clearing Goodness */
-.container:after,
-.row:after,
-.u-cf {
- content: "";
- display: table;
- clear: both; }
-
-
-/* Media Queries
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
-/*
-Note: The best way to structure the use of media queries is to create the queries
-near the relevant code. For example, if you wanted to change the styles for buttons
-on small devices, paste the mobile query code up in the buttons section and style it
-there.
-*/
-
-
-/* Larger than mobile */
-@media (min-width: 400px) {}
-
-/* Larger than phablet (also point when grid becomes active) */
-@media (min-width: 550px) {}
-
-/* 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/assets/css/style.css b/assets/css/style.css
@@ -1,59 +0,0 @@
-body {
- background-color: #CFD8DC;
- font-family: "Open Sans", sans-serif;
- color: #263238;
-}
-
-header {
- padding: 4rem 0 4rem 0;
-}
-
-header h1 {
- font-weight: 600;
-}
-
-a {
- color: inherit;
- font-weight: 600;
-}
-
-a:hover {
- color: #607D8B;
-}
-
-blockquote {
- margin: 0 0 1rem 0;
- padding: 0.8rem 0 0.8rem 1.2rem;
- background-color: #B0BEC5;
- border-left: 5px solid #455A64;
-}
-
-main {
- padding: 0 0 6rem 0;
-}
-
-main h4 {
- font-weight: 600;
- text-transform: uppercase;
- border-bottom:2px solid #455A64;
-}
-
-main ul {
- padding-left: 1rem;
- list-style-type: square;
-}
-
-main li {
- font-weight: 400;
- font-size: 1.8rem;
-}
-
-footer {
- text-align: center;
- padding: 0 0 4rem 0;
-}
-
-footer h5 {
- font-weight: 600;
- margin: 0;
-}
diff --git a/css/OpenSans-Regular.ttf b/css/OpenSans-Regular.ttf
Binary files differ.
diff --git a/css/OpenSans-Semibold.ttf b/css/OpenSans-Semibold.ttf
Binary files differ.
diff --git a/css/skeleton.css b/css/skeleton.css
@@ -0,0 +1,166 @@
+/*
+* Skeleton V2.0.4
+* Copyright 2014, Dave Gamache
+* www.getskeleton.com
+* Free to use under the MIT license.
+* http://www.opensource.org/licenses/mit-license.php
+* 12/29/2014
+*/
+
+/* Grid
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+.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; }
+
+/* For devices larger than 400px */
+@media (min-width: 400px) {
+ .container {
+ width: 85%;
+ padding: 0; }
+}
+
+/* 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%; }
+
+}
+
+
+/* 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%; }
+body {
+ font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
+ line-height: 1.6;
+}
+
+
+/* Typography
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+h1, h2, h3, h4, h5, h6 {
+ margin-top: 0;
+ margin-bottom: 2rem;
+ font-weight: 300; }
+h1 { font-size: 4.0rem; line-height: 1.2; letter-spacing: -.1rem;}
+h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
+h3 { font-size: 3.0rem; line-height: 1.3; letter-spacing: -.1rem; }
+h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
+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) {
+ h1 { font-size: 5.0rem; }
+ h2 { font-size: 4.2rem; }
+ h3 { font-size: 3.6rem; }
+ h4 { font-size: 3.0rem; }
+ h5 { font-size: 2.4rem; }
+ h6 { font-size: 1.5rem; }
+}
+
+/* Clearing
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+
+/* Self Clearing Goodness */
+.container:after,
+.row:after,
+.u-cf {
+ content: "";
+ display: table;
+ clear: both; }
+
+/* Media Queries
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+/*
+Note: The best way to structure the use of media queries is to create the queries
+near the relevant code. For example, if you wanted to change the styles for buttons
+on small devices, paste the mobile query code up in the buttons section and style it
+there.
+*/
+
+/* Larger than mobile */
+@media (min-width: 400px) {}
+
+/* Larger than phablet (also point when grid becomes active) */
+@media (min-width: 550px) {}
+
+/* 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/css/style-dark.css b/css/style-dark.css
@@ -0,0 +1,11 @@
+@media (prefers-color-scheme: dark) {
+ body {
+ background-color: #263238;
+ color: #90A4AE;
+ }
+
+ blockquote {
+ background-color: #202b31;
+ border-color: #90A4AE;
+ }
+}
+\ No newline at end of file
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,83 @@
+/* OpenSans font */
+@font-face {
+ font-family: 'Open Sans';
+ font-style: normal;
+ font-weight: 400;
+ src: url('OpenSans-Regular.ttf');
+}
+
+@font-face {
+ font-family: 'Open Sans';
+ font-style: normal;
+ font-weight: 600;
+ src: url('OpenSans-Semibold.ttf');
+}
+
+/* Page styles */
+html {
+ line-height: 1.15;
+ -webkit-text-size-adjust: 100%;
+}
+
+body {
+ margin: 0;
+ background-color: #CFD8DC;
+ font-family: "Open Sans", sans-serif;
+ color: #263238;
+}
+
+header {
+ padding: 4rem 0 4rem 0;
+}
+
+header h1 {
+ font-weight: 600;
+}
+
+a {
+ color: inherit;
+ font-weight: 600;
+}
+
+a:hover {
+ color: #607D8B;
+}
+
+blockquote {
+ margin: 0 0 1rem 0;
+ padding: 0.8rem 0 0.8rem 1.2rem;
+ background-color: #B0BEC5;
+ border-left: 5px solid #455A64;
+}
+
+main {
+ padding: 0 0 6rem 0;
+}
+
+main h4 {
+ font-weight: 600;
+ text-transform: uppercase;
+ border-bottom:2px solid #455A64;
+}
+
+main ul {
+ padding-left: 1rem;
+ list-style-type: square;
+ margin: 0 0 2.5rem 1.5rem;
+}
+
+main li {
+ font-weight: 400;
+ font-size: 1.8rem;
+ margin-bottom: 1rem;
+}
+
+footer {
+ text-align: center;
+ padding: 0 0 4rem 0;
+}
+
+footer h5 {
+ font-weight: 600;
+ margin: 0;
+}
diff --git a/index.html b/index.html
@@ -5,12 +5,9 @@
<meta charset="utf-8">
<meta name="description" content="Kiss linux community">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- <link href="./assets/css/normalize.css" rel="stylesheet">
- <link href="./assets/css/skeleton.css" rel="stylesheet">
- <link href="./assets/css/style.css" rel="stylesheet">
- <link rel="preconnect" href="https://fonts.googleapis.com">
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
- <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600&display=swap" rel="stylesheet">
+ <link href="./css/skeleton.css" rel="stylesheet">
+ <link href="./css/style.css" rel="stylesheet">
+ <link href="./css/style-dark.css" rel="stylesheet">
</head>
<body>
@@ -18,7 +15,7 @@
<div class="container">
<h1>KISS Linux Community</h1>
<blockquote>when dylan says "no", we say "maybe"</blockquote>
- <blockquote><a href="https://kisslinux.org/" target="_blank">KISS Linux</a> is an independent Linux(R) distribution with a focus on simplicity and the concept of less is more.
+ <blockquote><a href="https://kisslinux.org/">KISS Linux</a> is an independent Linux(R) distribution with a focus on simplicity and the concept of less is more.
</div>
</header>
@@ -29,17 +26,17 @@
<h4>Connect</h4>
<ul>
<li>Chat over <a href="ircs://irc.libera.chat:6697/kisslinux">IRC</a></li>
- <li>Chat <a href="https://web.libera.chat/#kisslinux" target="_blank">on the web</a></li>
- <li>Browse <a href="https://libera.irclog.whitequark.org/kisslinux" target="_blank">the latest chat logs</a></li>
+ <li>Chat <a href="https://web.libera.chat/#kisslinux">on the web</a></li>
+ <li>Browse <a href="https://libera.irclog.whitequark.org/kisslinux">the latest chat logs</a></li>
</ul>
</div>
<div class="one-half column">
<h4>Discover</h4>
<ul>
- <li>Search through <a href="https://jedahan.com/kiss-find" target="_blank">all community packages</a></li>
- <li>Discover more <a href="https://github.com/kiss-community/awesome-kiss" target="_blank">awesome kiss projects</a></li>
- <li>Visit our <a href="https://github.com/kiss-community/" target="_blank">community github</a></li>
+ <li>Search through <a href="https://jedahan.com/kiss-find">all community packages</a></li>
+ <li>Discover more <a href="https://github.com/kiss-community/awesome-kiss">awesome kiss projects</a></li>
+ <li>Visit our <a href="https://github.com/kiss-community/">community github</a></li>
</ul>
</div>
</div>
@@ -49,6 +46,6 @@
<footer>
<div class="container">
<h5>KISS Community 2021</h5>
- Improve this site on <a href="https://github.com/kiss-community/kisscommunity.org" target="_blank">our website repo</a>
+ Improve this site on <a href="https://github.com/kiss-community/kisscommunity.org">our website repo</a>
</div>
</footer>
diff --git a/old/index.html b/old/index.html
@@ -1,30 +0,0 @@
-<head>
- <link rel="stylesheet" href="sakura.css" type="text/css">
- <link rel="stylesheet" href="sakura-dark.css" type="text/css">
-</head>
-
-<body>
- <h1> welcome to the <a href=https://kisslinux.org>kiss linux</a> community </h1>
-
- <blockquote> when dylan says "no", we say "maybe" </blockquote>
-
- <h3> connect </h3>
- <ul>
- <li> start chatting over irc via <a href=ircs://irc.libera.chat:6697/kisslinux> ircs://irc.libera.chat:6697/kisslinux </a>
- <li> or <a href=https://web.libera.chat/#kisslinux> on the web </a>
- <li> or browse <a href=https://libera.irclog.whitequark.org/kisslinux> the latest chat logs </a>
- </ul>
-
- <h3> discover </h3>
- <ul>
- <li> <a href=https://jedahan.com/kiss-find> search through all community packages </a>
- <li> <a href=https://github.com/kiss-community/awesome-kiss> discover more awesome kiss projects </a>
- </ul>
-
- <h3> develop </h3>
- <ul>
- <li> visit our <a href=https://github.com/kiss-community/> community github </a>
- <li> improve this site on <a href=https://github.com/kiss-community/kisscommunity.org> our website repo </a>
- </ul>
-
-</body>
diff --git a/old/sakura-dark.css b/old/sakura-dark.css
@@ -1,187 +0,0 @@
-/* $color-text: #dedce5; */
-/* Sakura.css v1.3.1
- * ================
- * Minimal css theme.
- * Project: https://github.com/oxalorg/sakura/
- */
-/* Body */
-@media (prefers-color-scheme: dark) {
- html {
- font-size: 62.5%;
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; }
-
- body {
- font-size: 1.8rem;
- line-height: 1.618;
- max-width: 38em;
- margin: auto;
- color: #c9c9c9;
- background-color: #222222;
- padding: 13px; }
-
- @media (max-width: 684px) {
- body {
- font-size: 1.53rem; } }
-
- @media (max-width: 382px) {
- body {
- font-size: 1.35rem; } }
-
- h1, h2, h3, h4, h5, h6 {
- line-height: 1.1;
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
- font-weight: 700;
- margin-top: 3rem;
- margin-bottom: 1.5rem;
- overflow-wrap: break-word;
- word-wrap: break-word;
- -ms-word-break: break-all;
- word-break: break-word; }
-
- h1 {
- font-size: 2.35em; }
-
- h2 {
- font-size: 2.00em; }
-
- h3 {
- font-size: 1.75em; }
-
- h4 {
- font-size: 1.5em; }
-
- h5 {
- font-size: 1.25em; }
-
- h6 {
- font-size: 1em; }
-
- p {
- margin-top: 0px;
- margin-bottom: 2.5rem; }
-
- small, sub, sup {
- font-size: 75%; }
-
- hr {
- border-color: #ffffff; }
-
- a {
- text-decoration: none;
- color: #ffffff; }
- a:hover {
- color: #c9c9c9;
- border-bottom: 2px solid #c9c9c9; }
- a:visited {
- color: #e6e6e6; }
-
- ul {
- padding-left: 1.4em;
- margin-top: 0px;
- margin-bottom: 2.5rem; }
-
- li {
- margin-bottom: 0.4em; }
-
- blockquote {
- margin-left: 0px;
- margin-right: 0px;
- padding-left: 1em;
- padding-top: 0.8em;
- padding-bottom: 0.8em;
- padding-right: 0.8em;
- border-left: 5px solid #ffffff;
- margin-bottom: 2.5rem;
- background-color: #4a4a4a; }
-
- blockquote p {
- margin-bottom: 0; }
-
- img, video {
- height: auto;
- max-width: 100%;
- margin-top: 0px;
- margin-bottom: 2.5rem; }
-
- /* Pre and Code */
- pre {
- background-color: #4a4a4a;
- display: block;
- padding: 1em;
- overflow-x: auto;
- margin-top: 0px;
- margin-bottom: 2.5rem; }
-
- code {
- font-size: 0.9em;
- padding: 0 0.5em;
- background-color: #4a4a4a;
- white-space: pre-wrap; }
-
- pre > code {
- padding: 0;
- background-color: transparent;
- white-space: pre; }
-
- /* Tables */
- table {
- text-align: justify;
- width: 100%;
- border-collapse: collapse; }
-
- td, th {
- padding: 0.5em;
- border-bottom: 1px solid #4a4a4a; }
-
- /* Buttons, forms and input */
- input, textarea {
- border: 1px solid #c9c9c9; }
- input:focus, textarea:focus {
- border: 1px solid #ffffff; }
-
- textarea {
- width: 100%; }
-
- .button, button, input[type="submit"], input[type="reset"], input[type="button"] {
- display: inline-block;
- padding: 5px 10px;
- text-align: center;
- text-decoration: none;
- white-space: nowrap;
- background-color: #ffffff;
- color: #222222;
- border-radius: 1px;
- border: 1px solid #ffffff;
- cursor: pointer;
- box-sizing: border-box; }
- .button[disabled], button[disabled], input[type="submit"][disabled], input[type="reset"][disabled], input[type="button"][disabled] {
- cursor: default;
- opacity: .5; }
- .button:focus:enabled, .button:hover:enabled, button:focus:enabled, button:hover:enabled, input[type="submit"]:focus:enabled, input[type="submit"]:hover:enabled, input[type="reset"]:focus:enabled, input[type="reset"]:hover:enabled, input[type="button"]:focus:enabled, input[type="button"]:hover:enabled {
- background-color: #c9c9c9;
- border-color: #c9c9c9;
- color: #222222;
- outline: 0; }
-
- textarea, select, input {
- color: #c9c9c9;
- padding: 6px 10px;
- /* The 6px vertically centers text on FF, ignored by Webkit */
- margin-bottom: 10px;
- background-color: #4a4a4a;
- border: 1px solid #4a4a4a;
- border-radius: 4px;
- box-shadow: none;
- box-sizing: border-box; }
- textarea:focus, select:focus, input:focus {
- border: 1px solid #ffffff;
- outline: 0; }
-
- input[type="checkbox"]:focus {
- outline: 1px dotted #ffffff; }
-
- label, legend, fieldset {
- display: block;
- margin-bottom: .5rem;
- font-weight: 600; }
-}
diff --git a/old/sakura.css b/old/sakura.css
@@ -1,184 +0,0 @@
-/* Sakura.css v1.3.1
- * ================
- * Minimal css theme.
- * Project: https://github.com/oxalorg/sakura/
- */
-/* Body */
-html {
- font-size: 62.5%;
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; }
-
-body {
- font-size: 1.8rem;
- line-height: 1.618;
- max-width: 38em;
- margin: auto;
- color: #4a4a4a;
- background-color: #f9f9f9;
- padding: 13px; }
-
-@media (max-width: 684px) {
- body {
- font-size: 1.53rem; } }
-
-@media (max-width: 382px) {
- body {
- font-size: 1.35rem; } }
-
-h1, h2, h3, h4, h5, h6 {
- line-height: 1.1;
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
- font-weight: 700;
- margin-top: 3rem;
- margin-bottom: 1.5rem;
- overflow-wrap: break-word;
- word-wrap: break-word;
- -ms-word-break: break-all;
- word-break: break-word; }
-
-h1 {
- font-size: 2.35em; }
-
-h2 {
- font-size: 2.00em; }
-
-h3 {
- font-size: 1.75em; }
-
-h4 {
- font-size: 1.5em; }
-
-h5 {
- font-size: 1.25em; }
-
-h6 {
- font-size: 1em; }
-
-p {
- margin-top: 0px;
- margin-bottom: 2.5rem; }
-
-small, sub, sup {
- font-size: 75%; }
-
-hr {
- border-color: #1d7484; }
-
-a {
- text-decoration: none;
- color: #1d7484; }
- a:hover {
- color: #982c61;
- border-bottom: 2px solid #4a4a4a; }
- a:visited {
- color: #144f5a; }
-
-ul {
- padding-left: 1.4em;
- margin-top: 0px;
- margin-bottom: 2.5rem; }
-
-li {
- margin-bottom: 0.4em; }
-
-blockquote {
- margin-left: 0px;
- margin-right: 0px;
- padding-left: 1em;
- padding-top: 0.8em;
- padding-bottom: 0.8em;
- padding-right: 0.8em;
- border-left: 5px solid #1d7484;
- margin-bottom: 2.5rem;
- background-color: #f1f1f1; }
-
-blockquote p {
- margin-bottom: 0; }
-
-img, video {
- height: auto;
- max-width: 100%;
- margin-top: 0px;
- margin-bottom: 2.5rem; }
-
-/* Pre and Code */
-pre {
- background-color: #f1f1f1;
- display: block;
- padding: 1em;
- overflow-x: auto;
- margin-top: 0px;
- margin-bottom: 2.5rem; }
-
-code {
- font-size: 0.9em;
- padding: 0 0.5em;
- background-color: #f1f1f1;
- white-space: pre-wrap; }
-
-pre > code {
- padding: 0;
- background-color: transparent;
- white-space: pre; }
-
-/* Tables */
-table {
- text-align: justify;
- width: 100%;
- border-collapse: collapse; }
-
-td, th {
- padding: 0.5em;
- border-bottom: 1px solid #f1f1f1; }
-
-/* Buttons, forms and input */
-input, textarea {
- border: 1px solid #4a4a4a; }
- input:focus, textarea:focus {
- border: 1px solid #1d7484; }
-
-textarea {
- width: 100%; }
-
-.button, button, input[type="submit"], input[type="reset"], input[type="button"] {
- display: inline-block;
- padding: 5px 10px;
- text-align: center;
- text-decoration: none;
- white-space: nowrap;
- background-color: #1d7484;
- color: #f9f9f9;
- border-radius: 1px;
- border: 1px solid #1d7484;
- cursor: pointer;
- box-sizing: border-box; }
- .button[disabled], button[disabled], input[type="submit"][disabled], input[type="reset"][disabled], input[type="button"][disabled] {
- cursor: default;
- opacity: .5; }
- .button:focus:enabled, .button:hover:enabled, button:focus:enabled, button:hover:enabled, input[type="submit"]:focus:enabled, input[type="submit"]:hover:enabled, input[type="reset"]:focus:enabled, input[type="reset"]:hover:enabled, input[type="button"]:focus:enabled, input[type="button"]:hover:enabled {
- background-color: #982c61;
- border-color: #982c61;
- color: #f9f9f9;
- outline: 0; }
-
-textarea, select, input {
- color: #4a4a4a;
- padding: 6px 10px;
- /* The 6px vertically centers text on FF, ignored by Webkit */
- margin-bottom: 10px;
- background-color: #f1f1f1;
- border: 1px solid #f1f1f1;
- border-radius: 4px;
- box-shadow: none;
- box-sizing: border-box; }
- textarea:focus, select:focus, input:focus {
- border: 1px solid #1d7484;
- outline: 0; }
-
-input[type="checkbox"]:focus {
- outline: 1px dotted #1d7484; }
-
-label, legend, fieldset {
- display: block;
- margin-bottom: .5rem;
- font-weight: 600; }
diff --git a/preview/ipfs.html b/preview/ipfs.html
@@ -1,30 +0,0 @@
-<head>
- <link rel="stylesheet" href="sakura.css" type="text/css">
-</head>
-
-<body>
- <h1> welcome to the kiss community </h1>
-
- <blockquote> when dylan says "no", we say "maybe" </blockquote>
-
- <h2> resources for <a href=https://kisslinux.org /> kisslinux </a>
-
- <h3> communication </h3>
- <ul>
- <li> <a href=ircs://irc.libera.chat:6697/kisslinux> ircs://irc.libera.chat:6697/kisslinux </a>
- <li> <a href=https://web.libera.chat/#kisslinux> web chat </a>
- <li> <a href=https://libera.irclog.whitequark.org/kisslinux> latest chat logs </a>
- </ul>
-
- <h3> development </h3>
- <ul>
- <li> <a href=https://github.com/kiss-community/> community github </a>
- <li> <a href=https://github.com/kiss-community/kisscommunity.org> website repository </a>
- </ul>
-
- <h3> resources </h3>
- <ul>
- <li> <a href=https://jedahan.com/kiss-find> community package search </a>
- <li> <a href=https://github.com/kiss-community/awesome-kiss> more awesome kiss resources </a>
- </ul>
-</body>
