DressOrc/Portfolio
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
Portfolio/Pages/Mainpage.css

270 lines
4.2 KiB
CSS
Raw Normal View History

fixed grid layout, started texturing title, started using reset sheet added gradient to background of text, started working on adding a noise texture, reworked grid again (this time its final, it is fully working now!!), got reset sheet working. also added reference image of website plan
2020-12-23 13:28:04 +00:00
@import url("reset.css");
Changed layout grid, added font changed alot, added new font, tidied up columns, using h1 for the title now instead of a div
2020-12-17 16:56:25 +00:00
@font-face{
font-family:"roboto";
font-weight: 100;
moved files about
2020-12-31 15:49:54 +00:00
src: url("../Fonts/Roboto/RobotoMono-VariableFont_wght.ttf")
Changed layout grid, added font changed alot, added new font, tidied up columns, using h1 for the title now instead of a div
2020-12-17 16:56:25 +00:00
}
Initial upload Contains basic css and html of main page, I dont entirely know what im doing yet so alot of this might be wrong
2020-12-16 22:00:11 +00:00
body{
cleaned things up, moving away from grid setup moved things around, removed redundant classes/ids nothing uses grids anymore, mainly margins although this may cause issues later, i dont have enough experience to tell yet
2020-12-31 13:46:26 +00:00
color: #ffd256;
font-family: "roboto";
swapped out background, no longer glowy
2020-12-30 16:58:10 +00:00
background-color: #221A0F;
moved files about
2020-12-31 15:49:54 +00:00
background-image: url("../Images/BackGroundTestNoGlow.png");
Added background and image filter, also extended page height a bit to leave aethsetic space
2020-12-30 13:55:25 +00:00
background-position: bottom;
fixed image, split grid in two to fit image without adding it to grid, I needed two grids and the image between the two
2020-12-29 21:25:29 +00:00
Initial upload Contains basic css and html of main page, I dont entirely know what im doing yet so alot of this might be wrong
2020-12-16 22:00:11 +00:00
}
Changed layout grid, added font changed alot, added new font, tidied up columns, using h1 for the title now instead of a div
2020-12-17 16:56:25 +00:00
added more to layout, and a test image added some css classes, one for the main image and a spare one to add orange to anything.
2020-12-27 13:21:53 +00:00
h1, h2, h3{
basic formatting added orange backgrounds to textboxes and started adding more to the sites layout.
2020-12-17 22:00:58 +00:00
background-color: #ffa500;
fixed grid layout, started texturing title, started using reset sheet added gradient to background of text, started working on adding a noise texture, reworked grid again (this time its final, it is fully working now!!), got reset sheet working. also added reference image of website plan
2020-12-23 13:28:04 +00:00
background: radial-gradient(#E39823 40%, #8D5001);
cleaned things up, moving away from grid setup moved things around, removed redundant classes/ids nothing uses grids anymore, mainly margins although this may cause issues later, i dont have enough experience to tell yet
2020-12-31 13:46:26 +00:00
border-radius: 5px;
font-size: clamp(12px, 1vw, 50px);
padding: 1.3vh;
added more to layout, and a test image added some css classes, one for the main image and a spare one to add orange to anything.
2020-12-27 13:21:53 +00:00
}
cleaned things up, moving away from grid setup moved things around, removed redundant classes/ids nothing uses grids anymore, mainly margins although this may cause issues later, i dont have enough experience to tell yet
2020-12-31 13:46:26 +00:00
h1{
font tweak for mobile im sorry this keeps happening, its the only way i can test it on a physical phone rather than an emulator
2020-12-31 14:34:10 +00:00
font-size: clamp(20px, 4vw, 170px);
cleaned things up, moving away from grid setup moved things around, removed redundant classes/ids nothing uses grids anymore, mainly margins although this may cause issues later, i dont have enough experience to tell yet
2020-12-31 13:46:26 +00:00
added more to layout, and a test image added some css classes, one for the main image and a spare one to add orange to anything.
2020-12-27 13:21:53 +00:00
padding-left: 6;
cleaned things up, moving away from grid setup moved things around, removed redundant classes/ids nothing uses grids anymore, mainly margins although this may cause issues later, i dont have enough experience to tell yet
2020-12-31 13:46:26 +00:00
margin-left: 2vw;
margin-right: 70vw;
margin-top: 10vh;
margin-bottom: 70vh;
basic formatting added orange backgrounds to textboxes and started adding more to the sites layout.
2020-12-17 22:00:58 +00:00
cleaned things up, moving away from grid setup moved things around, removed redundant classes/ids nothing uses grids anymore, mainly margins although this may cause issues later, i dont have enough experience to tell yet
2020-12-31 13:46:26 +00:00
height: 20vh;
text-align: left;
added more to layout, and a test image added some css classes, one for the main image and a spare one to add orange to anything.
2020-12-27 13:21:53 +00:00
added second paragraph and links to other pages links are just text atm, dont link anywhere also changed padding to use vh instead of px
2020-12-27 21:41:10 +00:00
}
cleaned things up, moving away from grid setup moved things around, removed redundant classes/ids nothing uses grids anymore, mainly margins although this may cause issues later, i dont have enough experience to tell yet
2020-12-31 13:46:26 +00:00
h2, h3{
margin-top: 10vh;
margin-bottom: 10vh;
margin-left: auto;
margin-right: auto;
min-width: 720px;
max-width: 86vw;
added more to layout, and a test image added some css classes, one for the main image and a spare one to add orange to anything.
2020-12-27 13:21:53 +00:00
}
cleaned things up, moving away from grid setup moved things around, removed redundant classes/ids nothing uses grids anymore, mainly margins although this may cause issues later, i dont have enough experience to tell yet
2020-12-31 13:46:26 +00:00
added second paragraph and links to other pages links are just text atm, dont link anywhere also changed padding to use vh instead of px
2020-12-27 21:41:10 +00:00
.orangeBack{ /*for anything that isnt a <h> tag*/
background-color: #ffa500;
background: radial-gradient(#E39823 40%, #8D5001);
border-radius: 5px;
padding: 5px;
}
.orangeBorder{
added boarder to page links, removed some rows shrank row count to make page right size
2020-12-28 02:32:51 +00:00
border: 5px outset #E39823;
border-radius: 5px;
added second paragraph and links to other pages links are just text atm, dont link anywhere also changed padding to use vh instead of px
2020-12-27 21:41:10 +00:00
}
.textBox{
text-align: center;
padding: 2.5vh;
cleaned things up, moving away from grid setup moved things around, removed redundant classes/ids nothing uses grids anymore, mainly margins although this may cause issues later, i dont have enough experience to tell yet
2020-12-31 13:46:26 +00:00
font-size: 1.3vw;
added second paragraph and links to other pages links are just text atm, dont link anywhere also changed padding to use vh instead of px
2020-12-27 21:41:10 +00:00
}
changing font size for mobile and starting work on project gallery
2020-12-31 14:57:50 +00:00
#galleryHeader{
margin-left: 35vw;
margin-right: 35vw;
moved files about
2020-12-31 15:49:54 +00:00
border-radius: 5px;
font-size: 1.4vw;
}
#programGallery{
display: grid;
finished slideshow structure added second slideshow for unrelated projects, added social bar
2021-01-01 14:08:44 +00:00
grid-template-columns: repeat(12, 1fr);
moved files about
2020-12-31 15:49:54 +00:00
grid-template-rows: repeat(10, 1fr);
finished slideshow structure added second slideshow for unrelated projects, added social bar
2021-01-01 14:08:44 +00:00
moved files about
2020-12-31 15:49:54 +00:00
height: 70vh;
added gallery structure yet to add javascript, gallery currently doesnt work very well on monitors of odd sizes
2020-12-31 16:38:36 +00:00
width: 70vw;
moved files about
2020-12-31 15:49:54 +00:00
finished slideshow structure added second slideshow for unrelated projects, added social bar
2021-01-01 14:08:44 +00:00
min-width: 800px;
min-height: 500px;
added gallery structure yet to add javascript, gallery currently doesnt work very well on monitors of odd sizes
2020-12-31 16:38:36 +00:00
margin-left: auto;
margin-right: auto;
margin-top: 10vh;
finished slideshow structure added second slideshow for unrelated projects, added social bar
2021-01-01 14:08:44 +00:00
}
added gallery structure yet to add javascript, gallery currently doesnt work very well on monitors of odd sizes
2020-12-31 16:38:36 +00:00
finished slideshow structure added second slideshow for unrelated projects, added social bar
2021-01-01 14:08:44 +00:00
#personalGallery{
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(10, 1fr);
height: 70vh;
width: 70vw;
min-width: 800px;
min-height: 500px;
margin-left: auto;
margin-right: auto;
margin-top: 10vh;
added gallery structure yet to add javascript, gallery currently doesnt work very well on monitors of odd sizes
2020-12-31 16:38:36 +00:00
}
finished slideshow structure added second slideshow for unrelated projects, added social bar
2021-01-01 14:08:44 +00:00
.GalleryImage{ /*all images should be 700x700*/
grid-column: 2/8;
added gallery structure yet to add javascript, gallery currently doesnt work very well on monitors of odd sizes
2020-12-31 16:38:36 +00:00
grid-row: 2/11;
border-bottom-left-radius: 5px;
finished slideshow structure added second slideshow for unrelated projects, added social bar
2021-01-01 14:08:44 +00:00
object-fit: cover;
added gallery structure yet to add javascript, gallery currently doesnt work very well on monitors of odd sizes
2020-12-31 16:38:36 +00:00
width: 100%;
height: 100%;
}
finished slideshow structure added second slideshow for unrelated projects, added social bar
2021-01-01 14:08:44 +00:00
.GalleryTitle{
grid-column: 2/12;
added gallery structure yet to add javascript, gallery currently doesnt work very well on monitors of odd sizes
2020-12-31 16:38:36 +00:00
grid-row: 1;
padding: 5px;
finished slideshow structure added second slideshow for unrelated projects, added social bar
2021-01-01 14:08:44 +00:00
font-size: 5vh;
border-radius: 0;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
added gallery structure yet to add javascript, gallery currently doesnt work very well on monitors of odd sizes
2020-12-31 16:38:36 +00:00
}
finished slideshow structure added second slideshow for unrelated projects, added social bar
2021-01-01 14:08:44 +00:00
.GalleryCaption{
grid-column: 8/12;
added gallery structure yet to add javascript, gallery currently doesnt work very well on monitors of odd sizes
2020-12-31 16:38:36 +00:00
grid-row: 2/11;
finished slideshow structure added second slideshow for unrelated projects, added social bar
2021-01-01 14:08:44 +00:00
border-radius: 0;
border-bottom-right-radius: 5px;
changing font size for mobile and starting work on project gallery
2020-12-31 14:57:50 +00:00
}
finished slideshow structure added second slideshow for unrelated projects, added social bar
2021-01-01 14:08:44 +00:00
.GalleryLeftArrow{
grid-column: 1;
grid-row: 5/6;
added gallery structure yet to add javascript, gallery currently doesnt work very well on monitors of odd sizes
2020-12-31 16:38:36 +00:00
font-size: 7vw;
}
finished slideshow structure added second slideshow for unrelated projects, added social bar
2021-01-01 14:08:44 +00:00
.GalleryRightArrow{
grid-column: 12;
grid-row: 5/6;
added gallery structure yet to add javascript, gallery currently doesnt work very well on monitors of odd sizes
2020-12-31 16:38:36 +00:00
font-size: 7vw;
}
finished slideshow structure added second slideshow for unrelated projects, added social bar
2021-01-01 14:08:44 +00:00
#socialBar{
position: fixed;
display: flex;
margin-left: 1vh;
margin-bottom: 1vh;
bottom: 0;
left: 0 ;
}
added gallery structure yet to add javascript, gallery currently doesnt work very well on monitors of odd sizes
2020-12-31 16:38:36 +00:00
Added background and image filter, also extended page height a bit to leave aethsetic space
2020-12-30 13:55:25 +00:00
cleaned things up, moving away from grid setup moved things around, removed redundant classes/ids nothing uses grids anymore, mainly margins although this may cause issues later, i dont have enough experience to tell yet
2020-12-31 13:46:26 +00:00
@media (orientation:portrait){
fixed image, split grid in two to fit image without adding it to grid, I needed two grids and the image between the two
2020-12-29 21:25:29 +00:00
cleaned things up, moving away from grid setup moved things around, removed redundant classes/ids nothing uses grids anymore, mainly margins although this may cause issues later, i dont have enough experience to tell yet
2020-12-31 13:46:26 +00:00
h1{
tweaking font size for mobile again (this time tweaking the right paragraph) im an idiot
2020-12-31 14:26:49 +00:00
font-size: 10vw;
fixed image, split grid in two to fit image without adding it to grid, I needed two grids and the image between the two
2020-12-29 21:25:29 +00:00
now works for mobile! added separate css for portrait devices
2020-12-31 14:09:04 +00:00
margin-left: 0vw;
margin-right: 0vw;
cleaned things up, moving away from grid setup moved things around, removed redundant classes/ids nothing uses grids anymore, mainly margins although this may cause issues later, i dont have enough experience to tell yet
2020-12-31 13:46:26 +00:00
margin-top: 5vh;
margin-bottom: 85vh;
added more to layout, and a test image added some css classes, one for the main image and a spare one to add orange to anything.
2020-12-27 13:21:53 +00:00
now works for mobile! added separate css for portrait devices
2020-12-31 14:09:04 +00:00
padding-top: 0.5vh;
border-radius: 0;
cleaned things up, moving away from grid setup moved things around, removed redundant classes/ids nothing uses grids anymore, mainly margins although this may cause issues later, i dont have enough experience to tell yet
2020-12-31 13:46:26 +00:00
height: 10vh;
added more to layout, and a test image added some css classes, one for the main image and a spare one to add orange to anything.
2020-12-27 13:21:53 +00:00
cleaned things up, moving away from grid setup moved things around, removed redundant classes/ids nothing uses grids anymore, mainly margins although this may cause issues later, i dont have enough experience to tell yet
2020-12-31 13:46:26 +00:00
}
added more to layout, and a test image added some css classes, one for the main image and a spare one to add orange to anything.
2020-12-27 13:21:53 +00:00
cleaned things up, moving away from grid setup moved things around, removed redundant classes/ids nothing uses grids anymore, mainly margins although this may cause issues later, i dont have enough experience to tell yet
2020-12-31 13:46:26 +00:00
h2, h3{
margin-top: 10vh;
margin-bottom: 10vh;
now works for mobile! added separate css for portrait devices
2020-12-31 14:09:04 +00:00
min-width: inherit;
max-width: inherit;
border-radius: 0;
moved files about
2020-12-31 15:49:54 +00:00
font-size: 2.3vw;
changing font size for mobile and starting work on project gallery
2020-12-31 14:57:50 +00:00
}
#galleryHeader{
margin-left: 0;
margin-right: 0;
border-radius: 0;
moved files about
2020-12-31 15:49:54 +00:00
font-size: 3vw;
cleaned things up, moving away from grid setup moved things around, removed redundant classes/ids nothing uses grids anymore, mainly margins although this may cause issues later, i dont have enough experience to tell yet
2020-12-31 13:46:26 +00:00
}
formatted slideshows for mobile (font may need tweaking))
2021-01-01 14:22:26 +00:00
#programGallery{
height: 70vh;
width: 100%;
margin-left: 0;
margin-right: 0;
}
#personalGallery{
height: 70vh;
width: 100%;
margin-left: 0;
margin-right: 0;
}
.GalleryImage{ /*all images should be 700x700*/
grid-column: 1/13;
grid-row: 2/7;
border-bottom-left-radius: 0;
object-fit: cover;
width: 100%;
height: 100%;
}
.GalleryTitle{
grid-column: 1/13;
grid-row: 1;
padding: 5px;
font-size: 5vh;
border-radius: 0;
}
.GalleryCaption{
grid-column: 1/13;
grid-row: 7/12;
border-radius: 0;
font-size: 3.2vw;
}
.GalleryLeftArrow{
grid-column: 1;
temporarily removing filter
2021-01-01 14:56:54 +00:00
grid-row: 12;
formatted slideshows for mobile (font may need tweaking))
2021-01-01 14:22:26 +00:00
font-size: 7vw;
}
.GalleryRightArrow{
grid-column: 12;
temporarily removing filter
2021-01-01 14:56:54 +00:00
grid-row: 12;
formatted slideshows for mobile (font may need tweaking))
2021-01-01 14:22:26 +00:00
font-size: 7vw;
}
added second paragraph and links to other pages links are just text atm, dont link anywhere also changed padding to use vh instead of px
2020-12-27 21:41:10 +00:00
}
added more to layout, and a test image added some css classes, one for the main image and a spare one to add orange to anything.
2020-12-27 13:21:53 +00:00
Initial upload Contains basic css and html of main page, I dont entirely know what im doing yet so alot of this might be wrong
2020-12-16 22:00:11 +00:00
minor updates to the css adding some colour whilst I work out the layout, also changed the amount of columns to 3 instead of 12, not entirely sure why
2020-12-16 22:08:01 +00:00
cleaned things up, moving away from grid setup moved things around, removed redundant classes/ids nothing uses grids anymore, mainly margins although this may cause issues later, i dont have enough experience to tell yet
2020-12-31 13:46:26 +00:00
Reference in a new issue Copy permalink