zydronium/neocities
1
0
Fork 0
mirror of https://github.com/neocities/neocities.git synced 2025-08-05 17:18:02 +02:00
Code Issues Projects Releases Packages Wiki Activity

streamline CSS, remove google font/cdn dep

Browse source
This commit is contained in:
Kyle Drake 2014-08-29 20:05:19 -07:00
parent ab6abc637e
commit 47344e8bdc
186 changed files with 31689 additions and 1655 deletions
Download patch file Download diff file Expand all files Collapse all files

71
sass/_helper-sass/_layout.scss Normal file
View file

@ -0,0 +1,71 @@
// ----------------------------------------------------------------
// Layout - Responsive & Static Grid Elements
// ----------------------------------------------------------------
// A container for each row of our layout.
// Simply styled with only a base margin-bottom and extending the clearfix class,
// a row can also have helper classes added onto it for other general styling purposes
.row{
margin-left:-$spacing*5;
margin-bottom:$spacing*5;
@extend .clearfix;
}
// The grid columns within a row.
// Do not apply styling to this class as its purpose is for layout only.
.col{
float:left;
margin-bottom:0!important;
// row has a margin-bottom applied to it already,
// to absolutely make sure there is no extra margin, 0!important is used
padding-left:$spacing*5;
position:relative;
width:100%; // default width is 100%
@media (max-device-width:480px), screen and (max-width:800px){
float:none;
padding:0;
}
}
// Convert columns to inline-blocks so we can center them when our row does not add up to 100%
.c-Row{
@extend .row;
font-size:0; // **
text-align:center;
.col{
display:inline-block;
float:none;
font-size:16px; // resets the font back to the default base to fix the font-size:0 needed for centering
text-align:left;
}
// ** This kills the extra white-space created by the inline-blocks.
// Make sure interior elements have a font-size reaplied to them to make text visible.
// (as long as they're using semantic tags or the font-size class names,
// then this should not be a problem).
}
// Base responsive grid column classes.
// Do not apply styling to these as their purpose is for width only.
.col-90 {width:90%}
.col-80 {width:80%}
.col-75 {width:75%}
.col-66 {width:66.6666%}
.col-60 {width:60%}
.col-50 {width:50%}
.col-40 {width:40%}
.col-33 {width:33.3333%}
.col-25 {width:25%}
.col-20 {width:20%}
.col-10 {width:10%}
.rfl{@include row-fixed-Left(300px)}
.rfr{@include row-fixed-Right(300px)}
// make sure to use .f-Col for the fixed column in the row
// The block class can be modified or deleted and replaced with other classes (like .media or .callout)
// The main purpose of a class like this is to apply to an inner HTML element of the column structure
// so we can apply styling to the columns.
.block{
background:#ccc; color:#333; padding:$spacing;
& > :last-child{margin-bottom:0}
}