giteahstr.sxr08/acme-corporation
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit
All checks were successful
Deploying Website / build (push) Successful in 16s
Details

Browse Source
This commit is contained in:
Maxime Delporte
2025-04-04 18:47:44 -03:00
commit 51ea013bc3
822 changed files with 18303 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

569
themes/Eclectic/assets/scss/_include-media.scss Normal file
View File

@@ -0,0 +1,569 @@
@charset "UTF-8";
// _ _ _ _ _
// (_) | | | | | (_)
// _ _ __ ___| |_ _ __| | ___ _ __ ___ ___ __| |_ __ _
// | | '_ \ / __| | | | |/ _` |/ _ \ | '_ ` _ \ / _ \/ _` | |/ _` |
// | | | | | (__| | |_| | (_| | __/ | | | | | | __/ (_| | | (_| |
// |_|_| |_|\___|_|\__,_|\__,_|\___| |_| |_| |_|\___|\__,_|_|\__,_|
//
// Simple, elegant and maintainable media queries in Sass
// v1.4.9
//
// http://include-media.com
//
// Authors: Eduardo Boucas (@eduardoboucas)
// Hugo Giraudel (@hugogiraudel)
//
// This project is licensed under the terms of the MIT license
////
/// include-media library public configuration
/// @author Eduardo Boucas
/// @access public
////
///
/// Creates a list of global breakpoints
///
/// @example scss - Creates a single breakpoint with the label `phone`
/// $breakpoints: ('phone': 320px);
///
$breakpoints: (
'phone': 320px,
'tablet': 768px,
'desktop': 1024px
) !default;
///
/// Creates a list of static expressions or media types
///
/// @example scss - Creates a single media type (screen)
/// $media-expressions: ('screen': 'screen');
///
/// @example scss - Creates a static expression with logical disjunction (OR operator)
/// $media-expressions: (
/// 'retina2x': '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)'
/// );
///
$media-expressions: (
'screen': 'screen',
'print': 'print',
'handheld': 'handheld',
'landscape': '(orientation: landscape)',
'portrait': '(orientation: portrait)',
'retina2x': '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx)',
'retina3x': '(-webkit-min-device-pixel-ratio: 3), (min-resolution: 350dpi), (min-resolution: 3dppx)'
) !default;
///
/// Defines a number to be added or subtracted from each unit when declaring breakpoints with exclusive intervals
///
/// @example scss - Interval for pixels is defined as `1` by default
/// @include media('>128px') {}
///
/// /* Generates: */
/// @media (min-width: 129px) {}
///
/// @example scss - Interval for ems is defined as `0.01` by default
/// @include media('>20em') {}
///
/// /* Generates: */
/// @media (min-width: 20.01em) {}
///
/// @example scss - Interval for rems is defined as `0.1` by default, to be used with `font-size: 62.5%;`
/// @include media('>2.0rem') {}
///
/// /* Generates: */
/// @media (min-width: 2.1rem) {}
///
$unit-intervals: (
'px': 1,
'em': 0.01,
'rem': 0.1,
'': 0
) !default;
///
/// Defines whether support for media queries is available, useful for creating separate stylesheets
/// for browsers that don't support media queries.
///
/// @example scss - Disables support for media queries
/// $im-media-support: false;
/// @include media('>=tablet') {
/// .foo {
/// color: tomato;
/// }
/// }
///
/// /* Generates: */
/// .foo {
/// color: tomato;
/// }
///
$im-media-support: true !default;
///
/// Selects which breakpoint to emulate when support for media queries is disabled. Media queries that start at or
/// intercept the breakpoint will be displayed, any others will be ignored.
///
/// @example scss - This media query will show because it intercepts the static breakpoint
/// $im-media-support: false;
/// $im-no-media-breakpoint: 'desktop';
/// @include media('>=tablet') {
/// .foo {
/// color: tomato;
/// }
/// }
///
/// /* Generates: */
/// .foo {
/// color: tomato;
/// }
///
/// @example scss - This media query will NOT show because it does not intercept the desktop breakpoint
/// $im-media-support: false;
/// $im-no-media-breakpoint: 'tablet';
/// @include media('>=desktop') {
/// .foo {
/// color: tomato;
/// }
/// }
///
/// /* No output */
///
$im-no-media-breakpoint: 'desktop' !default;
///
/// Selects which media expressions are allowed in an expression for it to be used when media queries
/// are not supported.
///
/// @example scss - This media query will show because it intercepts the static breakpoint and contains only accepted media expressions
/// $im-media-support: false;
/// $im-no-media-breakpoint: 'desktop';
/// $im-no-media-expressions: ('screen');
/// @include media('>=tablet', 'screen') {
/// .foo {
/// color: tomato;
/// }
/// }
///
/// /* Generates: */
/// .foo {
/// color: tomato;
/// }
///
/// @example scss - This media query will NOT show because it intercepts the static breakpoint but contains a media expression that is not accepted
/// $im-media-support: false;
/// $im-no-media-breakpoint: 'desktop';
/// $im-no-media-expressions: ('screen');
/// @include media('>=tablet', 'retina2x') {
/// .foo {
/// color: tomato;
/// }
/// }
///
/// /* No output */
///
$im-no-media-expressions: ('screen', 'portrait', 'landscape') !default;
////
/// Cross-engine logging engine
/// @author Hugo Giraudel
/// @access private
////
///
/// Log a message either with `@error` if supported
/// else with `@warn`, using `feature-exists('at-error')`
/// to detect support.
///
/// @param {String} $message - Message to log
///
@function im-log($message) {
@if feature-exists('at-error') {
@error $message;
} @else {
@warn $message;
$_: noop();
}
@return $message;
}
///
/// Wrapper mixin for the log function so it can be used with a more friendly
/// API than `@if im-log('..') {}` or `$_: im-log('..')`. Basically, use the function
/// within functions because it is not possible to include a mixin in a function
/// and use the mixin everywhere else because it's much more elegant.
///
/// @param {String} $message - Message to log
///
@mixin log($message) {
@if im-log($message) {}
}
///
/// Function with no `@return` called next to `@warn` in Sass 3.3
/// to trigger a compiling error and stop the process.
///
@function noop() {}
///
/// Determines whether a list of conditions is intercepted by the static breakpoint.
///
/// @param {Arglist} $conditions - Media query conditions
///
/// @return {Boolean} - Returns true if the conditions are intercepted by the static breakpoint
///
@function im-intercepts-static-breakpoint($conditions...) {
$no-media-breakpoint-value: map-get($breakpoints, $im-no-media-breakpoint);
@if not $no-media-breakpoint-value {
@if im-log('`#{$im-no-media-breakpoint}` is not a valid breakpoint.') {}
}
@each $condition in $conditions {
@if not map-has-key($media-expressions, $condition) {
$operator: get-expression-operator($condition);
$prefix: get-expression-prefix($operator);
$value: get-expression-value($condition, $operator);
// scss-lint:disable SpaceAroundOperator
@if ($prefix == 'max' and $value <= $no-media-breakpoint-value) or
($prefix == 'min' and $value > $no-media-breakpoint-value) {
@return false;
}
} @else if not index($im-no-media-expressions, $condition) {
@return false;
}
}
@return true;
}
////
/// Parsing engine
/// @author Hugo Giraudel
/// @access private
////
///
/// Get operator of an expression
///
/// @param {String} $expression - Expression to extract operator from
///
/// @return {String} - Any of `>=`, `>`, `<=`, `<`, `≥`, `≤`
///
@function get-expression-operator($expression) {
@each $operator in ('>=', '>', '<=', '<', '≥', '≤') {
@if str-index($expression, $operator) {
@return $operator;
}
}
// It is not possible to include a mixin inside a function, so we have to
// rely on the `im-log(..)` function rather than the `log(..)` mixin. Because
// functions cannot be called anywhere in Sass, we need to hack the call in
// a dummy variable, such as `$_`. If anybody ever raise a scoping issue with
// Sass 3.3, change this line in `@if im-log(..) {}` instead.
$_: im-log('No operator found in `#{$expression}`.');
}
///
/// Get dimension of an expression, based on a found operator
///
/// @param {String} $expression - Expression to extract dimension from
/// @param {String} $operator - Operator from `$expression`
///
/// @return {String} - `width` or `height` (or potentially anything else)
///
@function get-expression-dimension($expression, $operator) {
$operator-index: str-index($expression, $operator);
$parsed-dimension: str-slice($expression, 0, $operator-index - 1);
$dimension: 'width';
@if str-length($parsed-dimension) > 0 {
$dimension: $parsed-dimension;
}
@return $dimension;
}
///
/// Get dimension prefix based on an operator
///
/// @param {String} $operator - Operator
///
/// @return {String} - `min` or `max`
///
@function get-expression-prefix($operator) {
@return if(index(('<', '<=', '≤'), $operator), 'max', 'min');
}
///
/// Get value of an expression, based on a found operator
///
/// @param {String} $expression - Expression to extract value from
/// @param {String} $operator - Operator from `$expression`
///
/// @return {Number} - A numeric value
///
@function get-expression-value($expression, $operator) {
$operator-index: str-index($expression, $operator);
$value: str-slice($expression, $operator-index + str-length($operator));
@if map-has-key($breakpoints, $value) {
$value: map-get($breakpoints, $value);
} @else {
$value: to-number($value);
}
$interval: map-get($unit-intervals, unit($value));
@if not $interval {
// It is not possible to include a mixin inside a function, so we have to
// rely on the `im-log(..)` function rather than the `log(..)` mixin. Because
// functions cannot be called anywhere in Sass, we need to hack the call in
// a dummy variable, such as `$_`. If anybody ever raise a scoping issue with
// Sass 3.3, change this line in `@if im-log(..) {}` instead.
$_: im-log('Unknown unit `#{unit($value)}`.');
}
@if $operator == '>' {
$value: $value + $interval;
} @else if $operator == '<' {
$value: $value - $interval;
}
@return $value;
}
///
/// Parse an expression to return a valid media-query expression
///
/// @param {String} $expression - Expression to parse
///
/// @return {String} - Valid media query
///
@function parse-expression($expression) {
// If it is part of $media-expressions, it has no operator
// then there is no need to go any further, just return the value
@if map-has-key($media-expressions, $expression) {
@return map-get($media-expressions, $expression);
}
$operator: get-expression-operator($expression);
$dimension: get-expression-dimension($expression, $operator);
$prefix: get-expression-prefix($operator);
$value: get-expression-value($expression, $operator);
@return '(#{$prefix}-#{$dimension}: #{$value})';
}
///
/// Slice `$list` between `$start` and `$end` indexes
///
/// @access private
///
/// @param {List} $list - List to slice
/// @param {Number} $start [1] - Start index
/// @param {Number} $end [length($list)] - End index
///
/// @return {List} Sliced list
///
@function slice($list, $start: 1, $end: length($list)) {
@if length($list) < 1 or $start > $end {
@return ();
}
$result: ();
@for $i from $start through $end {
$result: append($result, nth($list, $i));
}
@return $result;
}
////
/// String to number converter
/// @author Hugo Giraudel
/// @access private
////
///
/// Casts a string into a number
///
/// @param {String | Number} $value - Value to be parsed
///
/// @return {Number}
///
@function to-number($value) {
@if type-of($value) == 'number' {
@return $value;
} @else if type-of($value) != 'string' {
$_: im-log('Value for `to-number` should be a number or a string.');
}
$first-character: str-slice($value, 1, 1);
$result: 0;
$digits: 0;
$minus: ($first-character == '-');
$numbers: ('0': 0, '1': 1, '2': 2, '3': 3, '4': 4, '5': 5, '6': 6, '7': 7, '8': 8, '9': 9);
// Remove +/- sign if present at first character
@if ($first-character == '+' or $first-character == '-') {
$value: str-slice($value, 2);
}
@for $i from 1 through str-length($value) {
$character: str-slice($value, $i, $i);
@if not (index(map-keys($numbers), $character) or $character == '.') {
@return to-length(if($minus, -$result, $result), str-slice($value, $i))
}
@if $character == '.' {
$digits: 1;
} @else if $digits == 0 {
$result: $result * 10 + map-get($numbers, $character);
} @else {
$digits: $digits * 10;
$result: $result + map-get($numbers, $character) / $digits;
}
}
@return if($minus, -$result, $result);
}
///
/// Add `$unit` to `$value`
///
/// @param {Number} $value - Value to add unit to
/// @param {String} $unit - String representation of the unit
///
/// @return {Number} - `$value` expressed in `$unit`
///
@function to-length($value, $unit) {
$units: ('px': 1px, 'cm': 1cm, 'mm': 1mm, '%': 1%, 'ch': 1ch, 'pc': 1pc, 'in': 1in, 'em': 1em, 'rem': 1rem, 'pt': 1pt, 'ex': 1ex, 'vw': 1vw, 'vh': 1vh, 'vmin': 1vmin, 'vmax': 1vmax);
@if not index(map-keys($units), $unit) {
$_: im-log('Invalid unit `#{$unit}`.');
}
@return $value * map-get($units, $unit);
}
///
/// This mixin aims at redefining the configuration just for the scope of
/// the call. It is helpful when having a component needing an extended
/// configuration such as custom breakpoints (referred to as tweakpoints)
/// for instance.
///
/// @author Hugo Giraudel
///
/// @param {Map} $tweakpoints [()] - Map of tweakpoints to be merged with `$breakpoints`
/// @param {Map} $tweak-media-expressions [()] - Map of tweaked media expressions to be merged with `$media-expression`
///
/// @example scss - Extend the global breakpoints with a tweakpoint
/// @include media-context(('custom': 678px)) {
/// .foo {
/// @include media('>phone', '<=custom') {
/// // ...
/// }
/// }
/// }
///
/// @example scss - Extend the global media expressions with a custom one
/// @include media-context($tweak-media-expressions: ('all': 'all')) {
/// .foo {
/// @include media('all', '>phone') {
/// // ...
/// }
/// }
/// }
///
/// @example scss - Extend both configuration maps
/// @include media-context(('custom': 678px), ('all': 'all')) {
/// .foo {
/// @include media('all', '>phone', '<=custom') {
/// // ...
/// }
/// }
/// }
///
@mixin media-context($tweakpoints: (), $tweak-media-expressions: ()) {
// Save global configuration
$global-breakpoints: $breakpoints;
$global-media-expressions: $media-expressions;
// Update global configuration
$breakpoints: map-merge($breakpoints, $tweakpoints) !global;
$media-expressions: map-merge($media-expressions, $tweak-media-expressions) !global;
@content;
// Restore global configuration
$breakpoints: $global-breakpoints !global;
$media-expressions: $global-media-expressions !global;
}
////
/// include-media public exposed API
/// @author Eduardo Boucas
/// @access public
////
///
/// Generates a media query based on a list of conditions
///
/// @param {Arglist} $conditions - Media query conditions
///
/// @example scss - With a single set breakpoint
/// @include media('>phone') { }
///
/// @example scss - With two set breakpoints
/// @include media('>phone', '<=tablet') { }
///
/// @example scss - With custom values
/// @include media('>=358px', '<850px') { }
///
/// @example scss - With set breakpoints with custom values
/// @include media('>desktop', '<=1350px') { }
///
/// @example scss - With a static expression
/// @include media('retina2x') { }
///
/// @example scss - Mixing everything
/// @include media('>=350px', '<tablet', 'retina3x') { }
///
@mixin media($conditions...) {
// scss-lint:disable SpaceAroundOperator
@if ($im-media-support and length($conditions) == 0) or
(not $im-media-support and im-intercepts-static-breakpoint($conditions...)) {
@content;
} @else if ($im-media-support and length($conditions) > 0) {
@media #{unquote(parse-expression(nth($conditions, 1)))} {
// Recursive call
@include media(slice($conditions, 2)...) {
@content;
}
}
}
}

