updated readme, started new home layout
This commit is contained in:
238
sass/base.scss
238
sass/base.scss
@@ -11,7 +11,7 @@
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
/* html element 62.5% font-size for REM use */
|
||||
@@ -214,11 +214,6 @@ $desktop-bottom-margin-double: 4rem;
|
||||
/* STRUCTURE */
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
html {
|
||||
// height: fit-content;
|
||||
//overflow-y: hidden;
|
||||
}
|
||||
|
||||
/* wrapper */
|
||||
.wrapper {
|
||||
margin: 0 auto;
|
||||
@@ -315,14 +310,7 @@ html {
|
||||
// color: #000;
|
||||
// fill: currentColor;
|
||||
filter: invert(100%); //black
|
||||
@include transform(rotate(180deg)) // transform: rotate(180deg);
|
||||
//red: #ff0000
|
||||
//filter: brightness(0) saturate(100%) invert(14%) sepia(95%) saturate(6167%) hue-rotate(5deg) brightness(108%) contrast(122%);
|
||||
//yellow: rgb(255,236,0) #ffec00
|
||||
// filter: brightness(0) saturate(100%) invert(78%) sepia(83%) saturate(545%) hue-rotate(358deg) brightness(104%) contrast(102%);
|
||||
//blue rgb(33,105,250) #2169fa
|
||||
// filter: brightness(0) saturate(100%) invert(35%) sepia(50%) saturate(7310%) hue-rotate(218deg)
|
||||
// brightness(106%) contrast(96%);;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
@include transform(rotate(180deg)) // transform: rotate(180deg);;;;;;;;;;;;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -627,124 +615,152 @@ html {
|
||||
//horizontal scrolling on desktop:
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin: 0 $desktop-home-margin 0 $desktop-home-margin;
|
||||
margin: 0;
|
||||
height: 100vh;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
/* ------------------------------ home article ------------------------------ */
|
||||
/* --------------------------- home article mobile -------------------------- */
|
||||
|
||||
article {
|
||||
height: 100vh;
|
||||
@media #{$smalldesktop} {
|
||||
// height: calc(100vh - #{$desktop-top-margin});
|
||||
width: calc(100vw - (#{$desktop-home-margin} * 3));
|
||||
flex: 0 0 auto;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
padding-top: $desktop-top-margin;
|
||||
// margin-bottom: #{$desktop-bottom-margin};
|
||||
border-left: #000 1px solid;
|
||||
|
||||
&:first-child {
|
||||
border-left-color: transparent;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "<hr>";
|
||||
display: block;
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
background: #000;
|
||||
}
|
||||
}
|
||||
|
||||
& > a {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
display: inline-block;
|
||||
}
|
||||
.thumbnailwrapper {
|
||||
@media #{$smalldesktop} {
|
||||
// height: 100%;
|
||||
height: calc(100% - #{$desktop-top-margin});
|
||||
}
|
||||
img.attachment-home-thumbnail {
|
||||
// post thumbnail on home
|
||||
height: 50vh;
|
||||
width: 100vw;
|
||||
object-fit: cover;
|
||||
@media #{$smalldesktop} {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* -------------------------- home article metadata ------------------------- */
|
||||
|
||||
.metadata {
|
||||
@media #{$smalldesktop} {
|
||||
bottom: 0;
|
||||
//border-top: #000 solid 3px;
|
||||
|
||||
// border-left: #000 solid 1px;
|
||||
background: transparent;
|
||||
width: 100%;
|
||||
height: #{$desktop-home-margin};
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
& > a {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
justify-content: flex-start;
|
||||
align-items: stretch;
|
||||
@include triangle-corner-bordered(#{$desktop-bottom-margin-double}, 0, transparent);
|
||||
border: none;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
& > div {
|
||||
width: 30%;
|
||||
padding-top: #{$desktop-bottom-margin};
|
||||
.thumbnailwrapper {
|
||||
@media #{$smalldesktop} {
|
||||
// height: 100%;
|
||||
height: calc(100% - #{$desktop-top-margin});
|
||||
}
|
||||
img.attachment-home-thumbnail {
|
||||
// post thumbnail on home
|
||||
height: 50vh;
|
||||
width: 100vw;
|
||||
object-fit: cover;
|
||||
@media #{$smalldesktop} {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media #{$mobile-landscape} {
|
||||
height: calc(#{$desktop-home-margin} / 2);
|
||||
}
|
||||
.categories {
|
||||
display: none;
|
||||
|
||||
h2 {
|
||||
width: 100%;
|
||||
height: 50vh;
|
||||
padding: 2rem;
|
||||
padding-top: 3rem;
|
||||
margin: 0;
|
||||
// display: flex;
|
||||
// flex-direction: row;
|
||||
// align-items: center;
|
||||
@media #{$smalldesktop} {
|
||||
height: unset;
|
||||
position: absolute;
|
||||
top: 6rem;
|
||||
padding: 4rem;
|
||||
}
|
||||
|
||||
a {
|
||||
@include home-title();
|
||||
}
|
||||
}
|
||||
} //article end
|
||||
}
|
||||
|
||||
/* ------------------------ home article desktop big ------------------------ */
|
||||
|
||||
@media #{$smalldesktop} {
|
||||
//big: first 2 articles
|
||||
.home-wrapper-big {
|
||||
flex: 0 0 auto;
|
||||
|
||||
article {
|
||||
position: relative;
|
||||
width: calc(100vw - (#{$desktop-home-margin} * 3));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
margin-left: $desktop-home-margin;
|
||||
padding-top: $desktop-top-margin;
|
||||
border-right: #000 1px solid;
|
||||
&::before {
|
||||
//this is the border on top
|
||||
content: "<hr>";
|
||||
display: block;
|
||||
border-right: #000 solid 1px;
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
background: #000;
|
||||
}
|
||||
}
|
||||
.postedon {
|
||||
@media #{$smalldesktop} {
|
||||
/* -------------------------- home article metadata big------------------------- */
|
||||
.metadata {
|
||||
bottom: 0;
|
||||
background: transparent;
|
||||
width: 100%;
|
||||
height: #{$desktop-home-margin};
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 0;
|
||||
justify-content: flex-start;
|
||||
align-items: stretch;
|
||||
@include triangle-corner-bordered(#{$desktop-bottom-margin-double}, 0, transparent);
|
||||
|
||||
& > div {
|
||||
width: 30%;
|
||||
padding-top: #{$desktop-bottom-margin};
|
||||
}
|
||||
|
||||
@media #{$mobile-landscape} {
|
||||
height: calc(#{$desktop-home-margin} / 2);
|
||||
}
|
||||
.categories {
|
||||
display: none;
|
||||
|
||||
display: block;
|
||||
border-right: #000 solid 1px;
|
||||
}
|
||||
.postedon {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
width: 100%;
|
||||
height: 50vh;
|
||||
padding: 2rem;
|
||||
padding-top: 3rem;
|
||||
margin: 0;
|
||||
// display: flex;
|
||||
// flex-direction: row;
|
||||
// align-items: center;
|
||||
@media #{$smalldesktop} {
|
||||
height: unset;
|
||||
position: absolute;
|
||||
top: 6rem;
|
||||
padding: 4rem;
|
||||
}
|
||||
|
||||
a {
|
||||
@include home-title();
|
||||
.home-wrapper-1 {
|
||||
article {
|
||||
}
|
||||
}
|
||||
} //article end
|
||||
.home-wrapper-2 {
|
||||
article {
|
||||
border-left: #000 1px solid;
|
||||
}
|
||||
}
|
||||
} //smalldesktop end
|
||||
|
||||
/* ----------------------- home article desktop small ----------------------- */
|
||||
|
||||
@media #{$smalldesktop} {
|
||||
.home-wrapper-small {
|
||||
width: calc(100vw - (#{$desktop-home-margin} * 3));
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
margin-left: $desktop-home-margin;
|
||||
margin-top: $desktop-top-margin;
|
||||
|
||||
article {
|
||||
flex: 0 0 33%;
|
||||
height: 50%;
|
||||
.metadata{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
} //section end
|
||||
}
|
||||
} //main end
|
||||
} //home end
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
Reference in New Issue
Block a user