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) :)
125 lines
3.2 KiB
SCSS
125 lines
3.2 KiB
SCSS
// ----------------------------------------------------------------
|
|
// Basic Setups for Navigation Elements
|
|
// ----------------------------------------------------------------
|
|
|
|
// The main navigation class to be placed on the <nav>
|
|
.nav{
|
|
ul,
|
|
ol{border:1px solid #ccc; padding:$spacing;}
|
|
|
|
li{margin:0}
|
|
|
|
a{display:block; padding:$spacing $spacing*2; text-decoration:underline;
|
|
&:hover{text-decoration:none}
|
|
|
|
.selected{}
|
|
}
|
|
}
|
|
|
|
// ----------------------------------------------------------------
|
|
// Basic rules for Horizontal Navigations
|
|
// ----------------------------------------------------------------
|
|
// to be placed on the <ul> or <ol>
|
|
.h-Nav{
|
|
& > li{float:left}
|
|
|
|
// Set drop menu location to the bottom of the hovered link
|
|
.drop-Menu{
|
|
@extend %drop-H;
|
|
}
|
|
}
|
|
|
|
// to be placed on the <ul> or <ol> -- don't use floats, but instead use display inline-block and center navigation links
|
|
.c-Nav{
|
|
font-size:0; text-align:center;
|
|
// font-size:0; deletes the white space between the <li>s
|
|
// However, the font size inside of the <li>'s must be reset when using this trick.
|
|
|
|
& > li{@extend %reset-Type;}
|
|
}
|
|
|
|
// Sets links to the base font-size, while also making them inline-block. Update for your own uses.
|
|
%reset-Type{display:inline-block; font-size:16px}
|
|
|
|
// ----------------------------------------------------------------
|
|
// Basic rules for Vertical Navigations
|
|
// ----------------------------------------------------------------
|
|
// to be placed on the <ul> or <ol>
|
|
.v-Nav{
|
|
/* really only needs styling applied to it, as vertical nav is default */
|
|
.drop-Menu{@extend %drop-V;} // Set drop menu location to the right of the hovered link
|
|
}
|
|
|
|
|
|
// ----------------------------------------------------------------
|
|
// Basic rules for Listless Horizontal Navigations
|
|
// ----------------------------------------------------------------
|
|
.ah-Nav{
|
|
font-size:0;
|
|
|
|
a{@extend %reset-Type;}
|
|
// Set drop menu location to the bottom of the hovered link
|
|
.drop-Menu{
|
|
@extend %drop-H;
|
|
}
|
|
}
|
|
|
|
|
|
// ----------------------------------------------------------------
|
|
// Basic rules for Listless Vertical Navigations
|
|
// ----------------------------------------------------------------
|
|
.av-Nav{
|
|
// Set drop menu location to the bottom of the hovered link
|
|
.drop-Start{display:block}
|
|
.drop-Menu{
|
|
@extend %drop-V;
|
|
}
|
|
}
|
|
|
|
|
|
// ----------------------------------------------------------------
|
|
// Basic rules for Drop Down Menus (applied to both horizontal & vertical navs)
|
|
// ----------------------------------------------------------------
|
|
.drop-Start{
|
|
position:relative;
|
|
|
|
&:hover{
|
|
background:#eee;
|
|
.drop-Menu{visibility:visible}
|
|
}
|
|
|
|
a{white-space:nowrap} // makes it so the dd doesn't get stuck only being as big as the top level button
|
|
}
|
|
.drop-Menu{
|
|
background:#eee;
|
|
border:1px solid #ddd;
|
|
position:absolute;
|
|
visibility:hidden;
|
|
z-index:5;
|
|
}
|
|
|
|
%drop-V{
|
|
left:100%;
|
|
top:0;
|
|
}
|
|
|
|
%drop-H{
|
|
left:0;
|
|
top:100%;
|
|
}
|
|
|
|
|
|
// ----------------------------------------------------------------
|
|
// Basic rules for Breadcrumb Navigations
|
|
// ----------------------------------------------------------------
|
|
.bread{
|
|
@extend .h-Nav;
|
|
li{
|
|
&:last-child:after{content:none;}
|
|
&:after{content:">"; display:inline-block;}
|
|
}
|
|
a{display:inline-block}
|
|
|
|
span{display:inline-block; padding:$spacing $spacing*2}
|
|
}
|
|
|