135
themes/Eclectic/assets/scss/contact.scss Normal file
View File

@@ -0,0 +1,135 @@
.contact-cover {
width: 100%;
padding-bottom: 300/1440 * 100%;
img {
position: fixed;
object-fit: cover;
width: 100vw;
object-position: 50% 0%;
}
}
.contact {
background: var(--background-color);
z-index: 1;
@include container;
&>section {
display: grid;
grid-template-columns: 1fr;
@include media(">=md") {
grid-template-columns: 4fr 6fr;
}
grid-column-gap: 20px;
grid-row-gap: 20px;
}
aside {
svg {
width: 32px;
height: 32px;
vertical-align: middle;
fill: var(--background-color);
background: var(--theme-color);
border-radius: 4px;
margin: 4px 10px 4px 0;
padding: 3px;
}
ul {
padding: 0;
}
li {
list-style: none;
text-align: left;
a {
color: var(--text-color);
&:hover {
color: var(--theme-color);
}
}
}
.social {
a {
font-size: 0;
}
li {
display: inline-block;
}
svg {
border-radius: 50%;
padding: 7px;
width: 40px;
height: 40px;
}
}
}
form {
padding: 20px 0;
input, textarea {
width: 100%;
margin: 10px 0;
}
}
}
/////////////////////////////////////////
// Animations
/////////////////////////////////////////
@include media(">md") {
.contact-cover img {
animation: zoomIn 0.8s ease-in;
will-change: opacity, transform;
}
.contact {
h1 {
animation: fade-up-item-1 2.0s ease-in-out;
}
.subtitle {
animation: fade-up-item-2 2.0s ease-in-out;
}
form {
transform-origin: center left;
animation: bounceInRightNoDelay 1.1s ease-in-out;
contain: content;
}
.email {
position: absolute;
opacity: 0;
top: 0;
z-index: -1;
}
aside {
transform-origin: center right;
animation: bounceInLeftNoDelay 1.1s ease-in-out;
contain: content;
}
}
}
.contact-response {
border: 2px double var(--text-color);
background-color: $shade;
display: flex;
justify-content: center;
align-items: center;
font-size: larger;
padding: 20px;
text-align: center;
}
@media (prefers-reduced-motion) {
.contact * {
animation: none !important;
}
}

8
themes/Eclectic/assets/scss/dark.scss Normal file
View File

@@ -0,0 +1,8 @@
.dark:root {
--background-color-rgb: 35, 35, 37;
--text-color-rgb: 255, 240, 230;
--heading-color: rgb(226, 217, 211);
--shade-color: rgb(20, 20, 20);
--text-color:rgb(185, 178, 167);
--hover-color: rgb(220, 210, 200);
}

58
themes/Eclectic/assets/scss/footer.scss Normal file
View File

@@ -0,0 +1,58 @@
footer {
$footer-color: #7C7C7C;
background: #282828;
color : $footer-color;
z-index:1;
&>* {
@include container;
padding-top: 30px;
padding-bottom: 30px;
}
h2 {
color: #CCC;
}
p, li {
color: $footer-color;
&:hover, &.hover {
color: #AAA;
text-shadow: none;
}
}
#copyright {
text-align: center;
background: #1D1D1D;
}
h2 {
text-align: center;
}
ul {
padding: 0;
}
li {
list-style: none;
text-align: left;
}
input {
background: #1D1D1D;
color: #ccc;
}
.contact-us svg {
width: 32px;
height: 32px;
vertical-align: middle;
fill: var(--background-color);
background: var(--theme-color);
border-radius: 4px;
margin: 4px 10px 4px 0;
padding: 3px;
}
@for $j from 1 through 4 {
section:nth-of-type(#{$j}) {
will-change: transform, opacity;
}
.items.visible section:nth-of-type(#{$j}) {
animation: fade-up-item-#{$j} 2.0s ease-in-out;
}
}
}

746
themes/Eclectic/assets/scss/global.scss Normal file
View File

