mirror of
https://github.com/neocities/neocities.git
synced 2025-04-25 01:32:36 +02:00
71 lines
2.3 KiB
SCSS
71 lines
2.3 KiB
SCSS
// ----------------------------------------------------------------
|
|
// 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}
|
|
}
|