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) :)
67 lines
2.2 KiB
SCSS
67 lines
2.2 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%.
|
|
}
|
|
|
|
// 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}
|
|
}
|