diff --git a/style/main.css b/style/main.css index 8d3f158..f578d06 100644 --- a/style/main.css +++ b/style/main.css @@ -216,10 +216,15 @@ main{ grid-row: 2; color: var(--back-color); justify-self: end; + + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; #planContainer{ width: 100%; - height: 100%; + height: max-content; margin-left: 13.12px; margin-top: 0; } @@ -369,11 +374,112 @@ main{ padding-left: 16.1px; padding-right: 33px; - .iconBtnStyle{ - width: 33px; - height: 33px; - } - } + summary { + padding-left: 33px; + padding-top: 7.77px; + height:50px; + position: relative; + z-index: 0; + list-style-type: none; + + + .title{ + position: relative; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + + width: 77%; + box-sizing: border-box; + height: 16.1px; + padding-top: 3.33px; + padding-left: 33px; + margin-bottom: 13.12px; + + font-family: 'velvelyne'; + font-weight: bold; + font-size: 16.1px; + + p{ + margin: 0; + } + + h4{ + margin: 0; + font-family: 'velvelyne'; + font-weight: bold; + font-size: 16.1px; + } + } + + .resume{ + font-family: 'velvelyne'; + font-weight: bold; + font-size: 13.12px; + text-transform: none; + padding-left: 33px; + width: 90%; + height: 33px; + + border-radius: 16.1px; + border-style: solid; + border-width: thin; + border-color: var(--main-color); + box-sizing: border-box; + } + + } + + .description{ + margin-left: 44px; + margin-bottom: 33px; + height: auto; + width: 95%; + overflow-y: scroll; + background-color: var(--back-color); + border-radius: 16.1px; + border-style: solid; + border-width: thin; + border-color: var(--main-color); + + margin-top: 44px; + padding: 13.12px; + padding-right: 33px; + + box-sizing: border-box; + + + font-size: 13.12px; + font-family: 'velvelyne'; + font-weight: bold; + text-transform: none; + } + } + + details:hover{ + + } + + details[open]{ + height: auto; + border-color: var(--back-color); + color: var(--back-color); + background-color: var(--main-color); + + summary .resume{ + border-color: var(--back-color); + } + + ::marker{ + color: var(--main-color); + } + + .description{ + color: var(--main-color); + } + } + } } } }