@@ -0,0 +1,746 @@
* {
box-sizing: border-box;
margin: 0;
padding: 0;
scroll-behavior: smooth;
text-align: justify;
text-decoration-skip-ink: auto;
}
html {
display: flex;
min-height: 100%;
background-image:
linear-gradient(to bottom, #1d1d1d 0%, #1d1d1d 200px, var(--background-color) 200px, var(--background-color) calc(100% - 200px), transparent calc(100% - 200px), transparent calc(100% - 2px), var(--theme-color) calc(100% - 2px)),
linear-gradient(to left, var(--theme-color) 0%, var(--theme-color) var(--header-height), transparent var(--header-height));
background-color: var(--background-color);
opacity: 1 !important;
overflow-x: hidden;
width: 100vw;
}
body {
border-bottom: 2px solid #1d1d1d;
background: var(--background-color);
font-size: 14px;
font-weight: 400;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
color: var(--text-color);
line-height: 25px;
display: flex;
flex-direction: column;
flex: 1;
width:100vw;
overflow-x:hidden;
&>article, &>section {
flex: 1;
background: var(--background-color);
}
padding-top: var(--header-height);
}
h1, h2, h3, h4, h5, h6 {
font-weight: 500;
color: $headingColor;
}
h1 {
font-size: 30px;
padding: 20px 0;
}
h2 {
line-height: 30px;
margin: 30px 0 8px;
font-size: 21px;
}
h3 {
line-height: 20px;
margin: 20px 0 8px;
font-size: 16px;
}
h4 {
line-height: 18px;
margin: 10px 0 8px;
font-size: 16px;
}
article {
padding-top: 50px;
padding-bottom: 50px;
}
ul, ol {
padding: 0 0 0 40px;
}
li {
&:hover, &.hover {
color: $hover-color;
}
}
p {
margin-bottom: 16px;
&:hover, &.hover {
color: $hover-color;
text-shadow: 0 0 2px rgba(var(--background-color-rgb), 0.5);
}
}
a {
text-decoration: none;
color: var(--theme-color);
&:hover {
filter: brightness(85%);
}
}
strong {
font-style: normal;
font-weight: 500;
}
em {
}
blockquote {
margin: 40px 0;
quotes: "“" "‘";
font-family: cursive;
font-size: 25px;
line-height: 35px;
}
blockquote:before {
font-family: _serif;
content: open-quote;
font-size: 60px;
float: left;
padding-right: 20px;
}
::selection {
background: var(--theme-color);
color: var(--background-color);
text-shadow: none;
}
input, textarea {
background: rgba(var(--text-color-rgb), 0.05) none repeat scroll 0 0;
color: var(--text-color);
font-size: 15px;
padding: 12px;
touch-action: manipulation;
box-shadow: none;
border:none;
background-image:none;
border: 1px solid rgba(var(--text-color-rgb),0.15);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
&:focus {
border-color: var(--theme-color);
outline: none;
};
}
.chroma {
td:first-child {
border-right: 1px solid $divider;
padding-left: 5px;
}
td.lntd {
&:nth-child(2) {
padding-left: 10px;
}
}
table::-webkit-scrollbar {
border: none;
}
table::-webkit-scrollbar-button {
background-color: #666;
}
table::-webkit-scrollbar-track {
background-color: #646464;
border: none;
}
table::-webkit-scrollbar-track-piece {
background-color: #272822;
border: none;
}
table::-webkit-scrollbar-thumb {
background-color: #666;
overflow: hidden;
box-shadow: none;
}
table::-webkit-scrollbar-corner {
background-color: #646464;
}
table::-webkit-resizer {
background-color: #666;
}
}
dt {
font-weight: 600;
padding: 5px;
margin: 0 0 5px;
background-color: rgba(var(--theme-color-rgb), 0.1);
}
dd {
margin-left: 80px;
}
table {
border-collapse: collapse;
width: 100%;
thead {
background-color: rgba(var(--theme-color-rgb), 0.3);
}
tr:nth-child(even) {
background-color: rgba(var(--theme-color-rgb), 0.1);
}
td, th {
padding: 4px;
}
border-bottom: 1px solid rgba(var(--theme-color-rgb), 0.3);
tr:hover {
background-color: rgba(var(--theme-color-rgb), 0.3);
}
}
.highlight {
// Needed to prevent rendering artifacts in safari.
padding-bottom: 3px;
background-color: #272822;
margin-bottom: 20px;
table {
border-collapse: unset;
width: auto;
tr:nth-child(even) {
background-color: transparent;
}
thead {
background-color: transparent;
}
tr:hover {
background-color: transparent;
}
td,
th {
padding: 0;
}
td:nth-child(2) {
width: 99%;
}
border-bottom: none;
}
}
button, .button, .button-small {
cursor: pointer;
text-align: center;
white-space: nowrap;
vertical-align: middle;
border-radius: 0px;
font-weight: 500;
color: var(--theme-color);
background: transparent;
font-size: 16px;
padding: 13px 30px;
user-select: none;
text-transform: none;
border: transparent;
display: inline-block;
position: relative;
overflow: hidden;
border: 2px solid var(--theme-color);
transition: color .1s;
z-index: 2;
&:focus {
outline: none;
}
&:checked, &:hover, &:focus {
color: #fff;
filter: none;
}
&:checked:hover {
transition: filter 0.5s ease-in;
filter: brightness(90%);
}
&:before {
content: "";
position: absolute;
z-index: -1;
background: var(--theme-color);
height: 150px;
width: calc(100% + 60px);
border-radius: 50%;
top: 100%;
left: 100%;
transition: all .5s;
}
&:checked:before,
&:hover:before,
&:focus:before {
top: -30px;
left: -30px;
}
&.disabled {
pointer-events: none;
opacity: 0.5;
}
}
.button-small {
font-size: 12px;
padding: 5px 13px;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
.title {
text-align: center;
color: var(--text-color-rgb, 0.95);
}
.subtitle {
display: block;
text-align: center;
padding-bottom: 30px;
font-style: italic;
text-shadow: 1px 1px 3px var(--background-color);
}
.center {
text-align: center;
}
.items-12,
.blog-posts {
display: grid;
grid-template-columns: 1fr;
@include media(">=md") {
grid-template-columns: 1fr 1fr;
}
@include media(">=lg") {
grid-template-columns: 1fr 1fr 1fr;
}
@include media(">=xl") {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
grid-column-gap: 20px;
grid-row-gap: 20px;
}
.items-7 {
display: grid;
grid-template-columns: 1fr;
@include media(">=md") {
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-areas: "one one two two""three three four four""five five six six"". seven seven .";
}
@include media(">=lg") {
grid-template-columns: 1fr 1fr 1fr;
grid-template-areas: "one two three""four five six"". seven .";
}
@include media(">=xl") {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-areas: "one one one one two two two two three three three three"
"four four four five five five six six six seven seven seven";
}
@include media(">=md") {
&>*:nth-child(1) {
grid-area: one;
}
&>*:nth-child(2) {
grid-area: two;
}
&>*:nth-child(3) {
grid-area: three;
}
&>*:nth-child(4) {
grid-area: four;
}
&>*:nth-child(5) {
grid-area: five;
}
&>*:nth-child(6) {
grid-area: six;
}
&>*:nth-child(7) {
grid-area: seven;
}
}
grid-column-gap: 20px;
grid-row-gap: 20px;
}
.items-5 {
display: grid;
grid-template-columns: 1fr;
grid-column-gap: 20px;
grid-row-gap: 20px;
@include media(">=md") {
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-areas: "one one two two""three three four four"". five five .";
}
@include media(">=lg") {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-areas:
"one one one two two two"
"three three four four five five";
}
grid-column-gap: 20px;
@include media(">=md") {
&>*:nth-child(1) {
grid-area: one;
}
&>*:nth-child(2) {
grid-area: two;
}
&>*:nth-child(3) {
grid-area: three;
}
&>*:nth-child(4) {
grid-area: four;
}
&>*:nth-child(5) {
grid-area: five;
}
}
}
.items-4,
.items-8 {
display: grid;
grid-template-columns: 1fr;
@include media(">=md") {
grid-template-columns: 1fr 1fr;
}
@include media(">=xl") {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
grid-column-gap: 20px;
grid-row-gap: 20px;
}
.items-6 {
@include media(">=md") {
grid-template-columns: 1fr 1fr;
}
}
.items-3,
.items-6,
.items-9 {
display: grid;
grid-template-columns: 1fr;
@include media(">=lg") {
grid-template-columns: 1fr 1fr 1fr;
}
grid-column-gap: 20px;
grid-row-gap: 20px;
}
.items-2 {
display: grid;
grid-template-columns: 1fr;
@include media(">=md") {
grid-template-columns: 1fr 1fr;
}
grid-column-gap: 20px;
grid-row-gap: 20px;
}
.items-1 {
display: block;
}
.float-3 {
width: 100%;
@include media(">=lg") {
width: 33%;
}
float: left;
margin: 15px;
}
.full {
width: 100%;
}
figure {
border: 1px solid $divider;
border-radius: 5px;
overflow: hidden;
img {
width: 100%;
height: auto;
}
}
figcaption {
padding: 0 5px;
text-align: center;
}
figcaption h4 {
margin: 0 !important;
padding: 0 !important;
text-align: center;
}
figcaption p {
text-align: center;
}
.hidden {
visibility: hidden;
}
///////////////////////////////////////
// Animations courtesy animate.css
///////////////////////////////////////
@keyframes rubberBand {
from {
transform: scale3d(1, 1, 1);
}
30% {
transform: scale3d(1.25, 0.75, 1);
}
40% {
transform: scale3d(0.75, 1.25, 1);
}
50% {
transform: scale3d(1.15, 0.85, 1);
}
65% {
transform: scale3d(0.95, 1.05, 1);
}
75% {
transform: scale3d(1.05, 0.95, 1);
}
to {
transform: scale3d(1, 1, 1);
}
}
@keyframes bounceInLeftNoDelay {
0% {
transform: translate3d(-100vw, 0, 0) scale3d(1.1, 0.8, 1);
}
50% {
transform: translate3d(0, 0, 0);
}
60% {
transform: translate3d(25px, 0, 0) scale3d(0.9, 1.2, 1);
}
75% {
transform: translate3d(-10px, 0, 0) scale3d(1.05, 0.95, 1);
}
90% {
transform: translate3d(5px, 0, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
@keyframes bounceInRightNoDelay {
0% {
transform: translate3d(100vw, 0, 0) scale3d(1.1, 0.8, 1);
}
50% {
transform: translate3d(0, 0, 0);
}
60% {
transform: translate3d(-25px, 0, 0) scale3d(0.9, 1.2, 1);
}
75% {
transform: translate3d(10px, 0, 0) scale3d(1.05, 0.95, 1);
}
90% {
transform: translate3d(-5px, 0, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
@keyframes bounceInLeft {
0%,
20% {
transform: translate3d(-100vw, 0, 0) scale3d(1.1, 0.8, 1);
}
60% {
transform: translate3d(0, 0, 0);
}
68% {
transform: translate3d(25px, 0, 0) scale3d(0.9, 1.2, 1);
}
80% {
transform: translate3d(-10px, 0, 0) scale3d(1.05, 0.95, 1);
}
92% {
transform: translate3d(5px, 0, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
@keyframes bounceInRight {
0%,
20% {
transform: translate3d(100vw, 0, 0) scale3d(1.1, 0.8, 1);
}
60% {
transform: translate3d(0, 0, 0);
}
68% {
transform: translate3d(-25px, 0, 0) scale3d(0.9, 1.2, 1);
}
80% {
transform: translate3d(10px, 0, 0) scale3d(1.05, 0.95, 1);
}
92% {
transform: translate3d(-5px, 0, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
@for $i from 1 through 10 {
$percent: 100% * ($i - 1)/10;
$next: 100% * $i/10;
$before1: $percent + 9%;
$before2: $percent + 10%;
@keyframes fade-up-item-#{$i} {
0%,
#{$percent} {
transform: translate3d(0, 200px, 0);
opacity: 0;
}
#{$before1} {
transform: translate3d(0, -10px, 0);
opacity: 0.9;
}
#{$before2} {
transform: translate3d(0, 5px, 0);
opacity: 1.0;
}
#{$next},
100% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
}
@keyframes zoomIn {
0% {
opacity: 0;
// transform: scale3d(0.8, 0.8, 1);
}
50% {
opacity: 1;
transform: scale3d(1.1, 1.1, 1);
}
100% {
opacity: 1;
transform: scale3d(1, 1, 1);
}
}

669
themes/Eclectic/assets/scss/header.scss Normal file
View File

@@ -0,0 +1,669 @@
header {
@include container;
position: fixed;
top: 0;
background: var(--background-color);
box-shadow: 0 1px 1px $divider,
0 -2px var(--theme-color);
display: flex;
align-items: center;
min-height: var(--header-height);
flex-wrap: wrap;
z-index: 10;
will-change: transform;
margin-bottom: 7px;
}
#scroll-indicator {
position: absolute;
bottom: -2px;
left: 0;
height: 2px;
background: var(--theme-color);
border-bottom-right-radius: 1px;
border-top-right-radius: 1px;
}
// Logo
.logo {
height: var(--header-height);
display: flex;
align-items: center;
svg {
fill: var(--text-color);
stroke: var(--text-color);
width: 130px;
height: 47px;
}
}
// Hamburger Icon
$hamburger-size: calc(8px + var(--header-height) / 2);
.hamburger {
display: block;
width: $hamburger-size;
height: $hamburger-size;
margin: calc(calc(var(--header-height) - #{$hamburger-size}) / 2) 0;
position: absolute;
cursor: pointer;
top: 0; // hide this
opacity: 0; // and place it over the hamburger
z-index: 2;
}
.hamburger ~ .icon {
display: block;
width: $hamburger-size;
height: $hamburger-size;
position: relative;
background: #EEE;
z-index: 1;
padding: 4px;
fill: rgba(0, 0, 0, 0.5);
border-radius: 2px;
margin: 0 15px 0 0;
svg {
width: 100%;
height: 100%;
}
}
.hamburger:checked ~ .icon {
.bar:nth-of-type(2) {
opacity: 0;
}
.bar:nth-of-type(3) {
transform: translateY(+5px) translateX(4px) rotateZ(-225deg);
transform-origin: center;
}
.bar:nth-of-type(1) {
transform: translateY(-5px) translateX(2px) rotateZ(225deg);
transform-origin: center;
}
}
@include media(">=md") {
.hamburger,
.hamburger ~ .icon {
display: none;
}
}
// Menu
@include media("<md") {
.hamburger:checked ~ .top-menu {
max-height: 100vh;
opacity: 1;
padding: 15px 0;
}
}
.top-menu {
font-weight: 400;
@include media("<md") {
// Grow to fill the entire space.
flex-grow: 1; // Allow content below to flow
display: flex;
flex-direction: column;
width: 100%;
max-height: 0;
opacity: 0;
overflow: hidden;
transition: all 0.3s ease-out;
border-top: 1px solid #eee;
}
@include media(">=md") {
display: inline-flex;
flex-wrap: wrap;
align-items: stretch;
height: var(--header-height);
}
}
.top-menu-item {
list-style: none;
display: flex;
align-items: center;
&.active>a,
&:hover>a {
color: var(--theme-color);
}
@include media(">=md") {
position: relative;
&.active::after {
content: " ";
background: var(--theme-color);
position: absolute;
width: 100%;
left: 0;
bottom: 0;
height: 5px;
}
}
a {
text-decoration: none;
color: inherit;
display: inline-block;
width: 100%;
@include media(">=lg") {
padding: 10px 20px;
}
@include media("<lg") {
padding: 5px 8px;
font-size: 12px;
}
@include media("<md") {
padding: 12px 0px;
font-size: 12px;
}
}
@include media("<md") {
flex-direction: column;
align-items: flex-start;
}
}
// Sub Menu
.sub-menu {
position: absolute;
top: var(--header-height);
max-height: 0;
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: 0 8px 16px rgba(10, 10, 10, .1);
background: var(--background-color);
min-width: 200px;
border-color: $divider;
transition: max-height, opacity 0.3s ease-out;
li {
list-style: none;
a {
padding: 10px;
}
&.active>a,
&:hover>a {
color: var(--theme-color);
}
&:not(:last-child) {
border-bottom: 1px dotted $divider;
}
}
@include media("<md") {
position: static;
max-height: 100vh;
box-shadow: none;
border-top: 1px solid $divider;
border-bottom: 1px dotted $divider;
background: transparent;
}
}
@include media(">md") {
.top-menu-item:hover .sub-menu {
max-height: 100vh;
opacity: 1;
border: 1px solid $divider;
}
}
// GitHub Corner
.github-corner {
svg {
width: var(--header-height);
height: var(--header-height);
color: var(--background-color);
fill: var(--theme-color);
position: absolute;
top: 0;
border: 0;
right: 0;
}
&:before {
content: " ";
position: absolute;
right: 0;
top: -200px;
height: 200px;
z-index: 1;
background: var(--theme-color);
width: var(--header-height);
}
.octo-arm {
transform-origin: 130px 106px;
}
position: absolute;
top: 0;
border: 0;
right: 0;
}
.github-corner:hover .octo-arm {
animation: octocat-wave 560ms ease-in-out
}
@keyframes octocat-wave {
0%,
100% {
transform: rotate(0)
}
20%,
60% {
transform: rotate(-25deg)
}
40%,
80% {
transform: rotate(10deg)
}
}
@include media("<sm") {
.github-corner:hover .octo-arm {
animation: none
}
.github-corner .octo-arm {
animation: octocat-wave 560ms ease-in-out
}
}
// Hide header on scroll on mobile
@include media("<md") {
#header {
transition: transform 0.2s ease-in;
#color-picker {
transition: opacity 0.2s ease-in;
}
}
.header-unpin {
transform: translateY(calc(-2px - var(--header-height)));
#color-picker {
opacity: 0;
}
}
.header-pin {
transform: translateY(0);
#color-picker {
opacity: 1;
}
}
}
.scroll-up {
opacity: 0;
width: 30px;
height: 30px;
position: fixed;
right: 20px;
bottom: 20px;
z-index: 2;
transition: transform 0.2s ease-in,
opacity 0.2s ease-in;
will-change: transform;
svg {
background-color: var(--theme-color);
padding: 5px;
fill:var(--background-color);
}
&:hover {
transform: scale(1.1, 1.1);
filter: none;
}
&.visible {
opacity: 1;
@include media("<md") {
&.unpin {
opacity: 0;
}
}
}
}
#searchbox {
position: relative;
margin-left: auto;
max-height: var(--header-height);
padding-top: calc(var(--header-height)/4);
height: var(--header-height);
opacity: 0;
&.visible {
opacity: 1;
}
&>svg {
position: absolute;
left: 7px;
top: calc(var(--header-height)/4 + 7px);
color: rgba(var(--text-color-rgb), 0.2);
pointer-events: none;
@include media(">=lg") {
top: calc(var(--header-height)/4 + 10px)
}
}
input{
height: calc(var(--header-height)/2);
line-height: calc(var(--header-height)/2);
font-size: calc(var(--header-height)/5);
border-radius: 50px;
padding: 7px 10px 7px 30px;
background: none;
width: 170px;
& ~ .results {
width: 130px;
}
&:focus {
width: 300px;
& ~ .results{
width: 260px;
max-height: 500px;
transition: width .2s ease-in-out,
max-height 0.5s ease-in-out;
}
& ~ svg {
color: rgba(var(--text-color-rgb), 0.6);
}
}
transition: all .2s ease-in-out;
}
.results {
max-height: 0;
overflow: hidden;
background: var(--background-color);
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
margin: -2px 20px 0;
box-shadow: 0 2px 2px #bbb;
& >div {
&.hidden {
display: none;
}
&.selected {
background: rgba(var(--theme-color-rgb), 0.1);
}
cursor: pointer;
border-bottom: 1px solid #eee;
padding: 10px;
height: 80px;
img {
float: left;
border-radius: 3px;
background: #DDD;
min-height: 50px;
margin: 5px 10px 5px 0;
}
h2 {
font-size: 12px;
line-height: 14px;
margin: 0;
white-space: nowrap;
text-overflow: ellipsis;
padding: 0;
overflow: hidden;
}
.description {
font-size: 10px;
line-height: 12px;
overflow: hidden;
text-overflow: ellipsis;
height: 30px;
text-align: left;
padding: 3px 0;
}
&>span {
font-size: 8px;
line-height: 10px;
display: flex;
align-items: center;
white-space: nowrap;
height: 14px;
overflow: hidden;
text-overflow: ellipsis;
.category {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
svg {
margin: 0 2px 0 5px;
min-width: 12px;
&:first-of-type {
margin-left: 0;
}
}
}
&::after {
content: " ";
display: block;
clear: both;
}
}
transition: width .2s ease-in-out;
}
@include media("<md") {
margin: 0;
position: absolute;
top: 0;
z-index: 3;
right: calc(50vw - var(--max-width)/2);
background: var(--background-color);
padding-top: calc(var(--header-height)/4);
height: var(--header-height);
&>svg {
top: calc(7px + var(--header-height)/4)
}
.results {
margin-left: 10px;
margin-right: 10px;
}
input:focus {
width: calc(var(--max-width));
& ~ .results {
width: calc(var(--max-width) - 20px);
}
}
}
@media(max-width: $search-follow) {
right: var(--header-height);
input:focus {
margin-left: 20px;
width: calc(100vw - 2*var(--header-height));
& ~ .results {
margin-left: 30px;
width: calc(100vw - 2*var(--header-height) - 20px);
}
}
input:focus ~ svg {
left:27px;
}
}
@include media("<sm") {
input:focus {
margin-left: 0;
& ~ .results {
margin-left: 10px;
}
}
input:focus ~ svg {
left: 7px;
}
input:not(:focus) {
width: 0px;
padding-left: 25px;
border-radius: 0;
background: var(--theme-color);
border:none;
& ~ svg {
color: var(--background-color);
}
& ~ .results {
width: 0;
}
}
}
}
.no-js #color-picker {
display: none;
}
// Color Picker
#color-picker {
position: absolute;
top: calc(var(--header-height) + 20px);
right: 10px;
z-index: 10;
.theme {
display: none
}
&:hover {
border-radius: 20px;
text-align: right;
&::before {
content: " ";
position: absolute;
left: -10px;
right: 30px;
height: 5px;
background: var(--theme-color);
top: 14px;
}
&::after {
content: " ";
width: 14px;
height: 14px;
border-radius: 50%;
left: -19px;
top: 9px;
display: block;
background: var(--theme-color);
position: absolute;
}
.theme {
display: inline-block;
height: 150px;
width: 200px;
margin-right: 20px;
background: var(--background-color);
border: 1px solid var(--theme-color);
vertical-align: top;
margin-top: 18px;
h3 {
font-weight: 500;
text-align: center;
}
.colors {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
margin: 5px;
}
.custom-color {
display: block;
text-align: center;
}
.theme-choice {
margin: 5px 3px;
width: 20px;
height: 20px;
background-color: var(--color);
border-radius: 3px;
cursor: pointer;
box-shadow: 1px 1px 1px 0 var(--text-color);
}
a {
margin: 0 5px;
}
}
.picker {
vertical-align: middle;
color: var(--background-color);
background: var(--theme-color);
transform: rotateZ(-180deg);
}
}
.picker {
height: 30px;
width: 30px;
padding: 5px;
border-radius: 50%;
color: var(--theme-color);
border: 1px solid var(--theme-color);
cursor: pointer;
background: rgba(var(--background-color-rgb), 0.8);
transition: transform 0.2s ease-in;
}
// Inpired by https://codepen.io/otiext/pen/bkEco
input[type="checkbox"] {
display: none;
}
span {
vertical-align: middle;
display: inline-block;
padding: 5px 5px 5px 30px;
}
.toggle {
position: relative;
display: inline-block;
width: 40px;
height: 20px;
vertical-align: middle;
}
.toggle label,
.toggle i {
box-sizing: border-box;
display: block;
background: #ffffff;
}
.toggle label {
width: 40px;
height: 20px;
border-radius: 32px;
border: 1px solid #e5e5e5;
transition: all 0.30s ease;
}
.toggle i {
position: absolute;
top: 1px;
left: 1px;
width: 18px;
height: 18px;
border-radius: 18px;
box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.25),
0 3px 3px 0 rgba(0, 0, 0, 0.15);
background: #ffffff;
transition: all 0.3s cubic-bezier(0.275, -0.450, 0.725, 1.450);
}
input[type="checkbox"]:active+.toggle i {
width: 20px;
}
input[type="checkbox"]:active+.toggle label,
input[type="checkbox"]:checked+.toggle label {
border: 10px solid #666;
i {
background: #222;
}
}
input[type="checkbox"]:checked+.toggle i {
left: 21px;
}
input[type="checkbox"]:checked:active+.toggle label {
border: 10px solid #e5e5e5;
}
input[type="checkbox"]:checked:active+.toggle i {
left: 14px;
}
}

322
themes/Eclectic/assets/scss/list.scss Normal file
View File

@@ -0,0 +1,322 @@
/**
* Specific types for page type list.
**/
.list,
.terms,
.page404 {
z-index: 1;
margin: calc(var(--header-height)/2);
@include container-margin;
padding: calc(2*var(--content-padding));
background: rgba(var(--background-color-rgb), 0.9);
border-radius: 5px;
// box-shadow: 0 0 2px #aaa;
&:hover {
background: var(--background-color);
}
flex: 1; // Stretch to fill space if needed.
}
.list {
background: transparent;
&:hover {
background: transparent;
}
.content {
background: var(--background-color);
padding: 5px;
background: var(--background-color);
padding: 5px 5px 0 5px;
}
}
.terms {
background: rgba(var(--background-color-rgb), 0.9);
&:hover {
background: var(--background-color);
}
h4 {
display: inline-block;
}
ol {
list-style: none;
padding:0;
}
ol > li ul{
border: 1px solid var(--theme-color);
border-top: 0;
border-bottom: 0;
}
label {
padding: 5px 5px 5px 15px;
font-weight: bold;
cursor: pointer;
color: var(--background-color);
h4 a {
color: var(--background-color);
}
background: var(--theme-color);
&::after {
float: right;
content: "\276F";
width: 1em;
height: 1em;
text-align: center;
transition: all .35s;
transform-origin: 50% 100%;
right: 5px;
}
display: block;
}
li:first-child label {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
li:last-child label {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
input {
display: none;
&~ ul {
max-height: 0;
overflow: hidden;
transition: max-height 0.35s cubic-bezier(0, 1.05, 0, 1);
}
}
input:checked {
+label {
&::after {
transform: rotate(90deg);
}
}
~ ul {
max-height: 100vh;
}
}
li:last-child input:checked {
+label {
border-radius: 0;
}
~ul {
border-bottom: 1px solid var(--theme-color);
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
}
}
// Used in list and meta views.
.blog-posts {
width: 100%;
align-content: center;
padding: 0;
}
.blog-post {
contain: content;
list-style: none;
text-align: left;
padding: 15px;
@include zoomable-image(".banner-holder", (270/360) * 100%);
background: var(--background-color);
box-shadow: 0 1px 1px $divider;
display: flex;
flex-direction: column;
&:hover, &.hover {
box-shadow: 0 0 40px $divider;
}
hr {
border: none;
border-bottom: 1px dashed $divider;
}
h3:hover {
color: var(--theme-color);
}
p {
flex: 1;
}
.blog-post-footer {
display: flex;
a {
font-size: 12px;
padding-right: 15px;
color: var(--text-color);
&:hover {
color: var(--theme-color);
}
}
.categories {
svg {
fill: var(--theme-color);
vertical-align: middle;
}
text-align: right;
flex: 1;
}
}
}
.pagination {
list-style: none;
display: flex;
align-content: center;
justify-content: center;
padding: 40px 0 0;
flex-wrap: wrap;
.page-item {
display: flex;
align-items: center;
justify-content: center;
}
@include media("<sm") {
.page-item:last-child, .page-item:first-child {
display: none;
}
}
.page-link {
text-decoration: none;
background-color: var(--background-color);
box-shadow: 0 1px 1px $divider;
display: block;
&:hover {
filter: none;
box-shadow: 0 0 40px $divider;
background: var(--theme-color);
color: var(--text-color);
}
padding: 10px;
margin: 10px;
}
.active .page-link {
background: var(--theme-color);
color: var(--background-color);
pointer-events: none;
}
.disabled .page-link {
background: $divider;
color: var(--text-color);
pointer-events: none;
}
}
.list {
@for $j from 1 through 10 {
.blog-post:nth-of-type(#{$j}) {
will-change: transform, opacity;
animation: fade-up-item-#{$j} 2.0s ease-in-out;
}
}
}
.page404 {
.number {
font-family: cursive, serif;
font-size: 200px;
text-align: center;
line-height: normal;
}
$drop-distance: 300px;
$error-animation-step: .5s;
.error-banner {
display: flex;
justify-content: center;
svg {
position: relative;
overflow: visible;
z-index: 2;
transform: translate3d(0, 0, 0);
margin: 3em;
}
}
@for $i from 1 through 12 {
[id$=cube-#{$i}],
[id$=cube-#{$i + 12}],
[id$=cube-#{$i + 24}] {
animation: drop-cube-#{$i} .9s cubic-bezier(0.190, 1.000, 0.320, 1.000);
path {
animation: fade-cube-#{$i} .9s cubic-bezier(0.190, 1.000, 0.320, 1.000);
}
}
}
svg:hover {
@for $i from 1 through 12 {
[id$=cube-#{$i}] path,
[id$=cube-#{$i + 12}] path,
[id$=cube-#{$i + 24}] path {
animation: fade-out-cube-#{$i} .7s cubic-bezier(0.190, 1.000, 0.320, 1.000) infinite;
}
}
}
@for $i from 1 through 12 {
@keyframes drop-cube-#{$i} {
0%,
#{7 * $i}% {
transform: translateY($drop-distance);
}
100% {
transform: translateY(0);
}
}
@keyframes fade-cube-#{$i} {
0%,
#{7 * $i}% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fade-out-cube-#{$i} {
$start: 3 * $i;
$mid: 100 - $start;
0%,
#{$start}% {
opacity: 1;
}
#{$mid}% {
opacity: 0;
}
100% {
opacity: 1;
}
}
}
}

27
themes/Eclectic/assets/scss/main.scss Normal file
View File

@@ -0,0 +1,27 @@
/*
Hello
{{- $color := (int (print "0x" ($.Site.Params.color | default "#f92b3f" | strings.TrimLeft "#"))) -}}
{{- $b := mod $color 256 -}}
{{- $color = sub $color $b -}}
{{- $color = div $color 256 -}}
{{- $g := mod $color 256 -}}
{{- $color = sub $color $g -}}
{{- $r := div $color 256 -}}
{{- $cover := partial "util/backgroundImage.html" . -}}
{{- $coverDark := partial "util/backgroundImageDark.html" . -}}
*/
$cover: "{{$cover.RelPermalink}}";
$coverDark: "{{$coverDark.RelPermalink}}";
:root {
--theme-color-rgb: {{$r}}, {{$g}}, {{$b}};
}
@import "variables.scss";
@import "dark.scss";
@import "global.scss";
@import "header.scss";
@import "list.scss";
@import "post.scss";
@import "contact.scss";
@import "meta.scss";
@import "footer.scss";

950
themes/Eclectic/assets/scss/meta.scss Normal file
View File

@@ -0,0 +1,950 @@
@import "variables.scss";
///////////////////////////////////////////////////////
// Shared
//////////////////////////////////////////////////////
.meta:nth-child(2n) {
background: $shade;
}
.meta {
& > :last-child {
margin-bottom: 40px;
}
& > :first-child, & > h1 {
margin-top: 40px;
}
@include container;
contain: content;
h1, h2, h3, h4 {
text-align: center;
transition: transform 0.2s ease-in;
transform-origin: 50% 50%;
&:hover {
text-shadow: 1px 1px 2px var(--text-color);
}
}
h2:hover {
transform: none;
}
.subtitle {
text-align: center;
}
.content:hover, .content.hover {
color: $hover-color;
}
.main-icon {
float: right;
margin: 60px 0 40px;
z-index: 1;
}
.item {
display: flex;
flex-direction: column;
padding: 10px 0 0;
.item-cover {
align-self: center;
border-radius: 5px;
background-color: var(--theme-color);
transition: border-radius 0.5s ease-in-out;
border: 2px solid transparent;
box-sizing: content-box; // Using this to maintain image aspect ratios set in code.
&:hover, &.hover {
border-radius: 50%;
}
}
h2 {
padding: 8px 0;
margin: 0;
color: var(--text-color);
}
h3 {
margin: 0;
padding: 5px 0;
color: var(--text-color);
}
h4 {
margin: 0;
padding: 3px 0;
color: var(--text-color);
}
.item-icon {
align-self: center;
min-height: 65px;
margin: 5px 0;
}
.links {
align-self: flex-end;
flex: 1;
display: flex;
align-items: flex-end;
justify-content: flex-end;
flex-wrap: wrap;
margin: 5px;
align-content: flex-end;
a {
display: flex;
align-items: center;
min-height: 45px;
margin: 5px 0;
svg, .link-text {
margin: 0 5px;
transition: none;
}
}
a:not(:first-child) {
margin-left: 10px;
}
}
}
}
.main-icon:hover, .item-icon:hover, .item-icon.hover, .main-icon.hover {
animation: rubberBand 0.5s ease-in-out;
}
///////////////////////////////////////
// Default type
///////////////////////////////////////
.meta.default {
.item-cover {
width: 100%;
height: auto;
}
.items {
grid-row-gap: 40px;
}
&> img {
display: block;
margin: 0 auto;
max-width: 100%;
height: auto;
}
}
//////////////////////////////////////////////////////
// Intro and about me area with image on the left.
//////////////////////////////////////////////////////
.left-image {
display: grid;
grid-template-columns: 1fr 4fr;
grid-column-gap: 20px;
grid-row-gap: 10px;
grid-template-areas:
"pic title"
"pic subtitle"
"pic desc";
img {
margin: 40px 0;
grid-area: pic;
border: 1px solid $divider;
background: $divider;
// OR filter: drop-shadow(0 -5px 10px rgba(0, 0, 0, 0.3));
width: 100%;
height: auto;
border-radius: 50%;
&:hover {
box-shadow: 0 0 10px $divider;
}
}
p {
grid-area: desc;
}
h1 {
margin: 40px 0 0;
grid-area: title;
}
.subtitle {
grid-area: subtitle;
}
@include media("<=xl") {
grid-template-columns: 1.5fr 3fr;
}
@include media(">lg") {
h1, .subtitle {
padding: 0;
margin: 0;
}
h1 {
margin-top: 40px;
}
}
@include media("<=lg") {
display: block;
* {
margin: 20px 0;
}
img {
margin: 0 20px 0 0;
width: 33%;
max-width: 200px;
float:left;
}
}
}
//////////////////////////////////////////
// Area with content icon on the left
//////////////////////////////////////////
.item-icon-left {
.item {
display: grid;
grid-template-columns: 40px 1fr;
grid-column-gap: 20px;
grid-template-areas: "icon title"
"icon subtitle"
"icon heading"
"icon desc"
"icon links";
.item-icon {
grid-area: icon;
align-self: flex-start;
min-height: 40px;
}
h2 {
grid-area: title;
}
h3 {
grid-area: subtitle;
}
h4 {
grid-area: heading;
}
.content {
grid-area: desc;
}
.links {
grid-area: links;
}
}
}
///////////////////////////////////////
// Full page Content Section
///////////////////////////////////////
.dark .meta.content.with-background {
background-image: url($coverDark);
}
.meta.content {
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
height: auto;
&.with-background {
background-image: url($cover);
}
&:not(:first-of-type) {
flex: 0;
}
.tags {
float: right;
display: inline-block;
svg {
vertical-align: middle;
}
}
.banner {
width: 100%;
}
h1,
h2,
h3,
h4 {
text-align: left;
}
h1:first-of-type {
text-align: center;
}
&>article {
@include container-margin;
padding: calc(2*var(--content-padding));
background: rgba(var(--background-color-rgb), 0.9);
border-radius: 5px;
box-shadow: 0 0 2px #ddd;
&:hover {
background: var(--background-color);
}
}
@include media(">md") {
&>article {
* {
animation: fade-up-item-3 $load-up-duration ease-in-out;
}
h1 {
animation: fade-up-item-1 $load-up-duration ease-in-out;
}
.subtitle {
animation: fade-up-item-2 $load-up-duration ease-in-out;
}
}
}
@media (prefers-reduced-motion) {
&>article * {
animation: none !important;
}
}
}
//////////////////////////////////////////
// Full Width for bigger content
//////////////////////////////////////////
.meta.full-width {
padding: 0;
.items {
display: block;
.item {
padding: 40px 0;
@include container;
display: block;
.item-cover {
float: left;
margin: 0 40px 40px 0;
position: relative;
z-index: 2;
}
video.item-cover {
background: black;
border-color: var(--theme-color);
}
&:nth-child(2n) {
background: $shade;
.item-cover {
float: right;
margin: 0 0 40px 40px;
}
.links {
align-self: flex-start;
align-items: flex-start;
justify-content: flex-start;
}
}
&:after {
content: " ";
clear:both;
display: block;
}
.content {
padding: 20px 0;
}
small {
display: inline-block;
}
}
}
&:nth-child(2n) {
.item:nth-child(2n) {
background: var(--background-color);
}
}
@include media("<md") {
.items .item {
display: grid;
grid-template-columns: 1fr;
grid-template-areas: "title"
"subtitle"
"image"
"content"
"links"
"attribution";
h2 {
grid-area: title;
}
h3 {
grid-area: subtitle;
}
&:nth-child(2n) .item-cover {
margin: 0;
}
.links {
grid-area: links;
&:nth-child(2n) {
align-self: flex-end;
align-items: flex-end;
justify-content: flex-end;
}
}
.attribution {
grid-area: attribution;
}
.item-cover {
grid-area: image;
align-self: center;
justify-self: center;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
}
.content {
grid-area: content;
}
}
}
}
//////////////////////////////////////////
// Max-2 for only two items in a row
//////////////////////////////////////////
.meta.max-2 {
.items {
grid-template-areas: none;
grid-template-columns: 1fr 1fr;
@include media("<md") {
grid-template-columns: 1fr;
}
}
}
///////////////////////////////////////////
// A carousel for testimonials
///////////////////////////////////////////
.meta.carousel {
@include container-margin;
padding-left: 0;
padding-right: 0;
overflow: hidden;
margin-bottom: 20px;
.items {
display: flex;
grid-column-gap: 0;
grid-row-gap: 0;
}
&:nth-child(2n) {
box-shadow: 400px 0 0 20px $shade,
-400px 0 0 20px $shade;
}
.item {
background-color: var(--background-color);
transform: translate3d(0, 0, 0);
min-width: calc(var(--max-width)/2 - 40px);
margin: 0 20px;
padding: 20px;
// border: 1px solid $divider;
box-shadow: 0 0 4px $divider;
border-radius: 4px;
display: grid;
grid-template-areas: "icon" "content" "heading";
justify-content: center;
&:hover, &.hover {
box-shadow: 0 0 20px $divider;
h2 {
filter: none;
}
}
h2 {
grid-area: heading;
font-size: 14px;
}
.item-icon {
grid-area: icon;
justify-self: center;
}
.content {
grid-area: "content";
}
}
.item-icon {
min-height: 60px;
min-width: 60px;
padding: 2px;
filter: drop-shadow(2px 3px 4px #AAA);
border-radius: 50%;
}
h2 {
&::before {
content: "“";
font-family: _serif;
font-size: 40px;
padding-right: 10px;
line-height: 15px;
vertical-align: text-bottom;
}
small {
font-size: 60%;
}
color: var(--theme-color);
filter: brightness(60%);
text-align: right;
&:hover {
transform: none
}
&::selected {
filter: none;
}
}
// Pause auto-scroll for carousal
.items {
&:hover {
animation-play-state: paused;
.item:first-child {
animation-play-state: paused;
}
.item:nth-child(2) {
animation-play-state: paused;
}
}
}
// Carousel Animation
$interval: 4s;
@for $i from $min-carousal through $max-carousal {
.items-#{$i} {
@keyframes scroll-#{$i} {
$delta: 100%/$i;
$shift: 0.25 * $delta;
$max: $i - 1;
@for $j from 0 through $max {
$percent: $j*$delta;
$movement: $j*-0.5;
$shifted: $percent + $delta - $shift;
#{$percent}, #{$shifted} {
transform: translateX(calc(var(--max-width) * #{$movement}));
}
}
99.99% {
$final: -0.5 * $i;
transform: translateX(calc(var(--max-width)*#{$final}))
}
}
@keyframes scroll-#{$i}-end {
$delta: 100%/$i;
$shift: 0.25 * $delta;
$loc1: 100% -$delta - $shift;
$loc0: $loc1 - 0.01;
$final: 0.5 * $i;
#{$loc0}, 100% {
transform: none;
}
#{$loc1}, 99.99% {
transform: translateX(calc(var(--max-width)*#{$final}))
}
}
@keyframes scroll-#{$i}-end-2 {
$delta: 100%/$i;
$shift: 0.25 * $delta;
$loc1: 100% - $shift;
$loc0: $loc1 - 0.01;
$final: 0.5 * $i;
#{$loc0}, 100% {
transform: none;
}
#{$loc1}, 99.99% {
transform: translateX(calc(var(--max-width)*#{$final}))
}
}
.item:first-child {
animation: scroll-#{$i}-end $i * $interval linear infinite;
}
.item:nth-child(2) {
animation: scroll-#{$i}-end-2 $i * $interval linear infinite;
}
animation: scroll-#{$i} $i * $interval linear infinite;
}
}
@include media("<md") {
.item {
min-width: calc(var(--max-width) - 40px);
}
@for $i from $min-carousal through $max-carousal {
@keyframes scroll-md-#{$i} {
$delta: 100%/$i;
$shift: 0.25 * $delta;
$max: $i - 1;
@for $j from 0 through $max {
$percent: $j*$delta;
$movement: $j*-1;
$shifted: $percent + $delta - $shift;
#{$percent},
#{$shifted} {
transform: translateX(calc(var(--max-width) * #{$movement}));
}
}
99.99% {
$final: -1 * $i;
transform: translateX(calc(var(--max-width)*#{$final}))
}
}
@keyframes scroll-md-#{$i}-end {
$delta: 100%/$i;
$shift: 0.25 * $delta;
$loc1: 100% -$delta - $shift;
$loc0: $loc1 - 0.01;
#{$loc0},
100% {
transform: none;
}
#{$loc1},
99.99% {
transform: translateX(calc(var(--max-width)*#{$i}))
}
}
.items-#{$i} {
animation: scroll-md-#{$i} $i * $interval infinite;
.item:first-child {
animation: scroll-md-#{$i}-end $i * $interval infinite;
}
.item:nth-child(2) {
animation: none;
}
}
}
}
// End carousel animation
}
///////////////////////////////////////
// Filter type
///////////////////////////////////////
.meta.filter {
text-align: center;
.item-cover {
width: 100%;
height: auto;
}
.filter {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: auto;
height: auto;
&:after {
content: attr(value);
padding: 5px 12px;
display: block;
}
text-align: center;
margin: 5px;
font-size: 14px;
padding: 0;
border-radius: 2px;
}
.items {
display: flex;
flex-wrap: wrap;
}
@for $i from 0 through 10 {
.filter-#{$i}:checked~.items>.filter-#{$i} {
width: calc(var(--max-width)/3 - 50px);
margin: 10px;
height: auto;
transform: none;
transition: transform 0.50s ease-out 0.45s,
width 0.50s ease-out;
}
}
@include media("<lg") {
@for $i from 0 through 10 {
.filter-#{$i}:checked~.items>.filter-#{$i} {
width: calc(var(--max-width) - 50px);
height: auto;
margin: 10px;
transform: none;
transition: transform 0.50s ease-out 0.45s,
width 0.50s ease-out;
}
}
}
.item {
width: 0;
margin: 0;
height: 0;
transform: scale(0);
transform-origin: 20% 40%;
transition: transform 0.5s ease-in,
width 0.50s ease-out 0.45s,
margin 0.50s ease-out 0.45s,
height 0s ease-out 0.45s;
}
}
///////////////////////////////////////
// Centered like Contact US/Quote
///////////////////////////////////////
.meta.centered {
min-height: 80vh;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
position: relative;
display: flex;
align-items: center;
justify-content: center;
.items {
background: inherit;
}
.item {
position: relative;
background: inherit;
overflow: hidden;
padding: 20px;
border-radius: 5px;
&:before {
content: " ";
position: absolute;
top: -25px;
left: -25px;
bottom: -25px;
right: -25px;
background: inherit;
box-shadow: inset 0 0 0 200px rgba(var(--background-color-rgb), .4);
filter: blur(10px);
}
* {
z-index: 5;
text-align: center;
}
}
&>.attribution {
position: absolute;
bottom: -30px;
right: 5px;
padding: 5px;
background: rgba(var(--background-color-rgb), 0.4);
border-radius: 2px;
color: var(--text-color);
}
@media (hover: none) {
background-attachment: scroll;
.items {
background: rgba(var(--background-color-rgb), 0.4);
}
.item {
&:before {
content: none;
}
background: transparent;
}
}
}
///////////////////////////////////////
// Blog section
///////////////////////////////////////
.meta.blog {
&>ul {
padding: 0;
}
h3:hover {
transform: none
}
.item {
padding: 15px;
}
}
/////////////////////////////////////////
// Alternate image styles
/////////////////////////////////////////
.meta.gray-image {
.item-cover {
filter: contrast(1);
transition: filter 0.2s ease-in;
&:hover, &.hover {
border-radius: 5px;
filter: contrast(1.3) brightness(1.1);
}
}
}
.meta.keep-width {
.item-cover {
max-width: 100%;
height: auto;
}
}
/////////////////////////////////////////
// Animations
/////////////////////////////////////////
@include media(">md") {
$duration: 0.8s;
.left-image {
&>* {
transform: translate3d(0, 0, 0);
will-change: transform;
}
&> img {
transform: translate3d(0, 0, 0);
will-change: transform;
}
&.visible, &:nth-of-type(1), &:nth-of-type(2) {
&>* {
transform-origin: center left;
animation: bounceInRightNoDelay 1.1s ease-in-out;
}
&>img {
transform-origin: center right;
animation: bounceInLeftNoDelay 1.1s ease-in-out;
}
}
}
.meta.default,
.full-width,
.max-2,
.blog,
.filter,
.item-icon-left {
&.visible,
&:nth-of-type(1),
&:nth-of-type(2) {
h1,
.main-icon {
animation: fade-up-item-1 $load-up-duration ease-in-out;
}
.subtitle {
animation: fade-up-item-2 $load-up-duration ease-in-out;
}
}
h1,
.main-icon,
.subtitle {
transform: translate3d(0, 0, 0);
will-change: opacity, transform;
}
}
.full-width {
.item >* {
transform: translate3d(0, 0, 0);
will-change: opacity, transform;
backface-visibility: hidden;
}
&:nth-of-type(1) .item:nth-child(2n),
&:nth-of-type(2) .item:nth-child(2n),
.item.visible:nth-child(2n) {
&>* {
transform-origin: center right;
animation: bounceInLeft $duration ease-in-out;
perspective: 1000;
}
img {
transform-origin: center left;
animation: bounceInRight $duration ease-in-out;
perspective: 1000;
}
}
&:nth-of-type(1) .item:nth-child(2n - 1),
&:nth-of-type(2) .item:nth-child(2n - 1),
.item.visible:nth-child(2n - 1) {
&>* {
transform-origin: center left;
animation: bounceInRight $duration ease-in-out;
}
img {
transform-origin: center right;
animation: bounceInLeft $duration ease-in-out;
}
}
}
.max-2 {
.item {
transform-origin: top center;
will-change: opacity, transform;
}
&:nth-of-type(1) .item,
&:nth-of-type(2) .item,
.item.visible {
&:nth-child(2n) {
animation: fade-up-item-2 $load-up-duration ease-in-out;
}
&:nth-child(2n - 1) {
animation: fade-up-item-1 $load-up-duration ease-in-out;
}
}
}
.filter,
.blog,
.meta.default,
.item-icon-left {
@for $j from 2 through 4 {
.items-#{$j} {
@for $i from 1 through $j {
.item:nth-child(#{$i}) {
transform-origin: top center;
will-change: opacity, transform;
&.visible {
animation: fade-up-item-#{$i} $load-up-duration ease-in-out;
}
}
}
}
&:nth-of-type(1),
&:nth-of-type(2) {
.items-#{$j} {
@for $i from 1 through $j {
animation: fade-up-item-#{$i} $load-up-duration ease-in-out;
}
}
}
}
@each $k in (6, 9) {
.items-#{$k} .item {
transform-origin: top center;
will-change: opacity, transform;
}
&:nth-of-type(1) .items-#{$k} .item:nth-child(3n+1),
&:nth-of-type(2) .items-#{$k} .item:nth-child(3n+1),
.items-#{$k} .item:nth-child(3n+1).visible {
animation: fade-up-item-1 $load-up-duration ease-in-out;
}
&:nth-of-type(1) .items-#{$k} .item:nth-child(3n+2),
&:nth-of-type(2) .items-#{$k} .item:nth-child(3n+2),
.items-#{$k} .item:nth-child(3n+2).visible {
animation: fade-up-item-2 $load-up-duration ease-in-out;
}
&:nth-of-type(1) .items-#{$k} .item:nth-child(3n+3),
&:nth-of-type(2) .items-#{$k} .item:nth-child(3n+3),
.items-#{$k} .item:nth-child(3n).visible {
animation: fade-up-item-3 $load-up-duration ease-in-out;
}
}
}
}
@media (prefers-reduced-motion) {
.meta, .meta * {
animation: none !important;
}
}

439
themes/Eclectic/assets/scss/post.scss Normal file
View File

@@ -0,0 +1,439 @@
@import "triangle.scss";
.post {
z-index: 1;
margin: calc(var(--header-height)/2);
@include container-margin;
padding: calc(2*var(--content-padding));
background: rgba(var(--background-color-rgb), 0.9);
border-radius: 5px;
.yt {
border-radius: 5px;
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border:0;
}
}
.i-tex {
transform: scale(0.8);
}
.tex, .i-tex {
color: var(--text-color);
&:hover, &.hover {
color: black;
}
}
&:hover {
background: var(--background-color);
}
@include media('>=lg') {
display: grid;
// Fix for the pre tag stretching the width: https://stackoverflow.com/questions/45468633/pre-tag-causing-page-to-scroll-horizontally-in-css-grid
grid-template-columns: 2fr 1fr 1fr;
grid-template-areas:
"main main aside"
"buttons buttons aside"
"more more aside"
"comments comments aside";
main {
grid-area: main;
// Needed for firefox
// https://stackoverflow.com/questions/43311943/
min-width: 0;
contain: content;
}
aside {
grid-area: aside;
contain: content;
}
.buttons {
grid-area: buttons;
}
.more {
grid-area: more;
}
.comments {
grid-area: comments;
}
}
main {
&>p {
font-size: 16px;
line-height: 30px;
&:first-of-type:first-letter {
color: var(--theme-color); //#992E00;
margin-top: 7px;
margin-right: 5px;
float: left;
font-size: 80px;
line-height: 80px;
font-family: NouveauDropCaps, serif;
font-display: optional;
}
}
&>ul>li,
&>ol>li {
font-size: 16px;
line-height: 30px;
}
h1:first-of-type {
padding-left: 0;
}
}
.post-anchor {
position: relative;
margin: 0 0 40px;
border-radius: 5px;
width: 100%;
padding-bottom: 400/800 * 100%;
@include zoomable-image(".banner-holder", 0);
.banner-holder {
height: 100%;
position: absolute;
}
}
aside {
@include media(">=lg") {
padding: 0 calc(2*var(--content-padding));
}
line-height: 30px;
* {
text-align: left;
}
svg {
fill: var(--theme-color);
}
svg:hover, svg.hover {
animation: rubberBand 0.5s linear;
}
th {
padding: 0 12px 0 0;
svg {
vertical-align: middle;
margin: 0 5px 0 0;
}
white-space: nowrap;
@include media("<xl", ">=lg") {
font-size: 0;
}
@include media("<md", ">=sm") {
font-size: 0;
}
}
.tags, .category {
span {
font-weight: 700;
@include media("<xl", ">=lg") {
display: none;
}
@include media("<md", ">=sm") {
display: none;
}
}
svg {
vertical-align: middle;
margin: 0 5px 0 0;
}
}
h2 {
// Taken padding from section as a hack for column wrapping.
padding-top: 20px;
margin: 0 0 8px;
}
section {
padding: 0 0 20px;
border-bottom: 1px dashed #ddd;
.info {
font-size: 10px;
float: right;
}
}
@include media('<lg', '>=sm') {
columns: 2;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
section {
border-bottom: none;
}
}
@include media('<sm') {
border-top: 1px dashed #ddd;
}
.tag-cloud {
line-height: 2.0rem;
}
.tag-cloud>a {
white-space: nowrap;
color: var(--text-color);
padding: 2px;
border-radius: 2px;
&:hover {
color: var(--theme-color);
text-decoration: underline;
}
}
}
.buttons {
margin: 20px 0;
}
.next {
float: right;
}
.comments {
ul {
padding: 0;
}
li {
list-style: none;
}
form {
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 20px;
grid-row-gap: 20px;
@include media(">=sm") {
grid-template-areas:
"input1 input2"
"comment comment"
"button .";
}
@include media("<sm") {
grid-template-areas: "input1 input1" "input2 input2" "comment comment" "button button";
}
}
input:not(:placeholder-shown):not(:focus):invalid {
border-color: red;
}
input:first-child {
grid-area: input1;
}
input:nth-child(2) {
grid-area: input2;
}
textarea {
grid-area: comment;
}
button {
grid-area: button;
justify-self: flex-start;
}
}
}
@font-face {
font-family: "NouveauDropCaps";
src: url(/fonts/NouveauDropCaps.woff2) format("woff2");
unicode-range: U+41-5A;
}
.comment {
min-height: 120px;
img {
margin: 5px 20px 0 0;
width: 100px;
height: 100px;
border-radius: 50%;
border: 1px solid $divider;
float: left;
}
svg {
fill: var(--text-color);
vertical-align: middle;
width: 20px;
height: 20px;
}
time {
font-size: 12px;
}
}
.commenter-comment {
background: rgba(var(--theme-color-rgb), 0.1);
margin-left: 120px;
min-height: 80px;
padding: 10px 20px;
border-radius: 5px;
}
.commenter-name {
font-weight: 400;
padding: 0 20px 0 0;
}
.background {
// object-fit: cover;
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-image: url($cover);
background-size: cover;
}
.dark .background {
background-image: url($coverDark);
}
.more {
ul {
padding: 0;
}
ul.items-3 {
@include media(">=md") {
grid-template-columns: 1fr 1fr 1fr;
}
}
li {
@include zoomable-image(".img-container", (3/4) * 100%);
border-radius: 4px;
overflow: hidden;
list-style: none;
display: flex;
flex-direction: column;
box-shadow: 0 1px 1px $divider;
&>.description {
font-weight: 400;
padding: 10px 10px;
display: flex;
flex: 1;
flex-direction: column;
border-top: 2px solid transparent;
justify-content: space-between;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
&:hover, &.hover {
.description {
border-top-color: var(--theme-color);
}
box-shadow: 0 1px 10px $divider;
}
}
svg {
vertical-align: middle;
fill: var(--text-color);
}
small {
color: var(--text-color);
}
}
/////////////////////////////////////////
// Animations
/////////////////////////////////////////
@include media(">md") {
aside {
transform-origin: top left;
animation: bounceInRightNoDelay 1.1s ease-in-out;
}
main {
transform-origin: top right;
animation: bounceInLeftNoDelay 1.1s ease-in-out;
}
.more, .comments {
ul li {
transform-origin: top center;
will-change: opacity, transform;
}
}
.comments, .more {
&.visible{
h2 {
animation: fade-up-item-1 $load-up-duration ease-in-out;
}
ul {
@for $i from 1 through 10 {
li:nth-child(#{$i}) {
$j: $i + 1;
animation: fade-up-item-#{$j} $load-up-duration ease-in-out;
}
}
}
&> h3 {
animation: fade-up-item-1 $load-up-duration ease-in-out;
}
&>p {
animation: fade-up-item-2 $load-up-duration ease-in-out;
}
}
}
.comments form.visible {
input {
animation: fade-up-item-3 $load-up-duration ease-in-out;
}
textarea {
animation: fade-up-item-4 $load-up-duration ease-in-out;
}
button {
animation: fade-up-item-5 $load-up-duration ease-in-out;
}
}
}
.honeypot {
position: absolute;
left: -5000px;
}
.newsletter {
min-width: 220px;
width: 100%;
.email {
width: calc(100% - 50px);
display: inline-block;
}
button {
display: inline-block;
width: 50px;
padding: 0;
text-align: center;
background: var(--theme-color);
color: var(--background-color);
&:hover {
filter: brightness(95%);
}
}
button, .email {
height: 42px;
vertical-align: middle;
}
}
.post main {
h1, h2, h3, h4, h5, h6 {
position: relative;
padding-left: 30px;
}
}
.heading-anchor {
display: inline-block;
color: #DDD;
position: absolute;
margin-top: calc(-1 * var(--header-height));
padding-top: var(--header-height);
left: 0;
}
@media (prefers-reduced-motion) {
.post * {
animation: none !important;
}
}

77
themes/Eclectic/assets/scss/triangle.scss Normal file
View File

@@ -0,0 +1,77 @@
// https://codepen.io/P233/pen/AtzIw
// This following mixin is modified from the original Bourbon triangle add-on (https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/addons/_triangle.scss) in order to customise triangle shape and foreground / background colours, which can also create CSS ribbon incredibly easy.
// @include triangle($width $height, $foreground-color $background-color, $direction)
// $height and $background-color can be omitted, if so, $height will equal to $width and $background-color will be transparent.
// $direction contains the following arguments: up, down, left, right, up-right, up-left, down-right, down-left, inset-up, inset-down, inset-left, inset-right.
@mixin triangle ($size, $color, $direction) {
height: 0;
width: 0;
$width: nth($size, 1);
$height: nth($size, length($size));
$foreground-color: nth($color, 1);
$background-color: transparent !default;
@if (length($color)==2) {
$background-color: nth($color, 2);
}
@if ($direction==up) or ($direction==down) or ($direction==right) or ($direction==left) {
$width: $width / 2;
@if $direction==up {
border-left: $width solid $background-color;
border-right: $width solid $background-color;
border-bottom: $height solid $foreground-color;
}
@else if $direction==right {
border-top: $width solid $background-color;
border-bottom: $width solid $background-color;
border-left: $height solid $foreground-color;
}
@else if $direction==down {
border-left: $width solid $background-color;
border-right: $width solid $background-color;
border-top: $height solid $foreground-color;
}
@else if $direction==left {
border-top: $width solid $background-color;
border-bottom: $width solid $background-color;
border-right: $height solid $foreground-color;
}
}
@else if ($direction==up-right) or ($direction==up-left) {
border-top: $height solid $foreground-color;
@if $direction==up-right {
border-left: $width solid $background-color;
}
@else if $direction==up-left {
border-right: $width solid $background-color;
}
}
@else if ($direction==down-right) or ($direction==down-left) {
border-bottom: $height solid $foreground-color;
@if $direction==down-right {
border-left: $width solid $background-color;
}
@else if $direction==down-left {
border-right: $width solid $background-color;
}
}
@else if ($direction==inset-up) {
border-width: $height $width;
border-style: solid;
border-color: $background-color $background-color $foreground-color;
}
@else if ($direction==inset-down) {
border-width: $height $width;
border-style: solid;
border-color: $foreground-color $background-color $background-color;
}
@else if ($direction==inset-right) {
border-width: $width $height;
border-style: solid;
border-color: $background-color $background-color $background-color $foreground-color;
}
@else if ($direction==inset-left) {
border-width: $width $height;
border-style: solid;
border-color: $background-color $foreground-color $background-color $background-color;
}
}

94
themes/Eclectic/assets/scss/variables.scss Normal file
View File

@@ -0,0 +1,94 @@
@import "_include-media.scss";
$md: 768px;
$sm: 576px;
$search-follow: 660px;
$breakpoints: (xs: 320px, sm: $sm, md: $md, lg: 992px, xl: 1200px);
$max-carousal: 2;
$min-carousal: 10;
$load-up-duration: 2.0s;
:root {
--max-width: 100vw;
--header-height: 60px;
--background-color-rgb: 255, 255, 255;
--text-color-rgb: 0, 0, 0;
--theme-color: rgba(var(--theme-color-rgb), 1.0);
--background-color: rgba(var(--background-color-rgb), 1.0);
--text-color: #666;
--content-padding: 15px;
--heading-color: #444;
--shade-color: #f6f6f6;
--hover-color: #111;
}
$divider: rgba(var(--text-color-rgb), 0.1);
$shade: var(--shade-color);
$headingColor: var(--heading-color);
$hover-color: var(--hover-color);
@mixin zoomable-image($selector, $height) {
#{$selector} {
width: 100%;
position: relative;
padding-bottom: $height;
overflow: hidden;
img {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
transition: transform 0.2s linear;
}
}
&:hover #{$selector} img,
#{$selector}.hover img {
transform: scale(1.1);
}
}
@include media(">=sm") {
:root {
--max-width: 540px;
}
}
@include media(">=md") {
:root {
--max-width: 720px;
}
}
@include media(">=lg") {
:root {
--header-height: 75px;
--max-width: 960px;
}
}
@include media(">=xl") {
:root {
--max-width: 1140px;
}
}
@mixin container {
$padding: calc( (100% - var(--max-width)) /2 + var(--content-padding));
width: 100%;
padding-left: $padding;
padding-right: $padding;
}
@mixin container-margin {
$margin: calc((100% - var(--max-width))/2);
width: 100%;
padding-left: var(--content-padding);
padding-right: var(--content-padding);
margin-left: $margin;
margin-right: $margin;
max-width: var(--max-width);
}