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) :)
116 lines
2.9 KiB
SCSS
116 lines
2.9 KiB
SCSS
// ----------------------------------------------------------------
|
|
// Floats & Clearing
|
|
// ----------------------------------------------------------------
|
|
.float-Left {float:left}
|
|
.float-Right {float:right}
|
|
.float-None {float:none}
|
|
.clear {clear:both}
|
|
.clearfix {@include clearfix}
|
|
.overflow {overflow:hidden}
|
|
|
|
|
|
// Consistent Margin Bottom
|
|
%margin-bottom{margin-bottom:$spacing*3}
|
|
|
|
// ----------------------------------------------------------------
|
|
// Showing & Hiding
|
|
// ----------------------------------------------------------------
|
|
.d-Block, .show{display:block}
|
|
.d-None, .mobile-Show{display:none}
|
|
// change display value for .mobile-Show in the appropriate @media break-point
|
|
|
|
// Hides from screenreaders and browsers
|
|
.hidden{display:none!important; visibility:hidden}
|
|
|
|
// Hide from browsers but not from screen readers
|
|
.invis, %invis{@include invisible}
|
|
|
|
// ----------------------------------------------------------------
|
|
// Reoccuring HTML Elements
|
|
// ----------------------------------------------------------------
|
|
// Profile Picture
|
|
.pic, %pic{
|
|
border:1px solid $c-White;
|
|
@include border-radius(4px);
|
|
@include box-shadow($bs-4);
|
|
display:inline-block;
|
|
overflow:hidden;
|
|
width:90px;
|
|
|
|
img{display:block}
|
|
}
|
|
|
|
// Make picture into a circle
|
|
.pic-Rounded{
|
|
@extend %pic;
|
|
@include border-radius(100px);
|
|
}
|
|
/*
|
|
Code Example
|
|
--------------------------
|
|
<a href="#" title="TITLE" class="pic-Rounded">
|
|
<img src="assets/img/little-V.jpg" alt="" />
|
|
</a>
|
|
*/
|
|
|
|
// Media Item
|
|
.media, %media{
|
|
margin-bottom:$spacing*4;
|
|
@extend .clearfix;
|
|
position:relative;
|
|
z-index:2;
|
|
.media-Text >:last-child{margin-bottom:0}
|
|
.media-Object{float:left; margin:0 $spacing*4 $spacing*2 0; max-width:30%;}
|
|
}
|
|
|
|
// Have media element appear on the right hand side
|
|
.media-Reverse, %media-Reverse{
|
|
@extend %media;
|
|
.media-Object{float:right; margin:0 0 $spacing*2 $spacing*4; max-width:30%}
|
|
}
|
|
|
|
.media-No-Wrap{
|
|
@extend %media;
|
|
padding-left:100px;
|
|
.media-Text{float:left; width:100%}
|
|
.media-Object{margin-left:-100px; margin-right:0}
|
|
}
|
|
|
|
.media-No-Wrap-Reverse{
|
|
@extend %media-Reverse;
|
|
padding-right:100px;
|
|
.media-Object{margin-right:-100px; margin-left:0}
|
|
}
|
|
/*
|
|
Code Example
|
|
--------------------------
|
|
<div class="media">
|
|
<div class="media-Object">
|
|
<img src="assets/img/little-V.jpg" alt="" />
|
|
</div>
|
|
<div class="media-Text">
|
|
<h1>Title for Meida Element</h1>
|
|
<p>Paragraph text to go along with media element.</p>
|
|
</div>
|
|
</div>
|
|
|
|
-- Divs were used in this example, but the media element could be applied to various situations.
|
|
Ie. could be used for a header or footer area where a logo is placed on the right or left w/text to the side.
|
|
*/
|
|
|
|
|
|
// Call out boxes
|
|
.emph-Block{
|
|
background:#fafafa;
|
|
border:1px solid #ddd;
|
|
@include border-radius(4px);
|
|
@include box-shadow($bs-4);
|
|
margin-bottom:$spacing*4;
|
|
min-height:50px;
|
|
padding:$spacing*4;
|
|
|
|
& > :last-child{margin-bottom:0}
|
|
}
|
|
|
|
|
|
|