mirror of
https://github.com/Fluffy-Bean/image-gallery.git
synced 2024-12-28 02:16:17 +00:00
Sass progress
This commit is contained in:
parent
4007f47e49
commit
302fe6c15e
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -1 +1,2 @@
|
|||
images/
|
||||
css/main.css.map
|
||||
203
css/main.css
203
css/main.css
|
|
@ -25,8 +25,9 @@
|
|||
}
|
||||
|
||||
nav {
|
||||
width: calc(100% - 2.4rem);
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.5rem;
|
||||
width: calc(100% - 1.4rem);
|
||||
background-color: #151515;
|
||||
color: #E8E3E3;
|
||||
border-radius: 0;
|
||||
|
|
@ -46,6 +47,10 @@ nav {
|
|||
align-items: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
nav > * {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
nav p {
|
||||
margin: 0;
|
||||
vertical-align: middle;
|
||||
|
|
@ -55,6 +60,9 @@ nav hr {
|
|||
padding: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
nav .btn {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.nav-name {
|
||||
display: flex;
|
||||
|
|
@ -72,6 +80,7 @@ nav hr {
|
|||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
margin: 0;
|
||||
font-family: "Secular One", sans-serif;
|
||||
width: auto;
|
||||
}
|
||||
|
|
@ -93,7 +102,7 @@ nav hr {
|
|||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: #151515;
|
||||
background-color: rgba(21, 21, 21, 0.7333333333);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
backdrop-filter: blur(8px);
|
||||
border: none;
|
||||
|
|
@ -109,7 +118,7 @@ nav hr {
|
|||
text-align: left !important;
|
||||
}
|
||||
footer {
|
||||
margin-bottom: calc(5rem + 3px) !important;
|
||||
margin-bottom: 4rem !important;
|
||||
}
|
||||
#back-to-top {
|
||||
bottom: 5rem !important;
|
||||
|
|
@ -121,13 +130,19 @@ nav hr {
|
|||
|-------------------------------------------------------------
|
||||
*/
|
||||
.info-text {
|
||||
margin: 1rem 0;
|
||||
margin: 1rem 0 1rem 0.5rem;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
}
|
||||
.info-text h1, .info-text h2, .info-text h3, .info-text h4, .info-text h5 {
|
||||
font-family: "Lexend Deca", sans-serif;
|
||||
}
|
||||
.info-text p, .info-text a, .info-text button, .info-text input {
|
||||
font-family: "Secular One", sans-serif;
|
||||
}
|
||||
.info-text h1 {
|
||||
font-family: "Lexend Deca", sans-serif;
|
||||
margin-top: 0.5rem;
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.info-text p {
|
||||
|
|
@ -137,6 +152,7 @@ nav hr {
|
|||
}
|
||||
|
||||
.gallery-root {
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.25rem;
|
||||
background-color: #151515;
|
||||
color: #E8E3E3;
|
||||
|
|
@ -199,7 +215,7 @@ nav hr {
|
|||
max-height: 69vh;
|
||||
height: auto;
|
||||
display: flex;
|
||||
background-color: #151515;
|
||||
background-color: rgba(21, 21, 21, 0.7333333333);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
backdrop-filter: blur(8px);
|
||||
border-radius: 0;
|
||||
|
|
@ -208,7 +224,7 @@ nav hr {
|
|||
|
||||
@media (max-width: 600px) {
|
||||
.image-container {
|
||||
max-height: 42vh !important;
|
||||
max-height: 42vh;
|
||||
}
|
||||
}
|
||||
.image {
|
||||
|
|
@ -220,9 +236,130 @@ nav hr {
|
|||
border-radius: 0;
|
||||
}
|
||||
|
||||
footer {
|
||||
width: calc(100% - 2.4rem);
|
||||
/*
|
||||
|-------------------------------------------------------------
|
||||
| DESCRIPTION
|
||||
|-------------------------------------------------------------
|
||||
*/
|
||||
.image-description {
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.5rem;
|
||||
width: calc(100% - 1.4rem);
|
||||
background-color: #151515;
|
||||
color: #E8E3E3;
|
||||
border-radius: 0;
|
||||
border: 0.2rem solid #8C977D;
|
||||
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333);
|
||||
}
|
||||
.image-description > * {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.image-description h1, .image-description h2, .image-description h3, .image-description h4, .image-description h5 {
|
||||
font-family: "Lexend Deca", sans-serif;
|
||||
}
|
||||
.image-description p, .image-description a, .image-description button, .image-description input {
|
||||
font-family: "Secular One", sans-serif;
|
||||
}
|
||||
|
||||
/*
|
||||
|-------------------------------------------------------------
|
||||
| DETAILS
|
||||
|-------------------------------------------------------------
|
||||
*/
|
||||
.image-detail {
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.5rem;
|
||||
width: calc(100% - 1.4rem);
|
||||
background-color: #151515;
|
||||
color: #E8E3E3;
|
||||
border-radius: 0;
|
||||
border: 0.2rem solid #8C977D;
|
||||
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333);
|
||||
}
|
||||
.image-detail > * {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.image-detail h1, .image-detail h2, .image-detail h3, .image-detail h4, .image-detail h5 {
|
||||
font-family: "Lexend Deca", sans-serif;
|
||||
}
|
||||
.image-detail p, .image-detail a, .image-detail button, .image-detail input {
|
||||
font-family: "Secular One", sans-serif;
|
||||
}
|
||||
|
||||
/*
|
||||
|-------------------------------------------------------------
|
||||
| TAGS
|
||||
|-------------------------------------------------------------
|
||||
*/
|
||||
.tags-root {
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.5rem;
|
||||
width: calc(100% - 1.4rem);
|
||||
background-color: #151515;
|
||||
color: #E8E3E3;
|
||||
border-radius: 0;
|
||||
border: 0.2rem solid #8C977D;
|
||||
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333);
|
||||
}
|
||||
.tags-root > * {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.tags-root h1, .tags-root h2, .tags-root h3, .tags-root h4, .tags-root h5 {
|
||||
font-family: "Lexend Deca", sans-serif;
|
||||
}
|
||||
.tags-root p, .tags-root a, .tags-root button, .tags-root input {
|
||||
font-family: "Secular One", sans-serif;
|
||||
}
|
||||
|
||||
.tags {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: auto;
|
||||
}
|
||||
|
||||
.tag {
|
||||
margin: 0.25rem;
|
||||
padding: 0.5rem;
|
||||
display: block;
|
||||
background-color: #8C977D;
|
||||
border-radius: 0;
|
||||
font-family: "Secular One", sans-serif;
|
||||
}
|
||||
|
||||
/*
|
||||
|-------------------------------------------------------------
|
||||
| DANGER ZONE
|
||||
|-------------------------------------------------------------
|
||||
*/
|
||||
.danger-zone {
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.5rem;
|
||||
width: calc(100% - 1.4rem);
|
||||
background-color: #151515;
|
||||
color: #E8E3E3;
|
||||
border-radius: 0;
|
||||
border: 0.2rem solid #B66467;
|
||||
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333);
|
||||
}
|
||||
.danger-zone > * {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.danger-zone h1, .danger-zone h2, .danger-zone h3, .danger-zone h4, .danger-zone h5 {
|
||||
font-family: "Lexend Deca", sans-serif;
|
||||
}
|
||||
.danger-zone p, .danger-zone a, .danger-zone button, .danger-zone input {
|
||||
font-family: "Secular One", sans-serif;
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.5rem;
|
||||
width: calc(100% - 1.4rem);
|
||||
background-color: #151515;
|
||||
color: #E8E3E3;
|
||||
border-radius: 0;
|
||||
|
|
@ -232,10 +369,14 @@ footer {
|
|||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
margin: 0 auto !important;
|
||||
margin: 0 auto;
|
||||
bottom: 0;
|
||||
width: calc(100% - 1.4rem);
|
||||
}
|
||||
footer > * {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
footer a {
|
||||
margin: 0.5rem;
|
||||
text-decoration: none;
|
||||
|
|
@ -287,10 +428,14 @@ body * {
|
|||
*/
|
||||
.btn {
|
||||
padding: 0.5rem;
|
||||
width: 100%;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
font-family: "Secular One", sans-serif;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
transition: outline 0.1s cubic-bezier(0.19, 1, 0.22, 1);
|
||||
|
|
@ -319,44 +464,34 @@ body * {
|
|||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
.btn a {
|
||||
margin-bottom: 0;
|
||||
text-align: center;
|
||||
|
||||
.btn-good {
|
||||
background-color: #8C977D;
|
||||
}
|
||||
|
||||
.btn-bad {
|
||||
background-color: #B66467;
|
||||
}
|
||||
|
||||
.btn-neutral {
|
||||
background-color: #151515;
|
||||
}
|
||||
|
||||
/*
|
||||
|-------------------------------------------------------------
|
||||
| FORM
|
||||
| FORM SIZING
|
||||
|-------------------------------------------------------------
|
||||
*/
|
||||
form {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
form * {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
/*
|
||||
|-------------------------------------------------------------
|
||||
| IMAGES
|
||||
| SVG
|
||||
|-------------------------------------------------------------
|
||||
*/
|
||||
.image-container {
|
||||
width: 100%;
|
||||
max-height: 69vh;
|
||||
height: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
background-color: rgba(21, 21, 21, 0.7333333333);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
backdrop-filter: blur(8px);
|
||||
border-radius: 0;
|
||||
transition: max-height 0.15s cubic-bezier(0.19, 1, 0.22, 1);
|
||||
}
|
||||
|
||||
.svg {
|
||||
margin: 0 0.2rem 0.1rem 0;
|
||||
width: 19px;
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
{"version":3,"sources":["main.scss","scss/_variables.scss","main.css","scss/_navigation.scss","scss/_mixin.scss","scss/_body.scss","scss/_footer.scss"],"names":[],"mappings":"AAAA;;;;;;;;CAAA;ACwBA;EACI,eAAA;EACA,eAAA;EACA,eAAA;EACA,eAAA;EAEA,YAAA;EACA,kBAAA;EAEA,cAAA;EACA,iBAAA;EACA,gBAAA;EACA,gBAAA;EACA,gBAAA;EAEA,+BAAA;EACA,UAAA;EAEA,gBAAA;AClBJ;;ACxBA;ECCC,0BAAA;EAEA,eAAA;EAEA,yBHLI;EGKmB,cHFnB;EGIJ,gBHQK;EGNF,4BAAA;EAEH,sDHGQ;EGQR,aAAA;EAEA,mBAAA;EAEA,eAAA;EAEA,8BD1BkB;EAElB,mBAAA;EAEA,0BAAA;EAA4B,cAAA;EAE5B,wBAAA;EAAA,gBAAA;EAAkB,WAAA;EAClB,SAAA;EAEA,mBAAA;EACA,sBAAA;ADkCD;AChCC;EACC,SAAA;EACA,sBAAA;ADkCF;AChCC;EACC,qBAAA;EAAuB,UAAA;EACvB,UAAA;ADmCF;;AC/BA;ECFC,aAAA;EAEA,mBAAA;EAEA,eAAA;EAEA,6BDHkB;EAElB,SAAA;EAEA,sCFTa;EEWb,eAAA;EAEA,cAAA;ADiCD;;AC/BA;ECbC,aAAA;EAEA,mBAAA;EAEA,eAAA;EAEA,6BDQkB;EAElB,sCFjBW;EEmBX,WAAA;ADmCD;;AChCA;EACC;IACC,aAAA;EDmCA;ECjCD;IACC,WAAA;EDmCA;AACF;AChCA;EACC;IACC,SAAA;IAEA,wBAAA;IAEA,eAAA;IACA,SAAA;IAAW,SAAA;IAAW,OAAA;IAAS,QAAA;IAE/B,yBF7DG;IE8DH,kCAAA;YAAA,0BAAA;IAEA,YAAA;IACA,6BAAA;IACA,gBAAA;IAEA,mCAAA;YAAA,2BAAA;EDgCA;EC9BD;IACC,aAAA;EDgCA;EC7BD;IACC,2BAAA;ED+BA;EC7BD;IACC,0CAAA;ED+BA;EC7BD;IACC,uBAAA;ED+BA;AACF;AGjHA;;;;CAAA;AAKA;EACC,cAAA;EAAgB,UAAA;EAEhB,kBAAA;AHmHD;AGjHC;EACC,sCJSY;EIPZ,kBAAA;EACA,mBAAA;AHkHF;AGhHC;EACC,sCJIU;EIFV,aAAA;EACA,mBAAA;AHiHF;;AG7GA;EACC,gBAAA;EAEA,yBJ3BI;EI2BmB,cJxBnB;EI0BJ,aAAA;EACA,mBAAA;EACA,eAAA;EAEA,4BAAA;EAEA,gBJpBK;EIqBL,sDJtBQ;ACmIT;;AG1GA;EACC,eAAA;EAAiB,UAAA;EAEjB,YAAA;EAAc,gCAAA;EAEd,yBJ5CI;EI6CJ,gBJ9BK;EIgCL,kBAAA;EAEA,eAAA;EAEA,0DAAA;AH0GD;AGxGC;EACC,kCAAA;EACA,sDJzCO;EI2CP,YAAA;AHyGF;AGtGC;EACC,WAAA;EACA,cAAA;EACA,oBAAA;AHwGF;;AGpGA;EACC,SAAA;EAAW,UAAA;EAEX,WAAA;EAAa,YAAA;EAEb,MAAA;EAAQ,SAAA;EAAW,OAAA;EAAS,QAAA;EAE5B,kBAAA;EAEA,oBAAA;KAAA,iBAAA;EACA,0BAAA;KAAA,uBAAA;EAEA,gBJhEK;ACuKN;;AGpGA;;;;CAAA;AAKA;EACC,qBAAA;EAAuB,UAAA;EAEvB,WAAA;EACA,gBAAA;EAAkB,YAAA;EAElB,aAAA;EAEA,yBJ/FI;EIgGJ,kCAAA;UAAA,0BAAA;EAEA,gBJnFK;EIqFL,2DAAA;AHoGD;;AGjGA;EACC;IACC,2BAAA;EHoGA;AACF;AGjGA;EACC,cAAA;EAEA,eAAA;EAAiB,WAAA;EACjB,mBAAA;EAAqB,YAAA;EAErB,gBJpGK;ACuMN;;AItNA;EFCC,0BAAA;EAEA,eAAA;EAEA,yBHLI;EGKmB,cHFnB;EGIJ,gBHQK;EGNF,4BAAA;EAEH,sDHGQ;EGQR,aAAA;EAEA,mBAAA;EAEA,eAAA;EAEA,6BE1BkB;EAElB,yBAAA;EAEA,SAAA;EAEA,0BAAA;AJ+ND;AI7NC;EACC,cAAA;EAEA,qBAAA;EAEA,sCLMU;ACuNZ;AI3NE;EACC,cLXM;ACwOT;;AF/NA;;;;CAAA;AAKA;EACC,SAAA;EAAW,UAAA;EAEX,iBAAA;EAAmB,gBAAA;EAEnB,kBAAA;EAEA,yBC5BI;ED6BJ,yCAAA;EAEA,2BAAA;EACA,sBAAA;EACA,4BAAA;EACA,4BAAA;EAEA,uBAAA;EAEA,cAAA;AE8ND;;AF3NA;EACC,cAAA;EAAgB,aAAA;EAEhB,iBAAA;EAEA,8BAAA;EI/BA,aAAA;EAEA,sBAAA;EAEA,8BJ6BkB;EAElB,kBAAA;AE6ND;AF3NC;EACC,cClDG;AC+QL;;AFzNA;;;;CAAA;AAKA;EACC,eAAA;EAEA,cAAA;EAEA,eAAA;EACA,gBAAA;EAEA,qBAAA;EAEA,YAAA;EACA,gBC1DK;ED4DL,uDAAA;AEuND;AFrNC;EACC,0BAAA;EACA,cC5EG;ACmSL;AFpNC;EACC,sCAAA;EACA,eAAA;EAEA,qBAAA;EAEA,eAAA;EAEA,qBAAA;EAEA,yBClFM;EDoFN,YAAA;EACA,gBChFI;ACiSN;AF9NC;EACC,sCAAA;EACA,eAAA;EAEA,qBAAA;EAEA,eAAA;EAEA,qBAAA;EAEA,yBClFM;EDoFN,YAAA;EACA,gBChFI;ACiSN;AF9MC;EACC,gBAAA;EACA,kBAAA;AEgNF;;AF5MA;;;;CAAA;AAKA;EACC,WAAA;EACA,sBAAA;AE+MD;AF7MC;EACC,WAAA;EACA,sBAAA;AE+MF;;AF3MA;;;;CAAA;AAKA;EACI,WAAA;EACA,gBAAA;EAAkB,YAAA;EI/GrB,aAAA;EAEA,sBAAA;EAEA,8BJ6GqB;EAElB,gDCjIK;EDkIL,kCAAA;UAAA,0BAAA;EAEA,gBCtHE;EDwHF,2DAAA;AE6MJ;;AF1MA;EACC,yBAAA;EAEA,WAAA;EAAa,YAAA;EAEb,sBAAA;EAEA,eAAA;AE2MD;;AFxMA;;;;CAAA;AAKA;EACC,SAAA;EAAW,eAAA;EAEX,eAAA;EAAiB,WAAA;EACjB,cAAA;EAAgB,YAAA;EAEhB,0BAAA;KAAA,uBAAA;EAEA,yBCjKI;EDkKJ,kCAAA;UAAA,0BAAA;EAEA,kBAAA;EACA,sDCvJQ;EDyJR,sDAAA;AEyMD;AFvMC;EACC,6BAAA;AEyMF;AFtMC;EACC,SAAA;EAAW,UAAA;EACX,aAAA;EAAe,cAAA;EAEf,cAAA;EAEA,0BAAA;KAAA,uBAAA;AEwMF","file":"main.css"}
|
||||
{"version":3,"sources":["main.scss","scss/_variables.scss","main.css","scss/_navigation.scss","scss/_mixin.scss","scss/_body.scss","scss/_footer.scss"],"names":[],"mappings":"AAAA;;;;;;;;CAAA;ACwBA;EACI,eAAA;EACA,eAAA;EACA,eAAA;EACA,eAAA;EAEA,YAAA;EACA,kBAAA;EAEA,cAAA;EACA,iBAAA;EACA,gBAAA;EACA,gBAAA;EACA,gBAAA;EAEA,+BAAA;EACA,UAAA;EAEA,gBAAA;AClBJ;;ACxBA;ECCC,mBAAA;EAAqB,eAAA;EAErB,0BAAA;EAEA,yBHLI;EGKmB,cHFnB;EGIJ,gBHQK;EGPF,4BAAA;EAEH,sDHIQ;EGqBR,aAAA;EAEA,mBAAA;EAEA,eAAA;EAEA,8BDvCkB;EAElB,mBAAA;EAEA,0BAAA;EAA4B,cAAA;EAE5B,wBAAA;EAAA,gBAAA;EAAkB,WAAA;EAClB,SAAA;EAEA,mBAAA;EACA,sBAAA;ADmCD;AEnCC;EACC,aAAA;EAAe,qBAAA;AFsCjB;ACrCC;EACC,SAAA;EACA,sBAAA;ADuCF;ACrCC;EACC,qBAAA;EAAuB,UAAA;EACvB,UAAA;ADwCF;ACtCC;EACC,WAAA;ADwCF;;ACpCA;ECQC,aAAA;EAEA,mBAAA;EAEA,eAAA;EAEA,6BDbkB;EAElB,SAAA;EAEA,sCFZa;EEcb,eAAA;EAEA,cAAA;ADsCD;;ACpCA;ECHC,aAAA;EAEA,mBAAA;EAEA,eAAA;EAEA,6BDFkB;EAElB,SAAA;EAEA,sCFtBW;EEwBX,WAAA;ADuCD;;ACpCA;EACC;IACC,aAAA;EDuCA;ECrCD;IACC,WAAA;EDuCA;AACF;ACpCA;EACC;IACC,SAAA;IAEA,wBAAA;IAEA,eAAA;IACA,SAAA;IAAW,SAAA;IAAW,OAAA;IAAS,QAAA;IAE/B,gDFjEO;IEkEP,kCAAA;YAAA,0BAAA;IAEA,YAAA;IACA,6BAAA;IACA,gBAAA;IAEA,mCAAA;YAAA,2BAAA;EDoCA;EClCD;IACC,aAAA;EDoCA;ECjCD;IACC,2BAAA;EDmCA;ECjCD;IACC,8BAAA;EDmCA;ECjCD;IACC,uBAAA;EDmCA;AACF;AG1HA;;;;CAAA;AAKA;EAGC,0BAAA;EAA4B,UAAA;EAE5B,kBAAA;AH0HD;AElHC;EACC,sCHCY;ACmHd;AEjHC;EACC,sCHFU;ACqHZ;AG9HC;EACC,sCJOY;EILZ,aAAA;EACA,mBAAA;AH+HF;AG7HC;EACC,sCJEU;EIAV,aAAA;EACA,mBAAA;AH8HF;;AG1HA;EACC,mBAAA;EAAqB,gBAAA;EAErB,yBJ7BI;EI6BmB,cJ1BnB;EI4BJ,aAAA;EACA,mBAAA;EACA,eAAA;EAEA,4BAAA;EAEA,gBJtBK;EIuBL,sDJxBQ;ACmJT;;AGxHA;EACC,eAAA;EAAiB,UAAA;EAEjB,YAAA;EAAc,gCAAA;EAEd,yBJ9CI;EI+CJ,gBJhCK;EIkCL,kBAAA;EAEA,eAAA;EAEA,0DAAA;AHwHD;AGtHC;EACC,kCAAA;EACA,sDJ3CO;EI6CP,YAAA;AHuHF;AGpHC;EACC,WAAA;EACA,cAAA;EACA,oBAAA;AHsHF;;AGlHA;EACC,SAAA;EAAW,UAAA;EAEX,WAAA;EAAa,YAAA;EAEb,MAAA;EAAQ,SAAA;EAAW,OAAA;EAAS,QAAA;EAE5B,kBAAA;EAEA,oBAAA;KAAA,iBAAA;EACA,0BAAA;KAAA,uBAAA;EAEA,gBJlEK;ACuLN;;AGlHA;;;;CAAA;AAKA;EACC,qBAAA;EAAuB,UAAA;EAEvB,WAAA;EACA,gBAAA;EAAkB,YAAA;EAElB,aAAA;EAEA,gDJhGQ;EIiGR,kCAAA;UAAA,0BAAA;EAEA,gBJrFK;EIuFL,2DAAA;AHkHD;;AG/GA;EACC;IACC,gBAAA;EHkHA;AACF;AG/GA;EACC,cAAA;EAEA,eAAA;EAAiB,WAAA;EACjB,mBAAA;EAAqB,YAAA;EAErB,gBJtGK;ACuNN;;AG9GA;;;;CAAA;AAKA;ED5HC,mBAAA;EAAqB,eAAA;EAErB,0BAAA;EAEA,yBHLI;EGKmB,cHFnB;EGIJ,gBHQK;EGPF,4BAAA;EAEH,sDHIQ;ACwOT;AE1OC;EACC,aAAA;EAAe,qBAAA;AF6OjB;AExOC;EACC,sCHCY;ACyOd;AEvOC;EACC,sCHFU;AC2OZ;;AG7HA;;;;CAAA;AAKA;EDvIC,mBAAA;EAAqB,eAAA;EAErB,0BAAA;EAEA,yBHLI;EGKmB,cHFnB;EGIJ,gBHQK;EGPF,4BAAA;EAEH,sDHIQ;ACkQT;AEpQC;EACC,aAAA;EAAe,qBAAA;AFuQjB;AElQC;EACC,sCHCY;ACmQd;AEjQC;EACC,sCHFU;ACqQZ;;AG7IA;;;;CAAA;AAKA;EDjJC,mBAAA;EAAqB,eAAA;EAErB,0BAAA;EAEA,yBHLI;EGKmB,cHFnB;EGIJ,gBHQK;EGPF,4BAAA;EAEH,sDHIQ;AC4RT;AE9RC;EACC,aAAA;EAAe,qBAAA;AFiSjB;AE5RC;EACC,sCHCY;AC6Rd;AE3RC;EACC,sCHFU;AC+RZ;;AG9JA;EDnHC,aAAA;EAEA,mBAAA;EAEA,eAAA;EAEA,qBC8GkB;AHoKnB;;AGlKA;EACC,eAAA;EAAiB,eAAA;EAEjB,cAAA;EAEA,yBJlJa;EIoJb,gBJjJK;EImJL,sCJ7IW;AC+SZ;;AG/JA;;;;CAAA;AAKA;EDzKC,mBAAA;EAAqB,eAAA;EAErB,0BAAA;EAEA,yBHLI;EGKmB,cHFnB;EGIJ,gBHQK;EGPF,4BAAA;EAEH,sDHIQ;ACsUT;AExUC;EACC,aAAA;EAAe,qBAAA;AF2UjB;AEtUC;EACC,sCHCY;ACuUd;AErUC;EACC,sCHFU;ACyUZ;;AI9VA;EFCC,mBAAA;EAAqB,eAAA;EAErB,0BAAA;EAEA,yBHLI;EGKmB,cHFnB;EGIJ,gBHQK;EGPF,4BAAA;EAEH,sDHIQ;EGqBR,aAAA;EAEA,mBAAA;EAEA,eAAA;EAEA,6BEvCkB;EAElB,cAAA;EAEA,SAAA;EAEA,0BAAA;AJwWD;AEpWC;EACC,aAAA;EAAe,qBAAA;AFuWjB;AI1WC;EACC,cAAA;EAEA,qBAAA;EAEA,sCLMU;ACoWZ;AIxWE;EACC,cLXM;ACqXT;;AF5WA;;;;CAAA;AAKA;EACC,SAAA;EAAW,UAAA;EAEX,iBAAA;EAAmB,gBAAA;EAEnB,kBAAA;EAEA,yBC5BI;ED6BJ,yCAAA;EAEA,2BAAA;EACA,sBAAA;EACA,4BAAA;EACA,4BAAA;EAEA,uBAAA;EAEA,cAAA;AE2WD;;AFxWA;EACC,cAAA;EAAgB,aAAA;EAEhB,iBAAA;EAEA,8BAAA;EIlBA,aAAA;EAEA,sBAAA;EAEA,8BJgBkB;EAElB,kBAAA;AE0WD;AFxWC;EACC,cClDG;AC4ZL;;AFtWA;;;;CAAA;AAKA;EACC,eAAA;EAEA,WAAA;EAEA,cAAA;EACA,sBAAA;EAEA,eAAA;EACA,gBAAA;EACA,sCCnDW;EDqDX,qBAAA;EACA,kBAAA;EAEA,YAAA;EACA,gBC/DK;EDiEL,uDAAA;AEmWD;AFjWC;EACC,0BAAA;EACA,cCjFG;ACobL;AFhWC;EACC,sCAAA;EACA,eAAA;EAEA,qBAAA;EAEA,eAAA;EAEA,qBAAA;EAEA,yBCvFM;EDyFN,YAAA;EACA,gBCrFI;ACkbN;AF1WC;EACC,sCAAA;EACA,eAAA;EAEA,qBAAA;EAEA,eAAA;EAEA,qBAAA;EAEA,yBCvFM;EDyFN,YAAA;EACA,gBCrFI;ACkbN;;AF1VA;EACC,yBChGO;AC6bR;;AF3VA;EACC,yBCrGK;ACmcN;;AF5VA;EACC,yBCrGO;ACocR;;AF5VA;;;;CAAA;AAKA;EACC,WAAA;EACA,uBAAA;AE+VD;;AF5VA;;;;CAAA;AAKA;EACC,yBAAA;EAEA,WAAA;EAAa,YAAA;EAEb,sBAAA;EAEA,eAAA;AE6VD;;AF1VA;;;;CAAA;AAKA;EACC,SAAA;EAAW,eAAA;EAEX,eAAA;EAAiB,WAAA;EACjB,cAAA;EAAgB,YAAA;EAEhB,0BAAA;KAAA,uBAAA;EAEA,yBCvJI;EDwJJ,kCAAA;UAAA,0BAAA;EAEA,kBAAA;EACA,sDC7IQ;ED+IR,sDAAA;AE2VD;AFzVC;EACC,6BAAA;AE2VF;AFxVC;EACC,SAAA;EAAW,UAAA;EACX,aAAA;EAAe,cAAA;EAEf,cAAA;EAEA,0BAAA;KAAA,uBAAA;AE0VF","file":"main.css"}
|
||||
|
|
@ -63,12 +63,17 @@ body {
|
|||
.btn {
|
||||
padding: 0.5rem;
|
||||
|
||||
width: 100%;
|
||||
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
font-family: $font-body;
|
||||
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
|
||||
border: none;
|
||||
border-radius: $rad;
|
||||
|
|
@ -95,47 +100,32 @@ body {
|
|||
border: none;
|
||||
border-radius: $rad;
|
||||
}
|
||||
|
||||
a {
|
||||
margin-bottom: 0;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.btn-good {
|
||||
background-color: $green;
|
||||
}
|
||||
.btn-bad {
|
||||
background-color: $red;
|
||||
}
|
||||
.btn-neutral {
|
||||
background-color: $black;
|
||||
}
|
||||
|
||||
/*
|
||||
|-------------------------------------------------------------
|
||||
| FORM
|
||||
| FORM SIZING
|
||||
|-------------------------------------------------------------
|
||||
*/
|
||||
form {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
* {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
/*
|
||||
|-------------------------------------------------------------
|
||||
| IMAGES
|
||||
| SVG
|
||||
|-------------------------------------------------------------
|
||||
*/
|
||||
.image-container {
|
||||
width: 100%;
|
||||
max-height: 69vh; height: auto;
|
||||
|
||||
@include flexDown(space-between);
|
||||
|
||||
background-color: $bg-alt;
|
||||
backdrop-filter: blur(8px);
|
||||
|
||||
border-radius: $rad;
|
||||
|
||||
transition: max-height 0.15s cubic-bezier(.19,1,.22,1);
|
||||
}
|
||||
|
||||
.svg {
|
||||
margin: 0 0.2rem 0.1rem 0;
|
||||
|
||||
|
|
@ -179,4 +169,4 @@ form {
|
|||
|
||||
object-position: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -4,14 +4,16 @@
|
|||
|-------------------------------------------------------------
|
||||
*/
|
||||
.info-text {
|
||||
margin: 1rem 0; padding: 0;
|
||||
@include defaultFont();
|
||||
|
||||
margin: 1rem 0 1rem 0.5rem; padding: 0;
|
||||
|
||||
text-align: center;
|
||||
|
||||
h1 {
|
||||
font-family: $font-header;
|
||||
|
||||
margin-top: 0.5rem;
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
p {
|
||||
|
|
@ -23,7 +25,7 @@
|
|||
}
|
||||
|
||||
.gallery-root {
|
||||
padding: 0.25rem;
|
||||
margin-bottom: 1rem; padding: 0.25rem;
|
||||
|
||||
background-color: $bg; color: $fg;
|
||||
|
||||
|
|
@ -93,7 +95,7 @@
|
|||
|
||||
display: flex;
|
||||
|
||||
background-color: $bg;
|
||||
background-color: $bg-alt;
|
||||
backdrop-filter: blur(8px);
|
||||
|
||||
border-radius: $rad;
|
||||
|
|
@ -103,10 +105,10 @@
|
|||
|
||||
@media (max-width: 600px) {
|
||||
.image-container {
|
||||
max-height: 42vh !important;
|
||||
max-height: 42vh;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.image {
|
||||
margin: 0 auto;
|
||||
|
||||
|
|
@ -114,4 +116,59 @@
|
|||
max-height: inherit; height: auto;
|
||||
|
||||
border-radius: $rad;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
|-------------------------------------------------------------
|
||||
| DESCRIPTION
|
||||
|-------------------------------------------------------------
|
||||
*/
|
||||
.image-description {
|
||||
@include defaultDecoration($green);
|
||||
@include defaultFont();
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
|-------------------------------------------------------------
|
||||
| DETAILS
|
||||
|-------------------------------------------------------------
|
||||
*/
|
||||
.image-detail {
|
||||
@include defaultDecoration($green);
|
||||
@include defaultFont();
|
||||
}
|
||||
|
||||
/*
|
||||
|-------------------------------------------------------------
|
||||
| TAGS
|
||||
|-------------------------------------------------------------
|
||||
*/
|
||||
.tags-root {
|
||||
@include defaultDecoration($green);
|
||||
@include defaultFont();
|
||||
}
|
||||
.tags {
|
||||
@include flexLeft(auto);
|
||||
}
|
||||
.tag {
|
||||
margin: 0.25rem; padding: 0.5rem;
|
||||
|
||||
display: block;
|
||||
|
||||
background-color: $page-accent;
|
||||
|
||||
border-radius: $rad;
|
||||
|
||||
font-family: $font-body;
|
||||
}
|
||||
|
||||
/*
|
||||
|-------------------------------------------------------------
|
||||
| DANGER ZONE
|
||||
|-------------------------------------------------------------
|
||||
*/
|
||||
.danger-zone {
|
||||
@include defaultDecoration($red);
|
||||
@include defaultFont();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ footer {
|
|||
@include defaultDecoration($page-accent);
|
||||
@include flexLeft(space-around);
|
||||
|
||||
margin: 0 auto !important;
|
||||
margin: 0 auto;
|
||||
|
||||
bottom: 0;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,15 +1,28 @@
|
|||
@mixin defaultDecoration($border) {
|
||||
width: calc(100% - 2.4rem);
|
||||
|
||||
padding: 0.5rem;
|
||||
margin-bottom: 1rem; padding: 0.5rem;
|
||||
|
||||
width: calc(100% - 1.4rem);
|
||||
|
||||
background-color: $bg; color: $fg;
|
||||
|
||||
border-radius: $rad;
|
||||
|
||||
border: 0.2rem solid $border;
|
||||
|
||||
box-shadow: $shadow;
|
||||
|
||||
>* {
|
||||
margin-top: 0; margin-bottom: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin defaultFont() {
|
||||
h1, h2, h3, h4, h5 {
|
||||
font-family: $font-header;
|
||||
}
|
||||
|
||||
p, a, button, input {
|
||||
font-family: $font-body;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin flexDown($justify) {
|
||||
|
|
|
|||
|
|
@ -20,6 +20,9 @@ nav {
|
|||
margin: 0.5rem 0.2rem; padding: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
.btn {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-name {
|
||||
|
|
@ -36,6 +39,8 @@ nav {
|
|||
.nav-links {
|
||||
@include flexLeft(space-around);
|
||||
|
||||
margin: 0;
|
||||
|
||||
font-family: $font-body;
|
||||
|
||||
width: auto;
|
||||
|
|
@ -59,7 +64,7 @@ nav {
|
|||
position: fixed;
|
||||
top: auto; bottom: 0; left: 0; right: 0;
|
||||
|
||||
background-color: $bg;
|
||||
background-color: $bg-alt;
|
||||
backdrop-filter: blur(8px);
|
||||
|
||||
border: none;
|
||||
|
|
@ -76,7 +81,7 @@ nav {
|
|||
text-align: left !important;
|
||||
}
|
||||
footer {
|
||||
margin-bottom: calc(5rem + 3px) !important;
|
||||
margin-bottom: 4rem !important;
|
||||
}
|
||||
#back-to-top {
|
||||
bottom: 5rem !important;
|
||||
|
|
|
|||
34
image.php
34
image.php
|
|
@ -192,8 +192,10 @@
|
|||
// Image Upload date
|
||||
echo "<p>Last updated: +0 ".$image['upload']."</p>";
|
||||
|
||||
echo "<br>";
|
||||
|
||||
// Image download
|
||||
echo "<a class='btn alert-high space-top' href='images/".$image['imagename']."' download='".$image['imagename']."'><img class='svg' src='assets/icons/download.svg'>Download image</a>";
|
||||
echo "<a class='btn btn-good' href='images/".$image['imagename']."' download='".$image['imagename']."'><img class='svg' src='assets/icons/download.svg'>Download image</a>";
|
||||
|
||||
// Copy image
|
||||
?>
|
||||
|
|
@ -205,19 +207,19 @@
|
|||
}
|
||||
</script>
|
||||
<?php
|
||||
echo "<button class='btn alert-high space-top-small' onclick='copyLink()'><img class='svg' src='assets/icons/clipboard-text.svg'>Copy image link</button>";
|
||||
echo "<button class='btn btn-good' onclick='copyLink()'><img class='svg' src='assets/icons/clipboard-text.svg'>Copy image link</button>";
|
||||
?>
|
||||
</div>
|
||||
|
||||
<div class="tags-root default-window">
|
||||
<h2>Tags</h2>
|
||||
<div class="tags flex-left">
|
||||
<div class="tags">
|
||||
<?php
|
||||
// Get image tags
|
||||
if (isset($image['tags']) && !empty($image['tags'])) {
|
||||
$image_tags_array = explode(" ", $image['tags']);
|
||||
foreach ($image_tags_array as $tag) {
|
||||
echo "<p class='tag alert-high'><img class='svg' src='assets/icons/tag.svg'>".$tag."</p>";
|
||||
echo "<p class='tag btn-good'><img class='svg' src='assets/icons/tag.svg'>".$tag."</p>";
|
||||
}
|
||||
} else {
|
||||
echo "<p>No tags present</p>";
|
||||
|
|
@ -249,13 +251,13 @@
|
|||
| I cannot describe the anxiety this gives me. pls help
|
||||
|-------------------------------------------------------------
|
||||
-->
|
||||
<button id='deleteButton' class='btn alert-low'><img class='svg' src='assets/icons/trash.svg'>Delete image</button>
|
||||
<button id='deleteButton' class='btn btn-bad'><img class='svg' src='assets/icons/trash.svg'>Delete image</button>
|
||||
<script>
|
||||
$('#deleteButton').click(function() {
|
||||
var header = "Are you sure?";
|
||||
var description = "Deleting this image is pernament, there is no going back after this!!!!!";
|
||||
var actionBox = "<form id='deleteConfirm' method='POST'>\
|
||||
<button id='deleteSubmit' class='btn alert-low' type='submit'><img class='svg' src='assets/icons/trash.svg'>Delete image</button>\
|
||||
<button id='deleteSubmit' class='btn btn-bad' type='submit'><img class='svg' src='assets/icons/trash.svg'>Delete image</button>\
|
||||
</form>";
|
||||
flyoutShow(header, description, actionBox);
|
||||
|
||||
|
|
@ -279,14 +281,14 @@
|
|||
| TO FIGURE OUT. i hate js.
|
||||
|-------------------------------------------------------------
|
||||
-->
|
||||
<button id='descriptionButton' class='btn alert-low space-top-small'><img class='svg' src='assets/icons/edit.svg'>Edit description</button>
|
||||
<button id='descriptionButton' class='btn btn-bad'><img class='svg' src='assets/icons/edit.svg'>Edit description</button>
|
||||
<script>
|
||||
$('#descriptionButton').click(function() {
|
||||
var header = "Enter new Description/Alt";
|
||||
var description = "Whatcha gonna put in there 👀";
|
||||
var actionBox = "<form id='descriptionConfirm' action='app/image/edit_description.php' method='POST'>\
|
||||
<input id='descriptionInput' class='btn alert-default space-bottom' type='text' placeholder='Description/Alt for image'>\
|
||||
<button id='descriptionSubmit' class='btn alert-low' type='submit'><img class='svg' src='assets/icons/edit.svg'>Update information</button>\
|
||||
<input id='descriptionInput' class='btn btn-neutral space-bottom' type='text' placeholder='Description/Alt for image'>\
|
||||
<button id='descriptionSubmit' class='btn btn-bad' type='submit'><img class='svg' src='assets/icons/edit.svg'>Update information</button>\
|
||||
</form>";
|
||||
flyoutShow(header, description, actionBox);
|
||||
|
||||
|
|
@ -313,14 +315,14 @@
|
|||
| anyone cry. I am so sorry.
|
||||
|-------------------------------------------------------------
|
||||
-->
|
||||
<button id='tagsButton' class='btn alert-low space-top-small'><img class='svg' src='assets/icons/tag.svg'>Add image tags</button>
|
||||
<button id='tagsButton' class='btn btn-bad'><img class='svg' src='assets/icons/tag.svg'>Add image tags</button>
|
||||
<script>
|
||||
$('#tagsButton').click(function() {
|
||||
var header = "Tags";
|
||||
var description = "Add image tags here! This is still being tested so your tags may be removed later on. Tags ONLY accept, letters, numbers and underscores. Hyphens will be stitched to underscores and spaces will seperate the different tags from eachother";
|
||||
var actionBox = "<form id='tagsConfirm' action='app/image/edit_tags.php' method='POST'>\
|
||||
<input id='tagsInput' class='btn alert-default space-bottom' type='text' placeholder='Tags are seperated by spaces'>\
|
||||
<button id='tagsSubmit' class='btn alert-low' type='submit'><img class='svg' src='assets/icons/edit.svg'>Edit tags</button>\
|
||||
<input id='tagsInput' class='btn btn-neutral space-bottom' type='text' placeholder='Tags are seperated by spaces'>\
|
||||
<button id='tagsSubmit' class='btn btn-bad' type='submit'><img class='svg' src='assets/icons/edit.svg'>Edit tags</button>\
|
||||
</form>";
|
||||
flyoutShow(header, description, actionBox);
|
||||
|
||||
|
|
@ -347,14 +349,14 @@
|
|||
<?php
|
||||
if (is_admin($_SESSION['id'])) {
|
||||
?>
|
||||
<button id='authorButton' class='btn alert-low space-top-small'><img class='svg' src='assets/icons/edit.svg'>Edit author</button>
|
||||
<button id='authorButton' class='btn btn-bad'><img class='svg' src='assets/icons/edit.svg'>Edit author</button>
|
||||
<script>
|
||||
$('#authorButton').click(function() {
|
||||
var header = "Who owns the image?????";
|
||||
var description = "Enter ID of image owner";
|
||||
var actionBox = "<form id='authorConfirm' action='app/image/edit_author.php' method='POST'>\
|
||||
<input id='authorInput' class='btn alert-default space-bottom' type='text' placeholder='le author'>\
|
||||
<button id='authorSubmit' class='btn alert-low' type='submit'><img class='svg' src='assets/icons/edit.svg'>Edit author</button>\
|
||||
<input id='authorInput' class='btn btn-neutral space-bottom' type='text' placeholder='le author'>\
|
||||
<button id='authorSubmit' class='btn btn-bad' type='submit'><img class='svg' src='assets/icons/edit.svg'>Edit author</button>\
|
||||
</form>";
|
||||
flyoutShow(header, description, actionBox);
|
||||
|
||||
|
|
@ -385,4 +387,4 @@
|
|||
|
||||
<?php include "ui/footer.php"; ?>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
Loading…
Reference in a new issue