chuckdries/Personal-Website
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

projects styling

Browse Source
This commit is contained in:
Chuck Dries 2017-02-18 09:38:46 -07:00
parent 5432b3f41f
commit 32c307c944
6 changed files with 120 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
Sierra.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 MiB

3
covers.css Normal file
View File

@ -0,0 +1,3 @@
#sierra{
background-image: url("Sierra.jpg");
}

42
style.css
View File

@ -10,6 +10,7 @@ body {
transition: none; } transition: none; }
#top { #top {
padding-top: 10px;
width: 100%; width: 100%;
position: fixed; position: fixed;
background: black; } background: black; }
@ -57,22 +58,40 @@ body {
.slide { .slide {
padding: 0px; padding: 0px;
width: 100%; } width: 100%;
line-height: 1.6; }
.slide div { .slide div {
/*width wrapping*/ /* width wrapping */
max-width: 800px;
margin: auto;
border-radius: 5px;
padding: 0px; }
.slide p {
max-width: 800px; max-width: 800px;
margin: auto; } margin: auto; }
.slide .cover { .slide div div {
height: 500px; /* Project bits */
background: url("Chuck.jpg"); transition-duration: .2s;
width: 390px;
border-radius: 5px;
padding: 0px;
display: inline-block;
margin: 3px; }
.slide div div .cover {
height: 300px;
background-position: center center; background-position: center center;
background-size: cover; background-size: cover;
margin: 0px; } margin: 0px; }
.slide div div .cover h2 {
text-align: center;
background: rgba(0, 0, 0, 0.5);
color: white; }
.slide div div .cover:hover {
box-shadow: 2px 2px 9px #666; }
.slide p {
max-width: 800px;
margin: auto; }
.slide h1 {
font-size: 2em;
font-style: italic;
max-width: 800px;
margin: auto;
margin-top: 2.3em; }
.arrow { .arrow {
font-variant-position: sub; font-variant-position: sub;
@ -81,9 +100,6 @@ body {
.arrow:before { .arrow:before {
content: "\0025BC"; } content: "\0025BC"; }
h1 {
font-size: 2em; }
h2 { h2 {
font-weight: normal; font-weight: normal;
font-style: italic; } font-style: italic; }

2
style.css.map
View File

@ -1,6 +1,6 @@
{ {
"version": 3, "version": 3,
"mappings": "AAIA,oBAAO;EACH,OAAO,EAAE,GAAG;EACZ,MAAM,EAAE,GAAG;EACX,KAAK,EAAE,IAAI;;AAIf,IAAK;EAED,WAAW,EAAE,KAAK;EAClB,SAAS,EAAE,GAAG;EACd,WAAW,EAAE,GAAG;EAChB,UAAU,EAAE,IAAI;;AAGpB,IAAK;EACD,KAAK,EAAE,IAAI;EACX,QAAQ,EAAE,KAAK;EACf,UAAU,EAAE,KAAK;EACjB,QAAI;IACA,MAAM,EAAE,IAAI;IACZ,SAAS,EAxBT,KAAK;;AA4Bb,KAAM;EACF,UAAU,EAAE,IAAI;EAChB,UAAU,EAAE,IAAI;EAChB,WAAW,EAAE,GAAG;EAChB,KAAK,EAAE,KAAK;EACZ,OAAE;IACE,KAAK,EAAE,KAAK;IACZ,UAAU,EAAE,MAAM;EAEtB,aAAQ;IACJ,KAAK,EApCN,OAAO;EAsCV,UAAK;IACD,UAAU,EAAE,MAAM;IAClB,KAAK,EAzCN,IAAI;EA2CP,SAAI;IACA,mBAAmB,EAAE,GAAG;EAM5B,QAAG;IACC,mBAAmB,EAAE,IAAI;IACzB,mBAAmB,EAAE,GAAG;;AAM5B,gBAAU;EACN,OAAO,EAAE,IAAI;EACb,OAAO,EAAE,CAAC;AAEd,UAAI;EACA,SAAS,EAAE,KAAK;AAEpB,SAAG;EACC,SAAS,EAAE,GAAG;;AAKlB,UAAI;EACA,KAAK,EAAE,IAAI;EACX,SAAS,EAAE,KAAK;AAEpB,gBAAU;EACN,OAAO,EAAE,CAAC;;AAKd,UAAK;EACD,UAAU,EAAE,KAAK;AAErB,WAAM;EACF,UAAU,EAAE,KAAK;;AAKzB,MAAO;EAEH,OAAO,EAAE,GAAG;EACZ,KAAK,EAAE,IAAI;EACX,UAAI;IACA,kBAAkB;IAClB,SAAS,EAjGT,KAAK;IAkGL,MAAM,EAAE,IAAI;IACZ,aAAa,EAAE,GAAG;IAClB,OAAO,EAAE,GAAG;EAEhB,QAAE;IACE,SAAS,EAvGT,KAAK;IAwGL,MAAM,EAAE,IAAI;EAEhB,aAAO;IACH,MAAM,EAAE,KAAK;IACb,UAAU,EAAE,gBAAgB;IAC5B,mBAAmB,EAAE,aAAa;IAClC,eAAe,EAAE,KAAK;IACtB,MAAM,EAAE,GAAG;;AAInB,MAAO;EACH,qBAAqB,EAAE,GAAG;EAC1B,SAAS,EAAE,IAAI;;AAGnB,aAAc;EACV,OAAO,EAAE,SAAS;;AAGtB,EAAG;EACC,SAAS,EAAE,GAAG;;AAGlB,EAAG;EACC,WAAW,EAAE,MAAM;EACnB,UAAU,EAAE,MAAM;;AAGtB,CAAE;EACE,mBAAmB,EAAE,GAAG", "mappings": "AAKA,oBAAO;EACH,OAAO,EAAE,GAAG;EACZ,MAAM,EAAE,GAAG;EACX,KAAK,EAAE,IAAI;;AAIf,IAAK;EAED,WAAW,EAAE,KAAK;EAClB,SAAS,EAAE,GAAG;EACd,WAAW,EAAE,GAAG;EAChB,UAAU,EAAE,IAAI;;AAGpB,IAAK;EACD,WAAW,EAAE,IAAI;EACjB,KAAK,EAAE,IAAI;EACX,QAAQ,EAAE,KAAK;EACf,UAAU,EAAE,KAAK;EACjB,QAAI;IACA,MAAM,EAAE,IAAI;IACZ,SAAS,EA1BT,KAAK;;AA8Bb,KAAM;EACF,UAAU,EAAE,IAAI;EAChB,UAAU,EAAE,IAAI;EAChB,WAAW,EAAE,GAAG;EAChB,KAAK,EAAE,KAAK;EACZ,OAAE;IACE,KAAK,EAAE,KAAK;IACZ,UAAU,EAAE,MAAM;EAEtB,aAAQ;IACJ,KAAK,EAtCN,OAAO;EAwCV,UAAK;IACD,UAAU,EAAE,MAAM;IAClB,KAAK,EA3CN,IAAI;EA6CP,SAAI;IACA,mBAAmB,EAAE,GAAG;EAM5B,QAAG;IACC,mBAAmB,EAAE,IAAI;IACzB,mBAAmB,EAAE,GAAG;;AAM5B,gBAAU;EACN,OAAO,EAAE,IAAI;EACb,OAAO,EAAE,CAAC;AAEd,UAAI;EACA,SAAS,EAAE,KAAK;AAEpB,SAAG;EACC,SAAS,EAAE,GAAG;;AAKlB,UAAI;EACA,KAAK,EAAE,IAAI;EACX,SAAS,EAAE,KAAK;AAEpB,gBAAU;EACN,OAAO,EAAE,CAAC;;AAKd,UAAK;EACD,UAAU,EAAE,KAAK;AAErB,WAAM;EACF,UAAU,EAAE,KAAK;;AAKzB,MAAO;EAEH,OAAO,EAAE,GAAG;EACZ,KAAK,EAAE,IAAI;EACX,WAAW,EAAE,GAAG;EAChB,UAAI;IACA,oBAAoB;IACpB,SAAS,EApGT,KAAK;IAqGL,MAAM,EAAE,IAAI;IACZ,cAAI;MACA,kBAAkB;MAClB,mBAAmB,EAAE,GAAG;MACxB,KAAK,EAAE,KAAa;MACpB,aAAa,EAAE,GAAG;MAClB,OAAO,EAAE,GAAG;MACZ,OAAO,EAAE,YAAY;MACrB,MAAM,EAAE,GAAG;MACX,qBAAO;QACH,MAAM,EAAE,KAAK;QACb,mBAAmB,EAAE,aAAa;QAClC,eAAe,EAAE,KAAK;QACtB,MAAM,EAAE,GAAG;QACX,wBAAG;UACC,UAAU,EAAE,MAAM;UAClB,UAAU,EAlHrB,kBAAiB;UAmHN,KAAK,EAAE,KAAK;MAGpB,2BAAa;QACT,UAAU,EAAE,gBAAgB;EAIxC,QAAE;IACE,SAAS,EA/HT,KAAK;IAgIL,MAAM,EAAE,IAAI;EAEhB,SAAG;IACC,SAAS,EAAE,GAAG;IACd,UAAU,EAAE,MAAM;IAClB,SAAS,EArIT,KAAK;IAsIL,MAAM,EAAE,IAAI;IACZ,UAAU,EAAE,KAAK;;AAIzB,MAAO;EACH,qBAAqB,EAAE,GAAG;EAC1B,SAAS,EAAE,IAAI;;AAGnB,aAAc;EACV,OAAO,EAAE,SAAS;;AAGtB,EAAG;EACC,WAAW,EAAE,MAAM;EACnB,UAAU,EAAE,MAAM;;AAGtB,CAAE;EACE,mBAAmB,EAAE,GAAG",
"sources": ["style.scss"], "sources": ["style.scss"],
"names": [], "names": [],
"file": "style.css" "file": "style.css"

42
style.scss
View File

@ -2,6 +2,7 @@
$width: 800px; $width: 800px;
$grey: #ccc; $grey: #ccc;
$pink: #ed1a76; $pink: #ed1a76;
$greybg: rgba(0, 0, 0, .5);
.reset { .reset {
padding: 0px; padding: 0px;
margin: 0px; margin: 0px;
@ -18,6 +19,7 @@ body {
} }
#top { #top {
padding-top: 10px;
width: 100%; width: 100%;
position: fixed; position: fixed;
background: black; background: black;
@ -94,23 +96,45 @@ body {
@extend .reset; @extend .reset;
padding: 0px; padding: 0px;
width: 100%; width: 100%;
line-height: 1.6;
div { div {
/*width wrapping*/ /* width wrapping */
max-width: $width; max-width: $width;
margin: auto; margin: auto;
div {
/* Project bits */
transition-duration: .2s;
width: $width/2 - 10;
border-radius: 5px; border-radius: 5px;
padding: 0px; padding: 0px;
display: inline-block;
margin: 3px;
.cover {
height: 300px;
background-position: center center;
background-size: cover;
margin: 0px;
h2 {
text-align: center;
background: $greybg;
color: white;
}
}
.cover:hover {
box-shadow: 2px 2px 9px #666;
}
}
} }
p { p {
max-width: $width; max-width: $width;
margin: auto; margin: auto;
} }
.cover { h1 {
height: 500px; font-size: 2em;
background: url("Chuck.jpg"); font-style: italic;
background-position: center center; max-width: $width;
background-size: cover; margin: auto;
margin: 0px; margin-top: 2.3em;
} }
} }
@ -123,10 +147,6 @@ body {
content: "\0025BC"; content: "\0025BC";
} }
h1 {
font-size: 2em;
}
h2 { h2 {
font-weight: normal; font-weight: normal;
font-style: italic; font-style: italic;

88
toptest.html
View File

@ -5,9 +5,10 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Document</title> <title>Document</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="covers.css">
<style> <style>
#spaceTakerUpper { #spaceTakerUpper {
height: 100vh; height: 105vh;
} }
</style> </style>
</head> </head>
@ -39,15 +40,7 @@
</div> </div>
<div class="slide"> <div class="slide">
<h1>About Me</h1> <h1>About Me</h1>
</div> <p>&nbsp; &nbsp; &nbsp;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer risus lorem, pretium non suscipit vel, dapibus non
<div class="slide">
<h1>Projects</h1>
<div>
<div class="cover">
<h2>A project</h2>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer risus lorem, pretium non suscipit vel, dapibus non
dolor. Suspendisse potenti. Phasellus interdum tempus placerat. Vivamus nec interdum mauris. Integer eu neque dolor. Suspendisse potenti. Phasellus interdum tempus placerat. Vivamus nec interdum mauris. Integer eu neque
lacus. Nulla turpis turpis, fermentum in elementum nec, aliquam sed elit. Maecenas fringilla tristique leo quis lacus. Nulla turpis turpis, fermentum in elementum nec, aliquam sed elit. Maecenas fringilla tristique leo quis
mattis. In tempor justo id vehicula porta. Ut metus tortor, laoreet quis iaculis ac, aliquet et metus. Suspendisse mattis. In tempor justo id vehicula porta. Ut metus tortor, laoreet quis iaculis ac, aliquet et metus. Suspendisse
@ -57,31 +50,56 @@
molestie placerat. Vivamus aliquam tincidunt velit, id cursus purus euismod vitae. Praesent a rhoncus quam, non molestie placerat. Vivamus aliquam tincidunt velit, id cursus purus euismod vitae. Praesent a rhoncus quam, non
scelerisque lorem. Aenean mollis dapibus odio, ut bibendum arcu mattis vitae. Maecenas id faucibus arcu. Aenean scelerisque lorem. Aenean mollis dapibus odio, ut bibendum arcu mattis vitae. Maecenas id faucibus arcu. Aenean
ullamcorper urna id cursus semper. Sed aliquet, est ut interdum ultrices, arcu libero venenatis lacus, ut viverra ullamcorper urna id cursus semper. Sed aliquet, est ut interdum ultrices, arcu libero venenatis lacus, ut viverra
ante massa id elit. Mauris molestie enim sit amet neque viverra, luctus laoreet dolor efficitur. Mauris non mi ante massa id elit. Mauris molestie enim sit amet neque viverra, luctus laoreet dolor efficitur.</p>
auctor, tincidunt odio in, ultricies sapien. Sed mollis ligula vitae magna malesuada imperdiet. Aliquam quis </div>
felis urna. Morbi feugiat metus sed massa finibus dapibus at sed augue. Curabitur in eleifend neque. Sed malesuada <div class="slide">
rutrum tellus, sit amet tempus enim pretium sed. Mauris nisi eros, facilisis a ornare sit amet, efficitur vitae <h1>Projects</h1>
mauris. Aliquam in nibh placerat, mollis augue sit amet, interdum felis. Morbi justo felis, semper ac lorem in, <div>
lobortis pharetra purus. Curabitur ut neque vitae magna interdum pulvinar ac vitae dui. Donec consequat est ex, <div>
et tincidunt tellus rhoncus nec. Donec a dictum nisi, mollis egestas lectus. Quisque vel fringilla justo, ultricies <div class="cover" id="sierra">
pharetra dui. Morbi egestas libero et turpis congue tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing <!-- centering container -->
elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean ullamcorper <div style="display:table;width:100%;height:100%;margin:0px;">
luctus dolor, nec consectetur erat placerat at. Phasellus a metus sed lorem molestie euismod finibus id turpis. <div style="display:table-cell;vertical-align:middle;margin:0px;">
Integer iaculis dignissim eleifend. Ut enim risus, bibendum ac ultricies tempus, blandit ut justo. Morbi id nulla <h2>Project Sierra</h2>
tincidunt, aliquet quam et, consectetur purus. Quisque lobortis leo lorem, sit amet pellentesque leo eleifend </div>
non. Fusce consectetur sapien risus, id sagittis velit ornare vitae. Duis ultricies, sem sed facilisis lacinia, </div>
ex libero finibus ex, vel egestas ex lacus in dui. Quisque eros nulla, placerat a massa et, fringilla feugiat </div>
purus. Proin ipsum neque, varius in turpis id, facilisis convallis justo. Donec vulputate sapien pharetra erat <p>Project description</p>
blandit semper. Vestibulum mollis, ante sit amet tristique ullamcorper, leo dolor iaculis ligula, eget dapibus </div>
nulla lorem viverra felis. Nulla eleifend fermentum ipsum a posuere. Curabitur sed placerat elit, ac molestie <div>
metus. Pellentesque id eros volutpat, volutpat leo nec, finibus justo. Fusce euismod, mi bibendum ornare tincidunt, <div class="cover" id="sierra">
lorem nisi interdum turpis, vulputate pretium lectus augue eget sem. Nam et nibh purus. Cras volutpat sagittis <!-- centering container -->
accumsan. Vestibulum semper dui hendrerit, iaculis nunc at, imperdiet ligula. Cras fringilla nunc eros, non bibendum <div style="display:table;width:100%;height:100%;margin:0px;">
lorem cursus non. Quisque scelerisque mauris accumsan risus ultrices maximus. Aenean tristique gravida suscipit. <div style="display:table-cell;vertical-align:middle;margin:0px;">
Mauris sit amet varius tellus. Suspendisse interdum dolor sit amet lacinia consequat. Class aptent taciti sociosqu <h2>Project Sierra</h2>
ad litora torquent per conubia nostra, per inceptos himenaeos. Integer nec mattis nisi. Orci varius natoque penatibus </div>
et magnis dis parturient montes, nascetur ridiculus mus. Sed quis enim at sapien scelerisque tristique non et </div>
libero.</p> </div>
<p>Project description</p>
</div>
<div>
<div class="cover" id="sierra">
<!-- centering container -->
<div style="display:table;width:100%;height:100%;margin:0px;">
<div style="display:table-cell;vertical-align:middle;margin:0px;">
<h2>Project Sierra</h2>
</div>
</div>
</div>
<p>Project description</p>
</div>
<div>
<div class="cover" id="sierra">
<!-- centering container -->
<div style="display:table;width:100%;height:100%;margin:0px;">
<div style="display:table-cell;vertical-align:middle;margin:0px;">
<h2>Project Sierra</h2>
</div>
</div>
</div>
<p>Project description</p>
</div>
</div>
<br> <br>
<br> <br>
<br> <br>