Delete all scss
This commit is contained in:
parent
9ab533dc32
commit
a261cb3f7a
2
main.go
2
main.go
|
@ -3,7 +3,7 @@ package main
|
|||
import (
|
||||
_ "git.handmade.network/hmn/hmn/src/admintools"
|
||||
_ "git.handmade.network/hmn/hmn/src/assets"
|
||||
_ "git.handmade.network/hmn/hmn/src/buildscss/cmd"
|
||||
_ "git.handmade.network/hmn/hmn/src/buildcss/cmd"
|
||||
_ "git.handmade.network/hmn/hmn/src/discord/cmd"
|
||||
_ "git.handmade.network/hmn/hmn/src/initimage"
|
||||
_ "git.handmade.network/hmn/hmn/src/migration"
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
/* src/rawdata/scss/tachyons.min.css */
|
||||
/* src/rawdata/css/tachyons.min.css */
|
||||
html {
|
||||
line-height: 1.15;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
|
@ -6999,7 +6999,7 @@ code {
|
|||
}
|
||||
}
|
||||
|
||||
/* src/rawdata/scss/tachyons-vars.css */
|
||||
/* src/rawdata/css/tachyons-vars.css */
|
||||
:root {
|
||||
--sans-serif:
|
||||
-apple-system,
|
||||
|
@ -7153,7 +7153,7 @@ code {
|
|||
--breakpoint-large: "screen and (min-width: 60em)";
|
||||
}
|
||||
|
||||
/* src/rawdata/scss/vars.css */
|
||||
/* src/rawdata/css/vars.css */
|
||||
:root {
|
||||
--c1: #fafafa;
|
||||
--c2: #f3f3f3;
|
||||
|
@ -7222,7 +7222,7 @@ code {
|
|||
}
|
||||
}
|
||||
|
||||
/* src/rawdata/scss/core.css */
|
||||
/* src/rawdata/css/core.css */
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
border-color: var(--border-color);
|
||||
|
@ -7738,7 +7738,7 @@ video {
|
|||
margin: auto;
|
||||
}
|
||||
|
||||
/* src/rawdata/scss/carousel.css */
|
||||
/* src/rawdata/css/carousel.css */
|
||||
.carousel-container .carousel {
|
||||
position: relative;
|
||||
}
|
||||
|
@ -7766,7 +7766,7 @@ video {
|
|||
background-color: var(--theme-color-dimmest);
|
||||
}
|
||||
|
||||
/* src/rawdata/scss/content.css */
|
||||
/* src/rawdata/css/content.css */
|
||||
.post-content {
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
@ -7911,7 +7911,7 @@ video {
|
|||
background-color: black;
|
||||
}
|
||||
|
||||
/* src/rawdata/scss/editor.css */
|
||||
/* src/rawdata/css/editor.css */
|
||||
#preview:empty::after {
|
||||
content: "A preview of your post will appear here.";
|
||||
color: var(--dimmer-color);
|
||||
|
@ -7982,7 +7982,7 @@ video {
|
|||
}
|
||||
}
|
||||
|
||||
/* src/rawdata/scss/education.css */
|
||||
/* src/rawdata/css/education.css */
|
||||
.edu-course.highlight {
|
||||
border-left: 0.25rem solid black;
|
||||
border-color: var(--link-color);
|
||||
|
@ -8013,7 +8013,7 @@ video {
|
|||
color: red;
|
||||
}
|
||||
|
||||
/* src/rawdata/scss/form.css */
|
||||
/* src/rawdata/css/form.css */
|
||||
.hmn-form input:not([type=submit]),
|
||||
.hmn-form textarea,
|
||||
.hmn-form select {
|
||||
|
@ -8108,7 +8108,7 @@ input[type=submit]:not(.no-padding),
|
|||
padding: 0.5rem 1.5rem;
|
||||
}
|
||||
|
||||
/* src/rawdata/scss/forum.css */
|
||||
/* src/rawdata/css/forum.css */
|
||||
.thread-list-item .latestpost {
|
||||
width: 16.5rem;
|
||||
}
|
||||
|
@ -8245,7 +8245,7 @@ input[type=submit]:not(.no-padding),
|
|||
background: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
/* src/rawdata/scss/header.css */
|
||||
/* src/rawdata/css/header.css */
|
||||
header.old {
|
||||
--logo-height: 3.75rem;
|
||||
}
|
||||
|
@ -8453,7 +8453,7 @@ header.clicked .root-item:not(.clicked) > .submenu {
|
|||
--color: #fff;
|
||||
}
|
||||
|
||||
/* src/rawdata/scss/icons.css */
|
||||
/* src/rawdata/css/icons.css */
|
||||
@font-face {
|
||||
font-family: icons;
|
||||
src: url(/public/icons.ttf?v=4);
|
||||
|
@ -8514,7 +8514,7 @@ span.icon-rss::before {
|
|||
content: "4";
|
||||
}
|
||||
|
||||
/* src/rawdata/scss/notices.css */
|
||||
/* src/rawdata/css/notices.css */
|
||||
.notice a {
|
||||
color: inherit;
|
||||
border-bottom-color: inherit;
|
||||
|
@ -8538,7 +8538,7 @@ span.icon-rss::before {
|
|||
background-color: var(--notice-failure-color);
|
||||
}
|
||||
|
||||
/* src/rawdata/scss/progress_bar.css */
|
||||
/* src/rawdata/css/progress_bar.css */
|
||||
.upload_bar.uploading .instructions,
|
||||
.upload_bar:not(.uploading) .progress {
|
||||
display: none;
|
||||
|
@ -8553,7 +8553,7 @@ span.icon-rss::before {
|
|||
height: 100%;
|
||||
}
|
||||
|
||||
/* src/rawdata/scss/projects.css */
|
||||
/* src/rawdata/css/projects.css */
|
||||
.pair {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
@ -8662,14 +8662,14 @@ span.icon-rss::before {
|
|||
}
|
||||
}
|
||||
|
||||
/* src/rawdata/scss/showcase.css */
|
||||
/* src/rawdata/css/showcase.css */
|
||||
.showcase-item .gradient {
|
||||
width: 100%;
|
||||
height: 114px;
|
||||
background-image: linear-gradient(rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0));
|
||||
}
|
||||
|
||||
/* src/rawdata/scss/syntax.css */
|
||||
/* src/rawdata/css/syntax.css */
|
||||
pre .hll,
|
||||
code .hll,
|
||||
.codeblock .hll {
|
||||
|
@ -8856,7 +8856,7 @@ code .ss,
|
|||
color: #a31515;
|
||||
}
|
||||
|
||||
/* src/rawdata/scss/tabs.css */
|
||||
/* src/rawdata/css/tabs.css */
|
||||
.tab-button {
|
||||
border-bottom: 2px solid transparent;
|
||||
margin-bottom: -1px;
|
||||
|
@ -8865,7 +8865,7 @@ code .ss,
|
|||
border-color: var(--link-color);
|
||||
}
|
||||
|
||||
/* src/rawdata/scss/timeline.css */
|
||||
/* src/rawdata/css/timeline.css */
|
||||
.avatar {
|
||||
object-fit: cover;
|
||||
overflow: hidden;
|
||||
|
@ -8934,6 +8934,6 @@ code .ss,
|
|||
border-radius: 999px;
|
||||
}
|
||||
|
||||
/* src/rawdata/scss/style.css */
|
||||
/* src/rawdata/css/style.css */
|
||||
/*! TACHYONS v4.12.0 | http://tachyons.io */
|
||||
/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
|
||||
|
|
14171
public/style.old.css
14171
public/style.old.css
File diff suppressed because it is too large
Load Diff
|
@ -1,4 +1,4 @@
|
|||
package buildscss
|
||||
package buildcss
|
||||
|
||||
import (
|
||||
"context"
|
||||
|
@ -48,9 +48,9 @@ func RunServer(ctx context.Context) jobs.Job {
|
|||
func BuildContext() (api.BuildContext, *api.ContextError) {
|
||||
return api.Context(api.BuildOptions{
|
||||
EntryPoints: []string{
|
||||
"src/rawdata/scss/style.css",
|
||||
"src/rawdata/css/style.css",
|
||||
},
|
||||
Outbase: "src/rawdata/scss",
|
||||
Outbase: "src/rawdata/css",
|
||||
Outdir: "public",
|
||||
External: []string{"/public/*"},
|
||||
Bundle: true,
|
|
@ -4,7 +4,7 @@ import (
|
|||
"fmt"
|
||||
"os"
|
||||
|
||||
"git.handmade.network/hmn/hmn/src/buildscss"
|
||||
"git.handmade.network/hmn/hmn/src/buildcss"
|
||||
"git.handmade.network/hmn/hmn/src/logging"
|
||||
"git.handmade.network/hmn/hmn/src/website"
|
||||
"github.com/spf13/cobra"
|
||||
|
@ -12,10 +12,10 @@ import (
|
|||
|
||||
func init() {
|
||||
buildCommand := &cobra.Command{
|
||||
Use: "buildscss",
|
||||
Use: "buildcss",
|
||||
Short: "Build the website CSS",
|
||||
Run: func(cmd *cobra.Command, args []string) {
|
||||
ctx, err := buildscss.BuildContext()
|
||||
ctx, err := buildcss.BuildContext()
|
||||
if err != nil {
|
||||
fmt.Println(err)
|
||||
os.Exit(1)
|
|
@ -1,236 +0,0 @@
|
|||
form {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.radio, .checkbox {
|
||||
$size: 1.3rem;
|
||||
$margin: 0.5rem;
|
||||
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-left: $size + $margin;
|
||||
|
||||
input {
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
label {
|
||||
&::before {
|
||||
@include usevar('color', 'fg-font-color');
|
||||
@include usevar('background-color', 'form-check-background');
|
||||
@include usevar('border-color', 'form-check-border-color');
|
||||
|
||||
position: absolute;
|
||||
left: 0;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
|
||||
content: "";
|
||||
|
||||
width: $size;
|
||||
height: $size;
|
||||
|
||||
transition: border-color 0.2s;
|
||||
|
||||
&:hover {
|
||||
@include usevar('border-color', 'form-check-border-color-hover');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input:disabled ~ * {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.radio {
|
||||
label:before {
|
||||
border-radius:50px;
|
||||
}
|
||||
|
||||
input:checked + label:before {
|
||||
content:"\25cf";
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
label:before {
|
||||
border-radius:0.1cm;
|
||||
}
|
||||
|
||||
input:checked + label:before {
|
||||
content:"\2713";
|
||||
}
|
||||
}
|
||||
|
||||
input[type=text],
|
||||
input[type=password],
|
||||
input[type=email],
|
||||
textarea,
|
||||
select,
|
||||
{
|
||||
@include usevar('color', 'fg-font-color');
|
||||
@include usevar('background-color', 'form-text-background');
|
||||
@include usevar('border-color', 'form-text-border-color');
|
||||
|
||||
border-width: 1px;
|
||||
border-radius: 2px;
|
||||
transition: border-color 0.3s, background-color 0.3s;
|
||||
outline: none;
|
||||
|
||||
&.lite {
|
||||
background-color: transparent;
|
||||
border-radius: 0;
|
||||
border-width: 2px 0 2px;
|
||||
border-style: solid;
|
||||
border-color: transparent;
|
||||
|
||||
transition: border-bottom-color 60ms ease-in-out;
|
||||
|
||||
&:focus, &:active {
|
||||
background-color: transparent;
|
||||
border-top-color: transparent; // ugh
|
||||
border-bottom-color: var(--input-lite-border);
|
||||
}
|
||||
}
|
||||
|
||||
&:active, &:focus {
|
||||
@include usevar('background-color', 'form-text-background-active');
|
||||
@include usevar('border-color', 'form-text-border-color-active');
|
||||
}
|
||||
}
|
||||
|
||||
input[type=text],
|
||||
input[type=password],
|
||||
input[type=email],
|
||||
{
|
||||
&:not(.lite) {
|
||||
padding: $input-padding;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
padding: $input-padding;
|
||||
}
|
||||
|
||||
form .note {
|
||||
font-style:italic;
|
||||
}
|
||||
|
||||
select {
|
||||
padding: $input-padding 2*$input-padding;
|
||||
}
|
||||
|
||||
option[selected] {
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
input, select, textarea {
|
||||
&[disabled] {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
#{$buttons} {
|
||||
&:not(.button-small) {
|
||||
@extend .ph3;
|
||||
@extend .pv2;
|
||||
}
|
||||
|
||||
&.button-small {
|
||||
@extend .ph2;
|
||||
@extend .pv1;
|
||||
}
|
||||
|
||||
@include usevar('color', 'form-button-color');
|
||||
@include usevar('background-color', 'theme-color');
|
||||
@include usevar('border-color', 'theme-color');
|
||||
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
display: inline-block;
|
||||
border-radius: 2px;
|
||||
transition: background-color 0.1s, border-color 0.1s;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
|
||||
&:hover {
|
||||
@include usevar('color', 'form-button-color-active');
|
||||
@include usevar('background-color', 'theme-color-light');
|
||||
@include usevar('border-color', 'theme-color-light');
|
||||
}
|
||||
|
||||
&.lite {
|
||||
@include lite-button;
|
||||
}
|
||||
|
||||
// UNUSED
|
||||
&.inline-button {
|
||||
@include usevar('border-color', 'form-button-inline-border-color');
|
||||
|
||||
margin:5px;
|
||||
box-shadow:none;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
padding:5px 7px;
|
||||
}
|
||||
}
|
||||
|
||||
// UNUSED
|
||||
.tabbar {
|
||||
height:40px;
|
||||
padding-left:50px;
|
||||
margin-bottom:20px;
|
||||
|
||||
.tab {
|
||||
padding:10px;
|
||||
border-bottom:none;
|
||||
|
||||
&.current {
|
||||
/* Border color given by theme */
|
||||
border-bottom:2px solid transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.generic-form {
|
||||
width:60%;
|
||||
max-width:50em;
|
||||
margin:auto;
|
||||
margin-top:50px;
|
||||
padding:50px;
|
||||
border:1px solid transparent;
|
||||
border-bottom-width:0px;
|
||||
border-top-left-radius:3px;
|
||||
border-top-right-radius:3px;
|
||||
|
||||
table {
|
||||
border-collapse: separate;
|
||||
border-spacing: 4px;
|
||||
}
|
||||
|
||||
th {
|
||||
padding-right:10px;
|
||||
text-align:right;
|
||||
|
||||
&.error {
|
||||
color: red;
|
||||
text-align:center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#search_form_input_homepage {
|
||||
@include usevar('background-color', 'landing-search-background');
|
||||
|
||||
&:hover, &:focus {
|
||||
@include usevar('background-color', 'landing-search-background-hover');
|
||||
}
|
||||
}
|
|
@ -1,63 +0,0 @@
|
|||
/*
|
||||
Inserts a CSS expression with one or more custom variables.
|
||||
You can provide an arbitrary number of strings in the second
|
||||
argument, separated by spaces. Any strings corresponding to
|
||||
variable names will be replaced by the correct values, while
|
||||
other strings are left untouched.
|
||||
|
||||
Example usage:
|
||||
|
||||
@include usevar(border-color, dimmer-color);
|
||||
@include usevar(background, "linear-gradient(" dim-background-transparent "," dim-background ")");
|
||||
|
||||
For clarity and to avoid syntax issues, you are encouraged to
|
||||
use unquoted strings for variables and quoted strings for
|
||||
everything else.
|
||||
|
||||
For convenience in common cases, if only a single argument
|
||||
is provided and it does not match an existing variable, this
|
||||
will throw an error.
|
||||
*/
|
||||
@mixin usevar($prop, $pieces) {
|
||||
$maprule: ();
|
||||
$varrule: ();
|
||||
|
||||
@each $piece in $pieces {
|
||||
@if map-get($vars, $piece) != null {
|
||||
$maprule: append($maprule, map-get($vars, $piece));
|
||||
$varrule: append($varrule, var(--#{$piece}));
|
||||
} @else {
|
||||
@if length($pieces) == 1 {
|
||||
@error "Var \"#{$piece}\" not defined";
|
||||
}
|
||||
|
||||
$maprule: append($maprule, unquote($piece));
|
||||
$varrule: append($varrule, unquote($piece));
|
||||
}
|
||||
}
|
||||
|
||||
#{$prop}: $maprule;
|
||||
#{$prop}: $varrule;
|
||||
}
|
||||
|
||||
@function px2rem($px) {
|
||||
@return ($px / 16px) * 1rem;
|
||||
}
|
||||
|
||||
@mixin lite-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: none;
|
||||
background: none;
|
||||
font-weight: normal;
|
||||
font-family: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
$buttons: "
|
||||
button,
|
||||
.button,
|
||||
input[type=button],
|
||||
input[type=submit]
|
||||
";
|
|
@ -1,30 +0,0 @@
|
|||
@import 'tachyons/tachyons';
|
||||
|
||||
@import 'globals';
|
||||
|
||||
// This defines the $vars variable. Which _variables.scss file gets
|
||||
// imported is determined by the include paths of the SCSS compiler.
|
||||
@import 'variables';
|
||||
|
||||
@import 'core';
|
||||
|
||||
@import 'authors';
|
||||
@import 'content';
|
||||
@import 'editor';
|
||||
@import 'episodes';
|
||||
@import 'education';
|
||||
@import 'forms';
|
||||
// @import 'forum';
|
||||
@import 'header';
|
||||
@import 'icons';
|
||||
@import 'irc';
|
||||
// @import 'landing';
|
||||
@import 'library';
|
||||
@import 'profile';
|
||||
@import 'projects';
|
||||
@import 'showcase';
|
||||
@import 'streams';
|
||||
// @import 'timeline';
|
||||
@import 'carousel';
|
||||
@import 'notices';
|
||||
@import 'progress_bar';
|
|
@ -1,142 +0,0 @@
|
|||
|
||||
// Converted Variables
|
||||
|
||||
|
||||
// Custom Media Query Variables
|
||||
|
||||
|
||||
/*
|
||||
|
||||
ASPECT RATIOS
|
||||
|
||||
*/
|
||||
|
||||
/* This is for fluid media that is embedded from third party sites like youtube, vimeo etc.
|
||||
* Wrap the outer element in aspect-ratio and then extend it with the desired ratio i.e
|
||||
* Make sure there are no height and width attributes on the embedded media.
|
||||
* Adapted from: https://github.com/suitcss/components-flex-embed
|
||||
*
|
||||
* Example:
|
||||
*
|
||||
* <div class="aspect-ratio aspect-ratio--16x9">
|
||||
* <iframe class="aspect-ratio--object"></iframe>
|
||||
* </div>
|
||||
*
|
||||
* */
|
||||
|
||||
.aspect-ratio {
|
||||
height: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.aspect-ratio--16x9 { padding-bottom: 56.25%; }
|
||||
.aspect-ratio--9x16 { padding-bottom: 177.77%; }
|
||||
|
||||
.aspect-ratio--4x3 { padding-bottom: 75%; }
|
||||
.aspect-ratio--3x4 { padding-bottom: 133.33%; }
|
||||
|
||||
.aspect-ratio--6x4 { padding-bottom: 66.6%; }
|
||||
.aspect-ratio--4x6 { padding-bottom: 150%; }
|
||||
|
||||
.aspect-ratio--8x5 { padding-bottom: 62.5%; }
|
||||
.aspect-ratio--5x8 { padding-bottom: 160%; }
|
||||
|
||||
.aspect-ratio--7x5 { padding-bottom: 71.42%; }
|
||||
.aspect-ratio--5x7 { padding-bottom: 140%; }
|
||||
|
||||
.aspect-ratio--1x1 { padding-bottom: 100%; }
|
||||
|
||||
.aspect-ratio--object {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
@media #{$breakpoint-not-small}{
|
||||
.aspect-ratio-ns {
|
||||
height: 0;
|
||||
position: relative;
|
||||
}
|
||||
.aspect-ratio--16x9-ns { padding-bottom: 56.25%; }
|
||||
.aspect-ratio--9x16-ns { padding-bottom: 177.77%; }
|
||||
.aspect-ratio--4x3-ns { padding-bottom: 75%; }
|
||||
.aspect-ratio--3x4-ns { padding-bottom: 133.33%; }
|
||||
.aspect-ratio--6x4-ns { padding-bottom: 66.6%; }
|
||||
.aspect-ratio--4x6-ns { padding-bottom: 150%; }
|
||||
.aspect-ratio--8x5-ns { padding-bottom: 62.5%; }
|
||||
.aspect-ratio--5x8-ns { padding-bottom: 160%; }
|
||||
.aspect-ratio--7x5-ns { padding-bottom: 71.42%; }
|
||||
.aspect-ratio--5x7-ns { padding-bottom: 140%; }
|
||||
.aspect-ratio--1x1-ns { padding-bottom: 100%; }
|
||||
.aspect-ratio--object-ns {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 100;
|
||||
}
|
||||
}
|
||||
|
||||
@media #{$breakpoint-medium}{
|
||||
.aspect-ratio-m {
|
||||
height: 0;
|
||||
position: relative;
|
||||
}
|
||||
.aspect-ratio--16x9-m { padding-bottom: 56.25%; }
|
||||
.aspect-ratio--9x16-m { padding-bottom: 177.77%; }
|
||||
.aspect-ratio--4x3-m { padding-bottom: 75%; }
|
||||
.aspect-ratio--3x4-m { padding-bottom: 133.33%; }
|
||||
.aspect-ratio--6x4-m { padding-bottom: 66.6%; }
|
||||
.aspect-ratio--4x6-m { padding-bottom: 150%; }
|
||||
.aspect-ratio--8x5-m { padding-bottom: 62.5%; }
|
||||
.aspect-ratio--5x8-m { padding-bottom: 160%; }
|
||||
.aspect-ratio--7x5-m { padding-bottom: 71.42%; }
|
||||
.aspect-ratio--5x7-m { padding-bottom: 140%; }
|
||||
.aspect-ratio--1x1-m { padding-bottom: 100%; }
|
||||
.aspect-ratio--object-m {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 100;
|
||||
}
|
||||
}
|
||||
|
||||
@media #{$breakpoint-large}{
|
||||
.aspect-ratio-l {
|
||||
height: 0;
|
||||
position: relative;
|
||||
}
|
||||
.aspect-ratio--16x9-l { padding-bottom: 56.25%; }
|
||||
.aspect-ratio--9x16-l { padding-bottom: 177.77%; }
|
||||
.aspect-ratio--4x3-l { padding-bottom: 75%; }
|
||||
.aspect-ratio--3x4-l { padding-bottom: 133.33%; }
|
||||
.aspect-ratio--6x4-l { padding-bottom: 66.6%; }
|
||||
.aspect-ratio--4x6-l { padding-bottom: 150%; }
|
||||
.aspect-ratio--8x5-l { padding-bottom: 62.5%; }
|
||||
.aspect-ratio--5x8-l { padding-bottom: 160%; }
|
||||
.aspect-ratio--7x5-l { padding-bottom: 71.42%; }
|
||||
.aspect-ratio--5x7-l { padding-bottom: 140%; }
|
||||
.aspect-ratio--1x1-l { padding-bottom: 100%; }
|
||||
.aspect-ratio--object-l {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 100;
|
||||
}
|
||||
}
|
|
@ -1,133 +0,0 @@
|
|||
|
||||
// Converted Variables
|
||||
|
||||
|
||||
// Custom Media Query Variables
|
||||
|
||||
|
||||
/*
|
||||
|
||||
BACKGROUND POSITION
|
||||
|
||||
Base:
|
||||
bg = background
|
||||
|
||||
Modifiers:
|
||||
-center = center center
|
||||
-top = top center
|
||||
-right = center right
|
||||
-bottom = bottom center
|
||||
-left = center left
|
||||
|
||||
Media Query Extensions:
|
||||
-ns = not-small
|
||||
-m = medium
|
||||
-l = large
|
||||
|
||||
*/
|
||||
|
||||
.bg-center {
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
}
|
||||
|
||||
.bg-top {
|
||||
background-repeat: no-repeat;
|
||||
background-position: top center;
|
||||
}
|
||||
|
||||
.bg-right {
|
||||
background-repeat: no-repeat;
|
||||
background-position: center right;
|
||||
}
|
||||
|
||||
.bg-bottom {
|
||||
background-repeat: no-repeat;
|
||||
background-position: bottom center;
|
||||
}
|
||||
|
||||
.bg-left {
|
||||
background-repeat: no-repeat;
|
||||
background-position: center left;
|
||||
}
|
||||
|
||||
@media #{$breakpoint-not-small} {
|
||||
.bg-center-ns {
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
}
|
||||
|
||||
.bg-top-ns {
|
||||
background-repeat: no-repeat;
|
||||
background-position: top center;
|
||||
}
|
||||
|
||||
.bg-right-ns {
|
||||
background-repeat: no-repeat;
|
||||
background-position: center right;
|
||||
}
|
||||
|
||||
.bg-bottom-ns {
|
||||
background-repeat: no-repeat;
|
||||
background-position: bottom center;
|
||||
}
|
||||
|
||||
.bg-left-ns {
|
||||
background-repeat: no-repeat;
|
||||
background-position: center left;
|
||||
}
|
||||
}
|
||||
|
||||
@media #{$breakpoint-medium} {
|
||||
.bg-center-m {
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
}
|
||||
|
||||
.bg-top-m {
|
||||
background-repeat: no-repeat;
|
||||
background-position: top center;
|
||||
}
|
||||
|
||||
.bg-right-m {
|
||||
background-repeat: no-repeat;
|
||||
background-position: center right;
|
||||
}
|
||||
|
||||
.bg-bottom-m {
|
||||
background-repeat: no-repeat;
|
||||
background-position: bottom center;
|
||||
}
|
||||
|
||||
.bg-left-m {
|
||||
background-repeat: no-repeat;
|
||||
background-position: center left;
|
||||
}
|
||||
}
|
||||
|
||||
@media #{$breakpoint-large} {
|
||||
.bg-center-l {
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
}
|
||||
|
||||
.bg-top-l {
|
||||
background-repeat: no-repeat;
|
||||
background-position: top center;
|
||||
}
|
||||
|
||||
.bg-right-l {
|
||||
background-repeat: no-repeat;
|
||||
background-position: center right;
|
||||
}
|
||||
|
||||
.bg-bottom-l {
|
||||
background-repeat: no-repeat;
|
||||
background-position: bottom center;
|
||||
}
|
||||
|
||||
.bg-left-l {
|
||||
background-repeat: no-repeat;
|
||||
background-position: center left;
|
||||
}
|
||||
}
|
|
@ -1,41 +0,0 @@
|
|||
|
||||
// Converted Variables
|
||||
|
||||
|
||||
// Custom Media Query Variables
|
||||
|
||||
|
||||
/*
|
||||
|
||||
BACKGROUND SIZE
|
||||
Docs: http://tachyons.io/docs/themes/background-size/
|
||||
|
||||
Media Query Extensions:
|
||||
-ns = not-small
|
||||
-m = medium
|
||||
-l = large
|
||||
|
||||
*/
|
||||
|
||||
/*
|
||||
Often used in combination with background image set as an inline style
|
||||
on an html element.
|
||||
*/
|
||||
|
||||
.cover { background-size: cover!important; }
|
||||
.contain { background-size: contain!important; }
|
||||
|
||||
@media #{$breakpoint-not-small} {
|
||||
.cover-ns { background-size: cover!important; }
|
||||
.contain-ns { background-size: contain!important; }
|
||||
}
|
||||
|
||||
@media #{$breakpoint-medium} {
|
||||
.cover-m { background-size: cover!important; }
|
||||
.contain-m { background-size: contain!important; }
|
||||
}
|
||||
|
||||
@media #{$breakpoint-large} {
|
||||
.cover-l { background-size: cover!important; }
|
||||
.contain-l { background-size: contain!important; }
|
||||
}
|
|
@ -1,93 +0,0 @@
|
|||
|
||||
// Converted Variables
|
||||
|
||||
|
||||
// Custom Media Query Variables
|
||||
|
||||
|
||||
/*
|
||||
|
||||
BORDER COLORS
|
||||
Docs: http://tachyons.io/docs/themes/borders/
|
||||
|
||||
Border colors can be used to extend the base
|
||||
border classes ba,bt,bb,br,bl found in the _borders.css file.
|
||||
|
||||
The base border class by default will set the color of the border
|
||||
to that of the current text color. These classes are for the cases
|
||||
where you desire for the text and border colors to be different.
|
||||
|
||||
Base:
|
||||
b = border
|
||||
|
||||
Modifiers:
|
||||
--color-name = each color variable name is also a border color name
|
||||
|
||||
*/
|
||||
|
||||
.b--black { border-color: $black; }
|
||||
.b--near-black { border-color: $near-black; }
|
||||
.b--dark-gray { border-color: $dark-gray; }
|
||||
.b--mid-gray { border-color: $mid-gray; }
|
||||
.b--gray { border-color: $gray; }
|
||||
.b--silver { border-color: $silver; }
|
||||
.b--light-silver { border-color: $light-silver; }
|
||||
.b--moon-gray { border-color: $moon-gray; }
|
||||
.b--light-gray { border-color: $light-gray; }
|
||||
.b--near-white { border-color: $near-white; }
|
||||
.b--white { border-color: $white; }
|
||||
|
||||
.b--white-90 { border-color: $white-90; }
|
||||
.b--white-80 { border-color: $white-80; }
|
||||
.b--white-70 { border-color: $white-70; }
|
||||
.b--white-60 { border-color: $white-60; }
|
||||
.b--white-50 { border-color: $white-50; }
|
||||
.b--white-40 { border-color: $white-40; }
|
||||
.b--white-30 { border-color: $white-30; }
|
||||
.b--white-20 { border-color: $white-20; }
|
||||
.b--white-10 { border-color: $white-10; }
|
||||
.b--white-05 { border-color: $white-05; }
|
||||
.b--white-025 { border-color: $white-025; }
|
||||
.b--white-0125 { border-color: $white-0125; }
|
||||
|
||||
.b--black-90 { border-color: $black-90; }
|
||||
.b--black-80 { border-color: $black-80; }
|
||||
.b--black-70 { border-color: $black-70; }
|
||||
.b--black-60 { border-color: $black-60; }
|
||||
.b--black-50 { border-color: $black-50; }
|
||||
.b--black-40 { border-color: $black-40; }
|
||||
.b--black-30 { border-color: $black-30; }
|
||||
.b--black-20 { border-color: $black-20; }
|
||||
.b--black-10 { border-color: $black-10; }
|
||||
.b--black-05 { border-color: $black-05; }
|
||||
.b--black-025 { border-color: $black-025; }
|
||||
.b--black-0125 { border-color: $black-0125; }
|
||||
|
||||
.b--dark-red { border-color: $dark-red; }
|
||||
.b--red { border-color: $red; }
|
||||
.b--light-red { border-color: $light-red; }
|
||||
.b--orange { border-color: $orange; }
|
||||
.b--gold { border-color: $gold; }
|
||||
.b--yellow { border-color: $yellow; }
|
||||
.b--light-yellow { border-color: $light-yellow; }
|
||||
.b--purple { border-color: $purple; }
|
||||
.b--light-purple { border-color: $light-purple; }
|
||||
.b--dark-pink { border-color: $dark-pink; }
|
||||
.b--hot-pink { border-color: $hot-pink; }
|
||||
.b--pink { border-color: $pink; }
|
||||
.b--light-pink { border-color: $light-pink; }
|
||||
.b--dark-green { border-color: $dark-green; }
|
||||
.b--green { border-color: $green; }
|
||||
.b--light-green { border-color: $light-green; }
|
||||
.b--navy { border-color: $navy; }
|
||||
.b--dark-blue { border-color: $dark-blue; }
|
||||
.b--blue { border-color: $blue; }
|
||||
.b--light-blue { border-color: $light-blue; }
|
||||
.b--lightest-blue { border-color: $lightest-blue; }
|
||||
.b--washed-blue { border-color: $washed-blue; }
|
||||
.b--washed-green { border-color: $washed-green; }
|
||||
.b--washed-yellow { border-color: $washed-yellow; }
|
||||
.b--washed-red { border-color: $washed-red; }
|
||||
|
||||
.b--transparent { border-color: $transparent; }
|
||||
.b--inherit { border-color: inherit; }
|
|
@ -1,134 +0,0 @@
|
|||
|
||||
// Converted Variables
|
||||
|
||||
|
||||
// Custom Media Query Variables
|
||||
|
||||
|
||||
/*
|
||||
|
||||
BORDER RADIUS
|
||||
Docs: http://tachyons.io/docs/themes/border-radius/
|
||||
|
||||
Base:
|
||||
br = border-radius
|
||||
|
||||
Modifiers:
|
||||
0 = 0/none
|
||||
1 = 1st step in scale
|
||||
2 = 2nd step in scale
|
||||
3 = 3rd step in scale
|
||||
4 = 4th step in scale
|
||||
|
||||
Literal values:
|
||||
-100 = 100%
|
||||
-pill = 9999px
|
||||
|
||||
Media Query Extensions:
|
||||
-ns = not-small
|
||||
-m = medium
|
||||
-l = large
|
||||
|
||||
*/
|
||||
|
||||
.br0 { border-radius: $border-radius-none }
|
||||
.br1 { border-radius: $border-radius-1; }
|
||||
.br2 { border-radius: $border-radius-2; }
|
||||
.br3 { border-radius: $border-radius-3; }
|
||||
.br4 { border-radius: $border-radius-4; }
|
||||
.br-100 { border-radius: $border-radius-circle; }
|
||||
.br-pill { border-radius: $border-radius-pill; }
|
||||
.br--bottom {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
.br--top {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
.br--right {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
.br--left {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
@media #{$breakpoint-not-small} {
|
||||
.br0-ns { border-radius: $border-radius-none }
|
||||
.br1-ns { border-radius: $border-radius-1; }
|
||||
.br2-ns { border-radius: $border-radius-2; }
|
||||
.br3-ns { border-radius: $border-radius-3; }
|
||||
.br4-ns { border-radius: $border-radius-4; }
|
||||
.br-100-ns { border-radius: $border-radius-circle; }
|
||||
.br-pill-ns { border-radius: $border-radius-pill; }
|
||||
.br--bottom-ns {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
.br--top-ns {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
.br--right-ns {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
.br--left-ns {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media #{$breakpoint-medium} {
|
||||
.br0-m { border-radius: $border-radius-none }
|
||||
.br1-m { border-radius: $border-radius-1; }
|
||||
.br2-m { border-radius: $border-radius-2; }
|
||||
.br3-m { border-radius: $border-radius-3; }
|
||||
.br4-m { border-radius: $border-radius-4; }
|
||||
.br-100-m { border-radius: $border-radius-circle; }
|
||||
.br-pill-m { border-radius: $border-radius-pill; }
|
||||
.br--bottom-m {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
.br--top-m {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
.br--right-m {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
.br--left-m {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media #{$breakpoint-large} {
|
||||
.br0-l { border-radius: $border-radius-none }
|
||||
.br1-l { border-radius: $border-radius-1; }
|
||||
.br2-l { border-radius: $border-radius-2; }
|
||||
.br3-l { border-radius: $border-radius-3; }
|
||||
.br4-l { border-radius: $border-radius-4; }
|
||||
.br-100-l { border-radius: $border-radius-circle; }
|
||||
.br-pill-l { border-radius: $border-radius-pill; }
|
||||
.br--bottom-l {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
.br--top-l {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
.br--right-l {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
.br--left-l {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
|
@ -1,55 +0,0 @@
|
|||
|
||||
// Converted Variables
|
||||
|
||||
|
||||
// Custom Media Query Variables
|
||||
|
||||
|
||||
/*
|
||||
|
||||
BORDER STYLES
|
||||
Docs: http://tachyons.io/docs/themes/borders/
|
||||
|
||||
Depends on base border module in _borders.css
|
||||
|
||||
Base:
|
||||
b = border-style
|
||||
|
||||
Modifiers:
|
||||
--none = none
|
||||
--dotted = dotted
|
||||
--dashed = dashed
|
||||
--solid = solid
|
||||
|
||||
Media Query Extensions:
|
||||
-ns = not-small
|
||||
-m = medium
|
||||
-l = large
|
||||
|
||||
*/
|
||||
|
||||
.b--dotted { border-style: dotted; }
|
||||
.b--dashed { border-style: dashed; }
|
||||
.b--solid { border-style: solid; }
|
||||
.b--none { border-style: none; }
|
||||
|
||||
@media #{$breakpoint-not-small} {
|
||||
.b--dotted-ns { border-style: dotted; }
|
||||
.b--dashed-ns { border-style: dashed; }
|
||||
.b--solid-ns { border-style: solid; }
|
||||
.b--none-ns { border-style: none; }
|
||||
}
|
||||
|
||||
@media #{$breakpoint-medium} {
|
||||
.b--dotted-m { border-style: dotted; }
|
||||
.b--dashed-m { border-style: dashed; }
|
||||
.b--solid-m { border-style: solid; }
|
||||
.b--none-m { border-style: none; }
|
||||
}
|
||||
|
||||
@media #{$breakpoint-large} {
|
||||
.b--dotted-l { border-style: dotted; }
|
||||
.b--dashed-l { border-style: dashed; }
|
||||
.b--solid-l { border-style: solid; }
|
||||
.b--none-l { border-style: none; }
|
||||
}
|
|
@ -1,81 +0,0 @@
|
|||
|
||||
// Converted Variables
|
||||
|
||||
|
||||
// Custom Media Query Variables
|
||||
|
||||
|
||||
/*
|
||||
|
||||
BORDER WIDTHS
|
||||
Docs: http://tachyons.io/docs/themes/borders/
|
||||
|
||||
Base:
|
||||
bw = border-width
|
||||
|
||||
Modifiers:
|
||||
0 = 0 width border
|
||||
1 = 1st step in border-width scale
|
||||
2 = 2nd step in border-width scale
|
||||
3 = 3rd step in border-width scale
|
||||
4 = 4th step in border-width scale
|
||||
5 = 5th step in border-width scale
|
||||
|
||||
Media Query Extensions:
|
||||
-ns = not-small
|
||||
-m = medium
|
||||
-l = large
|
||||
|
||||
*/
|
||||
|
||||
.bw0 { border-width: $border-width-none; }
|
||||
.bw1 { border-width: $border-width-1; }
|
||||
.bw2 { border-width: $border-width-2; }
|
||||
.bw3 { border-width: $border-width-3; }
|
||||
.bw4 { border-width: $border-width-4; }
|
||||
.bw5 { border-width: $border-width-5; }
|
||||
|
||||
/* Resets */
|
||||
.bt-0 { border-top-width: $border-width-none }
|
||||
.br-0 { border-right-width: $border-width-none }
|
||||
.bb-0 { border-bottom-width: $border-width-none }
|
||||
.bl-0 { border-left-width: $border-width-none }
|
||||
|
||||
@media #{$breakpoint-not-small} {
|
||||
.bw0-ns { border-width: $border-width-none; }
|
||||
.bw1-ns { border-width: $border-width-1; }
|
||||
.bw2-ns { border-width: $border-width-2; }
|
||||
.bw3-ns { border-width: $border-width-3; }
|
||||
.bw4-ns { border-width: $border-width-4; }
|
||||
.bw5-ns { border-width: $border-width-5; }
|
||||
.bt-0-ns { border-top-width: $border-width-none }
|
||||
.br-0-ns { border-right-width: $border-width-none }
|
||||
.bb-0-ns { border-bottom-width: $border-width-none }
|
||||
.bl-0-ns { border-left-width: $border-width-none }
|
||||
}
|
||||
|
||||
@media #{$breakpoint-medium} {
|
||||
.bw0-m { border-width: $border-width-none; }
|
||||
.bw1-m { border-width: $border-width-1; }
|
||||
.bw2-m { border-width: $border-width-2; }
|
||||
.bw3-m { border-width: $border-width-3; }
|
||||
.bw4-m { border-width: $border-width-4; }
|
||||
.bw5-m { border-width: $border-width-5; }
|
||||
.bt-0-m { border-top-width: $border-width-none }
|
||||
.br-0-m { border-right-width: $border-width-none }
|
||||
.bb-0-m { border-bottom-width: $border-width-none }
|
||||
.bl-0-m { border-left-width: $border-width-none }
|
||||
}
|
||||
|
||||
@media #{$breakpoint-large} {
|
||||
.bw0-l { border-width: $border-width-none; }
|
||||
.bw1-l { border-width: $border-width-1; }
|
||||
.bw2-l { border-width: $border-width-2; }
|
||||
.bw3-l { border-width: $border-width-3; }
|
||||
.bw4-l { border-width: $border-width-4; }
|
||||
.bw5-l { border-width: $border-width-5; }
|
||||
.bt-0-l { border-top-width: $border-width-none }
|
||||
.br-0-l { border-right-width: $border-width-none }
|
||||
.bb-0-l { border-bottom-width: $border-width-none }
|
||||
.bl-0-l { border-left-width: $border-width-none }
|
||||
}
|
|
@ -1,65 +0,0 @@
|
|||
|
||||
// Converted Variables
|
||||
|
||||
|
||||
// Custom Media Query Variables
|
||||
|
||||
|
||||
/*
|
||||
|
||||
BORDERS
|
||||
Docs: http://tachyons.io/docs/themes/borders/
|
||||
|
||||
Base:
|
||||
b = border
|
||||
|
||||
Modifiers:
|
||||
a = all
|
||||
t = top
|
||||
r = right
|
||||
b = bottom
|
||||
l = left
|
||||
n = none
|
||||
|
||||
Media Query Extensions:
|
||||
-ns = not-small
|
||||
-m = medium
|
||||
-l = large
|
||||
|
||||
*/
|
||||
|
||||
.ba { border-style: solid; border-width: 1px; }
|
||||
.bt { border-top-style: solid; border-top-width: 1px; }
|
||||
.br { border-right-style: solid; border-right-width: 1px; }
|
||||
.bb { border-bottom-style: solid; border-bottom-width: 1px; }
|
||||
.bl { border-left-style: solid; border-left-width: 1px; }
|
||||
.bn { border-style: none; border-width: 0; }
|
||||
|
||||
|
||||
@media #{$breakpoint-not-small} {
|
||||
.ba-ns { border-style: solid; border-width: 1px; }
|
||||
.bt-ns { border-top-style: solid; border-top-width: 1px; }
|
||||
.br-ns { border-right-style: solid; border-right-width: 1px; }
|
||||
.bb-ns { border-bottom-style: solid; border-bottom-width: 1px; }
|
||||
.bl-ns { border-left-style: solid; border-left-width: 1px; }
|
||||
.bn-ns { border-style: none; border-width: 0; }
|
||||
}
|
||||
|
||||
@media #{$breakpoint-medium} {
|
||||
.ba-m { border-style: solid; border-width: 1px; }
|
||||
.bt-m { border-top-style: solid; border-top-width: 1px; }
|
||||
.br-m { border-right-style: solid; border-right-width: 1px; }
|
||||
.bb-m { border-bottom-style: solid; border-bottom-width: 1px; }
|
||||
.bl-m { border-left-style: solid; border-left-width: 1px; }
|
||||
.bn-m { border-style: none; border-width: 0; }
|
||||
}
|
||||
|
||||
@media #{$breakpoint-large} {
|
||||
.ba-l { border-style: solid; border-width: 1px; }
|
||||
.bt-l { border-top-style: solid; border-top-width: 1px; }
|
||||
.br-l { border-right-style: solid; border-right-width: 1px; }
|
||||
.bb-l { border-bottom-style: solid; border-bottom-width: 1px; }
|
||||
.bl-l { border-left-style: solid; border-left-width: 1px; }
|
||||
.bn-l { border-style: none; border-width: 0; }
|
||||
}
|
||||
|
|
@ -1,48 +0,0 @@
|
|||
|
||||
// Converted Variables
|
||||
|
||||
|
||||
// Custom Media Query Variables
|
||||
|
||||
|
||||
/*
|
||||
|
||||
BOX-SHADOW
|
||||
Docs: http://tachyons.io/docs/themes/box-shadow/
|
||||
|
||||
Media Query Extensions:
|
||||
-ns = not-small
|
||||
-m = medium
|
||||
-l = large
|
||||
|
||||
*/
|
||||
|
||||
.shadow-1 { box-shadow: $box-shadow-1; }
|
||||
|