mirror of
https://github.com/neocities/neocities.git
synced 2025-04-25 01:32:36 +02:00
3e2cdcd138
included all dev and production files for new redesign. the index file has a different layout than the interior page files. for more in-depth look into how these are set up, look in the templates > includes & layouts folders. I used .liquid files to create these pages, and all the content for the files are in there, with the base layout stuff in the includes and layout files. check the converted-html folder to see how everything should look. (test it on an android phone. should look good now) :)
138 lines
4.1 KiB
SCSS
138 lines
4.1 KiB
SCSS
// ----------------------------------------------------------------
|
|
// Vendor Prefix Mixins
|
|
// ----------------------------------------------------------------
|
|
// All Vendor Prefixes
|
|
@mixin vendor($property, $value...){
|
|
-moz-#{$property}:$value;
|
|
-ms-#{$property}:$value;
|
|
-o-#{$property}:$value;
|
|
-webkit-#{$property}:$value;
|
|
#{$property}:$value;
|
|
}
|
|
|
|
// Just webkit & moz Prefixes
|
|
@mixin base-vendor($property, $value...){
|
|
-moz-#{$property}:$value;
|
|
-webkit-#{$property}:$value;
|
|
#{$property}:$value;
|
|
}
|
|
|
|
|
|
// ----------------------------------------------------------------
|
|
// Useful CSS3 Mixins
|
|
// ----------------------------------------------------------------
|
|
// Box Sizing
|
|
@mixin box-sizing($box-value){
|
|
@include base-vendor(box-sizing, $box-value);
|
|
}
|
|
|
|
// Border Radius
|
|
@mixin border-radius($br-value){
|
|
@include base-vendor(border-radius, $br-value);
|
|
background-clip:padding-box;
|
|
}
|
|
|
|
// Box Shadow --- See _var.scss to edit & create box-shadow rules
|
|
@mixin box-shadow($bs-value){
|
|
@include base-vendor(box-shadow, $bs-value)
|
|
}
|
|
|
|
// Linear Gradient
|
|
@mixin linear-gradient($grad-Line, $grad-Colors...) {
|
|
background: -webkit-linear-gradient($grad-Line, $grad-Colors);
|
|
background: -moz-linear-gradient($grad-Line, $grad-Colors);
|
|
background: -o-linear-gradient($grad-Line, $grad-Colors);
|
|
background: linear-gradient($grad-Line, $grad-Colors);
|
|
}
|
|
// grad-Line - use either ###deg or top, left, bottom, right
|
|
// example:
|
|
// @include linear-gradient(80deg, #fcc, #f23);
|
|
// @include linear-gradient(top, #fcc, #f23);
|
|
|
|
// Radial Gradient
|
|
@mixin radial-gradient($radial...) {
|
|
background: -webkit-radial-gradient($radial);
|
|
background: -moz-radial-gradient($radial);
|
|
background: -o-radial-gradient($radial);
|
|
background: radial-gradient($radial);
|
|
}
|
|
|
|
|
|
// ----------------------------------------------------------------
|
|
// Hidden Elements Mixins
|
|
// ----------------------------------------------------------------
|
|
// Hide text that you don't want visible
|
|
// like on submit buttons that use an icon instead of text
|
|
@mixin hide-text{
|
|
color:transparent;
|
|
font:0/0 a;
|
|
text-shadow:none;
|
|
}
|
|
|
|
// Hide entire elements that you don't want visible
|
|
// but still need for accesibility / functionality
|
|
// -- ie. radio buttons for custom styled radio inputs
|
|
@mixin invisible{
|
|
border:0!important; height:1px!important; left:-999999px!important; overflow:hidden!important; position:absolute!important; width:1px!important;
|
|
}
|
|
|
|
// Truncate Text
|
|
@mixin truncate($truncation-boundary){
|
|
max-width:$truncation-boundary;
|
|
overflow:hidden;
|
|
text-overflow:ellipsis;
|
|
white-space:nowrap;
|
|
}
|
|
// Example -- @include truncate(100%);
|
|
|
|
|
|
// ----------------------------------------------------------------
|
|
// Clearfix
|
|
// ----------------------------------------------------------------
|
|
@mixin clearfix{
|
|
*zoom:1;
|
|
&:before, &:after{content:""; display:table}
|
|
&:after{clear:both}
|
|
}
|
|
|
|
|
|
// ----------------------------------------------------------------
|
|
// Hi-Res Retina Images
|
|
// https://37signals.com/svn/posts/3271-easy-retina-ready-images-using-scss
|
|
// ----------------------------------------------------------------
|
|
@mixin image-2x($image, $width, $height){
|
|
@media (min--moz-device-pixel-ratio: 1.3),
|
|
(-o-min-device-pixel-ratio: 2.6/2),
|
|
(-webkit-min-device-pixel-ratio: 1.3),
|
|
(min-device-pixel-ratio: 1.3),
|
|
(min-resolution: 1.3dppx){
|
|
// on retina, use image that's scaled by 2
|
|
background-image:url($image);
|
|
background-size:$width $height;
|
|
}
|
|
}
|
|
|
|
|
|
// ----------------------------------------------------------------
|
|
// Responsive Row w/fixed width column -- use in combo with .row
|
|
// ----------------------------------------------------------------
|
|
@mixin row-fixed-Left($col-Size){
|
|
padding-left:$col-Size;
|
|
|
|
.f-Col{
|
|
float:left;
|
|
margin-left:-$col-Size + 20px;
|
|
width:$col-Size - 20px;
|
|
}
|
|
}
|
|
|
|
@mixin row-fixed-Right($col-Size){
|
|
padding-right:$col-Size;
|
|
|
|
.f-Col{
|
|
float:right;
|
|
margin-right:-$col-Size;
|
|
width:$col-Size - 20px;
|
|
}
|
|
}
|
|
|