Added basically the whole site
This commit is contained in:
Allexit
parent
a72ee217f2
commit
5c496d3221
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
@ -0,0 +1 @@
|
||||
.sass-cache
|
||||
92
css/main.css
Normal file
92
css/main.css
Normal file
@ -0,0 +1,92 @@
|
||||
body, html {
|
||||
background-color: #1f1f1f;
|
||||
font-family: helvetica, sans-serif;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0; }
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.cont {
|
||||
display: block !important;
|
||||
width: 100%; }
|
||||
.cont .teacup {
|
||||
height: auto !important; }
|
||||
.cont .teacup img {
|
||||
margin-right: 20%;
|
||||
width: 40% !important;
|
||||
height: auto !important;
|
||||
padding-top: 1em;
|
||||
padding-bottom: 1em; }
|
||||
.cont .stuffarea {
|
||||
margin-left: 10%;
|
||||
padding-right: 0 !important;
|
||||
width: 80% !important; }
|
||||
.cont .stuffarea ul.navbar {
|
||||
padding: 0 !important;
|
||||
padding-left: 0.5em !important; } }
|
||||
.cont {
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
height: 100%; }
|
||||
.cont .teacup {
|
||||
flex: auto;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #1b1b1b; }
|
||||
.cont .teacup img {
|
||||
width: 75%;
|
||||
max-height: 100%;
|
||||
height: auto; }
|
||||
.cont .stuffarea {
|
||||
width: 45%;
|
||||
height: 100%;
|
||||
padding-left: 5%;
|
||||
padding-right: 5%; }
|
||||
.cont .stuffarea .hiddenarea {
|
||||
visibility: hidden;
|
||||
height: 0;
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
padding: 0; }
|
||||
.cont .stuffarea div {
|
||||
margin: 0;
|
||||
padding: 0; }
|
||||
.cont .stuffarea h1 {
|
||||
margin: 0;
|
||||
color: #ff0091; }
|
||||
.cont .stuffarea p {
|
||||
color: #fff; }
|
||||
.cont .stuffarea ul.navbar {
|
||||
padding-left: 1em;
|
||||
list-style: none;
|
||||
white-space: nowrap;
|
||||
padding-bottom: 1em; }
|
||||
.cont .stuffarea ul.navbar a:focus {
|
||||
outline: none;
|
||||
font-style: none;
|
||||
border: none; }
|
||||
.cont .stuffarea ul.navbar li {
|
||||
display: inline-block;
|
||||
padding: 0.5em;
|
||||
background-color: #1f1f1f;
|
||||
margin: -3px;
|
||||
transition: 0.2s;
|
||||
color: #dddddd;
|
||||
border-right: 2px solid #303030;
|
||||
transform: skewX(-20deg); }
|
||||
.cont .stuffarea ul.navbar li .button {
|
||||
transform: skewX(20deg); }
|
||||
.cont .stuffarea ul.navbar li:first-of-type {
|
||||
border-left: 2px solid #303030; }
|
||||
.cont .stuffarea ul.navbar li:hover {
|
||||
background-color: #303030;
|
||||
transition: 0.2s;
|
||||
cursor: pointer; }
|
||||
|
||||
/*# sourceMappingURL=main.css.map */
|
||||
7
css/main.css.map
Normal file
7
css/main.css.map
Normal file
@ -0,0 +1,7 @@
|
||||
{
|
||||
"version": 3,
|
||||
"mappings": "AAIA,UAAW;EACR,gBAAgB,EAHZ,OAAO;EAIX,WAAW,EAAE,qBAAqB;EAClC,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;EACZ,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;;AAGb,yBAA0B;EACvB,KAAM;IACH,OAAO,EAAE,gBAAgB;IACzB,KAAK,EAAE,IAAI;IAEX,aAAQ;MACL,MAAM,EAAE,eAAe;MAEvB,iBAAI;QACD,YAAY,EAAE,GAAG;QACjB,KAAK,EAAE,cAAc;QACrB,MAAM,EAAE,eAAe;QACvB,WAAW,EAAE,GAAG;QAChB,cAAc,EAAE,GAAG;IAIzB,gBAAW;MACR,WAAW,EAAE,GAAG;MAChB,aAAa,EAAE,YAAY;MAC3B,KAAK,EAAE,cAAc;MAErB,0BAAU;QACP,OAAO,EAAE,YAAY;QACrB,YAAY,EAAE,gBAAgB;AAM1C,KAAM;EACH,OAAO,EAAE,WAAW;EACpB,cAAc,EAAE,GAAG;EACnB,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;EAEZ,aAAQ;IACL,IAAI,EAAE,IAAI;IACV,MAAM,EAAE,IAAI;IACZ,UAAU,EAAE,MAAM;IAClB,OAAO,EAAC,IAAI;IACZ,eAAe,EAAC,MAAM;IACtB,WAAW,EAAC,MAAM;IAClB,gBAAgB,EAAE,OAAe;IAEjC,iBAAI;MACD,KAAK,EAAE,GAAG;MACV,UAAU,EAAE,IAAI;MAChB,MAAM,EAAE,IAAI;EAKlB,gBAAW;IACR,KAAK,EAAE,GAAG;IACV,MAAM,EAAE,IAAI;IACZ,YAAY,EAAE,EAAE;IAChB,aAAa,EAAE,EAAE;IAEjB,4BAAY;MACT,UAAU,EAAE,MAAM;MAClB,MAAM,EAAE,CAAC;MACT,KAAK,EAAE,CAAC;MACR,QAAQ,EAAE,MAAM;MAChB,MAAM,EAAE,CAAC;MACT,OAAO,EAAE,CAAC;IAGb,oBAAI;MACD,MAAM,EAAE,CAAC;MACT,OAAO,EAAE,CAAC;IAIb,mBAAG;MACA,MAAM,EAAE,CAAC;MACT,KAAK,EAzFP,OAAO;IA4FR,kBAAE;MACC,KAAK,EA5FJ,IAAI;IA+FR,0BAAU;MAEP,YAAY,EAAE,GAAG;MACjB,UAAU,EAAE,IAAI;MAChB,WAAW,EAAE,MAAM;MACnB,cAAc,EAAE,GAAG;MAEnB,kCAAQ;QACL,OAAO,EAAE,IAAI;QACb,UAAU,EAAE,IAAI;QAChB,MAAM,EAAE,IAAI;MAGf,6BAAG;QACA,OAAO,EAAE,YAAY;QACrB,OAAO,EAAE,KAAK;QACd,gBAAgB,EA9GrB,OAAO;QA+GF,MAAM,EAAE,IAAI;QACZ,UAAU,EAAE,IAAI;QAChB,KAAK,EAAE,OAAe;QACtB,YAAY,EAAE,iBAAsB;QACpC,SAAS,EAAE,aAAa;QAExB,qCAAQ;UACL,SAAS,EAAE,YAAY;MAG7B,2CAAiB;QACd,WAAW,EAAE,iBAAsB;MAEtC,mCAAS;QACN,gBAAgB,EAAE,OAAY;QAC9B,UAAU,EAAE,IAAI;QAChB,MAAM,EAAE,OAAO",
|
||||
"sources": ["../scss/main.scss"],
|
||||
"names": [],
|
||||
"file": "main.css"
|
||||
}
|
||||
BIN
img/favicon.png
Normal file
BIN
img/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
245
img/teascade.svg
Normal file
245
img/teascade.svg
Normal file
@ -0,0 +1,245 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
width="350"
|
||||
height="350"
|
||||
viewBox="0 0 350.00001 350.00001"
|
||||
id="svg2"
|
||||
version="1.1"
|
||||
inkscape:version="0.91 r"
|
||||
sodipodi:docname="teascade.svg"
|
||||
inkscape:export-filename="D:\images\teascade_finished.png"
|
||||
inkscape:export-xdpi="300"
|
||||
inkscape:export-ydpi="300">
|
||||
<defs
|
||||
id="defs4">
|
||||
<linearGradient
|
||||
id="linearGradient4632"
|
||||
osb:paint="solid">
|
||||
<stop
|
||||
style="stop-color:#9a0000;stop-opacity:1;"
|
||||
offset="0"
|
||||
id="stop4634" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<sodipodi:namedview
|
||||
id="base"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:zoom="1.28"
|
||||
inkscape:cx="188.01299"
|
||||
inkscape:cy="181.98037"
|
||||
inkscape:document-units="px"
|
||||
inkscape:current-layer="layer13"
|
||||
showgrid="false"
|
||||
inkscape:window-width="1366"
|
||||
inkscape:window-height="713"
|
||||
inkscape:window-x="-2"
|
||||
inkscape:window-y="-3"
|
||||
inkscape:window-maximized="1"
|
||||
units="px" />
|
||||
<metadata
|
||||
id="metadata7">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title></dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
inkscape:groupmode="layer"
|
||||
id="layer13"
|
||||
inkscape:label="bg"
|
||||
transform="translate(0,-702.36218)">
|
||||
<rect
|
||||
style="display:inline;opacity:1;fill:#ffffff;fill-opacity:0;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
id="rect3358"
|
||||
width="350"
|
||||
height="350"
|
||||
x="0"
|
||||
y="702.36218"
|
||||
inkscape:export-xdpi="131.66"
|
||||
inkscape:export-ydpi="131.66" />
|
||||
</g>
|
||||
<g
|
||||
inkscape:groupmode="layer"
|
||||
id="layer9"
|
||||
inkscape:label="Background"
|
||||
transform="translate(0,-702.36218)" />
|
||||
<g
|
||||
inkscape:groupmode="layer"
|
||||
id="layer10"
|
||||
inkscape:label="CUPBG"
|
||||
transform="translate(0,-702.36218)">
|
||||
<path
|
||||
style="opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#ffffff;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 294.27013,814.83719 c -7.71771,0 -15.05662,3.12867 -20.39843,8.59179 a 102.73197,108.76564 0 0 0 -0.35352,-1.65429 l -199.57813,0 a 102.73197,108.76564 0 0 0 -2.94335,25.3164 102.73197,108.76564 0 0 0 42.77343,88.13282 l -79.8125,0 c 3.55199,2.75175 32.643,27.01562 139.47071,27.01562 104.07689,0 134.81055,-23.30076 139.04297,-27.01562 l -78.72266,0 a 102.73197,108.76564 0 0 0 38.39844,-57.48438 c 5.73529,-4.34285 12.00621,-5.55359 22.12304,-5.75195 15.76754,-0.30917 28.55469,-12.79235 28.55469,-28.57422 0,-15.78188 -12.78449,-28.57617 -28.55469,-28.57617 z m -0.53125,13.16601 c 1.91577,-0.0672 3.79607,0.13402 5.55078,0.68555 9.86958,4.01652 12.99204,13.55999 6.89063,23.27344 -5.7578,9.15984 -20.33613,8.80029 -30.48047,7.10742 a 102.73197,108.76564 0 0 0 0.75977,-11.97852 102.73197,108.76564 0 0 0 -0.67578,-11.62109 c 3.46875,-3.38042 10.93568,-7.22061 17.95507,-7.4668 z"
|
||||
id="path4168-7"
|
||||
inkscape:connector-curvature="0"
|
||||
inkscape:export-xdpi="131.66"
|
||||
inkscape:export-ydpi="131.66" />
|
||||
</g>
|
||||
<g
|
||||
inkscape:groupmode="layer"
|
||||
id="layer5"
|
||||
inkscape:label="Holder Shadow"
|
||||
style="display:inline;opacity:0.5"
|
||||
transform="translate(0,-702.36218)">
|
||||
<path
|
||||
style="display:inline;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 285.75667,816.27526 c 19.63437,-6.39823 31.75467,15.39909 32.42133,24.26142 0.80176,10.54993 -1.32383,29.50244 -29.52366,31.62434 20.74516,0.70509 34.55494,-17.23211 34.91462,-29.06407 0,-14.67066 -15.74857,-33.31254 -37.81229,-26.82169 z m -13.54122,61.68498 c -0.57713,0.0483 -1.15599,0.0893 -1.73633,0.12304 l -0.0605,1.42969 c 0.59658,-0.55928 1.19513,-1.06774 1.79688,-1.55273 z"
|
||||
id="path4231-8"
|
||||
inkscape:connector-curvature="0"
|
||||
sodipodi:nodetypes="cccccccccc"
|
||||
inkscape:export-xdpi="131.66"
|
||||
inkscape:export-ydpi="131.66" />
|
||||
</g>
|
||||
<g
|
||||
inkscape:groupmode="layer"
|
||||
id="layer4"
|
||||
inkscape:label="Holder"
|
||||
style="display:inline"
|
||||
transform="translate(0,-702.36218)">
|
||||
<path
|
||||
style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:2.80100012;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 272.34617,825.49881 c 5.41857,-6.78574 13.62715,-10.73664 22.30695,-10.73664 15.7702,0 28.55447,12.79373 28.55447,28.57561 l 0,0 c 0,15.78187 -12.78693,28.26645 -28.55447,28.57562 -11.58346,0.22712 -18.12685,1.77765 -24.59542,7.84181"
|
||||
id="path4231"
|
||||
inkscape:connector-curvature="0"
|
||||
sodipodi:nodetypes="csccsc"
|
||||
inkscape:export-xdpi="131.66"
|
||||
inkscape:export-ydpi="131.66" />
|
||||
<path
|
||||
style="display:inline;fill:none;fill-opacity:1;stroke:#000000;stroke-width:2.80100012;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 274.46053,859.25302 c 10.15083,1.89136 25.91432,2.74664 31.95205,-6.85853 6.10141,-9.71345 2.97861,-19.25754 -6.89097,-23.27406 -9.35845,-2.94147 -22.30465,4.09118 -25.00302,8.56883"
|
||||
id="path4295"
|
||||
inkscape:connector-curvature="0"
|
||||
sodipodi:nodetypes="cccc"
|
||||
inkscape:export-xdpi="131.66"
|
||||
inkscape:export-ydpi="131.66" />
|
||||
</g>
|
||||
<g
|
||||
inkscape:groupmode="layer"
|
||||
id="layer8"
|
||||
inkscape:label="Cup stripe"
|
||||
style="display:inline"
|
||||
transform="translate(0,-702.36218)">
|
||||
<path
|
||||
style="display:inline;opacity:1;fill:none;fill-rule:evenodd;stroke:#ff0091;stroke-width:14.81098843;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 70.59609,858.52638 204.53085,0"
|
||||
id="path4563"
|
||||
inkscape:connector-curvature="0"
|
||||
inkscape:export-xdpi="131.66"
|
||||
inkscape:export-ydpi="131.66" />
|
||||
</g>
|
||||
<g
|
||||
inkscape:label="Cup"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
style="display:inline;opacity:1"
|
||||
transform="translate(0,-702.36218)">
|
||||
<path
|
||||
style="fill:#ffffff;fill-opacity:0;fill-rule:evenodd;stroke:#000000;stroke-width:5.91787386;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 73.55229,822.45472 a 102.73197,108.76564 0 0 0 -2.94267,25.31716 102.73197,108.76564 0 0 0 43.24732,88.50982 l 119.05374,0 a 102.73197,108.76564 0 0 0 43.16206,-88.50982 102.73197,108.76564 0 0 0 -2.94268,-25.31716 l -199.57777,0 z"
|
||||
id="path4153"
|
||||
inkscape:connector-curvature="0"
|
||||
inkscape:export-xdpi="131.66"
|
||||
inkscape:export-ydpi="131.66" />
|
||||
</g>
|
||||
<g
|
||||
inkscape:groupmode="layer"
|
||||
id="layer6"
|
||||
inkscape:label="Cup shadow"
|
||||
style="display:inline;opacity:0.5"
|
||||
transform="translate(0,-702.36218)">
|
||||
<path
|
||||
style="display:inline;opacity:1;fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.15201294;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 229.88609,825.2888 c 0.99255,6.66979 1.50201,13.4579 1.52093,20.26523 -2.67946,35.126 -18.42432,74.15524 -43.28735,92.4571 l 43.65106,0 c 25.53331,-17.11518 42.71634,-49.1335 42.71656,-85.81006 -0.0285,-9.1041 -1.13876,-18.16015 -3.2994,-26.91227 l -41.3018,0 z"
|
||||
id="path4503"
|
||||
inkscape:connector-curvature="0"
|
||||
inkscape:export-xdpi="131.66"
|
||||
inkscape:export-ydpi="131.66" />
|
||||
</g>
|
||||
<g
|
||||
inkscape:groupmode="layer"
|
||||
id="layer11"
|
||||
inkscape:label="TEABG"
|
||||
style="display:inline"
|
||||
transform="translate(0,-702.36218)">
|
||||
<path
|
||||
style="fill:#ff0091;fill-opacity:1;stroke:#ff0091;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 135.9838,876.47616 0.0863,7.89912 7.0521,-0.0417 -0.35377,33.95529 -34.8877,0 0.35377,-33.95529 0,0 6.40592,-0.13704 0.0348,-7.68895 z"
|
||||
id="path4337-3-2"
|
||||
inkscape:connector-curvature="0"
|
||||
sodipodi:nodetypes="cccccccccc"
|
||||
inkscape:export-xdpi="131.66"
|
||||
inkscape:export-ydpi="131.66" />
|
||||
</g>
|
||||
<g
|
||||
inkscape:groupmode="layer"
|
||||
id="layer2"
|
||||
inkscape:label="Teabag"
|
||||
style="display:inline"
|
||||
transform="translate(0,-702.36218)">
|
||||
<path
|
||||
style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:4;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 135.9827,876.27068 0.0863,7.89912 7.0521,-0.0417 -0.35377,33.95529 -34.8877,0 0.35377,-33.95529 0,0 6.40592,-0.13704 0.0348,-7.68895 z"
|
||||
id="path4337"
|
||||
inkscape:connector-curvature="0"
|
||||
sodipodi:nodetypes="cccccccccc"
|
||||
inkscape:export-xdpi="131.66"
|
||||
inkscape:export-ydpi="131.66" />
|
||||
<path
|
||||
style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 125.52076,820.90433 0,56.36841"
|
||||
id="path4345"
|
||||
inkscape:connector-curvature="0"
|
||||
inkscape:export-xdpi="131.66"
|
||||
inkscape:export-ydpi="131.66" />
|
||||
</g>
|
||||
<g
|
||||
inkscape:groupmode="layer"
|
||||
id="layer3"
|
||||
inkscape:label="Cupthing"
|
||||
style="display:inline"
|
||||
transform="translate(0,-702.36218)">
|
||||
<path
|
||||
style="opacity:1;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:7.24861383;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 34.25124,936.10396 c 3.55199,2.75175 32.64282,27.01592 139.47053,27.01592 104.07689,0 134.81109,-23.30106 139.04351,-27.01592 z"
|
||||
id="path4168"
|
||||
inkscape:connector-curvature="0"
|
||||
sodipodi:nodetypes="cccc"
|
||||
inkscape:export-xdpi="131.66"
|
||||
inkscape:export-ydpi="131.66" />
|
||||
</g>
|
||||
<g
|
||||
inkscape:groupmode="layer"
|
||||
id="layer7"
|
||||
inkscape:label="Cupthing shadow"
|
||||
style="display:inline;opacity:0.5"
|
||||
transform="translate(0,-702.36218)">
|
||||
<path
|
||||
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.20810235px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
d="m 192.48897,936.68269 c 3.70248,8.95594 4.29401,14.62365 0.69994,26.45656 44.77941,-1.41734 109.60535,-21.93842 118.02956,-26.45656 z"
|
||||
id="path4523"
|
||||
inkscape:connector-curvature="0"
|
||||
sodipodi:nodetypes="cccc"
|
||||
inkscape:export-xdpi="131.66"
|
||||
inkscape:export-ydpi="131.66" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 11 KiB |
245
img/teascade_cropped.svg
Normal file
245
img/teascade_cropped.svg
Normal file
@ -0,0 +1,245 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
width="301"
|
||||
height="154"
|
||||
viewBox="0 0 301.00001 154"
|
||||
id="svg2"
|
||||
version="1.1"
|
||||
inkscape:version="0.91 r"
|
||||
sodipodi:docname="teascade_cropped.svg"
|
||||
inkscape:export-filename="D:\images\teascade_finished.png"
|
||||
inkscape:export-xdpi="300"
|
||||
inkscape:export-ydpi="300">
|
||||
<defs
|
||||
id="defs4">
|
||||
<linearGradient
|
||||
id="linearGradient4632"
|
||||
osb:paint="solid">
|
||||
<stop
|
||||
style="stop-color:#9a0000;stop-opacity:1;"
|
||||
offset="0"
|
||||
id="stop4634" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<sodipodi:namedview
|
||||
id="base"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:zoom="1.28"
|
||||
inkscape:cx="263.47344"
|
||||
inkscape:cy="141.06054"
|
||||
inkscape:document-units="px"
|
||||
inkscape:current-layer="layer1"
|
||||
showgrid="false"
|
||||
inkscape:window-width="1366"
|
||||
inkscape:window-height="713"
|
||||
inkscape:window-x="-2"
|
||||
inkscape:window-y="-3"
|
||||
inkscape:window-maximized="1"
|
||||
units="px" />
|
||||
<metadata
|
||||
id="metadata7">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title></dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
inkscape:groupmode="layer"
|
||||
id="layer13"
|
||||
inkscape:label="bg"
|
||||
transform="translate(0,-898.36218)">
|
||||
<rect
|
||||
style="display:inline;opacity:1;fill:#ffffff;fill-opacity:0;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
id="rect3358"
|
||||
width="350"
|
||||
height="350"
|
||||
x="0"
|
||||
y="702.36218"
|
||||
inkscape:export-xdpi="131.66"
|
||||
inkscape:export-ydpi="131.66" />
|
||||
</g>
|
||||
<g
|
||||
inkscape:groupmode="layer"
|
||||
id="layer9"
|
||||
inkscape:label="Background"
|
||||
transform="translate(0,-898.36218)" />
|
||||
<g
|
||||
inkscape:groupmode="layer"
|
||||
id="layer10"
|
||||
inkscape:label="CUPBG"
|
||||
transform="translate(0,-898.36218)">
|
||||
<path
|
||||
style="opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#ffffff;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 270.61513,900.45518 c -7.71771,0 -15.05662,3.12867 -20.39843,8.59179 a 102.73197,108.76564 0 0 0 -0.35352,-1.65429 l -199.57813,0 a 102.73197,108.76564 0 0 0 -2.94335,25.3164 102.73197,108.76564 0 0 0 42.77343,88.13282 l -79.8125,0 c 3.55199,2.7518 32.643,27.0156 139.47071,27.0156 104.07689,0 134.81055,-23.3007 139.04297,-27.0156 l -78.72266,0 a 102.73197,108.76564 0 0 0 38.39844,-57.48438 c 5.73529,-4.34285 12.00621,-5.55359 22.12304,-5.75195 15.76754,-0.30917 28.55469,-12.79235 28.55469,-28.57422 0,-15.78188 -12.78449,-28.57617 -28.55469,-28.57617 z m -0.53125,13.16601 c 1.91577,-0.0672 3.79607,0.13402 5.55078,0.68555 9.86958,4.01652 12.99204,13.55999 6.89063,23.27344 -5.7578,9.15984 -20.33613,8.80029 -30.48047,7.10742 a 102.73197,108.76564 0 0 0 0.75977,-11.97852 102.73197,108.76564 0 0 0 -0.67578,-11.62109 c 3.46875,-3.38042 10.93568,-7.22061 17.95507,-7.4668 z"
|
||||
id="path4168-7"
|
||||
inkscape:connector-curvature="0"
|
||||
inkscape:export-xdpi="131.66"
|
||||
inkscape:export-ydpi="131.66" />
|
||||
</g>
|
||||
<g
|
||||
inkscape:groupmode="layer"
|
||||
id="layer5"
|
||||
inkscape:label="Holder Shadow"
|
||||
style="display:inline;opacity:0.5"
|
||||
transform="translate(0,-898.36218)">
|
||||
<path
|
||||
style="display:inline;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 262.10167,901.89325 c 19.63437,-6.39823 31.75467,15.39909 32.42133,24.26142 0.80176,10.54993 -1.32383,29.50244 -29.52366,31.62434 20.74516,0.70509 34.55494,-17.23211 34.91462,-29.06407 0,-14.67066 -15.74857,-33.31254 -37.81229,-26.82169 z m -13.54122,61.68498 c -0.57713,0.0483 -1.15599,0.0893 -1.73633,0.12304 l -0.0605,1.42969 c 0.59658,-0.55928 1.19513,-1.06774 1.79688,-1.55273 z"
|
||||
id="path4231-8"
|
||||
inkscape:connector-curvature="0"
|
||||
sodipodi:nodetypes="cccccccccc"
|
||||
inkscape:export-xdpi="131.66"
|
||||
inkscape:export-ydpi="131.66" />
|
||||
</g>
|
||||
<g
|
||||
inkscape:groupmode="layer"
|
||||
id="layer4"
|
||||
inkscape:label="Holder"
|
||||
style="display:inline"
|
||||
transform="translate(0,-898.36218)">
|
||||
<path
|
||||
style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:2.80100012;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 248.69117,911.1168 c 5.41857,-6.78574 13.62715,-10.73664 22.30695,-10.73664 15.7702,0 28.55447,12.79373 28.55447,28.57561 l 0,0 c 0,15.78187 -12.78693,28.26645 -28.55447,28.57562 -11.58346,0.22712 -18.12685,1.77765 -24.59542,7.84181"
|
||||
id="path4231"
|
||||
inkscape:connector-curvature="0"
|
||||
sodipodi:nodetypes="csccsc"
|
||||
inkscape:export-xdpi="131.66"
|
||||
inkscape:export-ydpi="131.66" />
|
||||
<path
|
||||
style="display:inline;fill:none;fill-opacity:1;stroke:#000000;stroke-width:2.80100012;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 250.80553,944.87101 c 10.15083,1.89136 25.91432,2.74664 31.95205,-6.85853 6.10141,-9.71345 2.97861,-19.25754 -6.89097,-23.27406 -9.35845,-2.94147 -22.30465,4.09118 -25.00302,8.56883"
|
||||
id="path4295"
|
||||
inkscape:connector-curvature="0"
|
||||
sodipodi:nodetypes="cccc"
|
||||
inkscape:export-xdpi="131.66"
|
||||
inkscape:export-ydpi="131.66" />
|
||||
</g>
|
||||
<g
|
||||
inkscape:groupmode="layer"
|
||||
id="layer8"
|
||||
inkscape:label="Cup stripe"
|
||||
style="display:inline"
|
||||
transform="translate(0,-898.36218)">
|
||||
<path
|
||||
style="display:inline;opacity:1;fill:none;fill-rule:evenodd;stroke:#ff0091;stroke-width:14.81098843;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 46.94109,944.14437 204.53085,0"
|
||||
id="path4563"
|
||||
inkscape:connector-curvature="0"
|
||||
inkscape:export-xdpi="131.66"
|
||||
inkscape:export-ydpi="131.66" />
|
||||
</g>
|
||||
<g
|
||||
inkscape:label="Cup"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
style="display:inline;opacity:1"
|
||||
transform="translate(0,-898.36218)">
|
||||
<path
|
||||
style="fill:#ffffff;fill-opacity:0;fill-rule:evenodd;stroke:#000000;stroke-width:5.91787386;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 49.89729,908.07271 a 102.73197,108.76564 0 0 0 -2.94267,25.31716 102.73197,108.76564 0 0 0 43.24732,88.50983 l 119.05374,0 a 102.73197,108.76564 0 0 0 43.16206,-88.50983 102.73197,108.76564 0 0 0 -2.94268,-25.31716 l -199.57777,0 z"
|
||||
id="path4153"
|
||||
inkscape:connector-curvature="0"
|
||||
inkscape:export-xdpi="131.66"
|
||||
inkscape:export-ydpi="131.66" />
|
||||
</g>
|
||||
<g
|
||||
inkscape:groupmode="layer"
|
||||
id="layer6"
|
||||
inkscape:label="Cup shadow"
|
||||
style="display:inline;opacity:0.5"
|
||||
transform="translate(0,-898.36218)">
|
||||
<path
|
||||
style="display:inline;opacity:1;fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.15201294;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 206.23109,910.90679 c 0.99255,6.66979 1.50201,13.4579 1.52093,20.26523 -2.67946,35.126 -18.42432,74.15528 -43.28735,92.45708 l 43.65106,0 c 25.53331,-17.1152 42.71634,-49.13348 42.71656,-85.81004 -0.0285,-9.1041 -1.13876,-18.16015 -3.2994,-26.91227 l -41.3018,0 z"
|
||||
id="path4503"
|
||||
inkscape:connector-curvature="0"
|
||||
inkscape:export-xdpi="131.66"
|
||||
inkscape:export-ydpi="131.66" />
|
||||
</g>
|
||||
<g
|
||||
inkscape:groupmode="layer"
|
||||
id="layer11"
|
||||
inkscape:label="TEABG"
|
||||
style="display:inline"
|
||||
transform="translate(0,-898.36218)">
|
||||
<path
|
||||
style="fill:#ff0091;fill-opacity:1;stroke:#ff0091;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 112.3288,962.09415 0.0863,7.89912 7.0521,-0.0417 -0.35377,33.95533 -34.8877,0 0.35377,-33.95533 0,0 6.40592,-0.13704 0.0348,-7.68895 z"
|
||||
id="path4337-3-2"
|
||||
inkscape:connector-curvature="0"
|
||||
sodipodi:nodetypes="cccccccccc"
|
||||
inkscape:export-xdpi="131.66"
|
||||
inkscape:export-ydpi="131.66" />
|
||||
</g>
|
||||
<g
|
||||
inkscape:groupmode="layer"
|
||||
id="layer2"
|
||||
inkscape:label="Teabag"
|
||||
style="display:inline"
|
||||
transform="translate(0,-898.36218)">
|
||||
<path
|
||||
style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:4;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 112.3277,961.88867 0.0863,7.89912 7.0521,-0.0417 -0.35377,33.95531 -34.8877,0 0.35377,-33.95531 0,0 6.40592,-0.13704 0.0348,-7.68895 z"
|
||||
id="path4337"
|
||||
inkscape:connector-curvature="0"
|
||||
sodipodi:nodetypes="cccccccccc"
|
||||
inkscape:export-xdpi="131.66"
|
||||
inkscape:export-ydpi="131.66" />
|
||||
<path
|
||||
style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 101.86576,906.52232 0,56.36841"
|
||||
id="path4345"
|
||||
inkscape:connector-curvature="0"
|
||||
inkscape:export-xdpi="131.66"
|
||||
inkscape:export-ydpi="131.66" />
|
||||
</g>
|
||||
<g
|
||||
inkscape:groupmode="layer"
|
||||
id="layer3"
|
||||
inkscape:label="Cupthing"
|
||||
style="display:inline"
|
||||
transform="translate(0,-898.36218)">
|
||||
<path
|
||||
style="opacity:1;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:7.24861383;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 10.59624,1021.722 c 3.55199,2.7517 32.64282,27.0159 139.47053,27.0159 104.07689,0 134.81109,-23.3011 139.04351,-27.0159 z"
|
||||
id="path4168"
|
||||
inkscape:connector-curvature="0"
|
||||
sodipodi:nodetypes="cccc"
|
||||
inkscape:export-xdpi="131.66"
|
||||
inkscape:export-ydpi="131.66" />
|
||||
</g>
|
||||
<g
|
||||
inkscape:groupmode="layer"
|
||||
id="layer7"
|
||||
inkscape:label="Cupthing shadow"
|
||||
style="display:inline;opacity:0.5"
|
||||
transform="translate(0,-898.36218)">
|
||||
<path
|
||||
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.20810235px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
d="m 168.83397,1022.3007 c 3.70248,8.9559 4.29401,14.6236 0.69994,26.4565 44.77941,-1.4173 109.60535,-21.9384 118.02956,-26.4565 z"
|
||||
id="path4523"
|
||||
inkscape:connector-curvature="0"
|
||||
sodipodi:nodetypes="cccc"
|
||||
inkscape:export-xdpi="131.66"
|
||||
inkscape:export-ydpi="131.66" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 11 KiB |
35
index.html
35
index.html
@ -1 +1,34 @@
|
||||
<html> <body> Hello! </body> </html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="css/main.css">
|
||||
<script src="js/main.js"></script>
|
||||
</head>
|
||||
<body onload="main('about')">
|
||||
<div class="cont">
|
||||
<div class="teacup">
|
||||
<img src="img/teascade_cropped.svg"></img>
|
||||
</div>
|
||||
|
||||
<div class="stuffarea">
|
||||
<ul class="navbar">
|
||||
<a href="#" id="about-link"><li><div class="button">About</div></li></a>
|
||||
<a href="games" id="games-link"><li><div class="button">Games</div></li></a>
|
||||
<a href="blog" id="blog-link"><li><div class="button">Blog</div></li></a>
|
||||
</ul>
|
||||
<div id="about">
|
||||
<h1>Teascade</h1>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean feugiat hendrerit placerat. Aliquam a dictum arcu, id iaculis metus. Phasellus aliquet suscipit ipsum, ut sollicitudin metus ultrices posuere. Quisque ut leo urna. Aenean ut justo rhoncus, sodales felis ut, ultricies mauris. Nam sed porttitor dui. Aliquam dui lectus, condimentum ac libero non, maximus imperdiet ipsum. Vivamus vehicula nulla arcu, in cursus metus molestie sed. Cras vitae leo libero. Donec in mauris vel mi tincidunt interdum. Aenean pulvinar dolor et libero volutpat varius. Vivamus id ex ut dolor lacinia volutpat a et lectus. Praesent sagittis luctus imperdiet. In mollis ante hendrerit nisl condimentum, vel varius nulla cursus. Nullam iaculis ut erat vitae mattis. </p>
|
||||
</div>
|
||||
<div id="games" class="hiddenarea">
|
||||
<h1>Games</h1>
|
||||
<p>Games shall be listed here!</p>
|
||||
</div>
|
||||
<div id="blog" class="hiddenarea">
|
||||
<h1>Blog</h1>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean feugiat hendrerit placerat. Aliquam a dictum arcu, id iaculis metus. Phasellus aliquet suscipit ipsum, ut sollicitudin metus ultrices posuere. Quisque ut leo urna. Aenean ut justo rhoncus, sodales felis ut, ultricies mauris. Nam sed porttitor dui. Aliquam dui lectus, condimentum ac libero non, maximus imperdiet ipsum. Vivamus vehicula nulla arcu, in cursus metus molestie sed. Cras vitae leo libero. Donec in mauris vel mi tincidunt interdum. Aenean pulvinar dolor et libero volutpat varius. Vivamus id ex ut dolor lacinia volutpat a et lectus. Praesent sagittis luctus imperdiet. In mollis ante hendrerit nisl condimentum, vel varius nulla cursus. Nullam iaculis ut erat vitae mattis. </p>
|
||||
<p>Some other contact info and useless garbage about me.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
35
js/main.js
Normal file
35
js/main.js
Normal file
@ -0,0 +1,35 @@
|
||||
function main(page) {
|
||||
window.currPage = page;
|
||||
window.currOpacity = 1;
|
||||
document.getElementById("about-link").attributes.removeNamedItem("href");
|
||||
document.getElementById("games-link").attributes.removeNamedItem("href");
|
||||
document.getElementById("blog-link").attributes.removeNamedItem("href");
|
||||
document.getElementById("about-link").onclick = function () { return openPage("about"); };
|
||||
document.getElementById("games-link").onclick = function () { return openPage("games"); };
|
||||
document.getElementById("blog-link").onclick = function () { return openPage("blog"); };
|
||||
}
|
||||
function openPage(page) {
|
||||
if (page == window.currPage) {
|
||||
return;
|
||||
}
|
||||
slideOpacity(function () {
|
||||
document.getElementById(window.currPage).className = "hiddenarea";
|
||||
window.currPage = page;
|
||||
document.getElementById(page).style.opacity = "0";
|
||||
document.getElementById(page).className = "";
|
||||
window.history.pushState(page, page, "/" + page + "/");
|
||||
slideOpacity(function () {
|
||||
}, 1.5);
|
||||
}, -1.5);
|
||||
}
|
||||
function slideOpacity(callback, step) {
|
||||
var currElem = document.getElementById(window.currPage);
|
||||
var id = setInterval(function () {
|
||||
window.currOpacity += 0.02 * step;
|
||||
currElem.style.opacity = "" + window.currOpacity;
|
||||
if ((window.currOpacity <= 0 && step < 0) || (window.currOpacity >= 1 && step > 0)) {
|
||||
clearInterval(id);
|
||||
callback();
|
||||
}
|
||||
}, 2);
|
||||
}
|
||||
134
scss/main.scss
Normal file
134
scss/main.scss
Normal file
@ -0,0 +1,134 @@
|
||||
$pink: #ff0091;
|
||||
$regular: #fff;
|
||||
$dark: #1f1f1f;
|
||||
|
||||
body, html {
|
||||
background-color: $dark;
|
||||
font-family: helvetica, sans-serif;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.cont {
|
||||
display: block !important;
|
||||
width: 100%;
|
||||
|
||||
.teacup {
|
||||
height: auto !important;
|
||||
|
||||
img {
|
||||
margin-right: 20%;
|
||||
width: 40% !important;
|
||||
height: auto !important;
|
||||
padding-top: 1em;
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.stuffarea {
|
||||
margin-left: 10%;
|
||||
padding-right: 0 !important;
|
||||
width: 80% !important;
|
||||
|
||||
ul.navbar {
|
||||
padding: 0 !important;
|
||||
padding-left: 0.5em !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cont {
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.teacup {
|
||||
flex: auto;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
display:flex;
|
||||
justify-content:center;
|
||||
align-items:center;
|
||||
background-color: $dark - #040404;
|
||||
|
||||
img {
|
||||
width: 75%;
|
||||
max-height: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.stuffarea {
|
||||
width: 45%;
|
||||
height: 100%;
|
||||
padding-left: 5%;
|
||||
padding-right: 5%;
|
||||
|
||||
.hiddenarea {
|
||||
visibility: hidden;
|
||||
height: 0;
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
div {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
color: $pink;
|
||||
}
|
||||
|
||||
p {
|
||||
color: $regular;
|
||||
}
|
||||
|
||||
ul.navbar {
|
||||
|
||||
padding-left: 1em;
|
||||
list-style: none;
|
||||
white-space: nowrap;
|
||||
padding-bottom: 1em;
|
||||
|
||||
a:focus {
|
||||
outline: none;
|
||||
font-style: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
padding: 0.5em;
|
||||
background-color: $dark;
|
||||
margin: -3px;
|
||||
transition: 0.2s;
|
||||
color: $regular - #222;
|
||||
border-right: 2px solid $dark + #111;
|
||||
transform: skewX(-20deg);
|
||||
|
||||
.button {
|
||||
transform: skewX(20deg);
|
||||
}
|
||||
}
|
||||
li:first-of-type {
|
||||
border-left: 2px solid $dark + #111;
|
||||
}
|
||||
li:hover {
|
||||
background-color: $dark + #111;
|
||||
transition: 0.2s;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
46
ts/main.ts
Normal file
46
ts/main.ts
Normal file
@ -0,0 +1,46 @@
|
||||
|
||||
interface Window {
|
||||
currPage: string;
|
||||
currOpacity: number;
|
||||
}
|
||||
|
||||
|
||||
function main(page: string) {
|
||||
window.currPage = page;
|
||||
window.currOpacity = 1;
|
||||
|
||||
document.getElementById("about-link").attributes.removeNamedItem("href");
|
||||
document.getElementById("games-link").attributes.removeNamedItem("href");
|
||||
document.getElementById("blog-link").attributes.removeNamedItem("href");
|
||||
|
||||
document.getElementById("about-link").onclick = () => openPage("about");
|
||||
document.getElementById("games-link").onclick = () => openPage("games");
|
||||
document.getElementById("blog-link").onclick = () => openPage("blog");
|
||||
}
|
||||
|
||||
function openPage(page: string) {
|
||||
if (page == window.currPage) { return; }
|
||||
|
||||
slideOpacity(() => {
|
||||
document.getElementById(window.currPage).className = "hiddenarea";
|
||||
window.currPage = page;
|
||||
document.getElementById(page).style.opacity = "0";
|
||||
document.getElementById(page).className = "";
|
||||
window.history.pushState(page, page, `/${page}/`);
|
||||
slideOpacity(() => {
|
||||
|
||||
}, 1.5);
|
||||
}, -1.5);
|
||||
}
|
||||
|
||||
function slideOpacity(callback: () => void, step: number) {
|
||||
let currElem = document.getElementById(window.currPage);
|
||||
let id = setInterval(() => {
|
||||
window.currOpacity += 0.02 * step;
|
||||
currElem.style.opacity = "" + window.currOpacity;
|
||||
if ((window.currOpacity <= 0 && step < 0) || (window.currOpacity >= 1 && step > 0)) {
|
||||
clearInterval(id);
|
||||
callback();
|
||||
}
|
||||
}, 2);
|
||||
}
|
||||
13
tsconfig.json
Normal file
13
tsconfig.json
Normal file
@ -0,0 +1,13 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"rootDir": "ts",
|
||||
"outDir": "js",
|
||||
"module": "commonjs",
|
||||
"target": "es5",
|
||||
"noImplicitAny": false,
|
||||
"sourceMap": false
|
||||
},
|
||||
"exclude": [
|
||||
"node_modules"
|
||||
]
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user